Elementor: Der epische Guide für den WordPress Page Builder

Elementor ist einer der beliebtesten Page Builder für Wordpress. Das Website-Baukasten Plugin ist mit 5 Millionen Downloads eines der beliebtesten Wordpress Plugins.

Mit Elementor wird es möglich, ganze Webseiten ohne HTML, CSS oder sonstige Programmierkenntnisse visuell zu erstellen. In meinem Elementor Guide beschäftige ich mich mit allen Themen um das Elementor Page Builder Plugin und gebe dir einen Überblick über den beliebtesten(?) Wordpress Page Builder.

Was ist Elementor

Elementor ist ein Page Builder für Wordpress. Das Besondere daran ist, dass Elementor kein Theme ist sondern als Plugin installiert wird. Du brauchst also noch ein Wordpress Theme. Keine Angst: Mittlerweile gibt es viele Themes welche für Elementor optimiert sind.

Mit Elementor kannst du ganze Websites ganz schnell und komfortabel erstellen. Hierfür brauchst du wirklich keine Kenntnisse in CSS oder HTML. Wirklich alles erdenkliche lässt sich über den visuellen Page Builder einstellen. Durch ein sehr intuitives Interface ist Elementor sehr übersichtlich und daher auch für Anfänger sehr gut geeignet.

Besonders gefällt dabei das Live-Editing. Das bedeutet, du änderst eine Farbe, Wert, etc und siehst direkt auf der Website was passiert und wie das ganze aussieht. Besonders interessant beim Einsatz von eigenem CSS: Auch der CSS-Code wird zu 90% live angezeigt. Damit können kleinere CSS-Änderungen ohne mehrfaches Aktualisieren der Webseite realisiert werden. Du hast gerade nur Bahnhof verstanden? Falls du kein CSS-Code anwenden möchtest, kannst du alles im Drag-and-Drop Page Builder visuell gestalten.

Alle Einstellungsmöglichkeiten sind semantisch getrennt (Inhalt, Style & Erweitert) und funktionieren für jedes Widget (Modul) relativ gleich. So musst du nicht jedes Modul in Elementor erlernen. Entsprechend fällt der Einstieg in Elementor besonders leicht.

Erwähnenswert ist, dass es Elementor in einer kostenlosen Variante und in einer Pro Version gibt. Wobei die kostenlose Variante des Plugins bereits viele Funktionen bietet. Die Unterschiede zwischen der kostenlosen und der Pro Version von Elementor habe ich weiter unten aufgeführt.

Die Vorteile und Nachteile von Elementor

Auch wenn es so klingt, als ob Elementor das schweizer Taschenmesser unter den Wordpress Page Builder ist. Leider haben die Page Builder nicht nur Vorteile.

Dennoch überwiegen bei Elementor die Vorteile – zumindest für Anfänger. Hier mal eine Auflistung der Elementor Vorteile und Nachteile.

Elementor Vorteile

Wie du bereits im Einführungstext gelesen hast, ist es möglich, ohne Programmierkenntnisse eine tolle Wordpress Website mit Elementor zu erstellen. Im Vergleich mit anderen Page Builder für Wordpress finde ich den Editor am intuitivsten.

Auch die Einstellungsmöglichkeiten bieten alles um eine moderne und cleane Website zu erstellen. Ich denke die Elementor Vorteile sprechen für sich:

• Visuelle Erstellung ohne Coding: Selbst ein Wordpress Anfänger kann ganz easy eine Website zusammenklicken. Alle Änderungen werden sofort sichtbar und die unzähligen übersichtlichen Einstellmöglichkeiten für die Elemente lassen keine Wünsche offen.
• Globale Elemente: Falls du Elemente hast, die über mehrer Websiten gleich sein sollen, bekommst du mit den globalen Widgets ein mächtigstes Tool an die Hand. Und wenn sich einmal etwas ändern sollte, kannst du mit einer Änderungen gleich mehrere Unterseiten updaten.
• Alles mit dem Theme Builder anpassen: Der Theme Builder sorgt dafür, dass Elementor an Beliebtheit kaum zu überbieten ist. Damit kannst du Header, Footer, Blogbeiträge, etc direkt über den Page Builder anpassen. Über Bedingungen kannst du diese den jeweiligen Unterseiten zuweisen.
• Viele Einstellungsmöglichkeiten der Elemente: Bei anderen Page Buildern musst du immer wieder mit CSS arbeiten – weil eben nicht alles anpassbar ist. Mit dem Elementor Editor gehören diese Tage der Vergangenheit an.
• WooCommerce Integration: Besonders für Online Shops ist Elementor interessant. Jetzt ist es möglich auch einzelne Produktseiten mit dem Page Builder anzupassen. Damit steigerst du auch deine Konversion im e-Commerce Bereich
• Integrierte Marketing-Tools: Egal ob du nach einem Exit-intent Popup suchst oder ein Formular erstellen willst. Alles ist nativ in Elementor integriert. In Verbindung mit der globalen Widget Funktion, erhälst du ein starkes Marketing Tool – direkt in Elementor.
• über 90+ Widgets: Elementor Pro kommt mit allem was man so für eine moderne Website braucht: Testimonial Section, Slider, Carousel, Accordeon, usw.
• Parallax Scrolling macht Scrollytelling möglich: Durch die verschiedenen richtig coolen Motion Effects erstellst du eine tolle Scrollytelling Seite. Hier hört Elementor jedoch nicht beim Parallax Scrolling auf: Unschärfen, X-Achsen, Y-Achsen usw können je nach Scrolling (auch über Offsets) angepasst werden. Damit schaffst du emotionale Wordpress Websiten.
• Viele Addons für Elementor erweitern die Funtkionalität: Viele Entwickler stürzen sich auf Elementor und programmieren weitere Widgets (Elemente), die du ganz einfach installieren kannst. So gibt es unzählige neue Elemente, die dir helfen, deine Website noch einzigartiger zu machen.
• Template-Kits: Mit einem Klick startest du direkt mit einem kompletten Website Layout. Hier werden sogar alle Bilder direkt in die Mediathek importiert. Hierdurch erstellst du eine Website in unter 4 Minuten.

