Was ist Elementor?

Visueller Page Builder

Elementor ist ein visuelles Drag-and-Drop-Plugin für WordPress. Damit lassen sich Seiten direkt im Frontend gestalten – ganz ohne Programmierung.

Container & Widgets

Container bilden die Struktur deiner Seite. Widgets (z. B. Überschrift, Bild, Button) sind die Inhalte. Zusammen ergeben sie das Layout deiner Website.

Design & Responsive

Mit Elementor kannst du Farben, Schriften, Abstände und Hintergründe individuell anpassen – und deine Seite für Desktop, Tablet und Smartphone optimieren.

Templates & Theme Builder

Speichere Layouts als Vorlagen oder erstelle mit der Pro-Version Header, Footer und komplette Seitenstrukturen für deine gesamte Website.

Einführung Elementor

Bild zeigt den Aufbau des Elementor Editors.

Elementor-Widgets können per Drag & Drop
in den Arbeitsbereich auf der rechten Seite
gezogen werden.

Mit einem Klick auf das Logo kannst du
die globalen Einstellungen (z. B. Typografie
und Schriften), den Theme Builder öffen
(Header & Footer) öffnen
oder die Elementor-Ansicht schließen.

Hier kannst du zwischen Desktop-, Tablet-
und Mobilansicht wechseln, um zu sehen,
wie deine Seite auf verschiedenen Geräten
aussieht.

Über das Struktur-Symbol kannst du
die hierarchische Ansicht deiner
Seite öffnen.

Hier siehst du schnell,
welche Abschnitte, Container und
Widgets auf der Seite enthalten sind.

Du kannst die Container ein- und aufklappen,
einzelne Abschnitte, Container oder Widgets
anwählen und direkt bearbeiten.

Hier siehst du die aufgeklappte Strukturansicht.

Im Dashboard findest du das Vorschau-Icon (Auge-Symbol).

Wenn du auf dieses Symbol klickst, öffnet sich die aktuelle Seite in der Vorschau in einem neuen Tab.

So kannst du deine Änderungen überprüfen, ohne den Bearbeitungsmodus zu verlassen oder die Seite direkt live aufzurufen.

Der Veröffentlichen-Button befindet sich
hier oben im Editor.

Sobald du Änderungen an der Seite
vorgenommen hast, färbt sich der
Button magenta.

Das zeigt dir an, dass noch nicht gespeicherte
Änderungen vorhanden sind. Mit einem Klick
auf den Button werden deine Anpassungen
gespeichert bzw. veröffentlicht.

Arbeitsfläche / Live-Vorschau
Der Hauptbereich zeigt eine Live-Vorschau
der Seite. Hier siehst du sofort alle
Änderungen – so, wie sie später
online aussehen.

Inhalt

Grundlagen
Grundstruktur
Design & Gestaltung
Responsive Design

Grundlagen

  • 1. Was ist Elementor? • Page Builder Plugin für WordPress
    • Drag-and-Drop System
    • Live-Frontend-Bearbeitung
  • 2. Installation • Plugins → „Installieren“
    • Elementor aktivieren
    • Unterschied: Free vs. Pro Version
  • 3. Benutzeroberfläche verstehen • Linke Sidebar (Widgets)
    • Rechte Arbeitsfläche (Live-Vorschau)
    • Navigator
    • Responsive Vorschau (Desktop / Tablet / Mobil)

Grundstruktur

  • 1. Container & Flexbox (neue Struktur) • Container als Basis-Element
    • Richtung (Horizontal / Vertikal)
    • Abstände (Padding & Margin)
  • 2. Widgets verwenden Wichtige Widgets:
    • Überschrift
    • Texteditor
    • Bild etc.
Zur Übung

Design & Gestaltung

  • 1. Layout-Einstellungen Für Plugins aus dem offiziellen WordPress-Verzeichnis:
    • Breite (Boxed / Full Width)
    • Mindesthöhe
    • Vertikale Ausrichtung
    1. Layout-Einstellungen
  • 2. Farben & Typografie Globale Einstellungen:
    • Schriftarten definieren
    • Farbpalette anlegen
Globale Einstellungen

Responsive Design

  • 1. Mobile Optimierung • Schriftgrößen anpassen
    • Reihenfolge ändern
    • Elemente ausblenden
  • Übung Öffne die Hero-Sektion in der Tablet- und Mobilansicht. Passe die Abstände (Padding & Margin) sowie die Schriftgrößen von Überschrift, Text und Button so an, dass alle Inhalte auf jedem Gerät gut lesbar und harmonisch angeordnet sind. Diese HTML Tags auf der rechten Seite können dir dabei helfen.
Zur Übung 
				
					 
  • 1. Geschütztes Leerzeichen:   Verhindert, dass Wörter am Zeilenende getrennt werden. 
				
					<br>
  • 2. Zeilenumbruch: Der Umbruch-HTML-Tag, fügt einen harten Zeilenumbruch in einen Text ein. Er bewirkt, dass der nachfolgende Text in der nächsten Zeile weitergeschrieben wird, ohne einen neuen Absatz oder einen zusätzlichen Abstand zu erzeugen. 
				
					&shy;
  • 3. Weiches Trennzeichen: Es zeigt sich nur, wenn ein Wort am Zeilenende umbrochen werden muss. Dann erscheint ein Bindestrich (-). Wenn kein Umbruch nötig ist, bleibt es unsichtbar.