Eine schön gestaltete Webseite kann einen guten ersten Eindruck hinterlassen. Es ist jedoch nicht immer einfach, eine erstklassige Webseite zu erstellen – vor allem, wenn du noch keine Erfahrung mit Design oder Entwicklung hast.
Hier kommt der WordPress Elementor Website Builder ins Spiel. Mit diesem modernen, benutzerfreundlichen Plugin kannst du eine beeindruckende Webseite erstellen, ohne eine einzige Zeile Code zu schreiben.
In diesem Beitrag erfährst du alles, was du über diesen äußerst beliebten WordPress-Page Builder wissen musst. Dann zeigen wir dir, wie du einige der wichtigsten Aufgaben von Elementor erledigst, z. B. das Erstellen von Layouts, Seiten und sogar benutzerdefinierten Vorlagen. Los geht’s!
Eine Einführung in WordPress Elementor
In den Anfängen des Internets erforderte die Erstellung einer Webseite fortgeschrittene Kenntnisse in der Webentwicklung und im Design oder den Zugang zu einem spezialisierten Team. Das bedeutete, dass die Erstellung einer Webseite zeitaufwändig, oft frustrierend und potenziell teuer war.
Dank der modernen Page Builder kannst du heute auch ohne Fachkenntnisse eine professionell gestaltete, leistungsstarke Webseite erstellen. Wenn deine Webseite einmal steht, kannst du jederzeit schnell und einfach Inhalte hinzufügen oder das Layout ändern, auch wenn du kein Programmierer bist.
Es gibt verschiedene WordPress-Seitenerstellungsprogramme, aber mit über fünf Millionen aktiven Installationen ist das Elementor-Plugin eines der beliebtesten. Elementor ermöglicht es dir, mit einem intuitiven Drag-and-Drop-Editor alles zu erstellen, von ganzen Webseiten bis hin zu einzelnen Landing Pages.
Mit Elementor kannst du alle Aspekte des Designs deiner Webseite über eine einzige Plattform steuern. Auf diese Weise kann deine Webseite dein Branding perfekt widerspiegeln.
Der intuitive, codefreie Editor von Elementor ist besonders bei Webseiten-Betreibern beliebt, die keine Erfahrung mit Design und Entwicklung haben. Er eignet sich auch hervorragend für Unternehmer/innen und kleine Unternehmen, die eine Idee für ein Online-Projekt haben, aber nicht unbedingt die Mittel, um ein eigenes Design- oder Entwicklungsteam einzustellen.
Auch wenn du ein erfahrener Profi bist, gibt es viele Gründe, Elementor zu nutzen. Nur weil du über Programmierkenntnisse verfügst, heißt das nicht, dass du immer alles von Grund auf neu erstellen solltest.
Elementor hat viele Funktionen, mit denen du in kürzester Zeit preisgekrönte Webseiten erstellen kannst. Dazu gehören über 90 vorgefertigte Widgets und professionell gestaltete Webvorlagen.
Auf diese Weise kann Elementor deine Produktivität und deinen Gewinn steigern. Diese zeitsparenden Funktionen können sich als besonders lukrativ erweisen, wenn du regelmäßig WordPress-Webseiten erstellst (z. B. für freiberufliche Entwickler/innen und WordPress-Agenturen).
Elementor Free vs Elementor Pro
Elementor ist eine „Freemium“-Software. Du kannst das Elementor-Plugin kostenlos herunterladen oder eine Elementor-Pro-Lizenz erwerben.
Das kostenlose WordPress-Plugin enthält alles, was du brauchst, um visuell ansprechende Verkaufsseiten, Produktlisten, Unternehmenswebseiten und vieles mehr zu erstellen. Es enthält über 40 Widgets, 100 Vorlagen und mehr als 300 Blöcke. Blöcke sind vorgefertigte Abschnittsvorlagen, die du mischen und anpassen kannst, um einzigartige Designs zu erstellen.
Wenn du mehr Funktionen haben möchtest, kannst du Elementor Pro kaufen. Damit bekommst du einige zusätzliche Widgets und den Theme Builder von Elementor freigeschaltet.
Mit dem Theme Builder kannst du fast alle Elemente deiner Webseite bearbeiten, einschließlich der Kopf- und Fußzeile. Du kannst auch eigene Designs für Beiträge und Archivseiten erstellen.
Wenn du einen Online-Shop entwickelst, enthält Elementor Pro auch einen WooCommerce Builder. Mit diesem kannst du den WooCommerce-Inhalt deiner Webseite anpassen, einschließlich der Produktseite, des Produktarchivs und der Checkoutseite. Außerdem erhältst du Zugang zu Widgets, die speziell zur Steigerung der Konversionsrate entwickelt wurden, wie z. B. Custom Add To Cart, Upsells und Product Related.
Elementor Pro kommt auch mit einem Popup Builder und einem Form Builder. Es gibt zwar separate Plugins, mit denen du Formulare und Popups erstellen kannst, aber wenn du dich für Elementor entscheidest, kannst du die Anzahl der Plugins, die du installieren und warten musst, minimieren.
Wenn du zu viele Plugins verwendest, kann deine Webseite anfälliger für Hacker werden. Sie können sogar die Leistung deiner Webseite beeinträchtigen. Daher ist es ratsam, die Anzahl der installierten Plugins gering zu halten. Da du alle Elemente deiner Webseite auf derselben Plattform entwirfst, ist es außerdem einfacher, ein einheitliches Erscheinungsbild zu erreichen.
Die Elementor Pro-Lizenzen beinhalten den Zugang zu über 60 Pro-Website-Kits. Das sind Pakete mit Vorlagen, Seiten, Popups und anderen Komponenten, mit denen du eine komplette Webseite erstellen kannst. Wenn du eine Expert-Lizenz oder höher erwirbst, erhältst du außerdem Zugang zu 20 Expert-Website-Kits.
Außerdem beinhaltet jede Pro-Lizenz Premium-Support. Normalerweise erhältst du innerhalb eines Tages eine Antwort vom Elementor-Supportteam. Wenn du dich jedoch für Elementor Pro Studio oder höher entscheidest, erhältst du ein Upgrade auf den VIP-Support. Damit kannst du an Live-Chats mit dem VIP-Support-Team von Elementor teilnehmen. Außerdem erhältst du vorrangige Antworten auf deine Tickets, die in der Regel in weniger als 30 Minuten eingehen.
Wenn du eine Agentur, ein Entwickler oder ein Designer bist, bist du vielleicht an einem Expertennetzwerk-Profil interessiert. Dort kannst du deine Arbeit präsentieren und die Aufmerksamkeit potenzieller Kunden auf dich ziehen.
Wenn du daran interessiert bist, über das Experts Network zu werben, könnte dich auch die Expert-, Studio- oder Agency-Lizenz von Elementor Pro interessieren. Diese Lizenzen berechtigen dich dazu, ein Profil auf diesem beliebten Marktplatz zu erstellen.
Die Elementor Pro-Pläne reichen von 49 bis 999 US-Dollar pro Jahr. Das Unternehmen bietet außerdem eine 30-tägige Geld-zurück-Garantie an, damit du es vor dem Kauf ausprobieren kannst.
So installierst du Elementor
Da es sich um ein WordPress-Plugin handelt, ist die Installation von Elementor schnell und einfach. Du kannst das kostenlose Plugin direkt von deinem WordPress-Dashboard herunterladen.
Um die kostenlose Version herunterzuladen, navigiere zu Plugins > Neu hinzufügen. Gib im Suchfeld “ Elementor“ ein. Wenn das Plugin angezeigt wird, klicke auf Jetzt installieren.
Wenn du dazu aufgefordert wirst, klicke auf Aktivieren. Das Plugin fügt eine Elementor-Option zu deiner WordPress-Seitenleiste hinzu.
Jetzt bist du bereit, Elementor zu benutzen! Um loszulegen, klicke einfach auf die Elementor-Option in der Seitenleiste.
Alternativ kannst du das Elementor-Plugin auch direkt aus dem WordPress-Repository herunterladen. Melde dich dann in deinem WordPress-Dashboard an und navigiere zu Plugins > Neu hinzufügen > Plugin hochladen. Dann klickst du auf Datei auswählen und wählst die Elementor- .zip-Datei aus, die du gerade heruntergeladen hast.
So verbindest du Elementor Pro mit WordPress
Es gibt zwei Möglichkeiten, Elementor Pro mit WordPress zu verbinden. Wenn du noch keine Elementor Pro-Lizenz erworben hast, musst du auf die offizielle Website gehen und “ Get Started“ auswählen.
Dann kannst du den Anweisungen auf dem Bildschirm folgen, um ein Elementor-Konto zu erstellen. Wenn du dazu aufgefordert wirst, gibst du einige Informationen über die Art der Webseite ein, die du erstellen möchtest.
Als nächstes wählst du den Plan aus, den du kaufen möchtest. Da Elementor eine aktive WordPress-Webseite benötigt, musst du die Domain deiner Webseite eingeben. Elementor überprüft dann, ob deine Webseite die WordPress-Plattform nutzt.
Wenn du eine aktive WordPress-Webseite hast, klickst du im nächsten Schritt auf Elementor installieren. Du wirst automatisch zur Elementor-Plugin-Seite weitergeleitet, wenn du gerade auf deiner Webseite angemeldet bist.
Wenn du dazu aufgefordert wirst, klicke auf Jetzt installieren > Aktivieren. Elementor fügt dann das Page Builder-Plugin zu deiner Webseite hinzu.
Wenn du bereits eine Elementor Pro-Lizenz erworben hast, kannst du dich auch auf der offiziellen Webseite mit den Daten anmelden, die du in deiner Bestätigungs-E-Mail erhalten hast.
In deinem Elementor-Konto wählst du im linken Menü den Punkt Abonnements aus. Dann kannst du auf Zip herunterladen klicken.
Als nächstes loggst du dich in dein WordPress-Dashboard ein und navigierst zu Plugins > Neu hinzufügen. Dann kannst du die Elementor Pro .zip-Datei hochladen, die du gerade heruntergeladen hast.
Nachdem du Elementor Pro installiert und aktiviert hast, sollte WordPress dich auffordern, deinen Lizenzschlüssel einzugeben. Alternativ kannst du auch zu Elementor > Lizenz > Verbinden & Aktivieren navigieren.
WordPress sollte deine Lizenz automatisch überprüfen, wenn du gerade in deinem Elementor-Konto angemeldet bist. Wenn das nicht der Fall ist, gibst du deinen Elementor-Benutzernamen und dein Passwort ein, wenn du zur Aktivierung deiner Lizenz aufgefordert wirst.
Elementor verwenden: 4 wesentliche Aufgaben, die du meistern musst
Mit Elementor kannst du auch ohne besondere Design- oder Entwicklungskenntnisse einzigartige Webseiten gestalten. Es ist jedoch hilfreich, sich mit den Grundlagen vertraut zu machen, bevor du eine komplette Webseite erstellst. Im Folgenden findest du eine kurze Einführung in den Elementor-Workflow.
1. Starte den Elementor Page Builder
Um eine neue Seite oder einen Beitrag im Elementor Page Builder zu erstellen, navigiere zu Seiten/Beiträge > Neu hinzufügen. Du kannst den Elementor-Editor starten, indem du auf Mit Elementor bearbeiten klickst .
Vielleicht hast du aber auch eine bestehende Seite, die von einer Überarbeitung profitieren könnte. In diesem Fall navigierst du einfach zu der betreffenden Seite und öffnest sie zur Bearbeitung. Dann kannst du auf die Schaltfläche Mit Elementor bearbeiten klicken.
Auf der linken Seite des Bildschirms siehst du die Elementor-Seitenleiste. Hier findest du alle Elemente, die du zu deinen Designs hinzufügen kannst, z. B. Schaltflächen und Überschriften.
Die Elementor-Seitenleiste enthält auch einen Bereich für globale Widgets. Wenn du dasselbe Widget in mehreren Designs wiederverwenden willst, solltest du es als globales Widget speichern. So ist dein benutzerdefiniertes Element jederzeit leicht zugänglich. Außerdem hast du so einen zentralen Ort, an dem du dein Widget einmal bearbeiten kannst, um universelle Änderungen vorzunehmen. Elementor überträgt diese Änderungen dann auf deine gesamte Webseite.
Auf der rechten Seite ist die Live-Vorschau, in der du dein Design erstellen kannst. Elementor wird automatisch aktualisiert und zeigt deine Änderungen in Echtzeit an, während du sie vornimmst.
2. Abschnitte, Spalten und Widgets hinzufügen
Der Elementor-Editor bietet Zugang zu drei Hauptbausteinen: Abschnitte, Spalten und Widgets. Wir haben uns bereits mit den vorgefertigten Widgets von Elementor beschäftigt, also schauen wir uns an, wie du sie zu deinen Designs hinzufügen kannst.
Normalerweise fängst du damit an, einen Abschnitt zu erstellen, indem du auf das + Symbol im Hauptfenster klickst. Elementor fordert dich dann auf, deine Struktur auszuwählen.
Die Strukturoptionen bestehen aus einer oder mehreren Spalten. Letztendlich platzierst du dein Widget in diesen Spalten. Sie spielen eine wichtige Rolle bei der Erstellung von übersichtlichen Layouts.
Nachdem du deine Entscheidung getroffen hast, fügt Elementor diesen Abschnitt zu deinem Layout hinzu. Um den Abschnitt an eine andere Stelle zu verschieben, klickst du ihn an und greifst dann die gepunkteten blauen Fläche, die erscheint.
Um einen Abschnitt zu bearbeiten, klickst du bei gedrückter Ctrl-Taste auf die gepunktete blaue Fläche. Dadurch wird ein Kontextmenü geöffnet, in dem du einfache Änderungen wie das Kopieren oder Löschen des ausgewählten Abschnitts vornehmen kannst.
Angenommen, du möchtest komplexere Änderungen vornehmen, dann klicke bei gedrückter Ctrl-Taste auf die blaue Fläche und wähle Abschnitt bearbeiten. Die Elementor-Seitenleiste wird nun aktualisiert und zeigt alle zusätzlichen Änderungen an, die du an diesem Abschnitt vornehmen kannst.
Du kannst auch Widgets zu diesem Abschnitt hinzufügen. Suche in der Elementor-Seitenleiste das gewünschte Widget und ziehe es auf die Hauptfläche.
Während du das Widget ziehst, hebt Elementor alle verschiedenen Abschnitte und Spalten hervor, in denen du das Element ablegen kannst. Wenn du fertig bist, lass einfach die Maus los. Elementor fügt das Widget nun zu dem von dir gewählten Abschnitt hinzu.
3. Bearbeiten deiner Webseiten-Einstellungen
Mit Elementor kannst du deine seitenweiten Einstellungen bearbeiten. Dazu gehört das Ändern der Standardschriftart und der HTML-Farben. Du kannst auch die Rahmen und Schatten ändern, die WordPress Elementen wie den Bildern deiner Webseite hinzufügt.
Indem du diese Einstellungen auf der Webseite-Ebene anpasst, kannst du ein einheitliches Erscheinungsbild deiner gesamten WordPress-Webseite sicherstellen. Dieser Prozess ist außerdem wesentlich schneller und einfacher, als wenn du diese Änderungen Seite für Seite vornimmst. Um die verfügbaren Webseite-Einstellungen zu sehen, klicke auf das Hamburger-Menü in der Elementor-Seitenleiste.
Du kannst nun deine Optionen erkunden und alle notwendigen Änderungen vornehmen. Wenn du bereit bist, deine neuen Webseiten-Einstellungen zu veröffentlichen, klicke auf die Schaltfläche Aktualisieren ganz unten in der Elementor-Seitenleiste.
4. Überprüfe deinen Änderungsverlauf
Während du deine Entwürfe bearbeitest, zeichnet Elementor deine Änderungen leise auf. Du kannst deine Änderungen ganz einfach rückgängig machen, was dir das Leben retten kann, wenn du merkst, dass du einen Fehler gemacht hast.
Das Verlaufsprotokoll von Elementor gibt dir auch die Freiheit zu experimentieren. Du kannst verschiedene Änderungen ausprobieren und sie dann schnell wieder entfernen. Indem Elementor dich zum Experimentieren ermutigt, kann es die Qualität deiner fertigen Designs verbessern.
Um das Elementor-Protokoll einzusehen, klickst du auf das Symbol Historie unten in der Seitenleiste. Die Registerkarte Aktionen zeichnet jede einzelne Änderung auf, die du in Elementor vornimmst. Das kann alles sein, vom Erstellen eines neuen Abschnitts bis zum Bearbeiten von bestehendem Text:
Jedes Mal, wenn du auf Speichern drückst, zeichnet Elementor die aktuelle Version deiner Seite als neue Revision auf. Du kannst alle diese Schnappschüsse auf der Registerkarte Revisionen sehen. Wenn du zu einem früheren Speicherstand zurückkehren möchtest, suche ihn einfach in der Liste der Revisionen und klicke darauf.
Wie du eine Seite in Elementor erstellst (2 Methoden)
Jetzt, wo du mit dem grundlegenden Elementor-Workflow vertraut bist, wollen wir sehen, wie du dieses Wissen nutzen kannst, um neue Seiten zu gestalten. Zuerst werden wir uns ansehen, wie du eine WordPress-Standardseite mit dem kostenlosen Elementor-Plugin erstellst. Dann schauen wir uns an, wie du mit WooCommerce und Elementor Pro eine Produktseite mit hoher Konversionsrate entwickeln kannst.
1. Wie man eine WordPress-Standardseite erstellt
Jede Webseite ist anders. Es gibt jedoch einige gemeinsame Elemente, die du auf verschiedenen Seiten findest. Dazu gehören Überschriften, Fließtext und Medien wie Bilder. Sehen wir uns an, wie du eine Seite mit diesen wichtigen Elementen erstellen kannst.
Um zu beginnen, erstelle eine neue Seite, indem du zu Seiten > Neu hinzufügen > Mit Elementor bearbeiten navigierst. Füge dann einen Abschnitt zu deinem Design hinzu, indem du auf das + Symbol klickst. Wir beginnen mit unserer Überschrift und entscheiden uns für ein einspaltiges Layout.
In der Elementor-Seitenleiste findest du das Überschriften-Widget. Ziehe dieses Widget per Drag & Drop in deinen neuen Abschnitt. Dann kannst du deinen Überschriftentext in der Elementor-Seitenleiste eingeben und verschiedene Einstellungen verwenden, um deinen Titel zu gestalten.
Dann klickst du auf das + Symbol, um einen zweiten Abschnitt hinzuzufügen. Wir werden ein Bild einbetten und dann etwas Text hinzufügen, also entscheiden wir uns für ein mehrspaltiges Layout.
Als Nächstes ziehst du das Texteditor-Widget aus der Elementor-Seitenleiste und legst es in diesem neuen Abschnitt ab. Dann kannst du deinen Text mit den Einstellungen in der Seitenleiste hinzufügen und gestalten.
Wenn du mit deinem Text zufrieden bist, suche das Bild-Widget. Auch dieses Widget fügst du per Drag & Drop zu deinem Abschnitt hinzu.
Klicke in der Seitenleiste auf die Vorschau-Miniaturansicht. Du kannst nun die WordPress-Mediathek nutzen, um ein neues Bild hochzuladen oder eine bereits hochgeladene Grafik auszuwählen.
Um dein Design in Aktion zu sehen, klicke auf das Augensymbol unten in der Elementor-Seitenleiste. Dadurch wird eine Vorschau deines Seitenlayouts in einem neuen Tab angezeigt.
Wenn du mit deinem Design zufrieden bist, klicke auf die Schaltfläche Veröffentlichen. Wenn deine Seite bereits live ist, wirst du stattdessen aufgefordert, sie zu aktualisieren.
2. So erstellst du eine WooCommerce-Produktseite
Wenn du einen WooCommerce-Shop betreibst, kannst du mit Elementor Pro eine eigene Produktseite erstellen. Dabei kann es sich um eine Änderung der Standard-WooCommerce-Seite handeln, die das Branding deiner Webseite besser widerspiegelt. Oder du versuchst, deine Seite zu optimieren, um mehr Konversionen zu erzielen.
Um eine benutzerdefinierte WooCommerce-Produktseite zu erstellen, wählst du im WordPress-Dashboard die Option Vorlagen aus. Dann klickst du auf die Schaltfläche Neu hinzufügen. Im nächsten Fenster öffnest du das erste Dropdown-Menü und wählst Einzelprodukt.
Gib deiner neuen Vorlage einen beschreibenden Namen und klicke auf Vorlage erstellen. Daraufhin wird die Elementor-Bibliothek mit allen verfügbaren Einzelproduktdesigns geöffnet.
Um dir eine Vorlage genauer anzusehen, fahre mit dem Mauszeiger darüber und klicke dann auf das Lupensymbol, wenn es erscheint. Wenn du dieses Design auf deinen Laden anwenden möchtest, klicke auf Einfügen.
Die Vorlagen von Elementor enthalten eine Reihe von vorgefertigten Komponenten. Um eines dieser Elemente zu bearbeiten, klicke es einfach an. Die Elementor-Seitenleiste wird dann aktualisiert und zeigt alle Einstellungen für das jeweilige Element an.
Elementor Pro bietet eine Reihe von WooCommerce-Widgets, die du zu deinen Designs hinzufügen kannst. Um zu sehen, was verfügbar ist, scrolle zu den Abschnitten WooCommerce oder Produkt in der Elementor-Seitenleiste.
Diese Abschnitte enthalten Widgets mit erweiterten integrierten Funktionen, wie WooCommerce Breadcrumbs, Warenkorb und Checkout. Um diese Elemente zu deinem Design hinzuzufügen, ziehst du sie einfach in den Elementor Canvas und lässt sie los. Dann kannst du das Widget in den Bereich ziehen, in dem du den Inhalt anzeigen möchtest.
Wenn du mit deinem Entwurf zufrieden bist, klicke auf Veröffentlichen. Dann wählst du Bedingung hinzufügen und gibst die Bereiche an, in denen du das Design verwenden willst. Du kannst die Vorlage zum Beispiel auf eine bestimmte Produktkategorie anwenden oder sie in deinem gesamten Shop verwenden.
Wie du vorgefertigte Elementor-Vorlagen findest und installierst
Elementor-Vorlagen sind vorgefertigte Seiten und Blöcke, die den Prozess der Website-Erstellung vereinfachen. Seiten sind vollständige Inhaltslayouts, während Blöcke Abschnitte sind, die vorgefertigte Widgets enthalten. Beliebte Beispiele für Blöcke sind Kopf- und Fußzeilen, Bewertungen und Erfahrungsberichte sowie häufig gestellte Fragen (FAQs).
Das kostenlose Elementor-Plugin enthält über 100 ganzseitige Vorlagen und mehr als 300 Blöcke. Wenn du auf Elementor Pro upgradest, erhältst du Zugang zu einigen zusätzlichen Optionen.
Klicke auf das Symbol Vorlage hinzufügen, um eine Vorlage auf dein aktuelles Design anzuwenden. Diese Schaltfläche sollte als Teil jedes Abschnittsblocks erscheinen und wird durch einen weißen Ordner dargestellt. Dadurch wird die Elementor-Bibliothek geöffnet.
Hier findest du alle Block- und Seitenvorlagen, die du auf deine Seite anwenden kannst. Du kannst dir eine Vorschau jeder Vorlage ansehen, indem du mit dem Mauszeiger über die Vorlage fährst und auf das Lupensymbol klickst.
Wenn du eine Vorlage gefunden hast, die du verwenden möchtest, klicke auf Einfügen. Wenn du dich noch nicht mit der Vorlagenbibliothek von Elementor verbunden hast, wirst du in einem Popup aufgefordert, diesen Schritt auszuführen.
Nachdem du die Verbindung hergestellt hast, fügt Elementor deine ausgewählte Vorlage ein. Du kannst sie nun anpassen. Du kannst zum Beispiel weitere Widgets hinzufügen oder Platzhalterinhalte löschen.
Wie du Vorlagen mit Elementor erstellst
Elementor kommt mit einer großen Auswahl an vorgefertigten Vorlagen. Manchmal hast du jedoch einen bestimmten Look im Kopf. In diesem Fall möchtest du deine Vorlagen vielleicht lieber selbst gestalten.
Wenn du deine Designs selbst erstellst, kannst du die Konsistenz deiner gesamten Webseite sicherstellen. Wenn du eine WordPress-Agentur bist, kannst du Vorlagen sogar nutzen, um Design und Entwicklung zu beschleunigen. Du könntest zum Beispiel eine Bibliothek mit Vorlagen erstellen, die alle Inhalte und Einstellungen enthalten, die du normalerweise auf deinen Kundenseiten verwendest. Diese Vorlagen kannst du dann als Ausgangspunkt für alle zukünftigen Projekte verwenden.
Um loszulegen, wähle im WordPress-Dashboard den Punkt Vorlagen aus. Dann klickst du auf Neu hinzufügen.
Im folgenden Popup öffnest du das erste Dropdown-Menü und wählst die Art der Vorlage, die du erstellen möchtest. Deine Optionen sind Seite, Abschnitt oder Landing Page.
Als Nächstes gibst du dem Design einen beschreibenden Namen und klickst auf Vorlage erstellen. Dadurch wird der Standard-Elementor-Page-Builder gestartet. Du kannst deine Vorlage nun genauso erstellen wie eine normale Seite. Füge einfach Abschnitte, Spalten und Widgets hinzu, bis du mit deinem Layout zufrieden bist.
Um dieses Design als Vorlage zu speichern, klicke auf den Pfeil neben der Schaltfläche Aktualisieren/Veröffentlichen. Du kannst dann Als Vorlage speichern auswählen.
Dieses Design wird nun in der Elementor-Bibliothek gespeichert. Du kannst darauf zugreifen, indem du die Bibliothek aufrufst und den Reiter Meine Vorlagen auswählst.
Alternativ kannst du auf deine benutzerdefinierten Vorlagen zugreifen, indem du im WordPress-Dashboard zu Templates > Saved Templates navigierst. Du kannst auch jedes deiner Designs öffnen und alle notwendigen Änderungen vornehmen.
Tipps und Tricks für die ersten Schritte mit Elementor
Mit Elementor kannst du schnell und einfach eine WordPress-Webseite entwerfen und erstellen. Mit einigen zeitsparenden Tricks kannst du deine Produktivität jedoch noch weiter steigern.
Manchmal erstellst du einen Abschnitt, den du auf der gleichen Seite wiederverwenden möchtest. Anstatt diesen Abschnitt manuell neu zu erstellen, kannst du eine Kopie erstellen. Klicke einfach auf den betreffenden Abschnitt und klicke dann bei gedrückter Ctrl-Taste auf die gepunktete Fläche, die erscheint.
Wähle dann Duplizieren. Dadurch wird ein Duplikat des Abschnitts direkt unter dem Original erstellt.
Manchmal möchtest du aber auch denselben Abschnitt auf mehreren Seiten oder sogar auf verschiedenen Webseiten wiederverwenden. Du kannst jeden Abschnitt als Blockvorlage speichern. Dadurch wird dein Design der Elementor-Bibliothek hinzugefügt, so dass du es immer griffbereit hast.
Um einen Block in eine wiederverwendbare Vorlage zu verwandeln, klicke bei gedrückter Ctrl-Taste auf das gepunktete Symbol. Wähle dann Als Vorlage speichern.
Du kannst jedes Widget bearbeiten, indem du es auf deinem Canvas auswählst und dann die Steuerelemente in der Elementor-Seitenleiste benutzt. Das Navigieren zwischen verschiedenen Widgets kann jedoch umständlich werden, wenn du viele andere Widgets hast. Das gilt besonders für sich überlappende Widgets oder wenn du viele Elemente auf kleinem Raum hinzugefügt hast.
Der Navigator von Elementor bietet eine Listenansicht aller Widgets auf deiner Seite, die in die entsprechenden Abschnitte und Spalten unterteilt sind. Du kannst ganz einfach zwischen deinen Widgets navigieren, indem du sie in dieser „Baumansicht“ auswählst Die Elementor-Seitenleiste wird dann aktualisiert und zeigt alle Optionen für das aktuell ausgewählte Widget an.
Tastenkombinationen sind die ultimative Zeitersparnis, und Elementor verfügt über verschiedene integrierte Hotkeys. Drücke Cmd/Ctrl + ? auf deiner Tastatur, um diese Tastenkombinationen anzuzeigen.
Daraufhin wird ein Fenster mit allen verfügbaren Tastenkombinationen geöffnet. Wenn du dich mit einigen oder allen dieser Tastenkombinationen vertraut machst, kannst du dein Webdesign und deine Entwicklung deutlich verbessern.
Zusammenfassung
Eine WordPress-Webseite zu erstellen ist nicht immer einfach, besonders wenn du kein erfahrener Webdesigner oder Entwickler bist. Zum Glück kann der Elementor Page Builder die Erstellung deiner Webseite vereinfachen.
Unabhängig davon, ob du dich für das kostenlose oder das Premium-Plugin entscheidest, kannst du mit Elementor jede Art von Beitrag oder Seite entwerfen und erstellen, die du brauchst. Dieser Builder wird mit einer Auswahl an vorgefertigten Vorlagen geliefert. Du kannst aber auch eigene Vorlagen erstellen und sie auf mehreren Seiten oder auf verschiedenen Webseiten wiederverwenden.
Hast du Fragen zur Verwendung des WordPress-Plugins Elementor? Lass es uns in den Kommentaren unten wissen!
Schreibe einen Kommentar