Elementor Nachteile

Die Nachteile von Elementor gehen einher mit dem Umstand, dass es sich um einen Page Builder handelt:

• Komplexe Websiten einfach erstellen – ein Paradox: Auch wenn es möglich ist, einfach eine Website zu erstellen ist das Handwerk des Webdesigners nicht mal eben gelernt. Nutzerführung, Gestaltungsgrundsätze und Usability sind nicht automatisch per Page Builder erreichbar, sondern das Resultat aus einem jahrelangen Lernprozess.
• Erhöhte Ladezeiten: Auch wenn Elementor hier alles richtig macht, müssen die vielen Funktionen im Code untergebracht werden – und blähen eben diesen auf. Das führt dazu, dass ein Pagespeed Score von 100 nicht mal eben so einfach mit dem Elementor Plugin erreicht werden kann. Dennoch ist es möglich, hier im oberen 90er Bereich mit Elementor zu landen – nur eben nicht ganz so eifnfach wie das Erstellen der Website.
• Lock-in-Effekt: Jeder Page Builder bindet den User an das System. Das bedeutet, wenn du Elementor verwendest bist du gefangen. Ein Wechsel wird nicht einfach – da Inhalte per Hand aus dem Live-Editor in das neue Theme kopiert werden müssen. Deshalb spricht man vom Lock-in-Effekt. Zum Glück haben die Elementor Entwickler dies erkannt und hinterlassen nach der Deinstalltion weitestgehend sauberen, lesbaren Code.
• Keine Lifetime Lizenzen: Leider gibt es mittlerweile keine Elementor Lifetime-Lizenzen. Das bedeutet, du zahlst pro Jahr (oder verzichtest auf wichtige Updates)

Elementor Pro vs Free

Elementor gibt es in einer kostenlosen Variante und in einer Pro-Version. Während die kostenlose Variante von Elementor mit etlichen Funktionen daher kommt, ist die Pro -Version das Flagschiff unter den Page Buildern. Wann du die Pro -Version in Betracht ziehen solltest, erkläre ich im Folgenden.

Die kostenlose Version von Elementor bietet dir folgende Funktionalitäten:

• Drag-and-Drop Editor
• Responsive Design
• Landing Page Builder
• Eingeschränkte Module (Widgets)

Die Pro -Version enthält zusätzlich zur kostenlosen Variante:

• Premium Support
• Motion Effects & Scrolling Effects
• Viele weitere Module (Widgets)
• Formulare
• Pop-Ups
• Call to Action
• Theme Builder (eigene Footer und Header mit dem Page Builder bauen)
• viele weitere Funktionen

Generell kannst du mit der kostenlosen Variante schon herkömmliche, kleine Webseiten bauen. Wenn’s etwas mehr sein soll, empfehle ich jedoch die Pro -Version. Hier werden (auch designtechnisch) sehr aufwendige Seiten möglich, welche deine Besucher mit einem Staunen zurücklassen werden.

Ich persönlich gelange mit der Free-Version schnell an die Grenzen und hab mir einfach mal die Expert-Lizenz gekauft. Damit kann ich Elementor auf bis zu 25 Websiten einsetzen.

Elementor Preise

Für eine Website bezahlst du 49 Dollar im Jahr. Falls du mehrere Projekte mit Elementor umsetzen willst (oder eine Webdesign Agentur hast) kannst du Elementor auch in der Expert-Lizenz kaufen. Dieses ermöglicht den Einsatz auf bis zu 25 unterschieldichen Websiten und kostet nur $199 im Jahr.

