Elementor Tutorial 2026: Komplette Anleitung für Einsteiger

Was ist Elementor — Marktführer unter den Page-Buildern

Elementor ist ein WordPress-Plugin, das den klassischen Gutenberg-Editor durch einen visuellen Drag-and-Drop-Builder ersetzt. Statt Blöcke in einer Spalten-Logik zusammenzustecken, ziehst du Widgets direkt auf eine Live-Vorschau der Seite und siehst Änderungen sofort. Gestartet 2016 in Tel Aviv, dominiert Elementor 2026 den Markt mit über 13 Millionen aktiven Installationen — etwa jede vierte WordPress-Site weltweit nutzt Elementor in irgendeiner Form.

Die wichtigsten Konkurrenten 2026: Divi von Elegant Themes (Lifetime-Lizenz 249 $, ähnliche Funktionalität, eigenes Theme nötig), Beaver Builder (ältester Page-Builder, sehr stabil, weniger Widgets), Bricks Builder (Performance-Fokus, Code-näher, beliebt bei Entwickler-Agenturen). Elementor gewinnt diesen Vergleich durch das größte Plugin-Ökosystem, die meisten Tutorials weltweit und die niedrigste Einstiegshürde für Nicht-Entwickler.

Installation und erste Schritte

Elementor Free installierst du wie jedes WordPress-Plugin: WP-Admin öffnen, Plugins → Installieren, „Elementor“ suchen, Installieren und Aktivieren. Die Free-Version steht sofort einsatzbereit zur Verfügung. Für Pro lädst du nach dem Kauf auf elementor.com die ZIP-Datei runter, gehst auf Plugins → Hochladen, wählst die ZIP, aktivierst sie und gibst den Lizenz-Key unter Elementor → Lizenz ein.

Nach der Aktivierung öffnest du eine neue Seite oder einen neuen Beitrag und klickst auf den blauen Button „Mit Elementor bearbeiten“. Der klassische WP-Editor verschwindet, stattdessen lädt der Elementor-Editor — links die Widget-Palette, rechts die Live-Vorschau. Beim ersten Start lohnt ein Blick in Elementor → Einstellungen: dort schaltest du veraltete Funktionen aus, aktivierst „Improved CSS Loading“ und „Optimized Asset Loading“ (Pflicht für Performance) und legst die Standard-Schriften deines Themes fest.

Elementor Free vs Pro 2026 — was lohnt sich

Die Free-Version reicht für eine einfache Visitenkarten-Site oder eine Landingpage ohne Spezialanforderungen. Pro lohnt sich, sobald du Header, Footer, WooCommerce-Templates oder Popups visuell bauen willst. Die Pro-Lizenz kostet 2026 ab 59 $/Jahr für eine Site (Essential), 99 $/Jahr für drei Sites (Expert), 199 $/Jahr für 25 Sites (Studio) und 399 $/Jahr für 1000 Sites (Agency). Lifetime-Lizenz gibt es seit 2024 nicht mehr.

Aufbau des Elementor-Editors

Der Editor teilt sich in drei Bereiche: links die Widget-Palette (alle verfügbaren Bausteine), mittig die Live-Vorschau (so sieht die Seite später aus), unten links der Footer-Bereich (Responsive-Modus, Verlauf, Vorschau, Speichern). Per Drag-and-Drop ziehst du Widgets aus der Palette direkt in die Vorschau. Jedes Widget hat drei Tabs in seinen Einstellungen: Inhalt (Texte, Bilder, Links), Stil (Farben, Schriften, Abstände), Erweitert (Margin, Padding, Custom CSS, Responsive-Verhalten).

Die Layout-Logik 2026 basiert auf Flexbox-Containern. Ein Container ist ein Bereich, in dem du Widgets oder weitere Container platzierst. Du steuerst Richtung (horizontal/vertikal), Ausrichtung (links/zentriert/rechts), Abstände und Größen. Das alte Sektion-Spalten-Modell existiert noch für Legacy-Projekte, neue Seiten startest du immer mit Containern. Im Responsive-Modus (unten links) wechselst du zwischen Desktop, Tablet und Mobile und passt jedes Setting pro Breakpoint einzeln an — Abstände auf Mobile, Schriftgröße auf Tablet, Reihenfolge auf Desktop.

Erste Landingpage in 30 Minuten — Schritt für Schritt

Eine komplette Landingpage entsteht in fünf Sektionen: Hero, Features, Testimonials, CTA, Footer. Mit Elementor und etwas Routine schaffst du das in 30 Minuten. So baust du sie auf.

