Elementor ist ein visueller Page-Builder für WordPress, der das Erstellen und Gestalten von Seiten per Drag-and-Drop direkt im Browser ermöglicht, ohne dass Programmierkenntnisse notwendig sind.
Was bedeutet das?
Page-Builder wie Elementor ergänzen oder ersetzen den Standard-Editor von WordPress durch eine eigene Oberfläche, die das Layout und die Gestaltung von Seiten visuell und in Echtzeit zugänglich macht. Elementor wurde 2016 als WordPress-Plugin veröffentlicht und gehört heute zu den meistinstallierten Plugins im WordPress-Plugin-Verzeichnis. Das Plugin teilt jede Seite in Sektionen, Spalten und Widgets auf. Sektionen bilden den äußeren Rahmen, Spalten unterteilen diese Sektionen horizontal, und Widgets füllen die Spalten mit konkretem Inhalt: Text, Bilder, Schaltflächen, Formulare, Galerien, Slider, Karten und viele weitere Elemente.
Elementor unterscheidet zwischen einer kostenlosen Version (Elementor Free) und einer kostenpflichtigen Erweiterung (Elementor Pro). Die freie Version enthält grundlegende Widgets und Layoutfunktionen. Elementor Pro fügt unter anderem Theme-Builder, dynamische Inhalte, Formulare, WooCommerce-Widgets und Popup-Builder hinzu. Der Theme-Builder erlaubt es, alle Teile eines WordPress-Themes, also Header, Footer, Beitragsvorlagen, Archivseiten und 404-Seiten, direkt in Elementor zu gestalten, ohne den Theme-Code anfassen zu müssen.
Technisch fügt Elementor eigene CSS-Klassen, Inline-Styles und JSON-Daten in die Datenbank ein. Das gespeicherte Layout wird beim Seitenaufruf in HTML und CSS umgewandelt und an den Browser ausgeliefert. Weil Elementor dabei eigene Markup-Strukturen verwendet, können Seiten nicht ohne Weiteres in ein anderes Plugin-System oder in den Standard-Block-Editor übernommen werden.
Beispiel aus der Praxis
Sie betreiben eine WordPress-Website für eine Werbeagentur und möchten eine neue Landingpage für ein Kundenprojekt erstellen. Im WordPress-Backend legen Sie eine neue Seite an und klicken auf „Mit Elementor bearbeiten“. Elementor öffnet seine eigene Oberfläche: Links befindet sich die Widget-Leiste, rechts die Vorschau der Seite. Sie ziehen einen Abschnitt mit zwei Spalten auf die Seite, fügen links einen Überschriften-Widget und einen Text-Widget ein, rechts einen Bild-Widget. Über das Styling-Panel passen Sie Schriftgröße, Farbe und Abstand an. Nach dem Speichern können Sie die Seite sofort im Browser aufrufen und das Ergebnis überprüfen, ohne eine einzige Zeile Code geschrieben zu haben.
Warnung
Elementor erzeugt bei umfangreichem Einsatz eine hohe Anzahl an CSS-Regeln und HTTP-Anfragen, was die Ladezeit der Website messbar beeinflussen kann. Wer Performance-Optimierung betreibt, sollte die Elementor-Einstellungen prüfen: Unter „Elementor > Einstellungen > Experimentell“ lassen sich CSS-Druckmethode (External File statt Internal Embedding) und weiterer Code-Overhead steuern. Darüber hinaus erschwert eine starke Bindung an Elementor den späteren Wechsel zu einem anderen Page-Builder oder zum Block-Editor erheblich, weil der Inhalt als Elementor-Metadaten in der Datenbank liegt und ohne Konvertierungstool nicht portierbar ist.