Die Advanced Lizenz sieht dagegen mit 99 Dollar eher teuer aus und ist eben nur auf 3 Websiten begrenz. Dann empfehle ich dir lieber das Doppelte zu bezahlen und die fünffache Menge an Lizenzen zu bekommen.

Das beste Elementor Theme

Da Elementor eben nur ein Plugin ist, brauchst du noch ein Wordpress Theme. Dieses sollte besonders klein sein und möglichst wenig Funktionen bieten. Die Platzhirsche im Wordpress Theme Dschungel (Avada, Divi, etc.) sind eher nicht zu empfehlen – da alle deine Funktionen bereits von Elementor bereitgestellt werden.

Und weil du ein Sparfuchs bist, möchtest du natürlich auch kein Premium Theme – da du bereits für Elementor Pro zur Kasse gebeten wurdest. Aber du brauchst auch kein Multi-Purpose Theme für Elementor.

Als das beste kostenlose Elementor Theme empfehle ich dir das Hello Theme. Es kommt direkt von den Entwickler von Elementor. Das ist auch in der Einrichtung besonders easy mit Elementor.

Als Alternative zum Hello Theme kann ich dir noch das Generatepress Theme empfehlen. Hier ist die Einrichtung in der kostenlosen Variante mit Elementor etwas hakelig. Deshalb würde ich für Anfänger das Hello Theme empfehlen.

👉  Mehr Infos: Die 12 besten Elementor Themes

Die Elementor Funktionen im Überblick

Wir haben jetzt schon viel über die tollen Funktionen von Elementor gehört. In diesem Abschnitt soll es konkret um die einzelenen Funktionen gehen und was du damit alles machen kannst.

Der Drag-and-Drop Page Builder

Das Herzstück von Elementor. Der Drag-and-Drop Builder ist ein visueller Page Builder. Per Baukasten Prinzip kannst du dir so ganz einfach deine Website zusammenklicken.

Bei der Website Erstellung startest du mit den Spalten und ziehst dir die jeweiligen Widgets aus der Elementor Bilbiothek. Übrigens sind mit dem Drag-and-Drop Builder auch Spalten in Spalten möglich. Abstände können einfach per Zahlen angeben werden.

Wenn die jeweiligen Elemente im Seitenbereich liegen, kannst du diese anklicken und bekommst die Optionen für das jeweilige Element angezeigt. Hier kannst du dann alles einstellen.

Die Optionen für die jeweiligen Elemente sind übersichtlich in Tabs angeordnet. So behälst du immer die Übersicht.

Übrigens: Gleiche Einstellungen für die unterschieldichen Widgets befinden sich meist am gleichen Ort.

Globale Farben und Schriftarten

Besonders zeitsparend: In den allgemeinen Einstellungen von Elementor kannst du globale Farben und Schriftarten definieren. Solltest du dich beim Gestalten deiner Website doch für eine andere Farbe entscheiden – änderst du diese einfach unter globalen Farben und auf deiner gesamten Website strahlt jetzt die neue Farbe.

Genauso verhält es sich mit den Schriftarten. Deine jetzige Schriftart passt nun doch nicht mehr so gut zum gesamten Design? Kein Problem! Mit einem Klick änderst du global alle Schriftarten.

Template-Kits: Elementor Webseite mit Vorlagen in 4 Minuten erstellen

Mit den Template-Kits kannst du mit wenigen Klicks Design Vorlagen für ganze Webseiten importieren – also auch für verschiedene Unterseiten. Envato Elements bietet hier aktuell über 1600 Vorlagen.

Dieses Feature ist wohl das Mächtigste – auch wenn man sich andere Page Builder anschaut. So kommst du von Null auf superfancy in nur wenigen Klicks. Hier hast du ein paar Anlaufstellen für kostenlose Template-Kits und auch Premium Template Kits:

• Layouts for Elementor [Gratis]
• Envato Elements [Premium+Gratis]
• Themeforest [Premium]

Gerade wenn du gerade erst mit Elementor anfängst sind solche Template-Kits besonders zum Erlernen von Elementor geeignet. Hier fängst du nicht bei Null an, sondern siehst, wie andere die Widgets nutzen um großartige Websiten zu erstellen.

Der Pop-up Builder

Ein relativ neues Feature ist der Pop-up Builder. Damit wird Elementor auch zunehmend für Online Marketeers interessant, die früher mit dem Thrive Architect gearbeitet haben.

Hier lassen sich nicht nur einfache Pop-Ups erstellen, sondern auch Exit-Intent Pop-Ups, Formular-Popups, Sales Pop-Ups, usw.

Pop-Ups können zudem auch global erstellt werden. Wenn du beispielsweise ein Newsletterpopup auf deiner gesamten Website einbinden willst, kannst du von diesem Feature profitieren. Zudem ist es möglich, über Bedingungen die Pop-Ups nur im Blog oder auch nur bei bestimmten Kategorien im Blog anzeigen zu lassen.

WooCommerce-Builder

