Elementor Logo

Elementor & Co: WordPress Page Builder einfach erklärt

Elementor ist einer der bekanntesten und benutzerfreundlichsten Page Builder für WordPress.  Damit lassen sich Seiten relativ einfach und vor allem schnell strukturieren, verändern und updaten. Ein Page Builder besteht aus fertigen Elementen / Widgets, die per Drag&Drop eingefügt und angepasst werden können.

 

Was ist eigentlich ein Page Builder? Mit einem Page Builder werden Layouts erstellt, Seiten-Abschnitte und Spalten hinzugefügt und bearbeitet, Texte, Bilder und andere Elemente eingefügt, Designs angepasst, Vorlagen erstellt und vieles mehr. Dies geschieht üblicherweise mittels CSS-Definitionen, die das Design der Website bestimmen. CSS steht für Cascading Style Sheets. Ein Page Builder wie Elementor stellt quasi eine leicht bedienbare Benutzeroberfläche für CSS zur Verfügung. 

Daher wird Elementor auch von Webdesign Agenturen häufig eingesetzt, damit Kund:innen ihre Website nach Fertigstellung auch ohne Kenntnis von Programmiersprachen eigenständig bearbeiten und erweitern können. Für Entwickler:innen bietet Elementor den Vorteil, daß die Arbeit an der Website beschleunigt wird und strukturelle Änderungen teilweise schneller umgesetzt werden können. Auch dieser Blog-Beitrag wurde mit Elementor gestaltet.

Neben Elementor existieren viele andere weit verbreitete Page Builder, wie WPBakery, Beaver Builder, Divi, Thrive etc. Manche Premium Themes haben ebenfalls eigene Page Builder integriert. Warum also habe ich mich für Elementor entschieden? Elementor bietet einfach einen guten Mix aus Userfreundlichkeit und Funktionalität:

  • Frontend Drag&Drop Editor:  Elemente werden direkt aus dem Elementor-Tool auf die Seite gezogen und können direkt bearbeitet werden. Das beschleunigt den Workflow, da in den meisten Fällen keine Vorschau benötigt wird, sondern das Ergebnis unmittelbar sichtbar ist.
  • intuitiv benutzbar: Wer schon einmal mit einem Block-Editor oder einem anderen Page Builder gearbeitet hat, kann die Grundfunktionen von Elementor auch ohne Tutorial intuitiv nutzen. In diesem Punkt unterscheidet sich Elementor sehr positiv von vielen anderen Page Buildern, die nicht immer selbsterklärend sind.
  • Struktur: Der Elementor-Editor besteht aus mehreren Ebenen: Die wichtigsten sind Website-Einstellungen (Globale Design-Definitionen, Layouts), Widgets, Widget-Editor (Inhalt, Stil und Erweitert) und SEO. Diese sind für den großen Funktionsumfang recht übersichtlich und intuitiv angeordnet.
  • Design-Optionen: Elementor bietet eine Vielzahl an Design-Optionen bis hin zu Animationen. Die meisten Designs sind per se responsive, das heißt, sie werden auf allen Endgeräten korrekt angepasst und die Vorschau kann gleich über Elementor angezeigt werden. Das erspart viel Zeit. Nur in einigen Fällen muss manuell (in CSS) nachbearbeitet werden.
  • Templates: In der Pro-Version stellt Elementor zahlreiche thematische Templates zur Verfügung. Dies finde ich weniger interessant, allerdings nutze ich die Möglichkeit, eigene Templates zu erstellen. So können einmal gestaltete Element-Blöcke und Abschnitte an jeder beliebigen Stelle der Website eingefügt und dort weiterbearbeitet werden.

Nun stelle ich dir einige Basis-Widgets vor.

Elementor-Widgets

Eine Übersicht über alle Elementor-Widgets findest du auf der Elementor-Website unter https://elementor.com/widgets/

Elementor Basic Widgets

Neben den Basis-Widgets sind über Elementor Pro zahlreiche weitere Bausteine und auch eigene WooCommerce-Widgets abrufbar. Hier aber erst einmal eine Kurzbeschreibung der grundlegenden Elemente: 

Innerer Abschnitt

Elementor: Innerer Abschnitt
Elementor: Innerer Abschnitt

