Elementor: Der ultimative Guide für den WordPress Page Builder 2024

Elementor gehört zu den beliebtesten Page-Buildern für WordPress. Mit über 5+ Millionen aktiven Installationen gehört das Plugin mittlerweile zum Standardwerkzeug vieler Webdesigern und WordPress Experten. Dabei liegt der Erfolg von Elementor mit seinem einfachen Drag & Drop-Builder klar auf der Hand. Denn dieser macht es Webdesigner aber auch WordPress Neulingen schnell und einfach möglich WordPress Webseiten in kürzester Zeit zu erstellen. Ganz ohne CSS, HTML oder sonstige Programmierkenntnisse. In diesem Guide möchten wir dir einen vollständigen Überblick zu den Funktionalitäten und Vorteilen des beliebten Page-Builders geben.

Was ist Elementor?

Einfach ausgedrückt, ist Elementor ein Page-Builder. Technisch gesehen handelt es sich dabei um ein WordPress-Plugin, was den Vorteil hat, dass du Elementor mit den meisten WordPress-Themes verwenden kannst.

Mit dem einfachen visuellen Drag-and-drop Page Builder kannst du ganz ohne Programmierkenntnisse atemberaubende Websites in kürzester Zeit erstellen. Insbesondere für WordPress Neulinge ist Elementor somit der vermutlich beste Start, um eine Website zu erstellen. Aber auch erfahrene Webdesigner kommen auf Ihre Kosten. Denn das Plugin schafft es mit seiner vollständigen und durch einen selbst erweiterbaren Vorlagenbibliothek die internen Design-Prozesse von Webdesignern und Agenturen stark zu verbessern.

Vorteile von Elementor

Zwei der wohl wichtigsten Vorteile haben wir bereits genannt. Das WordPress-Plugin hat jedoch noch viel mehr zu bieten:

• Einfache Bedienung ohne Programmierkenntnisse – Wie bereits erwähnt macht der visuelle Page Builder das erstellen und Bearbeiten von WordPress Webseiten, selbst für Neulinge, extrem einfach. Mit den vorgefertigten Widgets kannst du deine WordPress Website in kürzester Zeit aufbauen und deinen ganz persönlichen Touch geben.
• Globale Elemente und Vorlagenbibliothek – Insbesondere WordPress Experten und Agenturen profitieren von globalen Elementen und einer erweiterbaren Vorlagenbibliothek, welche die Produktivität sowie die internen Prozesse standardisieren und vereinfachen.
• Nahezu unendlich viele Styling-Möglichkeiten – Du bist völlig frei in der Gestaltung deiner Website. Änderungen des Designs kannst du im visuellen Editor sofort sehen. Experten können zusätzlich eigene CSS verwenden.
• WooCommerce Kompatibilität – Mit dem kostenfreien WordPress-Plugin WooCommerce kannst du in wenigen Schritten einen vollwertigen Online-Shop aus deiner WordPress Website machen. Elementor ist zu 100 % kompatibel mit WooCommerce und unterstützt dich bei der Erstellung und dem Design deines Shops.
• Erweiterbarkeit – Dank der großen Elementor-Community kannst du Elementor, um viele nützliche Online Marketing-, Design- oder Funktions-Tools erweitern. So bleiben keine Wünsche mehr offen!
• Template Vorlagen – Mit den mitgelieferten Template Vorlagen erstellst du komplette Websites in wenigen Minuten. Wähle einfach ein Design, dass dir gefällt, importiere dieses, mache ein paar Anpassungen und schon kann deine Website online gehen!

Was kostet Elementor und was ist Elementor Pro?

Grundsätzlich ist das Plugin kostenfrei und bietet dir in der Basis-Variante bereits alle wichtigen Features, um eine vollwertige Website zu gestalten. Neben der kostenlosen Basis-Variante, kannst du zusätzlich die Pro-Variante erwerben. Mit der Pro-Variante erhältst du Zugriff auf viele weitere nützliche Widgets, die dir das Arbeiten an deiner WordPress Website, deutlich erleichtern. Zusätzlich erhältst du Zugriff auf den Premium Support, wenn du mal nicht weiter weißt.

Für eine Website zahlst du 49 Dollar pro Jahr. Als Agentur und Webdesigner empfehlen wir dir die Tarife ab 99 Dollar pro Jahr. Hier* erhältst du satte Mengen-Rabatte, je mehr Webseiten du für deine Kunden und Projekte erstellst. Das Schöne an den Tarifen: Du kannst mit dem kleinsten Paket beginnen und mit steigenden Anforderungen und Kundenanzahl flexibel upgraden. Beim Upgrade zahlst du nur die Differenz des ursprünglichen Paketes.