Ein weiteres Schmackerle ist der WooCommerce Builder. Dieser ist im Prinzip nichts anderes als der Theme Builder für WooCommerce. Damit kannst du auch deine Produktseiten variabel und visuell im Drag-and-Drop Builder gestalten. Das ist gerade für e-Commerce Anwender eine große Erleichterung.

Mit diesem Feature kannst du also deine einzelnen Produktseiten wie auch die Übersichtsseite deiner Produkte (also die Shop Page) per Drag and Drop zusammenklicken. Dafür bietet dir Elementor alle Widgets aus WooCommerce, die du dafür brauchst:

• zum Warenkorb Button
• Produktpreis
• Produkttitel & Beschreibung
• Produktbild
• Upsells
• Ähnliche Produkte
• Produktbewertung
• Produktinhalt
• Produktdaten Tabs
• Meta- und zusätzliche Informationen
• Breadcrumbs
• Lagerbestand

Landing Page Builder

Dieses Elementor Feature richtet sich vor allen an Online Markeeters. Dabei basiert der Landing Page Builder auf dem Theme Builder. Das bedeutet, du richtest einmal ein Template ein und kannst dieses dann für deine Landing Pages nutzen. Mit dem Landing Page Builder haben die Entwickler die Funktionalität nochmal aufgebohrt. Hierdurch wird Elementor auch für den Online Marketing orientierte Thrive Architect zur Konkurrenz.

Der Theme-Builder

Der Theme Builder ist der Grund, warum ich Elementor verwende. Damit wird es möglich, allgemeine Vorlagen für Blog-Beiträge, Produktseiten und andere Templates für Wordpress zu erstellen. Zudem kannst du den Header und Footer ebenfalls im Drag-and-Drop Live Editor visuell gestalten. Durch die sogenannten Conditions – also Bedingungen – legst du fest, wo genau diese Vorlage angezeigt wird.

Mit dem Theme Builder kannst du dir also dein eigenes Theme erstellen. Denn normalerweise kannst du mit einem normalen Page Builder eben nur Seiten, Beiträge und Sektionen erstellen. Mit dem Theme Builder kannst du auch wordpressspezifische Elemente erstellen. Damit bist du nicht mehr auf irgendwelche Headervorlagen begrenzt, sondern kannst dir alles so erstellen wie du möchtest – ohne eine einzige Zeile Code.

Globale Widgets

Mit den Globale Widgets wird es möglich, allgemeine Sektionen bzw. Elemente zu erstellen. Hierbei gestaltest du beispielsweise ein Pop-up, ein Button oder eine ganze Sektion einmalig und kannst diese immer wieder in deine Website einbauen.

Wo findet das Ganze Anwendung? Wenn du z.B. auf mehreren Seiten immer weider eine Kontaktsektion verwendest, baust du diese einmalig als globales Widget und fügst dieses globale Widget auf all deinen Unterseiten ein. Falls du mal etwas an deinem Kontaktformular ändern möchtest, machst du dies einmalig im globalen Widget und dies wird automatisch über deine gesamte Website geupdated.

Natürlich kannst du das globale Widget auch entkoppeln. Das bedeutet, du fügst das globale Widget auf deiner Website ein, entkoppelst die Verknüpfung und kannst das Elementor jetzt so bearbeiten wie du möchtest – allerdings wird es dann bei Änderungen des globalen Widgets auch nicht mehr geupdated. Es funktioniert also wie eine Vorlage.

Globale Widgets können dir extrem viel Zeit sparen. Dabei kann alles ein globales Widget sein. Ein Button, eine Überschrift – aber auch eine ganze Sektion (also eine Vielzahl von Elementen).

Display Conditions

Die Display Conditions sind (mal in deutsch gesprochen) Anzeigebedingungen. Mit diesem coolen Feature kannst du festlegen, wann ein bestimmtes Element (bspweise eine Vorlage) angezeigt werden soll. Die Möglichkeiten der Bedingungen sind dabei sehr groß.

Mit diesen Bedingungen kannst du einen transparenten Header auf der Startseite anzeigen und einen normalen Header auf den anderen Unterseiten. Oder du benutzt einen anderen Header auf deinem Blog. Du siehst, dass du hier maximale Flexibilität hast.

Parallax Scrolling und Motion Effekte

Ein weiteres großes Plus des Elementor Page Builders sind die Effekte. Jetzt mögen einige vielleicht sagen: Das ganze Eye-Candy bringt doch nix – schließlich geht es um Informationen. Andererseits brauchen einige Themen bzw. Websiten Emotionalität und etwas Scrollytelling. Dann kannst du eine wunderschöne Scrollytelling-Website mit Elementor bauen.

Elementor hört nicht einfach beim Parallax Scrolling auf. Andere Scroll Effekte (basierende auf den CSS-Filtern) sind ebenfalls möglich. Natürlich brauchst du hier auch ein bisschen Kreativität und Vorstellungskraft. Und wahrscheinlich auch Photoshop. Dennoch sind die Möglichkeiten sehr vielffältig und wie immer gilt: Alles ohne eine Zeile Code zu schreiben.