Der Innere Abschnitt / Inner Section ist das grundlegende Strukturprinzip in Elementor. Wird das Widget per Drag&Drop in den Editor gezogen, werden zunächst einmal 2 Spalten angelegt. Diese Spalten können dann bearbeitet werden, z.B. indem die Spaltenbreite verändert wird, Spalten hinzugefügt oder gelöscht werden oder weitere Widgets wie z.B. Überschriften, Text oder Bilder in die Spalten eingefügt werden. Der Abschnitt ist responsive, sodass zum Beispiel in der Desktop-Ansicht zwei Spalten nebeneinander angezeigt werden, in der Mobile-Ansicht aber die beiden Spalten untereinander zu sehen sind.

Außerdem können die Abschnitte per Klick mit der rechten Maustaste dupliziert, als Template gespeichert und an jede beliebige Stelle der Seite verschoben werden.

Überschrift

Elementor: Überschrift

Gib hier deine Überschrift ein

Das Widget Überschrift enthält gleich einige Formatierungen wie Abstände (Margins) und Schriftgrößen. Per HTML-Tag kann die Überschriften-Hierarchie (H1-H6) einfach angepasst werden.

Text-Editor

Elementor: Text-Editor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Der Text-Editor besteht aus 3 Ebenen: Inhalt, Stil und Erweitert. Unter „Inhalt“ befindet sich der gewohnte visuelle Editor, unter „Stil“ können Schriftarten, Textfarbe, Bildgrößen etc. bearbeitet werden und „Erweitert“ ermöglicht die Einstellung von Abständen (Margin, Padding) und weiterer Stilelemente wie Rahmen etc.

Bild

Elementor: Bild

Der Bild-Editor besteht ebenfalls aus den 3 Ebenen Inhalt, Stil und Erweitert. Unter „Inhalt“ kann das Bild eingefügt, verändert und gelöscht werden und außerdem die Bildgröße festgelegt und Bildunterschriften hinzugefügt werden, unter „Stil“ und „Erweitert“ werden weitere Anpassungen wie Rahmen, Abstände, Hintergründe etc. definiert. 

Video

Elementor: Video

Der Video-Editor ermöglicht das Einfügen von YouTube-, Vimeo- und Dailymotion-Videos per einfachem Embed-Link. Zahlreiche Zusatzoptionen wie zum Beispiel Lazy Load machen das Einbinden von Videos zu einem Kinderspiel.

Button

Elementor: Button

Der Button-Editor ist besonders zeitsparend, da das Styling von Buttons meist relativ viel CSS erfordert. Elementor bietet hier sehr viele Optionen an, um Buttons ansprechend zu gestalten: Hintergrundfarben, Rahmen-Designs, Eckenradius, Verlinkung, Veränderungen bei Klick oder Mouseover (Hover), Animationen und vieles mehr.

Elementor Pro


Elementor Pro bietet zusätzliche Widgets wie zum Beispiel das Menü-Modul „Nav Menu“, Galerie, Sliders und Carousels an. Diese Seiten-Elemente erfordern oft umfangreichen Programmieraufwand und sind hier im Pro-Paket von Elementor um wohlfeile USD 59/Jahr schon inkludiert. Andererseits sind viele dieser Widgets auch in Free Plugins von Drittanbietern wie ElementsKit oder Premium Addons for Elementor enthalten. Hier ein Überblick über die Original Elementor Pro-Widgets:

Elementor Pro Widgets

Meiner Meinung nach zahlt sich die Investition in Elementor Pro vor allem dann aus, wenn du umfangreiche Sliders oder Carousels einbauen möchtest, für deinen Online-Shop WooCommerce-Widgets benötigst bzw. wenn du weitere Funktionen der Pro-Version wie den Elementor Theme Builder nutzen möchtest.

Fazit

Der Page Builder Elementor ist bereits auf über 5 Mio. WordPress-Websites weltweit installiert. Über 90 Basis- und Pro-Widgets erleichtern und beschleunigen den Website-Entwicklungsprozess. Auch die meisten WordPress-Agenturen arbeiten inzwischen mit Elementor, um ihren Kund:innen eine leicht bedienbare Website liefern zu können.

ADAWEB ist als WordPress-Agentur auf die technische und kreative Umsetzung individueller Websites spezialisiert. Informiere dich unverbindlich über unsere Leistungen und Preise.

Wir freuen uns auf deine Anfrage.

Über die Autorin*