Elementor ist ein WordPress-Page-Builder, mit dem Sie Seiten visuell erstellen, ohne Code zu schreiben. Sie ziehen Elemente auf eine Arbeitsfläche, ordnen sie an, gestalten sie und veröffentlichen. Über 10 Millionen Websites nutzen ihn.
Wenn Sie gerade erst anfangen, führt dieser Leitfaden Sie durch alles: von der Installation bis zur Erstellung Ihrer ersten Seite. Kein Füllmaterial, nur die Schritte.
Elementor installieren
Zunächst brauchen Sie eine WordPress-Website. Falls Sie noch keine haben, wählen Sie einen Hosting-Anbieter (wir empfehlen Hostinger für die meisten WordPress-Projekte) und installieren Sie WordPress über deren Dashboard.
Sobald WordPress bereit ist, so fügen Sie Elementor hinzu:
- Melden Sie sich in Ihrem WordPress-Admin-Panel an
- Gehen Sie zu Plugins in der linken Seitenleiste
- Klicken Sie auf Neu hinzufügen
- Suchen Sie nach "Elementor"
- Klicken Sie bei "Elementor Website Builder" auf Jetzt installieren
- Nach der Installation klicken Sie auf Aktivieren
Das war's. Elementor ist jetzt auf Ihrer Website verfügbar. Sie sehen einen neuen Menüpunkt "Elementor" in Ihrer Seitenleiste.
Wenn Sie die Pro-Version möchten, kaufen Sie sie auf elementor.com, laden die ZIP-Datei herunter, gehen zu Plugins > Neu hinzufügen > Plugin hochladen, wählen die Datei aus, installieren und aktivieren.
Den Editor verstehen
Öffnen Sie eine beliebige Seite in WordPress und klicken Sie auf "Mit Elementor bearbeiten." Das startet den Elementor-Editor.
Der Bildschirm teilt sich in zwei Bereiche. Links ein Panel mit Widgets und Einstellungen. Rechts die Vorschau Ihrer Seite. Alles, was Sie links tun, erscheint rechts in Echtzeit.
Die Struktur arbeitet auf zwei Ebenen:
Container sind die Layout-Elemente, die Ihre Seite organisieren. Unter der Haube nutzen sie CSS Flexbox (und inzwischen CSS Grid), was bedeutet, dass Sie sie verschachteln, horizontal oder vertikal stapeln und Abstände präzise steuern können. Stellen Sie sich Container als flexible Boxen vor, die Ihren Inhalt halten. (Hinweis: Ältere Tutorials verweisen möglicherweise noch auf die veralteten "Sections" und "Columns." Container sind seit Jahren der Standard, also arbeiten Sie genau damit.)
Widgets sind die eigentlichen Inhaltselemente. Text, Bilder, Buttons, Icons, Formulare, Videos. Diese kommen in Container hinein.
Um eine Seite zu erstellen, fügen Sie einen Container hinzu, legen seine Richtung fest (Zeile oder Spalte) und ziehen Widgets hinein. Einfaches Konzept, und es bleibt in der Praxis einfach.
Ihre erste Seite erstellen
Bauen wir eine einfache Startseite. Öffnen Sie eine neue Seite in WordPress, klicken Sie "Mit Elementor bearbeiten" und folgen Sie der Anleitung.
Schritt 1: Mit Template oder leer starten
Elementor gibt Ihnen zwei Optionen. Wählen Sie ein vorgefertigtes Template aus der Bibliothek (Ordner-Symbol klicken) und passen Sie es an. Oder starten Sie mit einer leeren Arbeitsfläche und bauen von Grund auf.
Für Ihre erste Seite nutzen Sie ein Template. Es ist schneller und gibt Ihnen ein Gefühl dafür, wie Elemente strukturiert sind. Sie können später alles modifizieren.
Schritt 2: Text und Bilder bearbeiten
Klicken Sie auf ein beliebiges Textelement im Template. Das linke Panel wechselt zu den Einstellungen dieses Widgets. Tippen Sie Ihren eigenen Inhalt. Ändern Sie Schrift, Größe, Farbe und Ausrichtung über den Stil-Tab.
Für Bilder klicken Sie auf das Bild-Widget und laden Ihr eigenes hoch. Setzen Sie Größe und Ausrichtung. Fügen Sie immer Alt-Text für Barrierefreiheit und SEO hinzu.
Schritt 3: Container-Layout anpassen
Klicken Sie auf den Container-Griff, um einen ganzen Container auszuwählen. Im linken Panel können Sie die Hintergrundfarbe ändern, ein Hintergrundbild hinzufügen, Padding und Margin anpassen und die Inhaltsbreite festlegen.
Padding ist der Abstand innerhalb der Sektion (zwischen Rand und Inhalt). Margin ist der Abstand außerhalb der Sektion (zwischen ihr und der nächsten). Den Unterschied zwischen diesen beiden zu lernen, spart Ihnen Stunden der Frustration.
Schritt 4: Responsive Ansichten prüfen
Für die Vorschau auf Desktop, Tablet und Smartphone verwenden Sie die Geräte-Buttons in der oberen Werkzeugleiste. Prüfen Sie die Seite in jeder Ansicht.
Was auf dem Desktop großartig aussieht, braucht oft Anpassung auf dem Mobilgerät. Text könnte zu groß sein. Nebeneinanderstehende Spalten müssen vielleicht vertikal gestapelt werden. Bilder könnten über ihre Container hinausragen.
Beheben Sie Probleme auf jedem Breakpoint. Elementor lässt Sie für die meisten Eigenschaften unterschiedliche Werte pro Gerätegröße festlegen.
Schritt 5: Veröffentlichen
Wenn Sie zufrieden sind, klicken Sie oben rechts auf Veröffentlichen. Öffnen Sie die Seite in einem normalen Browser-Tab und prüfen Sie, ob alles richtig aussieht.
Wichtige Widgets, die Sie am häufigsten nutzen
Elementor hat Dutzende von Widgets. Etwa 10 werden Sie regelmäßig nutzen.
Überschrift. Für Titel und Untertitel. Verwenden Sie die richtige Überschriftenhierarchie (H1, H2, H3) für SEO. Ihre Seite sollte ein H1 haben und H2 für Hauptabschnitte nutzen.
Text-Editor. Für Textabsätze. Unterstützt grundlegende Formatierung wie Fett, Kursiv und Links.
Bild. Für Fotos und Grafiken. Unterstützt Lightbox, individuelle Größenanpassung und Verlinkung.
Button. Für Handlungsaufforderungen. Gestalten Sie die Farben, fügen Sie Hover-Effekte hinzu und verlinken Sie auf jede URL.
Abstandshalter. Fügt vertikalen Raum zwischen Elementen hinzu. Sparsam einsetzen. Richtige Padding- und Margin-Einstellungen sind meist besser.
Trennlinie. Eine horizontale Linie zur visuellen Trennung von Inhalten. Dezent, aber nützlich.
Icon. Einzelne Icons aus Font Awesome oder Elementors Icon-Bibliothek. Gut für Feature-Listen.
Video. Einbettungen von YouTube, Vimeo oder selbst gehosteten Dateien. Nutzen Sie die Lazy-Load-Option, damit Videos Ihre Seite nicht verlangsamen.
Google Maps. Bettet eine Karte ein. Nützlich für Kontaktseiten. Beachten Sie, dass es der Seite Gewicht hinzufügt.
Formular (Pro). Kontaktformulare, Newsletter-Anmeldungen und mehr. Nur in Elementor Pro verfügbar.
Arbeiten mit Templates und gespeicherten Elementen
Templates sind eine von Elementors besten Funktionen. So nutzen Sie sie effektiv.
Seiten-Templates sind Designs für ganze Seiten. Importieren Sie eines, ersetzen Sie den Inhalt und Sie haben in Minuten eine Seite.
Block-Templates sind einzelne Blöcke (ein Hero-Banner, ein Testimonial-Block, eine Preistabelle). Sie können diese über verschiedene Seiten mischen und kombinieren.
Gespeicherte Templates sind Container oder Seiten, die Sie gebaut und zur Wiederverwendung gespeichert haben. Wenn Sie einen perfekten Call-to-Action-Block designen, speichern Sie ihn als Template und fügen Sie ihn später in jede Seite ein.
Zum Speichern: Rechtsklick auf einen Container, "Als Template speichern" wählen, Namen vergeben. Zur Nutzung: Ordner-Symbol beim Hinzufügen eines neuen Containers klicken und zu "Meine Templates" gehen.
Häufige Anfängerfehler vermeiden
Zu viele Schriften verwenden. Beschränken Sie sich auf zwei. Eine für Überschriften, eine für Fließtext. Jede zusätzliche Schrift verlangsamt Ihre Website. Lesen Sie unseren Leitfaden zur Wahl der richtigen Schrift, wenn Sie unsicher sind.
Mobile ignorieren. Prüfen Sie immer Tablet- und Mobilansicht vor dem Veröffentlichen. Was auf Ihrem 27-Zoll-Monitor toll aussieht, kann auf dem Handy unlesbar sein.
Animationen überreizen. Eingangsanimationen machen Spaß. Aber eine Seite, auf der jedes Element hüpft, einblendet und hereinschiebt, wirkt chaotisch. Setzen Sie Animationen sparsam und gezielt ein.
Container nicht organisieren. Nutzen Sie Structure (Ebenen-Symbol in der oberen Werkzeugleiste), um Ihre Container zu benennen. "Hero," "Services," "Testimonials," "CTA." Ihr zukünftiges Ich wird es Ihnen danken.
Backups überspringen. Vor größeren Änderungen Arbeit speichern. Elementor bietet History, den Änderungsverlauf (Uhr-Symbol in der oberen Werkzeugleiste), aber halten Sie auch ordentliche Website-Backups über Ihren Hosting-Anbieter bereit.
Performance-Tipps
Elementor-Websites sind tendenziell schwerer als handcodierte. Sie können den Impact minimieren.
Bilder vor dem Upload optimieren. Nutzen Sie Tools wie TinyPNG oder ShortPixel und liefern Sie moderne Formate wie WebP oder AVIF, wo es möglich ist. Laden Sie Bilder in der Größe hoch, in der sie angezeigt werden, nicht mit 4000x3000 Pixeln für ein 400px-Thumbnail.
Ungenutzte Widgets deaktivieren. In den Elementor-Einstellungen können Sie Widgets deaktivieren, die Sie nicht nutzen. Jedes aktive Widget lädt sein CSS und JS, ob Sie es verwenden oder nicht.
Ein Caching-Plugin verwenden. WP Super Cache, W3 Total Cache oder LiteSpeed Cache (wenn Ihr Hosting es unterstützt). Caching reduziert die Serverlast dramatisch und beschleunigt wiederholte Besuche.
Plugins generell minimieren. Jedes aktive Plugin bringt Gewicht. Überprüfen Sie Ihre Plugin-Liste regelmäßig und deaktivieren Sie alles, was Sie nicht aktiv brauchen.
Diese Gewohnheiten summieren sich zu Ihren Core Web Vitals, den Lade- und Stabilitätswerten, die Google inzwischen beim Ranking berücksichtigt. Eine schnelle Elementor-Seite ist absolut möglich, sie erfordert nur Disziplin. Für mehr zur Website-Beschleunigung deckt unser Leitfaden zur Geschwindigkeitsoptimierung die Details ab.
Wenn Sie Elementor entwachsen
Elementor ist ein großartiger Startpunkt. Ernsthaft. Es ermöglicht Nicht-Entwicklern, echte Websites zu bauen und herauszufinden, was für ihr Unternehmen funktioniert.
Aber es gibt eine Obergrenze. Wenn Ihre Website bessere Performance, einzigartige Interaktionen oder weniger Abhängigkeiten braucht, wird individuelle Entwicklung der logische nächste Schritt. WordPress selbst ist ein solides Fundament, das mit oder ohne Page-Builder funktioniert.
Das Muster, das wir häufig sehen: Ein Unternehmen startet mit Elementor, findet heraus, was seine Website leisten muss, und investiert dann in einen individuellen Build, der speziell für diese Anforderungen gestaltet ist. Das ist kein Scheitern. Das ist kluges Wachstum.
Elementor gibt Ihnen einen soliden Start. Wenn Sie die Grenzen eines Page-Builders erreichen, baut unser Webdesign-Team individuelle Websites, die mit Ihrem Unternehmen wachsen.