Beachte jedoch,dass diese Scoll und Motion Effekte auch die Ladezeit deiner Website beeinflussen. Denke also genau darüber nach, ob du solche Effekte wirklich brauchst um deine Message an den Mann (oder die Frau) zu bringen.

Responsive Design

Besonders gefällt mir die Lösung des Responsive Designs in Elementor. Während das ganze beim Divi Theme noch sehr haklig abläuft, ist das in Elementor wesentlich besser gelöst. Es gibt drei Breakpoints. Du kannst deine Website also für drei Gerätegrößen (Desktop, Tablet, Smartphone) optimieren.

Zudem kannst du in der Pro -Version von Elementor auch andere Breakpoints festlegen. Dieses Feature ist jedoch noch BETA und bedarf noch etwas Liebe und Zeit durch die Entwickler. Aber hier ist das Elementor Team dran und wird in Zukunft auch noch innovativere Funktionen releasen.

Zusätzlich zu den Funktionen der Breakpoints kannst du auch alle Elemente per Maus oder per Werteingabe bearbeiten. So können Spalten kommagenau in der Breite festgelegt werden. Oder Spalten können mobil geswitcht werden. Wenn du also ein Zickzack Layout hast, welches dann auf dem Smartphone untereinander angezeigt wird, sind die Bilder natürlich verschoben. Mit einem Klick deaktivierst du dieses Zickzack Layout für mobile Geräte und erhälst ein einheitliches Layout.

Multi-Step Form Builder

Multi-Step Formulare sind die Königsdisziplin, wenn es um Formulare geht. Normalerweise müsstest du hier ein Premium Formular Plugin nutzen. Mit Elementor hast du diese Funktionalität schon eingebaut. Du brauchst also kein zusätzliches Formular Plugin.

Als ich dieses Feature gesehen habe, musste ich erstmal kurz in meinen Schreibtisch beißen. Hab ich doch früher alles umständlich mit dem Premium Formular Plugin Gravity Forms gebaut. Dabei ist das Erstellen von Multi-Steps Formularen mit Elementor viiiiel einfacher als mit anderen Formular Plugins.

Wie dieses Video zeigt, kannst du jedes Formular ganz einfach in ein Multi-Step Formular umwandeln. Hier hast du jetzt wieder alles in der Hand – von der Farbe der einzelnen Steps bis hin zu den Labels. Schade, dass ich Elementor nicht schon eher entdeckt habe.

Dynamischer Inhalt

Ein großartiges Feature ist der Dynamic Content in Elementor. Hier kannst du dynamische Variablen aus Wordpress in Felder einsetzen. Klingt nerdy? Ja, vielleicht ein bisschen. Trotzdem werden damit auch komplexe Website Anwendungen möglich.

Sagen wir, du willst eine einzelne Produktseiten Vorlage gestalten. Dabei ist der Produktname für jedes Produkt anders. Hier müsstest du jetzt für jedes Produkt eine Seite bauen. Mit dynamischen Content baust du eine Vorlage und fügst über den Dynamic Content einfach die Variable [Productname] ein. Damit wird auf jeder einzelnen Produktunterseite der richtige Produktname angezeigt – ohne, dass du das einzeln eingeben musstest.

Sehr oft hast du im Live-Editor die Möglichkeit auf Dynamic Content zurückzugreifen. Auch bei einem Button Link kannst du dynamsiche Inhalte verwenden.

Custom Fields Integration (Advanced Custom Fields)

Das ist ein Feature, das für Theme Entwickler interessant sein dürfte. Mit Elementor hast du die Möglichkeit direkt im Live-Editor auf ACF Felder zuzugreifen. Du musst also dein Theme nicht mehr Hardcoden sondern kannst im visuellen Editor mit dynamischen ACF Feldern arbeiten.

Unter dem Strich kannst du damit (falls du Entwickler bist), das Elementor Theme extrem aufbohren ohne dafür gleich extreme Templates porgrammieren zu müssen.

Table Of Contents (Inhaltsverzeichnisse für lange Blogbeiträge)

Dieses (eher kleine) Feature hat mich zum Wechsel zu Elementor gebracht. Falls du es noch nicht gemerkt hast: Diese Website läuft auch mit Elementor. Mit dem Table of Content Widgets integrierst du ein Inhaltsverzeichnis in deine Blogbeiträge.

Das allein wäre jedoch noch nicht der Vorteil des Elementor Page Builders. Über den Tab Scrolling Effects erstellst du ein sticky Table of Contents. Also ein Inhaltsverzeichnis, welches mitscrollt und immer anzeigt wo sich der Leser gerade befindet.

Diese Funktion sucht man vergeblich in einem Inhaltsverzeichnis Plugin.

