Elementor – vollständiger Leitfaden (Abschnitte, Widgets, Theme-Builder, Pop-ups)

Elementor ist der führende Page-Builder für WordPress – verwendet auf 18 Millionen Websites Weltweit. Bei websky-studio.pl/ basieren 80 % unserer Projekte darauf, weil es das beste Verhältnis von Leistung zu GeschwindigkeitIch zeige Ihnen alles, was Sie wissen müssen – vom ersten Abschnitt über den Theme-Builder bis hin zu Pop-ups.

Zusamenfassend

• Elementor ist ein visueller Seiteneditor – Sie gestalten Ihre Seite durch Ziehen von Elementen, Programmierkenntnisse sind nicht erforderlich.
• Kostenlose Version Für 60 % der Projekte ausreichend. Pro (99 $/Jahr) Schaltet Theme Builder, Pop-ups, Formulare und Motiv Builder frei.
• Elementor generiert viel HTML und CSS — Bei mangelhafter Optimierung kann die Website dadurch verlangsamt werden. Dies lässt sich jedoch beheben.
• Der häufigste Fehler: Alles aus Standard-Widgets erstellen, anstatt eigenes CSS zu verwenden.

Elementor-Architektur – 4 Verschachtelungsebenen

Jede Seite in Elementor hat 4 Ebenen:

1. Abschnitt — volle Breite oder Container (begrenzt auf 1200 px)
2. Spalte — innerhalb der Abschnitte, 1–6 Spalten pro Zeile
3. Widget — Atomarelement (Überschrift, Schaltfläche, Bild, Symbol)
4. Attribute — Typografie, Ränder, Animationen pro Widget

Seit Version 3.16 gibt es auch Container — eine Alternative zu Sektionen, leichter und flexibler (Flexbox). Wir empfehlen die Verwendung von Containern., nicht Abschnitte.

Erste Schritte – Installation und Konfiguration

1. Installation

Plugins → Neu hinzufügen → „Elementor“ → Installieren → Aktivieren. Nach der Aktivierung erscheint „Elementor“ im WordPress-Menü.

2. Konfiguration

Elementor → Einstellungen:
– Editor: "Container" aktivieren (neue, bessere Option)
– Leistung: Aktivieren Sie „CSS-Optimierung“ und „Verbessertes Asset-Laden“.
– Experimente: "Inline-Schriftsymbole" aktivieren (weniger Anfragen)
– Ausschalten: Google Fonts (besser lokal hosten)

3. Ein Thema auswählen

Elementor funktioniert mit jedem Theme, aber einige sind speziell dafür optimiert:

• Hallo Elementor (offiziell von Elementor) – die leichteste, sauberste Leinwand
• Astra — beliebt, leichtgewichtig, viele vorgefertigte Vorlagen
• GeneratePress — sehr leichte Premium-Module

Nicht verwenden Umfangreiche Themes wie BeTheme, Avada und Newspaper erzeugen unnötigen CSS-Code und stehen in Konflikt mit Elementor.

Die wichtigsten Widgets in der kostenlosen Version

Überschrift

Typografie, Farben, Abstände. Nicht vergessen! die korrekte HTML-Ebene — H1 einmal pro Seite, H2 für Abschnitte, H3 für Unterabschnitte.

Texteditor

WYSIWYG-Editor für Inhalte. Ermöglicht das Einfügen von Shortcodes und HTML-Code. Unterteilen Sie Inhalte in Absätze statt in einen einzigen Block – das ist besser für die Suchmaschinenoptimierung.

Bild

Zawsze ustaw alt (atrybut alternatywny dla SEO i dostępności). Włącz lazy loading. Format WebP statt JPG/PNG (Elementor 3.5+ unterstützt dies nativ).

Taste

Regeln für Handlungsaufforderungen (CTAs) auf der Seite: kontrastierende Farbe, min. 44 × 44 px (Apple Human Interface), Aktionstext ("Angebot anfordern", nicht "Hier klicken").

Symbolliste

