WordPress Elementor Schulung: Theme Builder und Design-System

Elementor im Überblick

• Was ist Elementor? Visueller Page-Builder für WordPress und seine Rolle neben dem Block-Editor
• Warum Elementor so verbreitet ist: ein Plugin für Layout, Theme-Teile, Formulare und Pop-ups
• Eigenschaften und Funktionsumfang: kostenlose Version, Elementor Pro und Add-on-Ökosystem
• Wann Elementor passt und wann ein Block-Theme mit Site-Editor die schlankere Wahl ist

Arbeitsumgebung einrichten

• Lokal arbeiten: Vorteile einer Entwicklungsumgebung gegenüber dem Bauen auf dem Live-Server
• WordPress lokal installieren mit Local, DDEV oder wp-env und eine Staging-Kopie planen
• WordPress konfigurieren: Permalinks, Sprache, Startseite, Benutzerrollen und Medieneinstellungen
• Theme wählen und installieren: Hello Elementor, schlanke Themes und Child-Theme für eigene Anpassungen
• Elementor und Elementor Pro installieren, Lizenz aktivieren, Grundeinstellungen und Funktionen
• Weitere Plugins mit Augenmaß: Formulare, Caching, Sicherung, SEO – und wann Add-on-Pakete schaden

Editor und Seitenstruktur

• Der Elementor-Arbeitsbereich: Widget-Panel, Leinwand, Seiteneinstellungen und Vorschau
• Die Struktur einer Elementor-Seite verstehen: Container, Elemente, Widgets und ihre Verschachtelung
• Atomic Editor (V4, seit Elementor 4.0 Standard auf neuen Websites): atomare Elemente Flexbox, Div-Block und Grid
• Flexbox-Container im klassischen Editor (V3): Richtung, Ausrichtung, Abstände (Gap) und Umbruch
• Grid-Container (V3) und atomares Grid (seit 4.2) für Kachel- und Rasterlayouts mit festen Spalten und Zeilen
• Abschnitte, Spalten und innere Abschnitte in Bestandsseiten lesen und nach Containern umbauen
• Klassische Widgets und atomare Elemente auf derselben Seite mischen und Bestände schrittweise umstellen
• Widgets einfügen und einstellen: Reiter Inhalt, Stil und Erweitert
• Vorlagenbibliothek: Seiten- und Blockvorlagen, Kits und ihr Import
• Responsiver Modus: Breakpoints, Werte je Gerät und Elemente je Gerät ausblenden
• Navigator, Verlauf und Revisionen: Struktur überblicken und Änderungen rückgängig machen
• Eigene Vorlagen speichern, exportieren und in anderen Projekten importieren

Design-System und Theme Builder

• Projektübersicht: Seitenstruktur, Inhalte und Zielgruppe vor dem ersten Layout klären
• Projektinhalt anlegen und das Menü mit WordPress-Menüs und dem Nav-Menü-Widget aufbauen
• Globale Farben in den Website-Einstellungen festlegen und konsequent zuweisen
• Globale Schriftarten und Typografie-Stufen definieren, Schriften DSGVO-konform lokal laden
• Theme-Stile für Überschriften, Links, Formularfelder und Schaltflächen einheitlich einstellen
• Klassen und Variablen im Atomic Editor, abgeglichen mit globalen Farben und Schriften der V3-Seiten
• Kopfzeile mit dem Theme Builder: Logo, Menü, Sticky-Verhalten und mobile Navigation
• Fußzeile mit Kontaktdaten, Impressum- und Datenschutzlinks und Anzeigebedingungen

Standard-Widgets im Projekt

• Hintergrundbilder einsetzen: Position, Größe, Überlagerung und Lesbarkeit des Textes
• Responsive Gestaltung prüfen: Schriftgrößen, Abstände und Reihenfolge auf Tablet und Smartphone
• Call-to-Action-Bereich innerhalb einer Seite mit Überschrift, Text und Schaltfläche
• Informationsblock mit benutzerdefiniertem Formteiler (Shape Divider) gestalten
• Mehrspaltige Blöcke mit verschachtelten Containern und gleichmäßigen Abständen
• Elemente duplizieren, verschieben, Stile kopieren und einfügen
• Icon-Box-Widget für Leistungsübersichten: Icons, Ausrichtung und Verlinkung
• Wiederverwendbare Seitenblöcke als globale Widgets und Vorlagen-Shortcodes
• Komponenten im Atomic Editor (Erstellen nur mit Pro) für wiederkehrende Bereiche – Abgrenzung zu globalen Widgets
• Benutzerdefinierte Vorlagenblöcke für wiederkehrende Bereiche wie Kontakt oder Team
• Social-Icons-Widget: Profile verlinken, Farben und Abstände
• Benutzerdefinierte Vorlage speichern, benennen und in der Bibliothek ordnen

