Mit dem WordPress Page Builder Elementor kannst du großartige Designs und Layouts schnell und einfach umsetzen. Bereits die kostenlose Variante bietet wirklich extrem viel.
In der Pro-Version (Elementor Pro) ist sogar ein eigener Theme-Builder integriert.
Ich persönlich nutze Elementor Pro auf all meinen WordPress Webseiten (und natürlich basiert auch diese Seite auf Elementor).
In diesem Beitrag zeige ich dir:
- Was Elementor kann und wie der Page Builder funktioniert
- Welche Vorteile die Pro-Version gegenüber der kostenlosen Version bietet
- Welche Elemente und Features integriert sind
- Welche Themes am besten mit Elementor funktionieren
- Wie du durch Vorlagen (Blöcke und Templates) deinen Workflow beschleunigst
- Wie du eigene Vorlagen erstellen und immer wieder verwenden kannst.
- Wo du kostenlose (Premium-) Templates und Vorlagen für Elementor bekommst
- Wie gut die Performance ist
- Welche Auswirkungen der Page Builder auf SEO hat
Was ist Elementor und Elementor Pro?
Elementor ist ein kostenloser Page Builder für WordPress. Damit kannst du Seiten und Beiträge deiner WordPress-Webseite einfach mittels einem Drag & Drop Editor erstellen. Nahezu jedes Design lässt sich somit (relativ einfach und schnell) mit Elementor umsetzen. Außerdem bist du nicht auf die Optik und das Design deines Themes beschränkt.
Apropos Theme: Elementor ist mit fast jedem WordPress-Theme kompatibel, darauf gehe ich weiter unten im Beitrag aber noch genauer ein.
Folgendes Video demonstriert in 5 Minuten, wie du mit Elementor schnell und einfach eine optisch wirklich gelungene Seite erstellst (die Hintergrundmusik des Videos ist auch sehr angenehm):
Elementor Pro mit integrierten Theme-Builder
Vom Page-Builder zum Theme-Builder. Elementor Pro ist ein kostenpflichtiges Upgrade und bietet nochmals deutlich mehr Features als die kostenlose Version von Elementor.
In der Pro-Version ist es unter anderem auch möglich, die Header- und Footer Bereiche vollständig mit Elementor zu erstellen und zu stylen. Außerdem können Templates für Archive, Blog-, 404-Seiten etc. erstellt werden.
Somit ist man überhaupt nicht mehr an das Layout des Themes gebunden und kann quasi sein eigenes Theme-Layout auf Elementor-Basis erstellen.
Mehr dazu erfahren:
Eigenes WordPress Theme mit dem Elementor Theme Builder erstellen
Aber Elementor Pro bietet noch deutlich mehr Features.
Einige Features von Elementor Pro:
- Theme-Builder
- Pro-Templates
- Kontaktformular-Builder (inkl. Multistep-Form)
- Pop-Up Builder
- Woocommerce-Styling
- Scrolling-Effekte
- Slider-Builder
- Scrolling-Effekte
- uvm.
Auf die Highlights der Pro-Version gehe ich in diesem Beitrag noch genauer ein.
Wie funktioniert Elementor?
Elementor ist ein Drag & Drop Page Builder. Eine Seite kann quasi „live“ von dir erstellt werden und du siehst die Ergebnisse sofort. Dabei basiert Elementor auf einzelne Elemente bzw. Widgets, die du einfach per Drag & Drop an die gewünschte Stelle ziehst (eine Übersicht wichtiger Elemente zeige ich dir im nächsten Kapitel).
Starten kannst du den Page Builder übrigens auch direkt aus dem WordPress Editor. Du kannst also einfach eine neue Seite erstellen, und dann im (Gutenberg-) Editor auf den Button Mit Elementor bearbeiten klicken.
Layout in Abschnitte und Spalten organisieren
Du kannst eine Seite in verschieden Abschnitte (Sections) unterteilen. Die Abschnitte selbst lassen sich wiederum in Spalten (Columns) unterteilen. In das von dir erstellte Layout kannst du dann die einzelnen Elemente einfach hineinziehen und bearbeiten.
Für noch komplexere Layouts besteht die Möglichkeit, innere Abschnitte in Spalten zu positionieren, welche dann wiederum in Spalten unterteilt werden können.
In diesem Video von meinem YouTube-Kanal zeige ich dir, wie du ein Layout / Design mit Elementor umsetzen kannst:
Alles kann mit wenigen Klicks angepasst werden
Die Abschnitte, Spalten und auch die einzelnen Elemente – einfach alles kann in Elementor individuell und einfach angepasst werden.
Zum Beispiel kannst du die Größe, Breite, Farbe etc. von jedem Abschnitt, jeder Spalte oder von jedem Element mit wenigen Klicks anpassen, Hintergrundbilder oder selbst Hintergrundvideos einfügen, oder einfach nur einen Rahmen oder eine Schattierung um ein Element legen. Die Möglichkeiten scheinen fast unbegrenzt zu sein!
Wenn du ein Widget, eine Spalte oder einen Abschnitt bearbeiten willst, dann klicke einfach mit der rechten Maustaste auf das entsprechende Element. Die verfügbaren Optionen siehst du dann links in der Elementor-Sidebar
Perfekt Responsive – eine Seite für Smartphones und Tablets anpassen
Elementor ermöglicht es dir, deine Inhalte mit nur wenigen Klicks perfekt für alle Endgeräte zu optimieren. Dabei kannst du die Größen für einzelne Elemente, Spalten oder Abschnitte individuell für die jeweiligen Endgeräte (Smartphone, Tablet oder PC) festlegen.
Klicke einfach unten in der Elementor-Sidebar auf das Monitor Symbol. Dort kannst du zwischen Desktop, Tablet und Smartphone wählen.
Außerdem ist es möglich, einzelne Elemente, Abschnitte oder Spalten nur auf bestimmten Endgeräten anzuzeigen:
- Klicke auf ein Widget, einen Abschnitt oder eine Spalte.
- Klicke in der Elementor Sidebar auf „Erweitert“
- Nutze die Responsiv Optionen
In diesem Video von meinem YouTube-Kanal zeige ich dir, wie du mit Elementor deine Webseite perfekt auf mobile Endgeräte optimieren kannst:
Elementor installieren
Bei Elementor handelt es sich um WordPress Plugin. Dieses kann einfach über das WordPress Backend mit einem Klick installiert werden.
Elementor Pro download und Installation
Das kostenpflichtige Upgrade Elementor Pro kannst du hier kaufen*. Bezahlt werden kann unter anderem mit PayPal oder Kreditkarte. Außerdem bekommst du eine 30-Tage Geld-zurück-Garantie.
Updates und Support sind für ein Jahr enthalten. Wenn du danach deine Lizenz nicht mehr erneuerst, kannst du den Pagebuilder aber natürlich wie gewohnt weiter verwenden – du bekommst dann nur eben keine Updates mehr.
Installation:
Nach dem Kauf erhältst du in deinem Kundenkonto einen Lizenzcode und kannst Elementor Pro herunterladen.
Danach kannst du Elementor Pro einfach über das WordPress-Backend installieren:
Plugins – Installieren – hochladen (lade die Datei so wie sie ist, also als Zip-Datei hoch)
Funktionsumfang und Widgets der kostenlosen Version
Bei Elementor bekommst du bereits in der kostenlosen Version über 40 Widgets. Somit ist die kostenlose Version bereits sehr umfangreich und enthält alles, was man für den grundsätzlichen Aufbau einer Seite benötigt:
- Text & Überschrift Widgets
- Bilder & Video Widgets
- Listen & Tabs
- Icons (Font Awesome 5 Bibliothek)
- Basis-Galerie & Karussell Widget
- Button Widget
- HTML & Shortcode Widgets
- etc.
Alle Widgets können – wie bereits erwähnt – einfach per Drag & Drop in Abschnitte und Spalten geschoben werden. Bereits in der kostenlosen Version stehen unzählige Einstellungsmöglichkeiten zur Verfügung (Schrift, Farbe, Farbverläufe, Hintergrund, Responsive-Optionen, etc.).
Hier siehst du einige Elemente („Widgets“) die in der kostenlosen Version von Elementor zur Verfügung stehen:
Elementor Pro: Widgets und Highlights
Die Pro Version von Elementor bietet mit 50+ weiteren Widgets nochmals ein großes Update zur kostenlosen Version. Auf die größten Highlights von Elementor Pro möchte ich hier kurz eingehen.
Theme Builder
Elementor Pro bietet eine Theme-Builder Funktionalität. Somit kannst du im Grunde alle Elemente und Seiten deiner Webseite mit Elementor stylen bzw. erstellen (Header, Footer, Blog-Beitragsseite, Kategorieseiten, Suchergebnis-Seite, 404-Seite etc.).
Ergänzend zum Theme Builder steht die Funktion Theme-Styles zur Verfügung. Damit kann ein globaler Stil für die Webseite festgelegt werden (Bodytext, Überschriften, Linkfarbe, Button-Styles, etc.).
Auch diese Webseite habe ich komplett mit dem Theme Builder von Elementor erstellt. Hier habe ich ein Tutorial für dich erstellst, wie du mit dem Theme Builder ein eigenes WordPress Theme erstellen kannst.
Popup Builder
In Elementor Pro ist ein wirklich guter Popup Builder mit umfangreichen Funktionen integriert. Zusätzlich stehen auch viele Popup Templates zur Verfügung.
Wirklich gut sind auch die individuellen Bedingungen, welche für jedes Popup eingestellt werden können.
Innerhalb der Popups können alle Widgets genutzt werden.
Somit kann man z.B. ein Kontakt- oder Anfrageformular, eine Galerie, oder ein umfangreiches Template mit mehreren Widgets in ein Popup einbinden.
Ich nutze Popups vor allem um neue E-Mail Abonnenten einzusammeln.
Mit einem Klick auf diesen Link öffnet sich ein mit Elementor erstelltes Popup (das wäre jetzt eine gute Gelegenheit, um dich für meinen Online-Marketing Newsletter einzutragen :-).
Das Popup habe ich dank Template in weniger als 5 Minuten erstellt.
Woocommerce Builder
Elementor Pro bietet einen Woocommerce Builder womit die Shop- und Produktseiten individuell gestylt werden können. Zusätzlich findet man weitere essentielle Woocommerce-Widgets (z.B. einen Warenkorb-Symbol für den Header inklusive Vorschaufunktion etc.).
Ich persönlich habe den Woocommerce Builder von Elementor bereits für die Erstellung von zwei Onlineshops genutzt.
Formulare + Multi-Step-Forms
Mit Elementor Pro kannst du dir ein weiteres Kontaktformular-Plugin sparen. Ein sehr fortschrittlicher Form-Builder ist in der Pro-Version bereits enthalten.
Seit dem Update auf Elementor Pro 2.10 ist sogar eine Multi-Step Funktionalität enthalten. Somit kannst du umfangreiche Formulare auch auf mehrere Schritte aufteilen oder komplexe Anfrageformulare erstellen. Leider fehlt derzeit noch die Möglichkeit auf Conditional Logic.
Design-Upgrade und weitere Funktionen
Elementor Pro bietet noch deutlich mehr Funktionen als die hier gerade gezeigten Highlights. Vor allem sind auch Funktionen zum Aufwerten des Designs integriert (Parallax- und Scrolling Effekte, Lotti-Animationen etc.).
Hier findest du eine vollständige Übersicht bzw. einen Vergleich aller Features von Elementor mit Elementor Pro: https://elementor.com/pro-vs-free/
Elementor Pro – lohnt sich der Kauf?
Vorweg hier schon ein Video von mir, wo ich auf die größten Vorteile von der Pro-Version eingehe:
In diesem Kapitel möchte ich aber die Frage aufwerfen, ob sich der Kauf von Elementor Pro überhaupt lohnt? Immerhin bietet auch die kostenlose Version bereits viele großartige Funktionen.
Zwar ist die Pro Version mit ca. 49 Euro (49 Dollar) pro Jahr und Seite nicht wirklich teuer, da allerdings keine Lifetime-Lizenz zur Verfügung steht, muss dieser Betrag eben jährlich bezahlt werden (Elementor Pro kannst du direkt hier auf der Herstellerseite kaufen*).
Lohnt sich das?
Auch wenn man diese Frage sicherlich nicht generell für jeden beantworten kann, lohnt sich meiner Meinung nach der Kauf von Elementor Pro aus drei Gründen:
- Elementor Pro ersetzt ein Premium Theme
- Elementor Pro ersetzt mehrere (Premium-) Plugins
- Integration von dynamischen Inhalten (ACF)
Meiner Meinung nach bietet die Investition in Elementor Pro ein Komplettpaket, mit welchem weitere Kosten eingespart werden können.
Darauf möchte ich jetzt genauer eingehen:
Elementor Pro ersetzt ein Premium Theme
Auf die Theme-Builder Funktionalität von Elementor Pro bin ich ja bereits eingegangen. Meiner Meinung nach ist diese Funktion nicht nur ein Ersatz für ein Premium-Theme, sondern sogar die bessere Lösung.
Mit dem Theme Builder von Elementor kannst du dir ein eigenes Theme komplett nach deinen Vorstellungen konstruieren. Außerdem kannst du auf bestehende Template-Kits zurückgreifen und diese individuell auf deine Bedürfnisse anpassen.
Wenn du die Pro Version von Elementor nutzt, besteht meiner Meinung nach kein Bedarf mehr, zusätzlich noch ein Premium-Theme zu kaufen (natürlich kannst du aber auch Elementor Pro in Kombination mit einem Premium-Theme nutzen).
Auch diese Webseite wurde komplett mit dem Theme-Builder von Elementor erstellt. Ich nutze im Hintergrund allerdings noch das Theme GeneratePress, da ich damit seit vielen Jahren extrem gute Erfahrungen gemacht habe.
Hier findest du ein Theme Builder Tutorial von mir:
WordPress Theme erstellen ohne Programmierkenntnisse – Schritt für Schritt
Elementor (Pro) ersetzt mindestens 10 weitere Plugins
Elementor ersetzt durch den hohen Funktionsumfang viele weitere Plugins. Hier mal ein paar schnelle Beispiele, welche Plugins du dir sparen kannst, da diese Funktionen bereits in Elementor bzw. in der Pro-Version integriert sind:
- Popup Builder
- Kontaktformular
- Multi-Step Formulare
- Newsletter Opt-In Formulare
- Slider
- Galerie / Portfolio
- Related-Posts Plugin
- Inhaltsverzeichnis
- Author-Box
- Lightbox
- uvm.
Über Shortcodes können Elementor Templates zusätzlich auch im Gutenberg-Editor genutzt werden. Das mache ich auch hin und wieder, da ich meine Blogbeiträge im WordPress Gutenberg-Editor verfasse. Somit kannst du z.B. ein Galerie-Template erstellen und dieses mittels Shortcode in deinem Blogbeitrag einfügen.
Noch mehr Möglichkeiten durch dynamische Inhalte
Für die Profis unter euch kann Elementor auch noch mit ACF (Advanced Custom Fields) kombiniert werden. Somit können dynamische Inhalte in einem statischen Template/Design dargestellt werden.
Ich nutze das z.B. um die Review-Box in meinen Testberichten darzustellen.
Das Template dazu habe ich einmal erstellt, über ACF (ich nutze nur die kostenlose Version) kann ich dann die Bewertung, sowie Vor- und Nachteile für jeden Beitrag individuell einfügen.
Dank Elementor Pro spare ich mir somit auch ein Review-Plugin.
Elementor Pro bietet für mich so viele Vorteile, dass ich es auch zu meiner Liste der besten WordPress Plugins hinzugefügt habe.
Was kostet Elementor Pro?
Die Preisangaben stammen vom September 2022. Evtl. Preisaktualisierungen kannst du dir hier ansehen*.
- Lizenz für eine Webseite: 49 Dollar
- Lizenz für drei Webseiten: 99 Dollar (versteckt am unteren Rand)
- Lizenz für 25 Webseiten: 199 Dollar
- Lizenz für 100 Webseiten: 499 Dollar
- Lizenz für 1.000 Webseiten: 999 Dollar
- NEU: Elementor + Hosting (Cloud): 99 Dollar
Elementor Pro ist angesichts der gebotenen Leistung durchaus preiswert! Die Lizenz für eine Webseite kostet 49 Dollar. Außerdem bekommt man eine 30 Tage Geld-zurück-Garantie. Das ist günstiger als bei vielen Premium-Themes z.B. auf Envato.
Leider gibt es für Elementor Pro keine Lifetime-Lizenz (einmal zahlen, für immer nutzen).
Aufgrund der vielen integrierten Templates (und Pro-Templates), bekommt man neben der eigentlichen Pro-Version quasi eine komplette Theme-Funktionalität obendrauf. Ich persönlich nutze die Lizenz für 1000 Webseiten, da ich Elementor auch für Kundenprojekte in meiner Webdesign & Online Marketing Agentur codeRocker nutze.
Was passiert, wenn man die Elementor Lizenz nicht verlängert?
Die Preise bzw. Lizenzen werden zwar pro Jahr angegeben, dies bedeutet allerdings nur, dass ein Jahr lang Updates und Support beinhaltet sind.
Wenn du die Lizenz nicht verlängerst, funktioniert deine Webseite wie gewohnt weiter – man bekommt nur eben keine Updates mehr. Außerdem kann man dann auch keine neuen Pro-Features & Widgets mehr hinzufügen (allerdings kann man bestehende Features / Widgets bearbeiten).
Eigene Templates erstellen, exportieren & importieren
Mit Elementor (auch in der kostenlosen Version) kannst du die von dir erstellten Abschnitte, oder ganze Seiten als Vorlagen bzw. Templates abspeichern und wiederverwenden. Du kannst diese Vorlagen auch einfach exportieren bzw. herunterladen, und sie auf einer anderen WordPress Seite wieder importieren und verwenden.
Das ist natürlich extrem genial, da du damit deinen Workflow erheblich beschleunigen kannst.
Wie du eine Vorlage mit Elementor erstellst
Eine Vorlage zu erstellen ist extrem einfach. Du kannst entweder einzelne Abschnitte oder gesamte Seiten als Templates abspeichern.
Einen Abschnitt als Template speichern:
Klicke mit der rechten Maustaste auf den Abschnitt, den du als Vorlage abspeichern möchtest. Danach siehst du im Menü die Option, den Abschnitt als Template zu speichern.
Eine ganze Seite als Template speichern:
Möchtest du eine ganze Seite (also mehrere Abschnitte) als Vorlage abspeichern, dann klicke links unten im Elementor-Menü auf den Pfeil neben dem Speichern-Button. Hier bekommst du die Funktion Als Template speichern.
Templates auf der eigenen Seite wiederverwenden
Möchtest du eine von dir erstellte Vorlage auf der selben Webseite woanders wiederverwenden so funktioniert das ganz einfach:
Klicke dazu einfach in den Bereich, wo du einen neuen Abschnitt hinzufügen kannst auf das graue Ordnersymbol (Template hinzufügen).
Danach öffnet sich die Elementor Template-Bibliothek. Klicke oben einfach auf meine Templates – hier findest du alle deine selbst erstellten Vorlagen bzw. Templates wieder.
Templates exportieren und importieren
In der eben angesprochenen Template-Bibliothek kannst du deine Templates auch einfach exportieren. Klicke dazu auf der rechten Seite auf die drei Punkte. Dann öffnet sich das Untermenü mit den Optionen Löschen und Export.
Wenn du auf Export klickst, wird das Template in Form einer .json-Datei heruntergeladen.
Templates importieren funktioniert ebenfalls über die Template Bibliothek (und ist genau so einfach):
Klicke oben rechts in der Template Bibliothek auf den Pfeil im Kreis um ein Template z.B. von der Festplatte zu importieren.
Kostenlose Templates und Blöcke
Du kannst aber nicht nur mit eigenen Vorlagen arbeiten, sondern auch auf bestehende Vorlagen (Seiten und Blöcke) zurückgreifen.
Seiten sind (wie der Name schon sagt) ganze Seiten basierend auf Elementor, Blöcke sind einzelne Abschnitte (z.B. ein Service-, Features- oder Testimonial-Block etc.) die in eine Seite eingefügt werden können.
In der Elementor Pro-Version stehen auch Theme-Elemente wie z.B. Header und Footer bei den Blöcken zur Verfügung.
Alle Templates findest du in der Template Bibliothek
Elementor selbst bietet dabei schon eine große Auswahl an vorinstallierten Templates. Diese findest du in der Elementor Template-Bibliothek. Die Template-Bibliothek öffnest du am schnellsten, wenn du auf das graue Ordnersymbol klickst. Das findest du in den Bereich, wo ein neuer Abschnit angelegt werden kann.
Nutzt du die Pro-Version von Elementor, so kannst du zusätzlich auch auf Pro-Templates zurückgreifen. Bei den Pro-Templates handelt es sich jeweils um ein Paket an einzelne Seiten, die quasi eine komplette Webseite inklusive Unterseiten umfassen.
Drei Beispiele:
- Fitness Webseite Pro-Template
- Agentur Webseite Pro-Template
- Immobilien Webseite Pro-Template
Kostenlose Elementor Templates von Envato
Auch wenn es durchaus noch mehrere kostenlose Template-Quellen für Elementor gibt, so möchte ich dir jetzt vor allem die Envato Template-Bibliothek vorstellen. Diese Template Bibliothek ist sehr umfangreich und bietet neben kompletten Template Kits zu verschiedene Themen auch eine Vielzahl an Blockelementen für Elementor an.
So einfach kommst du zu deinen kostenlosen Elementor Templates von Envato:
- Um diese kostenlose Template-Bibliothek zu nutzen, erstellst du dir einfach einen kostenlosen Account bei Envato*.
- Hier kannst du dir die Envato Template Bibliothek als kostenloses Plugin (Zip-Datei) herunterladen: https://envato.com/elements/free-elementor-templates/
- Und einfach über das WordPress Backend installieren: Plugins – Installieren – Plugin hochladen (Zip-Datei hochladen)
Noch mehr Templates findest du in meinem Beitrag über kostenlose Elementor Templates.
Die besten WordPress Themes für Elementor
Elementor ist mit den meisten WordPress Themes kompatibel. Solltes du Elementor Pro nutzen, und deine komplette Webseite (inklusive Header- und Footerbereich) mit Elementor erstellen, empfiehlt sich der Einsatz eines leichten Themes, welches möglichst wenig Ressourcen benötigt.
Elementor bietet hierfür das Elementor Hello Theme an (dieses kann kostenlos über das WordPress-Backend installiert werden).
Das Hello Theme ist ein komplett reduziertes Theme ohne jegliche Design- oder Layout-Elemente. Das eigentliche Design kommt dann ausschließlich von Elementor.
Bei diesem Theme müssen lediglich 17 Kilobyte an Daten geladen werden.
Folgende Themes zählen zu den beliebtesten Themes in Kombination mit Elementor. Außerdem sind diese Themes zu 100% kompatibel:
| Template Name | Größe (Kilobyte) |
| Hello Elementor | 17,5 kB |
| Astra | 37,8 kB |
| GeneratePress | 29,5 kB |
| Page Builder Framework | 70,2 kB |
| OceanWP | 237 kB |
| Hestia | 273 kB |
Bei Interesse kannst du dir hier meinen ausführlichen GeneratePress Testbericht durchlesen. Auch diese Seite basiert auf GeneratePress in Kombination mit Elementor.
Und hier findest du meinen Testbericht zu dem ebenfalls großartigen Astra Theme, welches ich bei diversen anderen Projekten im Einsatz habe.
Elementor im Performance Check
Eine weit verbreitete Meinung ist, dass Page Builder generell schlecht für die Performance sind. Dies liegt mitunter an dem oft “aufgeblähten” Code. Außerdem werden oft Elemente geladen, die zwar im Page Builder zur Verfügung stehen, aber die gar nicht aktiv auf der Seite genutzt werden.
Wie sich Elementor bezüglich Performance schlägt, darauf möchte ich jetzt genauer eingehen. Außerdem möchte ich darauf eingehen, wie ein Page Builder deine Ladezeit paradoxerweise sogar verbessern kann.
Elementor gehört zu den schnellen Page Buildern
Bezüglich der Performance gehört Elementor zu den besseren Page Buildern, und diese wird laufend verbessert.
So wurde z.B. die DOM-Struktur verbessert, um weniger DIV-Elemente zu erzeugen
Zusätzlich wurde in der Version 3.0 das „Improved Asset Loading“ eingeführt. Das bedeutet, dass Elementor auch wirklich nur den Code von den tatsächlich verwendeten Widgets lädt. Ein wirklich wichtiger Schritt!
Mittlerweile steht sogar bereits die Funktion „Flexbox-Containter“ zur Verfügung (kann im Menü unter Experimente aktiviert werden). Dabei handelt es sich um ein neues System zur Layout Erstellung in Elementor. Diese verbessert ebenfalls die Performance des Page Builders.
Mir persönlich ist Performance und eine gute Ladezeit wichtig!
Webseiten die ich mit Elementor erstelle, laden in der Regel sehr schnell. Die meisten Seiten werden in unter einer Sekunde geladen und das, obwohl ich nur ein günstiges (aber gutes) Webhosting verwende.
Nehmen wir einfach gleich die Startseite von dieser Webseite als Beispiel:
Die Seite basiert komplett auf Elementor. Zusätzlich werden noch Google Fonts, Icons, Google Analytics und ein Cookie Banner geladen. Da bin ich mit der Ladezeit (deutlich unter einer Sekunde) durchaus zufrieden!
Okay zugegeben, natürlich habe ich eine Speed-Optimierung vorgenommen (Caching, Styles, Scripts, etc.), aber das sollte man bei WordPress Webseiten sowieso machen (egal ob man nun einen Page Builder verwendet, oder nicht). Ohne Optimierung beträgt die Ladezeit der Seite in etwa 1,5 Sekunden.
Noch ein Beispiel, so schnell lädt diese Seite laut Pingdom (ich habe wieder Frankfurt als Teststandort ausgewählt):
Du siehst also, auch mit Elementor können schnelle Ladezeiten und eine gute Performance erreicht werden.
Zur Speed-Optimierung verwende ich übrigens WP Rocket – ein Plugin, das ich auch in meiner Liste der besten WordPress Plugins aufgenommen habe.
Bessere Ladezeit durch Elementor?
Generell ist ein Page Builder wie Elementor erstmals ein “schweres” Plugin, da der Funktionsumfang so gewaltig ist.
Genauer betrachtet ist der (negative) Einfluss auf die Performance allerdings nicht wirklich groß. Ganz im Gegenteil kann Elementor in vielen Fällen die Ladezeit der Webseite sogar verbessern.
Klingt erstmals unglaubwürdig, oder?
Ich erkläre dir worauf ich hinaus will:
Vorhin bin ich ja darauf eingegangen, dass Elementor mindestens 10 Plugins ersetzen kann!
So ziemlich jedes Plugin hat einen gewissen Einfluss auf die Performance deiner Webseite.
Wenn du nun aufgrund von Elementor einige zusätzliche Plugins einsparen kannst, kannst du damit die Performance deiner Webseite wieder verbessern. Wenn du sehr viele Plugins einsparen kannst, dann ist die Performance meist sogar besser, als sie vor dem Einsatz von Elementor war.
Eine kleine Story dazu:
Im größten deutschen WordPress & SEO Forum auf Facebook hat sich ein Admin darüber ausgelassen, dass Elementor sich extrem negativ auf die Performance auswirken würde.
Ich habe mir dann die Webseite des Admins angesehen und war dann erstaunt darüber, dass die Ladezeit ca. 4x mal schlechter war, als bei meinen durchschnittlichen Elementor-Seiten.
Danach habe ich seine Seite mal schnell aus eigenen Interesse analysiert. Der Admin musste unzählige Plugins verwenden, um eine gewisse Funktionalität auf seiner Webseite darzustellen (Slider Revolution, Kontaktformular, Sticky-Header-Plugin, etc.). Aufgrund dieser Plugins, war auch die Performance seiner Webseite so schlecht.
Die Aussage des Admins war einfach ein Griff ins Klo, würde ich mal sagen…
Hier noch ein Video von meinem YouTube Kanal, wo ich auf das Thema Performance von Page Buildern eingegangen bin.
Elementor und SEO
Hat Elementor einen positiven oder einen negativen Einfluss auf SEO?
Diese Frage wurde mir schon ein paar mal gestellt.
Elementor hat keinen negativen Einfluss auf SEO
Erstmals möchte ich gleich klarstellen, dass Elementor keinen negativen Einfluss auf die Suchmaschinenoptimierung hat.
Seiten die du mit Elementor erstellt hast, können von Google ebenso gut gelesen (und korrekt gerendert) werden, als Seiten die ohne dem Page Builder erstellt wurden.
Ich habe viele extrem gute Rankings in diversen Projekten bei Elementor-Webseiten erzielt. Und auch die internationalen SEO-Größen von Authority Hacker betreiben ihre Webseite mittlerweile mit Elementor (und erzielen großartige Rankings).
Also keine Sorge – Elementor hat erstmals keinen negativen Einfluss auf SEO. Natürlich solltest du bei der Umsetzung deiner Webseiten auf eine korrekte HTML Struktur (H1, H2, H3…) sowie auf eine gute Ladezeit achten.
Und Content ist sowieso King!
Elementor kann einen positiven Einfluss auf SEO haben
Elementor kann sich positiv auf SEO auswirken. Mit den vielen Funktionen des Page Builders kannst du die User Experience gezielt verbessern. Eine gute UX führt unter anderem zu einer geringeren Absprungrate und lässt den Besucher in der Regel länger auf deiner Seite verbleiben. Ich denke das dies auch die Hauptintention war, warum Authority Hacker zu Elementor gewechselt sind.
Zusammengefasst kann dir Elementor helfen, Nutzersignale zu verbessern, was wiederum einen (indirekt) positiven Effekt auf deine Rankings haben kann.
Schau dir einfach mal diesen Blogbeitrag an.
Wenn du gerade am Desktop hier bist, dann siehst du das mitscrollende Inhaltsverzeichnis auf der rechten Seite. Am Smartphone kannst du das Inhaltsverzeichnis jederzeit aufklappen. Egal wo du dich gerade befindest – du kannst immer durch den Blogbeitrag navigieren.
Dies ist ein einfaches Beispiel dafür, wie man die User Experience verbessern kann. Erstellt habe ich das mit Elementor – die Installation eines zusätzlichen Plugins ist dafür nicht nötig.
Natürlich sind auch alle gängigen SEO-Plugins wie z.B. Yoast oder Rank Math mit Elementor kompatibel. Ich persönlich nutze auf dieser Webseite Rank Math, damit kann ich diverse SEO-Einstellungen sogar direkt in Elementor vornehmen.
Mein Fazit
Mit Elementor kann man selbst komplexe Designs und Layouts einfach und unkompliziert umsetzen. Dank der unzähligen Templates bietet Elementor einen extrem schnellen Workflow. Außerdem ist es möglich, eigene Templates zu erstellen und wiederzuverwenden.
Dank des hohen Funktionsumfang kann Elementor viele andere Plugins ersetzen.
Die Pro-Version bietet nochmals deutlich mehr Features als die kostenlose Variante. Für mich ist der Theme-Builder von Elementor Pro ein echtes Highlight, mit dem man die Grenzen von jedem WordPress Theme sprengen kann.
Ich persönlich nutze Elementor Pro auf all meinen WordPress Seiten und setze auch die meisten Kundenprojekte in meiner Webdesign- und SEO Agentur über Elementor um.
Negativ empfinde ich hauptsächlich, dass keine Lifetime-Lizenz verfügbar ist.
Wenn du weitere Fragen oder Anregungen zu diesem Elementor Tutorial hast, dann schreibe bitte ein Kommentar.