Überblick zu den Elementor Funktionen

Drag-and-Drop Page-Builder im Überblick

Der Drag-and-Drop Page-Builder ist das Herzstück des Plugins. Damit kannst du Websites nach Baukastenprinzip aufbauen. Wähle einfach dein gewünschtes Modul, ziehe dieses an die gewünschte Stelle auf deiner Website und gestalte es frei nach deinen Wünschen. Der wohl größte Vorteil ist jedoch, dass du sogar Unterspalten in Spalten hinzufügen kannst:

Besonders gefällt uns an den Modulen, dass die Einstellmöglichkeiten der einzelnen Module immer in drei gleiche Kategorien unterteilt sind. Unter Inhalt kannst du deinen Content pflegen, formatieren und Zusatzfunktionen konfigurieren. In der Kategorie Stil stellst du den allgemeinen Look & Feel des Moduls ein. Im Reiter „Erweitert“ kannst du alles Weitere einstellen, was man sonst mühselig mittels CSS einstellen müsste. Dazu gehören zum Beispiel: Margins, Paddings oder Animationen. Für alle Experten gibt es hier außerdem den Punkt Eigenes CSS, womit du das Modul zusätzlich stylen kannst.

Theme-Builder im Überblick

Mit dem Theme-Builder spielt Elementor einen seiner größten Vorteile aus. Damit ist es nämlich möglich, ein schlankes Theme wie beispielsweise Hello Theme zu verwenden und gleichzeitig alle Vorteile eines vollwertigen Themes zu haben.

Mit dem Theme-Builder baust du Vorlagen für Blog-Beiträge, Landingpages, Produktseiten oder Header & Footer. Einmal konfiguriert, lassen sich diese Vorlagen beliebig oft verwenden. Du baust dir quasi dein eigenes Theme und das ohne jemals eine einzige Zeile Code zu schreiben zu müssen. Wenn du beispielsweise einen neuen Blogbeitrag schreibst, musst du dir, sofern du das Template korrekt konfiguriert hast, nie wieder Gedanken um das Styling deiner Beiträge machen.

Elementor Tutorial: So installierst und konfigurierst du Elementor richtig

Elementor installieren

Um Elementor installieren zu können, benötigst du zunächst ein WordPress Hosting, mit einer Domain. Wenn du noch kein WordPress Hosting hast, empfehle ich dir den unabhängigen Vergleich: WordPress Hosting Vergleich 2022: Die besten WordPress Hoster von kopfundstift.de, um den perfekten WordPress Hoster für deine Anforderungen zu finden.

Des Weiteren musst du WordPress installieren. Anschließend kannst du über das WordPress Dashboard > Plugins > Installieren „Elementor“ in der Suchzeile eingeben und kostenlos installieren.

Sofern du die Pro-Variante gekauft hast und diese ebenfalls installieren möchtest, muss du die ZIP-Datei im Dashboard unter elementor.com herunterladen und in deinem WordPress Dashboard unter Plugins > Plugin installieren > Plugin hochladen, hochladen und aktivieren. Damit das Plugin funktioniert, muss die Pro- als auch die Free-Variante aktiv sein.

Je nachdem welches Theme du verwendest, musst du eventuell kleinere Anpassungen am Theme oder den jeweiligen Unterseiten vornehmen, damit deine Website weiterhin korrekt dargestellt wird. Sofern es sich um eine neue WordPress Website handelt, empfehlen wir dir das Hello Theme, welches du ebenfalls über dein WordPress Dashboard > Design > Theme hinzufügen installieren kannst.

👉 Pro Tipp: Bei WPspace ist WordPress und Elementor bereits vorinstalliert. Und das bereits im kostenlosen Tarif! Einfach registrieren und jetzt kostenfrei Elementor testen!

Elementor einrichten und nutzen

Nun nachdem du den Page-Builder installiert und ein Theme gewählt hast, kannst du damit beginnen deine erste Website mit dem neuen Page-Builder zu erstellen. Dafür hast du mehrere Möglichkeiten:

1. Möglichkeit: Starte mit einem Template aus der Kit Library