Integration anderer Dienste

Da Elementor sehr weit verbreitet ist und sich auch an Online Marketeers wendet, darf die Integration von Diensten wie MailChimp, ActiveCampaign usw. nicht fehlen. Und hier lässt Elementor keine Wünsche offen. Generell gibt es wirklich sehr viele Widgets, die andere Marketing Tools integrieren:

• AWeber
• MailChimp
• Drip
• ActiveCampaign
• ConvertKit
• HubSpot
• Zapier
• GetResponse
• MailerLite
• MailPoet
• Automizy
• Sendinblue

Doch damit noch nicht genug. Das Plugin arbeitet auch mit anderen Plugins und Diensten sehr gut zusammen. Eine komplette Übersicht aller Dienste findest du hier.

Der Navigator

Bei besonders großen oder komplexen Unterseiten kannst du schnell die Übersicht verlieren. Dafür ist der Navigator gedacht. Er zeigt dir alle Elemente in einer übersichtlichen Liste an. Somit kannst du nicht nur alle Elemente im Live-Editor auswählen, sondern auch im Navigator.

So sparst du dir auch das hoch- und runterscrollen im Live-Editor. Du kannst also jedes Element auch im Navigator markieren. So behälst du immer die Übersicht – egal wie groß deine Website wird.

Elementor Tutorial (Installation + Einrichtung)

Elementor installieren

Da Elementor ein Plugin ist, brauchst du natürlich vorher ein Theme für Wordpress. Ich empfehle dir dabei ein möglichst kleines Theme zu verwenden – je weniger Funktionen das Theme hat, desto besser. Da alle Funktionen aus Elementor kommen, braucht das Theme nicht viel zu können.

Nachdem du nun ein möglichst kleines Theme verwendest, kannst du im Wordpress Backend unter Plugins nach dem Elementor Plugin suchen. Solltest du die Pro -Version von Elementor verwenden wollen, musst du es auf elementor.com kaufen und die Zip-Datei aus deinem Account herunterladen.

Diese Zip-Datei kannst du nun im Wordpress Backend unter Plugins > Plugin installieren > Plugin hochladen auf deine Wordpress Installation hochladen.

Danach einfach nur noch das Plugin aktivieren und fertig. Je nachdem, welches Theme du verwendest, gilt es noch ein paar Anpassungen am Theme vorzunehmen. Da dies je nach Theme variieren kann, überspringe ich diesen Schritt in diesem kleinen Elementor Tutorial.

Elementor einrichten

Nachdem du Elementor installiert hast, kannst du damit beginnen Elementor einzurichten bzw. deine Website mit Elementor zu erstellen. Dabei gibt es mehrere Herangehensweisen:

• Benutze ein Template-Kit: Mit einem Template-Kit installierst du dir eine gesamte Beispiel-Website. Diese beinhaltet alles. Du startest also direkt mit einer fertigen Website und passt nur noch die Inhalte an (und bei Bedarf noch Farben und Bilder). Dies ist wohl der schnellste und einfachste Weg mit Elementor eine Website zu erstellen. Natürlich ist deine Website damit nicht einzigartig. Aber besonders als Anfänger kommst du hier schnell zum Ziel. Template-Kits kannst du zusätzlich herunterladen. Oben habe ich dir bereits einige Anlaufstellen für gute Template-Kits aufgelistet.
• Benutze Blöcke: Du hast keine Lust auf die Template-Kits? Dann kannst du mit Blöcken arbeiten und deine Website zusammenpuzzeln. Blöcke sind dabei einzelne Abschnitte einer Website. Da gibt es beispielsweise ein Header-Block, ein Leistungsblock, ein Kontakt-Block oder auch ein Testimonial-Block. Damit wird deine Website individueller und du kommst trotzdem noch schnell ans Ziel
• Starte bei Null: Wenn du deine Website von Grund auf selbst erstellen möchtest, kannst du direkt damit beginnen eine neue Seite in Wordpress zu erstellen und auf „Mit Elementor bearbeiten“ klicken. Hier hast du jetzt ein leere Website die du mit den Widgets (Elemente) aus der Sidebar füllen kannst. Hier sind deiner Fantasie keine Grenzen gesetzt. Das bedeutet natürlich auch viel Arbeit und dauert etwas länger. Auf diese Weise lernst du Elementor von Grund auf.

Elementor und die Performance (Core Web Vitals)

Du hast jetzt die ganzen Features und Funktionen von Elementor kennengelernt. Nun fragst du dich natürlich: Wie soll ich bei diesen ganzen Funktionen ein Pagespeed Score von 100 mit Elementor erreichen? Dies ist auch immer der große Kritikpunkt an solchen Page Buildern.

Ich kann dich beruhigen. Unter den Page Buildern ist Elementor der Schnellste. Die Entwickler wissen um die Wichtigkeit einer schnellen Ladezeit. Und so wird jedes neue Element und Feature zuerst auf die Performance überprüft – bevor es in Elementor integriert wird. Und so läuft der Riesen-Funktionsumfang doch relativ schnell.