Erweiterte Widgets

• Karussell für Bilder oder beliebige Inhalte: Autoplay, Navigation und Bedienbarkeit per Tastatur
• Testimonials und Bewertungen einbinden – rechtliche Vorgaben für Kundenbewertungen beachten
• Galerie und Basic Gallery: Raster, Lightbox, Bildgrößen und Alternativtexte
• Icon-Liste für Merkmale, Kontaktdaten und Aufzählungen
• Karte hinzufügen: Google-Maps-Widget, Zwei-Klick-Lösung und Datenschutz
• Verschachtelte Elemente: Tabs, Akkordeon, verschachteltes Karussell (Pro); atomare Tabs und Accordion in V4

Gestalterische Effekte

• Hintergrund-Diashow mit mehreren Bildern, Übergängen und Ken-Burns-Effekt
• Überlappende Elemente mit negativen Abständen, Positionierung und Z-Index
• Verschachtelte Container für komplexe Layouts statt innerer Abschnitte
• Videos einbinden: YouTube mit erweitertem Datenschutz, eigene Videos und Hintergrundvideo
• Masken für Bilder: Formen, eigene SVG-Masken und ihre Wirkung auf verschiedenen Geräten
• Scroll-Effekte: Parallax-Hintergründe und Bewegungseffekte mit Rücksicht auf prefers-reduced-motion

Projekt abschließen und betreiben

• Startseite festlegen, Seitenlayout „Elementor Canvas“ oder „Volle Breite“ wählen
• Eigenes CSS: Website-Einstellungen, CSS je Element, Klassen und selector in Elementor Pro
• CSS im Child-Theme statt verstreuter Einzelregeln, generierte CSS-Dateien neu erzeugen
• Ladezeit: „Optimized Markup“, Ladeoptionen unter Einstellungen > Leistung, Bildformate WebP und AVIF
• Barrierefreiheit im Builder: Überschriftenebenen, Kontraste, Alternativtexte, ARIA-Labels für Icons
• Updates, Sicherungen und Staging: Elementor-Versionen und Add-ons ohne Ausfall aktualisieren

Elementor mit Coding-Agenten erweitern

• _elementor_data als JSON in der Post-Meta verstehen – Layouts im Editor ändern, nie per Agent in der Datenbank
• Eigenes klassisches Widget als Plugin: Agent erzeugt Klasse auf Basis von Widget_Base mit Steuerelementen und render()
• WP-CLI-Auswertung durch den Agenten: Seiten mit alten Abschnitten, ungenutzte Vorlagen, Add-on-Widgets
• Verstreutes Element-CSS vom Agenten ins Child-Theme überführen lassen, gebunden an globale Farben
• Abnahme auf Staging: Playwright-Screenshots je Breakpoint vorher und nachher vergleichen
• Elementor MCP (seit 4.3) für externe Agenten nur gegen die Staging-Kopie freigeben, nie gegen die Live-Website

Praxisprojekt: Website für eine Physiotherapie-Praxis

• Design-System mit Praxisfarben, zwei Schriften und Schaltflächenstilen anlegen
• Kopf- und Fußzeile im Theme Builder, Startseite mit Hero, Leistungs-Icon-Boxen und Team-Galerie
• Kontakt- und Terminanfrage mit Formular-Widget, Karte mit Zwei-Klick-Lösung und Öffnungszeiten
• Mobile Prüfung, Ladezeitmessung mit PageSpeed Insights und Übergabe-Vorlagen für die Redaktion

Lernziele

• Sie richten WordPress mit Elementor lokal ein und wählen Theme und Plugins begründet aus.
• Sie bauen Seiten mit atomaren Elementen im Atomic Editor und mit Flexbox- und Grid-Containern und lesen ältere Layouts aus Abschnitten und Spalten.
• Sie legen globale Farben, Schriften und Theme-Stile an und setzen sie in allen Vorlagen ein.
• Sie erstellen Kopfzeile, Fußzeile und wiederverwendbare Blöcke mit dem Theme Builder und der Vorlagenbibliothek.
• Sie gestalten responsive Seiten mit Standard- und erweiterten Widgets und prüfen sie auf Ladezeit und Barrierefreiheit.

Zielgruppe

• Webdesigner:innen, Agenturen und Selbstständige, die Websites für Kund:innen mit Elementor bauen
• Marketing- und Redaktionsteams, die eine bestehende Elementor-Website pflegen und erweitern
• Webentwickler:innen, die Elementor-Projekte übernehmen und mit eigenen Widgets oder CSS ergänzen