Symbolbasierte Listen. Ideal für Alleinstellungsmerkmale, Vorteile und Produktfunktionen.

Bildfeld

Eine Karte mit Bild, Titel, Beschreibung und Handlungsaufforderung. Das am häufigsten verwendete Element in den Abschnitten „Was wir tun“ / „Dienstleistungen“.

Elementor Pro – Was Sie für 99 $/Jahr erhalten

Theme-Builder

Das wichtigste Merkmal von Pro. Ermöglicht das Designen in Elementor:

• Kopfzeile (Überschrift für die gesamte Website)
• Fußzeile
• Vorlage für einen einzelnen Blogbeitrag (Blogeintragsvorlage)
• Vorlage für eine einzelne Seite
• Archiv (Kategorie, Schlagwort, Autor)
• Seite 404
• Suchergebnisse

Ohne Theme Builder müssen Sie diese Templates in PHP/Theme schreiben. Mit Theme Builder ist das visuell und ohne Code möglich.

Pop-Up-Baukasten

Pop-up-Generator. Auslöser: Verweildauer auf der Seite, Scrollprozentsatz, Absprungabsicht, Klick. Anwendungsbereiche: Newsletter, Werbeaktionen, DSGVO-Einwilligung, Lead-Magnet.

Formulare

Besser als Contact Form 7. Drag & Drop, bedingte Logik, Integrationen mit Mailchimp, ActiveCampaign, GetResponse, Zapier.

WooCommerce Builder

Benutzerdefinierte Vorlagen für Produkt-, Kategorie-, Warenkorb- und Checkout-Seiten. Unverzichtbar für Elementor-Shops.

Benutzerdefiniertes CSS

Die kostenlose Version bietet diese Funktion nicht. In der Pro-Version können Sie CSS pro Element/Abschnitt/Seite hinzufügen. Dies ist besonders für individuelle Projekte unerlässlich.

Bewegungseffekte

Animationen für Scrollen, Parallaxe und Mausbewegungen. Seien Sie vorsichtig — Animationen unterbrechen die Interaktion mit dem nächsten Bild. Verwenden Sie sie sparsam.

Bewährte Verfahren für Pop-up-Stores

5 Arten von Pop-ups, die funktionieren

1. Ausstiegsabsicht — Wird angezeigt, wenn ein Nutzer die Seite verlassen möchte. Klickrate: 4–8 %.
2. Zeitbasiert — nach 30 Sekunden auf der Seite. Klickrate 2–4 %.
3. Scrollbasiert — nach dem Scrollen von 50 % der Seite. Klickrate 3–5 %.
4. Klickbasiert — nach dem Klicken auf die Schaltfläche „Angebot anfordern“. Konversionsrate 15–25 %.
5. Cookie-Einwilligung — DSGVO-Konformität, eine Premiere für den Nutzer.

Was man NICHT tun sollte

❌ Pop-up-Fenster direkt nach dem Betreten – schreckt die Leute ab
❌ Pop-up ohne Schließen-Button (X) – Sie verlieren Kunden
❌ Mobile Pop-ups blockieren den gesamten Inhalt – Google bestraft „aufdringliche Interstitials“
❌ Newsletter-Pop-up für bereits registrierte Nutzer – Cookie-Tracking-Lecks

Elementor Pop-Up Builder-Einrichtung

1. Vorlagen → Pop-ups → Neu hinzufügen
2. Wählen Sie eine Vorlage (oder beginnen Sie von Grund auf).
3. Anzeigebedingungen: Wo soll die Anzeige erfolgen (gesamte Seite/Kategorie)
4. Auslöser: Wann anzeigen (Zeit, Scrollen, Beenden)
5. Erweiterte Regeln: Für wen (einmal täglich, angemeldet)
6. Veröffentlichen → kopiert den einzufügenden Shortcode.

Responsives Design in Elementor

Elementor verfügt standardmäßig über 3 Haltepunkte:

• Desktop — > 1024 px
• Tablette — 768–1024 px
• Mobile — < 768 px