Um auch bei den Core Web Vitals zu punkten hat das Theme (vor allem in den letzten Updates) tolle Performance Features bekommen:

• Nur Code laden, der benötigt wird
• Lazy Loading
• Request Minimierung
• Native Browsersupports nutzen statt eigene Scripte auszuliefern
• Optimierung von internen JavaScript und CSS Files
• Optimierter Backend und Rendering Prozess inkl. Caching
• Schlankerer und besserer Code-Output

So ist Elementor im Frontend wie im Backend schon von Haus aus sehr schnell. Mit der Version 3.1 hat Elementor neue Performance Features bekommen, die du unter Elementor > Einstellungen > Experiments findest. Diese Funktionen sind allerdings noch in der Beta-Phase. Daher solltest du deine Website auf mögliche Anzeigefehler prüfen, wenn du diese Funktionen nutzt.

Dennoch kann Elementor hier beispielsweise gegenüber dem Divi Theme punkten. Zusammen mit dem Plugin WP-Rocket lassen sich hier auch easy Pagespeed Scores im oberen 90er Bereich erreichen. Falls du noch mehr Performance mit dem Elementor Plugin brauchst, schau dir doch mal Nitropack an.

Online Marketing mit Elementor

Auch für Online Marketing Agenturen bzw. Abteilungen kann Elementor sehr interessant sein. Mit dem Landing Page Builder können ganz einfach per Klick neue Landing Pages erstellt werden. Dann nur noch die Texte ändern und fertig ist die neue Landing Page. Das spart den Programmierer.

CRM-Systeme wie Hubspot sind ebenfalls bereits nativ in Elementor integriert. Du siehst – die Elementor Entwickler denken mit und betrachten das Plugin auch immer holistisch – SEO, Marketing, Performance und Design gehen bei Elementor Hand in Hand.

Zudem sind viele Newsletter Dienste und andere Online Marketing Dienste bereits integriert. Auch das spart den Schritt zum Programmierer. So können auch technisch nicht versierte Online Marketeers Änderungen und neue Marketing Kampagnen eigenständig aufsetzen.

Empfehlenswerte Elementor Add-Ons

Es gibt wirklich unzählige Add-Ons für Elementor. Aber was genau ist ein Add-On? Blöd gesagt: Es ist ein Plugin im Plugin. Damit kannst du Elementor durch weitere Elemente erweitern. Add-Ons für Elementor werden dabei als zusätzliches Plugin installiert. Aber keine Angst: Die meisten Elementor Add-Ons bieten auch die Funktion, dass Elemente nur geladen werden, wenn du sie brauchst.

👉  Mehr Infos: Die 7 besten Elementor Add-Ons

Für diese Elementor Add-ons musst du nichtmal tief in die Tasche greifen. Viele Add-Ons sind sogar kostenlos und bieten dennoch tolle weitere Funktionen für Elementor.

Hier mal eine Auswahl der besten Add-Ons für Elementor:

ElementsKit von WPmet (Kostenlos + Premium)

Sehr zu empfehlen. Dieses Add-On gibt es in einer kostenlosen Variante (ElementsKit Lite) und in einer Pro -Variante. ElementsKit kommt mit über 85 neuen Elementen und einigen neuen Funktionen für Elementor.

Zusätzlich erhälst du noch eine ganze Menge hübscher Design-Vorlagen.

Achtung: Bei diesem Add-On kannst du leider nicht einstellen, dass nicht genutzte Elemente nicht geladen werden.

Elementor Addon Elements von WPVibe (Kostenlos)

Dieses kostenlose Add-On bietet zwar nur 24 neue Elemente – diese sind aber wirklich wunderschön und mit viel Liebe gecodet worden. Damit kannst du Elementor nochmal etwas interaktiver machen:

• Flip Box
• Content Switcher
• Vergleichstabelle
• Animierte Infografiken
• Timeline
• und viel mehr

Für die Performance kannst du unter den Settings sogar noch einstellen, welche Elemente auf deiner Website geladen werden. So vermeidest du größere Ladezeiten beim Einsatz des Add-Ons.

Ultimate Addons for Elementor von Brainstorm Force (Premium)

Hier gibt’s 50 neue Widgets für Elementor. Darunter befinden sich auch einige interessante Elemente für WooCommerce. Weiterhin gibts über 200 Design Blöcke und über 90 Design-Vorlagen. Mit 55 Dollar kannst du dir eine Jahres Lizenz kaufen. Zudem gibt es auch Lifetime-Lizenzen.

Elementor Pack Pro

Hier gibt es eine kostenlose und eine Bezahl-Version. Das Elementor Pack Add-On enthält über 200 neue Elemente in der Pro -Version. Definitiv ein Blick wert, da alle Elemente wirklich ein tolles Design haben und viele interaktive Funktionen bereitgestellt werden.