Schritt 1 — Hero-Sektion (5 Minuten): Neue Seite anlegen, Template „Elementor Canvas“ wählen (keine Theme-Header/Footer), „Mit Elementor bearbeiten“. Container einfügen, Hintergrundbild oder Verlauf setzen, innen Heading-Widget (H1) plus Text-Widget plus Button-Widget. Min-Height auf 80vh, Padding 100px oben und unten. Mobile-Check direkt machen.

Schritt 2 — Features (8 Minuten): Neuen Container darunter, horizontale Richtung, drei Untercontainer für drei Features. In jedem Container: Icon-Box-Widget mit Icon, Heading und Beschreibungstext. Gap zwischen Containern auf 32px, auf Mobile umschalten auf vertikal.

Schritt 3 — Testimonials (5 Minuten): Container mit hellem Hintergrund (z. B. #f5f8ff), darin entweder das Testimonial-Slider-Widget (Pro) oder drei einzelne Testimonial-Widgets nebeneinander (Free). Auf Mobile vertikal stapeln.

Schritt 4 — CTA-Sektion (4 Minuten): Container mit Brand-Hintergrundfarbe, zentriertes Heading, Beschreibungstext, prominenter Button mit Link zur Anfrage-Seite. Padding großzügig wählen — 80px oben/unten wirkt souverän.

Schritt 5 — Footer (8 Minuten): Container in Dunkel, drei Spalten — Kontaktdaten, Schnell-Links, Social. Unten eine zweite kleinere Zeile mit Copyright und Links zu Impressum und Datenschutz. Fertig, speichern, veröffentlichen.

Die 10 wichtigsten Elementor-Widgets 2026

Elementor liefert 40+ Free-Widgets und 90+ Pro-Widgets. In der Praxis kommst du mit zehn Kern-Widgets bei 90 Prozent aller Layouts aus. Diese solltest du beherrschen.

1. Heading — H1 bis H6 mit individuellen Stilen. 2. Text Editor — klassischer Fließtext mit WYSIWYG-Logik. 3. Image — Bilder inkl. Lazy-Load, WebP-Support und Alt-Text. 4. Button — CTA-Buttons mit Hover-States, Icons, Link-Optionen. 5. Icon Box — Icon plus Heading plus Text, ideal für Feature-Listen. 6. Form (Pro) — komplettes Form-Builder-Widget mit Captcha, E-Mail-Integration, Webhooks. 7. Testimonial — Kundenstimmen mit Avatar und Sternebewertung. 8. Slider/Carousel — Bild- oder Inhalts-Slider mit Touch-Support. 9. Tabs/Accordion — interaktive Inhalte für FAQ-Sektionen und Produkt-Specs. 10. Posts (Pro) — dynamische Listen von Blogartikeln, Custom Post Types oder Produkten.

Theme Builder Pro — Header, Footer, Single Post, Archive

Der Theme Builder ist das stärkste Pro-Feature und allein den Preis wert. Statt Header und Footer im Theme-Code anzupassen, baust du sie visuell wie eine Seite. Unter Templates → Theme Builder legst du Templates an für Header, Footer, Single Post, Single Page, Archive, Search Results und 404. Jedes Template definiert per Display-Bedingungen, wo es greift — z. B. „Header für gesamte Site“ oder „Single Post nur für Kategorie Blog“.

Praktisch heißt das: ein Klick und der Header tauscht sich auf der ganzen Site aus. Du kannst dynamische Daten einbauen — Beitragstitel, Featured Image, Autor, Datum, Kategorien werden via Dynamic-Tags eingefügt. In Verbindung mit Advanced Custom Fields (ACF) baust du komplette Custom-Post-Type-Templates ohne eine Zeile PHP. Für Agenturen ist das die Killer-Funktion — Kundensites werden in Stunden statt Tagen fertig.

Performance-Probleme und Fixes — Elementor schneller machen

Elementor hat einen Ruf für träge Seiten — zu Recht, wenn du es naiv einsetzt. Standard-Elementor lädt für jede Seite alle Widget-CSS-Dateien, jQuery, Font-Awesome und Eicons. Ergebnis: 1,5 MB zusätzliche Assets, PageSpeed-Score oft unter 50. Mit den richtigen Settings und Tools kommst du locker auf 90+.

Fix 1 — Asset Loader Optimization: Unter Elementor → Einstellungen → Funktionen aktiviere „Improved Asset Loading“, „Improved CSS Loading“, „Inline Font Icons“. Diese drei Toggles laden Widget-CSS nur, wenn das Widget auf der Seite vorkommt. Spart sofort 30–40 Prozent Asset-Größe.

Fix 2 — WP Rocket (oder Alternative): Caching-Plugin Pflicht. WP Rocket (59 $/Jahr) ist Standard, aber auch FlyingPress, LiteSpeed Cache oder W3 Total Cache funktionieren. Wichtige Settings: Page Caching, Critical CSS, JS Defer, Lazy Load für Bilder und Iframes, WebP-Conversion.

Fix 3 — Custom CSS statt Spielereien: Animationen, Slider und komplexe Hover-States ziehen Performance runter. Wenn ein Effekt 200 Zeilen Elementor-CSS generiert, schreib ihn lieber in 20 Zeilen Custom CSS direkt unter Erweitert → Custom CSS.

Fix 4 — Astra oder Hello als Theme: Schwere Themes wie Avada oder Divi konfliktieren mit Elementor. Nimm Astra (kostenlos, schnell, perfekt auf Elementor abgestimmt) oder Hello Theme (Elementor-eigenes Minimal-Theme, fast leer). Werbeagentur Luppert nutzt Elementor + Astra als Standard-Stack — PageSpeed 90+ ist damit Routine.

Fix 5 — Bricks als Alternative prüfen: Für Performance-kritische Projekte (z. B. große E-Commerce-Sites) ist Bricks Builder 2026 die schnellere Wahl. Generiert deutlich schlankeren HTML/CSS-Output, ist aber näher an Code und steiler in der Lernkurve. Für KMU-Sites mit moderatem Traffic bleibt Elementor + Optimierungen die pragmatische Wahl.

Wann Elementor sinnvoll ist und wann nicht

Elementor ist 2026 das richtige Werkzeug für etwa 70 Prozent aller WordPress-Projekte. Nicht für alle. Eine ehrliche Einordnung.

Elementor ja: Solopreneure mit eigener Website, kleine und mittelständische Unternehmen (KMU), Restaurants, Handwerker, Coaches, Therapeuten, lokale Dienstleister, Vereine, einfache E-Commerce-Sites bis 200 Produkte, Landingpages für Kampagnen, Portfolio-Sites, Visitenkarten-Sites. Hauptargument: keine Entwickler nötig, du oder dein Mitarbeiter kann die Seite selbst pflegen.

Elementor nein: Enterprise-Sites mit 1000+ Seiten und mehreren Redakteur-Teams (Gutenberg + Custom Blocks ist besser), Tech-Startups mit eigenem Frontend-Team (Headless WordPress mit React/Next.js besser), Hochperformance-Stores mit 10.000+ Produkten (Bricks oder Custom Theme besser), komplexe Multi-Lingual-Setups mit eigener Übersetzungs-Workflow-Software (oft Theme-spezifische Lösungen besser).

Zwischenfall — der Gray-Zone-Use-Case: Mittelständler mit eigenem Marketing-Team und gelegentlichem Entwickler-Zugriff. Hier kann sowohl Elementor als auch Bricks die richtige Wahl sein. Faustregel: wenn das Marketing-Team selbst Seiten bauen soll, ist Elementor besser. Wenn das Entwickler-Team primär baut und Marketing nur Texte tauscht, ist Bricks performanter.

Häufige Anfänger-Fehler vermeiden

Drei Fehler tauchen 2026 in fast jedem Anfänger-Elementor-Projekt auf. Wer sie kennt, spart sich Stunden Frust und Refactoring.

Fehler 1 — Zu viele Widgets pro Seite: Jedes zusätzliche Widget bringt CSS, manchmal JavaScript. Wenn eine Landingpage 80 Widgets enthält, ist sie langsam. Reduziere auf das Nötige. Ein gut gemachter Hero plus drei Features plus CTA reicht — nicht zwölf Slider und sieben Akkordeons.

Fehler 2 — Inline-Styles ohne System: Anfänger setzen Farben, Schriften und Abstände bei jedem Widget einzeln. Resultat: 30 verschiedene Blautöne auf einer Site. Profis nutzen Global Styles (Elementor → Site Settings → Global Colors / Global Fonts). Brand-Farben einmal definieren, in allen Widgets referenzieren. Änderung an einer Stelle = Änderung auf der ganzen Site.

Fehler 3 — Mobile-Layout vergessen: Die Desktop-Vorschau sieht super aus, auf dem Handy bricht alles auseinander. Pflicht 2026: jede Sektion im Responsive-Modus prüfen (Tablet + Mobile), Padding und Schriftgrößen pro Breakpoint anpassen, horizontale Container auf vertikal umstellen. Mobile-Traffic liegt 2026 bei 60–70 Prozent — Mobile-First ist nicht optional.

Häufige Fragen 2026

Kostenloses Angebot
☎ Jetzt anrufen