Über die Kit Library kannst du aus über 100 vorgefertigten Templates den perfekten Stil für deine Website aussuchen. Dabei kannst du aus über 19 Kategorien, wie zum Beispiel Beauty, Business & Dienstleistung, Gesundheit & Fitness, dein Wunschdesign auswählen. Anschließend musst du nur noch deinen Content hinzufügen, Anpassungen am Layout vornehmen und letzten Endes das Design nach deinen Wünschen gestalten. Schon kann deine neue Website online gehen.

In folgendem Video wird erklärt, wie du die Kit Library richtig verwenden kannst:

Wichtig: Mit dieser Variante wird das komplette Design deiner Website überschrieben. Deshalb empfiehlt sich diese Methode zunächst nur in Testumgebungen oder für neue Webseiten.

2. Möglichkeit: Starte in Blöcken

Über Templates > Gespeicherte Templates im WordPress Dashboard kannst du einzelne Blöcke / Designelemente erstellen, die du beispielsweise mittels Shortcode einzeln auf der Website hinzufügen kannst. Diese Methode eignet sich am besten für eine Hybride-Umstellung des Website-Designs. Beispielsweise kannst du so über die Templates zunächst nur einen neuen Header erstellen und auf der Website hinzufügen. Anschließend kannst du deine bestehende Website, nach und nach mit neuen Blöcken erweitern bis deine Website vollständig mit Elementor umgesetzt ist. Diese Methode ist aus SEO-Sicht die freundlichste, da du so sicherstellen kannst, dass die Linkbaumstruktur identisch bleibt.

Außerdem kannst du für Templates Regeln definieren. So kannst du zum Beispiel Regel festlegen, welches Template verwendet werden soll, wenn du den WordPress Wartungsmodus deaktivieren oder aktivieren möchtest.

3. Möglichkeit: Starte von vorne

Wenn du deine Website komplett neu aufbauen und deiner Kreativität freien Lauf lassen möchtest, kannst du deine Website auch komplett ohne Templates aufbauen. Hierzu erstellst du im WordPress Dashboard über Seiten > Erstellen eine neue Seite. Anschließend klickst du auf Mit Elementor bearbeiten. Schon kannst du mit dem intuitiven Elementor Page Builder loslegen.

Die besten Elementor Themes

Mittlerweile sind die meisten bekannten WordPress-Themes mit Elementor kompatibel. Bevor du dich jedoch für ein Theme entscheidest, solltest du dennoch in den Angaben des Entwicklers prüfen, ob dein Wunschtheme zu 100 % mit Elementor nutzbar ist.

Grundsätzlich können wir dir für die meisten Anwendungsfälle das Hello Theme empfehlen. Das Hello Theme wird direkt von Elementor entwickelt, ist kostenfrei, garantiert dir schnelle Ladezeiten und bietet dir die größte Kompatibilität mit Elementor. Das Theme wurde mit dem Gedanken entwickelt, dir genug Freiraum für deine eigene Kreativität zu bieten. Deshalb kommt das Theme auch mit relativ wenig vorkonfigurierten Gestaltungselementen. Du fängst also mit einer blanken Seite an und kannst nach Lust und Laune gestalten. Leider eignet sich das Hello Theme jedoch am besten für Nutzer von Elementor Pro, da es mit dem Theme Builder am leichtesten anpassbar ist. Nutzer Free Version müssen hingegen auf Premium Themes mit voreingestellten Design-Features zurückgreifen.

Wir zeigen dir die unserer Meinung nach drei besten Elementor Themes:

1. GeneratePress

Wir von WPspace lieben schnell ladene Websites, deshalb kann es für uns nur ein Theme auf Platz 1 schaffen. GeneratePress gibt es in einer kostenfreien und einer kostenpflichtigen Pro-Version. Beide Versionen zeichnen sich durch ihre unglaubliche Schnelligkeit aus. Der Code ist schlank und unnötige Features wurden schlichtweg weggelassen. In unserem Test kam eine leere GeneratePress Seite auf gerade einmal 29 KB!

Neben dem schlanken Code und den schnellen Ladezeiten bietet dir GeneratePress jedoch noch viel mehr. Über die Site Library hast du Zugriff auf eine Vielzahl vorgefertigten Designs, die dir bei der Umsetzung neuer Projekte viel Zeit ersparen. Außerdem bieten dir die zahlreichen Premium-Module viele nützliche Design-Elemente, die du mit Elementor nutzen kannst, um ohne Vorwissen deine Website, ganz nach deinen Vorstellungen zu erstellen.

