Elementor WordPress: So erstellst Du Websites wie ein Profi

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Elementor ist ein Page-Builder-Plugin für WordPress, das ähnlich wie die bekannten Homepage-Baukästen funktioniert. Das heißt, dass Du alle Elemente – Texte, Bilder, Videos und mehr – einfach auf Deine Website ziehen kannst. Die Änderungen werden Dir live angezeigt. So gelingt es, im Handumdrehen eine professionelle Website zu erstellen, die Deinen Vorstellungen zu 100 Prozent entspricht.

Elementor erhältst Du in einer kostenlosen sowie in einer kostenpflichtigen Version. Ob Elementor das richtige Plugin für Dich ist und wie Du Dein erstes Design erstellst, erfährst Du im folgenden Ratgeber.

Was ist Elementor?

Elementor ist ein Plugin für WordPress, mit dem Du im Drag-and-drop-Verfahren eigene Websites erstellst. So musst Du Dich nicht auf die vorgefertigten WordPress-Templates verlassen. Stattdessen kannst Du von Grund auf selbst kreativ werden. Du benötigst keinerlei Kenntnisse in HTML, PHP oder CSS.

Elementor wurde mittlerweile auf über 8 Millionen Websites installiert. Es zählt damit zu den beliebtesten Plugins überhaupt. Grundlage von Elementor sind die sogenannten Widgets, also Designelemente, die Du wie bei einem Homepage-Baukasten auf die Websites ziehst. Dabei handelt es sich beispielsweise um Überschriften, Texte, Bilder, Menüs oder Slideshows. Über 90 verschiedene frei konfigurierbare Widgets hast Du zur Verfügung.

Nahezu alles lässt sich bei Elementor einstellen. So hast Du unter anderem die Kontrolle über Farben, Schriftgrößen und Abstände – jeweils unabhängig für PCs, Tablets und Handys. Dein Design ist so pixelgenau und responsiv. Schon in der kostenlosen Variante gibt es keine Limitierung des Umfangs Deiner Website.

Elementor PlugIn – Die Installation in vier einfachen Schritten

Elementor zu installieren ist nicht schwer. Wähle im Hauptmenü den Menüpunkt „Plugins“ aus und suche nach „Elementor“. Da es zu den beliebtesten Apps zählt, findest Du Elementor jedoch meist schon auf der Startseite. Klicke anschließend auf „Jetzt installieren“.

Nun findest Du Elementor unter „Installierte Plugins“. Um das Tool nutzen zu können, solltest Du es mit einem Mausklick aktivieren. Dies dauert nur wenige Sekunden.

Die kostenlose Version von Elementor ist nun auf Deiner Website verfügbar. Möchtest Du die kostenpflichtige Pro-Version nutzen, musst Du einen Account auf elementor.com erstellen und Dich für einen der Tarife entscheiden. In Deinem Dashboard findest Du im Anschluss einerseits das Pro-Plugin als Zip-Datei. Auf der Plugin-Seite, auf der Du schon die kostenlose Version gefunden hast, kannst Du mit einem Klick auf „Plugin hochladen“ die Datei installieren und ebenfalls aktivieren.

Andererseits siehst Du in Deinem Elementor-Dashboard den Lizenzschlüssel, den Du kopieren solltest. Schließlich wirst Du nach der Installation aufgefordert, Elementor Pro zu aktivieren. Alternativ kannst Du Dich über WordPress mit Deinem Elementor-Account verbinden. Ist das erledigt, ist Elementor Pro bereit zur Nutzung.

Die ersten Schritte mit Elementor

Nach der erfolgreichen Installation erstellst Du Seiten und Beiträge zunächst so, wie Du es von WordPress kennst. Dabei stehen Dir drei verschiedene Möglichkeiten zur Verfügung, um einzelne Unterseiten mit Elementor zu gestalten.

Diese findest Du bei einer Seite oder einem Beitrag auf der rechten Seite. Unter „Beitrags-Attribute“ und „Template“ wählst Du zwischen „Standardtemplate“, „Elementor Canvas“ und „Elementor Volle Breite“.

Entscheidest Du Dich für das „Standardtemplate“, bleibt das originale Design Deiner WordPress-Seite erhalten. Du kannst nun lediglich den Inhalt mit Elementor bearbeiten. Mit „Elementor Canvas“ greifst Du auf das Design zurück, das Du im Theme-Builder von Elementor gestaltet hast. So verfügt Deine Seite über Header und Footer. Bei „Elementor Volle Breite“ startest Du mit einer komplett leeren Seite. Wähle für einen einheitlichen Look „Elementor Canvas“.