Zusätzlich zu den Widgets gibt es noch über 300 Design Vorlagen für Seiten und 1700 Design-Blöcke. Damit ist dieses Elementor Add-On wohl das Größte auf dem Markt. Mit einem Preis von 29 Dollar ist der Preis auch eher gering. Zudem gibt es bei der Pro-Version auch immermal wieder Rabatt Aktionen.

Essential Addons von WPDeveloper

Die Addon Entwickler behaupten, dass dies das beliebteste Elementor Add-On ist. Essential Addons gibt es in einer kostenlosen und einer Pro -Variante. Wobei die kostenlose Variante des Add-Ons bereits mit über 40 neuen Widgets für Elementor kommt. Dabei werden auch einige zusätzliche Widgets für WooCommerce Nutzer geboten.

Und natürlich gibt es auch wieder viele neue Design-Vorlagen. Besonders erwähnenswert ist das Fortschrittsbalken Widget für Blogbeiträge. Du kennst das vielleicht von anderen Seiten. Hier sieht dein Leser immer wie weit es noch nach unten geht.

Generell ist es wohl das interssanteste Add-On für Elementor und defintiv ein Blick wert.

Prime Slider für Elementor von BdThemes

Du hast das eingebaute Slider Plugin von Elementor bereits ausgereizt und willst mehr Flexibilität? Dann solltest du dir das Prime Slider Add-On von BdThemes anschauen.

Hier kannst du dir ein Slider für Elementor basierend auf Vorlagen erstellen. Deshalb werben die Entwickler auch mit der Out-of-the-box Funktionalität. Du musst also nur noch eine Vorlage auswählen und Text und Bilder anpassen. Mit einem Drag-and-Drop Builder integriert sich der Prime Slider nahtlos in Elementor und bietet dir noch mehr Funktionalität wenn es darum geht, ein fancy Slider mit Elementor zu erstellen.

Auch hier gibt es eine kostenlose Variante und eine Pro-Variante. In der Pro-Version wird es unter anderem möglich ein Kalender Widget in den Slider zu integrieren oder deine Blogbeiträge in Sliderform zu präsentieren.

Toolkit for Elementor

Dieses Add-On bietet dir keine neuen Widgets sondern Funktionen um deine Performance mit Elementor zu verbessern. Zudem kannst du einige Änderungen am Admin Bereich vornehmen.

Ich habe das Add-On getestet, konnte jedoch in meinem Fall keinen deutlichen Performance-Schub feststellen. Die Admin Features zielen eher darauf ab, bestimmte Nutzerrollen nur bestimmte Funktionalitäten bereit zustellen. Dies ist besonders bei Elementor Installationen mit technisch nicht-versierten Redakteuren interessant.

Happy Addons von WeDevs

Dieses Add-On kommt mit über 90 neuen Widgets und bietet zusätzlich einige interessante Funktionen für deine Elementor Installation. So kannst du über verschiedene Domains Elemente kopieren, Design Presets über verschiedene Widgets kopieren, Sektion innerhalb Sektion innerhalb Sektion erstellen und neue Animationen und Motion Effekte nutzen.

Happy Addons gibt es ebenfalls in einer kostenlosen und in einer Pro-Version. Die kostenlose Version enthält dabei 44 neue Widgets und auch einige der neuen Funktionen für Elementor.

Elementor Fazit

Elementor ist ein Page Builder für Wordpress der seinesgleichen sucht. Mich hat das Plugin absolut überzeugt. Nun läuft auch diese Website mit Elementor und ich denke, dass Elementor auch für Programmierer interessant ist. Vieles ist bereits integriert, sodass du auch auf Plugins verzichten kannst (Newsletter, Formular Plugin, etc).

Deshalb würde ich Elementor uneingeschränkt empfehlen – damit wird auch das Multi-Purpose Wordpress Theme obsolet.

Zudem sehe ich die Zukunft von Wordpress auch in den Page Buildern. Sicher: Page Builder erzeugen eine Menge Code, weil Sie eben auch mit sehr viel Code kommen. Dennoch halte ich diese Entwicklung nicht für ausschließlich negativ. Damit wird es auch für die Yoga-Leherin um die Ecke möglich, eine tolle Website zu erstellen ohne ihr Sparbuch auflösen zu müssen.

Dennoch solltest du dich nicht nur mit Design und Effekten beschäftigen. Eine grundsätzliche Design-affinität ist nötig – damit deine Website auch erfolgreich ist. Du bist allerdings nicht mehr auf irgendwelche Webdesign Agenturen angewiesen, die teilweise eben nicht immer im Sinne des Kunden handeln.

 

 

 

Ich habe den Page Builder für Dutzende Kundenprojekte genutzt. Ich habe also umfassende Erfahrungen gemacht. Dabei habe ich kleine Unternehmens Webseiten umgesetzt, aber auch große Shops.