Zusätzlich ist die Community mit über 300.000 aktiven Installationen verglichen groß. Das spiegelt sich auch im Support wider.

Vorteile von GeneratePress im Überblick:

• Extrem schlanker Code
• Schnelle Ladezeiten
• Leichte Bedienbarkeit
• Sehr gute Support
• Große Community
• Große Bibliothek mit vielen Designvorlagen
• Viele Elementor Premium Module, die dir das Webdesign deutlich vereinfachen

2. Astra Theme

Das Astra Theme ist den meisten „WordPressern“ bereits ein Begriff. Auch das Astra Theme ist mit fast 39 KB vergleichbar schlank und lädt sehr schnell! Besonders gefällt uns an Astra Pro, dass es viele Premium-Module bietet, die normalerweise nur in der Elementor Pro Version vorhanden sind. Aus unserer Sicht also das perfekte Theme, wenn du dir die jährliche Elementor Pro Gebühr sparen möchtest.

Auch das Astra Theme gibt es in einer kostenfreien und Premium Variante. Unserer Meinung nach bietet aber auch schon die kostenfreie Variante einen sehr großen Funktionsumfang.

Vorteile von Astra im Überblick:

• Schlanker Code und schnelle Ladezeiten
• Großer Funktionsumfang in der kostenlosen Variante
• Ideale Ergänzug zu Elementor Free

3. Page Builder Framework

Anders als die zuvor vorgestellten Themes wurde das Page Builder Framework speziell für die Nutzung mit einem Page-Builder wie zum Beispiel Elementor entwickelt. Ähnlich wie auch das Hello Theme punktet hier das Page Builder Framework also auch mit maximaler Flexibilität und schnellen Ladezeiten.

Zudem ist das Theme besonders für Europäer interessant. Die Entwickler werben mit einer 100-prozentigen DSGVO-Konformität.

Die Premium-Variante vom Page Builder Framwork ist insbesondere für Agenturen interessant. Denn damit lassen sich die Funktionen Swift Control Pro und Ultimate Dashboar Pro nutzen. Diese machen das Theme nämlich Multisite-Kompatibel, was du zu deinem Vorteil nutzen kannst, um gleich mehrere Kunden Websites mit einer WordPress Instanz zu erstellen.

Vorteile vom Page Builder Framework Theme im Überblick:

• Schnelle Ladezeiten
• Speziell für Page-Builder wie Elementor entwickelt (Maximal Kompatibilität)
• 100 % DSGVO-Konform
• Multisite-Support
• Ideal für Agenturen geeignet

Elementor Performance: Wie schnell lädt eine Website, erstellt mit Elementor?

Ursprünglich wurde WordPress als es vor vielen Jahren entstand, nie für den Einsatz mit Page Builder entwickelt. Zwar ist es heute normal einen Page-Builder mit WordPress zu verwenden, aber dennoch lässt sich die Verwendung vieler Page-Builder noch heute in einer verschlechterten Performance der Ladegeschwindigkeit spüren. Deshalb müssen wir in diesem Abschnitt über die Performance sprechen.

Unsere Testumgebung

Wir möchten transparent mit den Testergebnissen umgehen. Deshalb möchten wir kurz auf die Testumgebung eingehen. Für den Test verwenden wir das WordPress Hosting von WPspace. Außerdem verwenden wir das Hello Theme sowie das Premium Caching Plugin WP Rocket. Getestet haben wir die Website https://wp-space.de, die ebenfalls mit Elementor erstellt wurde, um ein realitätsnahes Ergebnis zu erzielen. Als Teststandort haben wir Frankfurt gewählt, da die Server von WPspace in Deutschland liegen.

Testergebnis

Eines vorneweg. Elementor gehört zu den schnellsten Page Buildern auf dem Markt. Das können auch unsere Testergebnisse belegen:

Die komplette Website lädt in sage und schreibe 723ms. Der Besucher sieht nur 478ms eine weiße Website. Besonders erwähnenswert ist die TTFB, die bei nur 36ms liegt. Zwar bezieht sich die TTFB größtenteils auf die Antwortzeit des Servers und erfordert somit auf ein starkes WordPress Hosting. Dennoch ist der Backend-Teil mit nur 12ms extrem kurz. Das spricht definitiv für eine schlanke Codebasis des Themes als auch von Elementor.