Hast Du bereits ein Theme für Seiten und Beiträge erstellt oder heruntergeladen, reicht es, wie üblich Text in das Textfeld einzugeben. Möchtest Du allerdings eine Seite individuell mit Elementor gestalten, klickst Du einfach auf den blauen Button „Mit Elementor bearbeiten“ unter dem Feld für die Überschrift. Schon landest Du im Editor von Elementor.

Einfache Bedienung ohne Vorkenntnisse

Sobald Du das erste Mal eine Website mit Elementor bearbeitest, fällt Dir sofort das zweigeteilte Layout auf. Auf der linken Seite findest Du sämtliche Widgets. Rechts siehst Du dagegen die Änderungen auf der Website in Echtzeit.

Texte, Bilder und viele weitere Elemente fügst Du hinzu, indem Du sie mit der Maus auf die Website ziehst. Anschließend kannst Du sie noch an die passende Stelle schieben. Um mehrere Widgets nebeneinander anzuzeigen, musst Du auf das rosa unterlegte Plus auf der Website klicken. Wähle nun die Anzahl der Spalten, die dieser Teil Deiner Website besitzen soll. Die Spaltenbreite kannst Du im Anschluss mit der Maus oder per Tastatureingabe anpassen.

Ist das Widget einmal auf der Website, ergeben sich mit dem Klick darauf viele weitere Möglichkeiten. Die Größe und das Design lassen sich nun noch weiter verfeinern. Bist Du mit dem Entwurf zufrieden, kannst Du die Website über den grünen Button am unteren Rand speichern. Schon wenige Sekunden später sind die Änderungen sichtbar.

Elementor Templates: Die Bibliothek für fertige Websites

Direkt nach dem Start ist es natürlich schwer, sofort kreativ zu werden und die perfekte Website zu erstellen. Dank der Template-Bibliothek ist das jedoch gar nicht nötig.

Mit einem Klick auf den grau unterlegten Ordner im Drag-and-drop-Editor fügst Du ein Template ein. Du hast dabei die Wahl zwischen ganzen Seiten und einzelnen Abschnitten. Dir stehen über 200 verschiedene Templates zur Verfügung. Unter den Website-Kits findest Du Vorlagen aus den Bereichen Blog, Corporate Blog, E-Commerce, Portfolio, Tourismus und mehr. Die einzelnen Abschnitte sind hilfreich, wenn Du zum Beispiel auf der Suche nach fertigen Headern, Kontaktformularen oder Anfahrtsbeschreibungen bist.

Importierst Du ein Template, kannst Du die Voreinstellungen Deiner Website – Schriftarten, Schriftgrößen und Farben – mit einem Klick übernehmen. Templates kannst Du sogar selbst erstellen und auf anderen Seiten einfügen.

So optimierst Du Deine Website für Handys und Tablet

Mobilgeräte haben ihre ganz eigenen Auflösungen und Seitenverhältnisse. Eigene Abstände und Schriftgrößen sind daher Pflicht. Diese kannst Du mit Elementor jedoch für alle Geräte separat optimieren.

Mit Klick auf einen Abschnitt oder ein Widget triffst Du auf alle Optionen zur Individualisierung. Vor nahezu allen Auswahl- und Eingabefeldern findest Du ein kleines Symbol, auf das Du klicken kannst. Wähle nun das Gerät, für das Du Deine Website optimieren möchtest. Anschließend kannst Du einen individuellen Wert für das Gerät festlegen.

Unter dem Reiter „Erweitert“ stößt Du auf weitere Optionen, um Optimierungen für mobile Endgeräte vorzunehmen. Dort kannst Du die Spalten umkehren – oft sinnvoll, wenn sie mobil untereinander angezeigt werden sollen – oder Widgets auf einzelnen Geräten sogar ganz ausblenden.

Du möchtest sehen, wie Deine Website auf Tablets und Handys aussieht? Dann findest Du links neben dem Button zum Speichern ebenfalls die bereits bekannten Symbole zum Umschalten der Ansicht. Elementor geht hierbei von besonders kleinen Breakpoints aus. So gelingt es Dir, Deine Seite auch für ältere Geräte zu optimieren, die noch nicht über hohe Auflösungen verfügen. Die Breakpoints kannst Du auf Wunsch ändern.

Riesige Vielfalt an Plugins für Elementor

Über 90 Widgets sind beachtlich. Natürlich kann Elementor jedoch (noch) nicht jede Funktion bereitstellen, die Nutzer für sinnvoll erachten. Dafür existieren jedoch zahlreiche Drittanbieter-Plugins, die mit dem Baukasten von Elementor kompatibel sind.