Pro ermöglicht Ihnen das Hinzufügen 5 zusätzliche Haltepunkte (Mobilgerät im Hochformat, Tablet im Querformat, großer Desktop-Computer).

7 Regeln für Responsivität in Elementor

1. Design vom Desktop bis zum Mobilgerät (oder umgekehrt – Mobile First), aber testen Sie immer an jedem Haltepunkt.
2. Auf Mobilgeräten ausblenden für unnötige Elemente (dekorative Trennlinien, große Bilder)
3. Kleinere Schriftarten auf Mobilgeräten — H1 von 56 px → 32 px, H2 von 40 px → 24 px
4. Weniger Spalten auf Mobilgeräten — 4 Spalten → 2 (Stapel)
5. Vollbreiten-Schaltflächen auf Mobilgeräten — einfacher anzuklicken
6. Weniger Abstand zwischen Abschnitten auf Mobilgeräten — Desktop 100 px → Mobilgerät 40 px
7. Testen Sie auf real — nicht nur auf einem Laptop, sondern auch auf einem richtigen Handy

7 Elementor-Fehler, die Ihrer SEO schaden

1. Zu viele Abschnittsverschachtelungen

Abschnitt → Innerer Abschnitt → Innerer Abschnitt → Spalten → Widget = extrem umfangreiches HTML. Limit: maximal 2 Verschachtelungsebenen.

2. Verwendung des Standardbildes anstelle des Hochladens eines optimierten Bildes

Elementor komprimiert keine Bilder. Laden Sie bereits optimierte WebP-Bilder (ShortPixel) in der korrekten Größe hoch.

3. Von Elementor geladene Google Fonts.

Jede Seite lädt Google Fonts von fonts.googleapis.com – zusätzliche Anfrage. Schriftarten lokal hosten (Plugin). OMGF).

4. Die Option „Animation“ wurde für jedes Element aktiviert.

Jede Animation lädt eine JavaScript-Bibliothek. Bei 50 Animationen entspricht dies der 50-fachen CPU-Last. Maximal 5 Animationen pro Seite.

5. Alles mit dem Elementor-Widget statt mit HTML/Shortcode.

Die Anzahl der Tabs in Elementor, Akkordeons und Slidern – das bedeutet zusätzlichen JavaScript-Code. Manchmal ist einfaches HTML in einem „HTML“-Widget ressourcenschonender.

6. Übermäßige Bewegungseffekte

Parallaxe, Maus-Tracking, klebrige Elemente – sie beeinträchtigen INP und CLS. Setzen Sie sie gezielt ein.

7. Fehlende CSS-Optimierung

In Elementor → Leistung, aktivieren "CSS-Optimierung" i "Inline-Schriftsymbole" — reduziert automatisch die CSS-Größe um 30–50 %.

Elementor oder Gutenberg?

Im Jahr 2026 hatte Gutenberg in vielen Funktionen zu Elementor aufgeholt (Vollständige Website-Bearbeitung, Muster). Die Wahl hängt von Folgendem ab:

Anwendung: Für individuelle Projekte mit starkem Designfokus empfiehlt sich Elementor. Für Blogs/Verlage ist Gutenberg die richtige Wahl.

Was kommt als Nächstes?

Sie möchten mit Elementor loslegen? 7-Tage-Plan:

1. Tag 1–2: Installation und Durchlaufen des Tutorials in Elementor → Einstellungen
2. Tag 3: Eine einfache Seite neu erstellen (z. B. „Kontakt“)
3. Tag 4: Erstellen Sie eine Homepage mit vorgefertigten Vorlagen → Bibliothek
4. Tag 5: Theme Builder konfigurieren (falls Pro-Version)
5. Tag 6: Erstelle 1 Pop-up (Newsletter)
6. Tag 7: Vollständiger Responsive- und PageSpeed-Test

Elementor ist unser Standard-Stack. — Im Basispaket für Visitenkartenseiten ab 500 PLN erhalten Sie ein vollständig individuelles Design in Elementor. Schauen Sie sich unsere Projekte an.