Immer wichtiger werden außerdem die Web Vitals. Insbesondere, wenn deine Website über Suchmaschinen wie Google gefunden werden soll. Diese liegen auch hier komplett im grünen Bereich. Besonders erwähnenswert ist der Cumulative Layout Shift (CLS). Die CLS ist bei den meisten Page-Buildern wie zum Beispiel Divi ein großes Problem. Hier haben die Entwickler von Elementor ganze Arbeit geleistet! Dies ist insbesondere auf die Performance Features, die Elementor gleich mitliefert, zurückzuführen:

• Schlanker Code
• Es wird nur Code geladen, der auch wirklich für die Darstellung der Website benötigt wird
• JavaScript und CSS Dateien werden minifiziert und optimiert,
• Optimierte DOM Ausgabe

Die Frontendladezeit ist also super. Aber wie schaut es denn im Backend aus? An sich lädt das Backend extrem schnell. Dennoch können wir insbesondere auf sehr großen Webseiten feststellen, dass die Bedienung ab einer gewissen Größe hakelig wird. Wirklich störend ist es auf neueren PCs und Notebooks nicht, da hier nicht wie eventuell vermutet der Server nicht hinterherkommt, sondern eher die CPU des eigenen PCs. Insofern kann die Bedienung auf schwachen PC etwas ermüdender sein. Dennoch hatten wir zu keinem Zeitpunkt so gravierende Schwierigkeiten, dass ein Editieren gar nicht möglich war.

Dass ein Page-Builder mit sehr großen Websites die CPU des eigenen PCs in die Knie zwingt, ist aber ein generelles Problem der Page-Builder unter WordPress. Die schlimmsten Erfahrungen haben wir tatsächlich mit Divi in unseren Tests gemacht.

👉 Mehr Informationen: WordPress PageSpeed verbessern
💡Außerdem interessant: Google Ranking verbessern: PageSpeed als Keyfaktor

Unsere empfohlenen Elementor AddOns

Elementor lässt sich um viele tolle Funktionen erweitern. So kannst du noch mehr aus deiner WordPress Webseite holen. Wir empfehlen dir drei AddOns dir wir selbst gerne verwenden:

Toolkit for Elementor

Nicht nur wir, sondern auch die Entwickler von Elementor empfehlen das AddOn Toolkit for Elementor. Den größten Nutzen ziehst du aus dem AddOn, wenn du keine anderen Cachingplugins wie WP Rocket verwendest. Denn das Toolkit bietet dir eine breite Palette an Performance-Optimierungsfunktionen. Tatsächlich konnten wir in unseren Test jedoch keine nennenswerten Verbesserungen feststellen, wenn zusätzlich WP Rocket installiert war.

ElementsKit (Pro)

ElementsKit gibt es in der Lite- und Pro-Variante und erweitert Elementor um bis zu 85 neue Module. Einziger Nachteil: In unseren Test haben wir festgestellt, dass auch nicht genutzte Elemente immer geladen werden. Dies kann sich negativ auf die Ladezeit auswirken.

Prime Slider von BdThemes

Sowohl die Free als auch die Pro-Variante von Elementor bieten dir nur begrenzte Möglichkeiten für die Konfiguration von Slidern. Prime Slider von BdThemes ändert das.

Mit diesem AddOn kannst du basierend auf Vorlagen den Slider-Funktionsumfang enorm vergrößern. Einfach eine Vorlage auswählen, Content einfügen, nach deinen Wünschen gestalten und live schalten!

Auch Prime Slider erhältst du in einer kostenfreien und einer stark erweiterten Pro-Variante.

Unser Fazit zum Elementor Page Builder

Unserer Meinung nach ist Elementor das ultimative Plugin für WordPress Beginner und Experten. Der Umfang des Page-Builders ist massiv, sodass du getrost auf viele Plugins, die sonst nötig wären, verzichten kannst. Das sorgt nicht nur für Ordnung im WordPress Backend, sondern sichert dir auch superschnelle Ladezeiten. Aus diesen Gründen haben auch wir uns dazu entschlossen, unsere Websites ausschließlich mit Elementor zu betreiben. Wir können den Page-Builder uneingeschränkt empfehlen.

Jetzt interessiert uns aber deine Meinung. Teste Elementor komplett kostenfrei mit dem kostenlosen WordPress Hosting von WPspace. Bei WPspace erhältst du kostenloses Premium WordPress Hosting. Dabei ist Elementor und das Premium Cache Plugin für dich vorinstalliert. Schreib uns deine Meinung in die Kommentare!