Diese findest Du unter dem Stichwort „Elementor“. Dabei handelt es sich unter anderem um ganze Widget-Sammlungen, zusätzliche Templates oder einzelne Funktionen. Widgets für Buchungsseiten, Lebensläufe oder Tabellen sind nur Beispiele.

Nicht alle Plugins sind auf dem neuesten Stand. Zu viele Plugins können zudem die Performance Deiner Seite negativ beeinträchtigen.

Reicht die kostenlose Variante? Oder brauche ich Elementor Pro?

Für kleinere Webprojekte ist die kostenlose Version von Elementor ausreichend. Soll es aufwändiger werden, ist Elementor Pro jedoch die bessere Wahl. Die kostenpflichtige Version erlaubt es Dir, die Möglichkeiten von WordPress als Content-Management-System voll auszuschöpfen.

Essenziell ist hierfür der Theme-Builder. Mit ihm kreierst Du ein vollständiges Design für Deine Website. Dieses beinhaltet unter anderem eigene Header und Footer, die auf allen Unterseiten sichtbar sind. Auch Templates für Blogartikel, automatisch generierte Archive aus Kategorien und Suchergebnissen sowie eigene 404-Seiten sind möglich.

Das ist jedoch noch nicht alles. Globale Widgets (Widgets, deren Änderungen auf allen Unterseiten sichtbar werden), Pop-ups und eigene Schriftarten finden den Weg auf Deine Website. Mit Elementor Pro kannst Du sogar Deinen eigenen Online-Shop gestalten.

Zudem erhältst Du Zugang zu einer Vielzahl neuer Designs und Widgets mit Elementor Pro. Kontaktformulare, Share-Buttons und eine Übersicht der Blogbeiträge sind nur Auszüge davon. Eine Übersicht über alle Widgets findest Du hier.

Die kostenpflichtige Pro-Version von Elementor erhältst Du ab 49 US-Dollar pro Jahr. Die höherpreisigen Tarife bis 999 US-Dollar erlauben es Dir, mehr Websites unter derselben Lizenz zu erstellen.

Was passiert, wenn Du Elementor deaktivierst?

Solltest Du Elementor versehentlich deinstallieren, herrscht zunächst Chaos auf Deiner Website. Elementor-Templates werden nur richtig angezeigt, wenn das Plugin auch installiert ist. Doch keine Sorge: Sobald Du Elementor wieder installierst, ist alles wie vorher.

Ein Auslaufen der jährlich erneuerbaren Pro-Lizenz ist weit weniger dramatisch. Du kannst zwar nun nicht mehr auf die Pro-Features zurückgreifen, Deine Website sieht jedoch weiterhin aus wie vorher. Planst Du eine Website, die ihr Design nicht großartig verändern soll, ist eine Verlängerung der Lizenz somit nicht unbedingt notwendig. Blogbeiträge kannst Du noch immer verfassen, sie werden auch weiterhin korrekt angezeigt.

Elementor WordPress: Der bessere Homepage-Baukasten

Du möchtest Deine Website mit einem Homepage-Baukasten erstellen? Entscheide Dich lieber für WordPress und Elementor!

Mit WordPress hast Du volle Kontrolle, wo Du Deine Website hosten möchtest. So entscheidest Du, für wie viele Besucher Deine Website ausgelegt sein soll. Auch von Wartungsarbeiten und Ausfällen bist Du so nicht betroffen.

Elementor ist ein geniales Plugin mit einer riesigen Vielfalt an Funktionen. Auch ohne Vorkenntnisse baust Du eine Website, die deutlich mehr hergibt, als bei einem der bekannten Baukästen. Dabei ist Elementor nicht einmal teurer. Die einfache Pro-Lizenz in Kombination mit einem günstigen Webspace kostet Dich nur etwa fünf Euro pro Monat. Dafür erhältst Du bei keinem der Homepage-Baukästen den vollen Funktionsumfang.

Die große Community macht den Einstieg mit Elementor einfach. In Foren findest Du per einfacher Google-Suche schnelle Hilfe. Zudem stehen Dir unendlich viele YouTube-Tutorials zur Verfügung, die Dir jeden Schritt mit Elementor anschaulich erklären.

Ein Umzug auf einen anderen Webspace stellt keine Herausforderung dar. Die Lizenz kannst Du einfach übertragen, auch die erstellten Seiten lassen sich problemlos exportieren und auf der neuen Website hochladen.