Das Designen eigener benutzerdefinierter Seitenlayouts in WordPress kann eine riesige Herausforderung sein. Viele Leute befürchten, dass die Erstellung einzigartiger Designs Programmierkenntnisse erfordert. Das kann frustrierend sein, wenn Sie das Erscheinungsbild Ihrer Website personalisieren möchten.
Glücklicherweise benötigen Sie mit Elementor keine Programmierkenntnisse. Elementor ist ein Drag-and-Drop-WordPress-Seitenersteller, der das Erstellen von Layouts einfach und intuitiv macht. Selbst Anfänger können mit wenigen Klicks beeindruckende Seiten erstellen.
Wir helfen unseren Lesern seit Jahren dabei, ihre Websites mit Elementor anzupassen. Wir kennen also die einfachsten und effektivsten Wege, um es für Sie funktionieren zu lassen.
In diesem Artikel führen wir Sie durch die Schritte zur schnellen und einfachen Erstellung benutzerdefinierter WordPress-Layouts mit Elementor.
Warum und wann benötigen Sie benutzerdefinierte WordPress-Layouts?
Viele kostenlose und Premium-WordPress-Themes bieten mehrere Layout-Optionen für verschiedene Arten von Seiten. Manchmal erfüllen jedoch keine dieser Layouts Ihre Anforderungen.
Wenn Sie PHP, HTML und CSS beherrschen, können Sie Ihre eigenen Seiten-Templates erstellen oder sogar ein Child-Theme für Ihre Website erstellen. Die Mehrheit der WordPress-Benutzer sind jedoch keine Entwickler, daher ist diese Option für sie nicht praktikabel.
Wäre es also nicht großartig, wenn Sie Seitenlayouts einfach per Drag-and-Drop gestalten könnten?
Genau das macht Elementor. Es ist ein Drag-and-Drop-WordPress-Seiten-Builder-Plugin, mit dem Sie ganz einfach Ihre eigenen benutzerdefinierten WordPress-Layouts ohne Programmierkenntnisse erstellen können.
WordPress + Elementor ist eine leistungsstarke Kombination, die eine intuitive Benutzeroberfläche bietet, mit der Sie benutzerdefinierte Layouts mit Live-Vorschau erstellen können. Es enthält viele fertige Module für alle Arten von Webdesign-Elementen.
Elementor verfügt über mehrere professionell gestaltete Vorlagen, die Sie sofort laden und als Ausgangspunkt verwenden können. Es funktioniert mit allen standardkonformen WordPress-Themes und ist mit allen beliebten WordPress-Plugins kompatibel.
Weitere Details finden Sie in unserem vollständigen Elementor-Testbericht.
In diesem Sinne zeigen wir Ihnen, wie Sie mit Elementor benutzerdefinierte WordPress-Layouts erstellen. Hier ist eine kurze Übersicht über alle Schritte, die wir Ihnen zeigen werden:
- Erste Schritte mit Elementor
- Erstellen benutzerdefinierter WordPress-Layouts mit Elementor
- Erstellen Ihrer eigenen Vorlagen in Elementor
- Bonustipp: Elementor-Alternativen zum Erstellen benutzerdefinierter Layouts
Lass uns anfangen!
Erste Schritte mit Elementor
Zuerst müssen Sie das Elementor Pro Plugin erwerben. Es ist die kostenpflichtige Version des kostenlosen Elementor Plugins und bietet Ihnen Zugriff auf zusätzliche Funktionen und 1 Jahr Support.
Als Nächstes müssen Sie das Elementor-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Elementor » Einstellungen besuchen, um die Plugin-Einstellungen zu konfigurieren.
Hier können Sie Elementor für verschiedene Beitragstypen aktivieren. Standardmäßig ist es für Ihre WordPress-Beiträge und -Seiten aktiviert.
Wenn Sie benutzerdefinierte Beitragstypen auf Ihrer Website haben, werden diese ebenfalls hier angezeigt und Sie können sie auch aktivieren.
Sie können Benutzerrollen ausschließen oder einschließen, die Elementor beim Schreiben von Beiträgen oder Seiten verwenden können. Standardmäßig ist der Seitenersteller nur für Administratoren aktiviert.
Vergessen Sie dann nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.
Erstellen benutzerdefinierter WordPress-Layouts mit Elementor
Zuerst müssen Sie eine neue Seite oder einen neuen Beitrag auf Ihrer WordPress-Website erstellen. Auf dem Beitragsbearbeitungsbildschirm bemerken Sie die neue Schaltfläche „Mit Elementor bearbeiten“.
Ein Klick darauf öffnet die Elementor-Benutzeroberfläche, wo Sie Ihre Seite mit dem Drag-and-Drop-Seitenersteller von Elementor bearbeiten können.
Sie können Abschnitte hinzufügen und Ihre Seite von Grund auf neu erstellen oder eine Vorlage auswählen.
Vorlagen bieten Ihnen eine schnelle und einfache Möglichkeit, loszulegen. Elementor wird mit mehreren professionell gestalteten Vorlagen geliefert, die Sie nach Belieben anpassen können.
Beginnen wir mit einer Vorlage, indem wir auf die Schaltfläche „Vorlage hinzufügen“ klicken.
Dies öffnet ein Popup, in dem Sie die verschiedenen verfügbaren Vorlagen sehen können. Sie sollten nach einer Vorlage suchen, die dem ähnelt, was Sie für Ihr Seitenlayout wünschen.
In unserem Beispiel betrachten wir 404-Seiten-Vorlagen.
Jetzt müssen Sie auf die Vorlage klicken, die Ihnen gefällt, und dann auf die Schaltfläche „Einfügen“ klicken, um sie zu Ihrer Seite hinzuzufügen.
Elementor lädt nun die Vorlage für Sie.
Sie können jetzt mit der Bearbeitung der Vorlage beginnen, um sie an Ihre Bedürfnisse anzupassen. Zeigen Sie einfach auf ein beliebiges Element und klicken Sie darauf, um es auszuwählen, und Elementor zeigt Ihnen seine Einstellungen in der linken Spalte an.
Wie Elementor-Layouts funktionieren
Sprechen wir nun darüber, wie Elementor-Layouts funktionieren.
Elementor-Layouts werden mit Abschnitten, Spalten und Widgets erstellt. Abschnitte sind wie Zeilen oder Blöcke, die Sie auf Ihrer Seite platzieren.
Jeder Abschnitt kann mehrere Spalten haben, und jeder Abschnitt und jede Spalte kann eigene Stile, Farben, Inhalte usw. haben.
Sie können mit Elementor-Widgets alles in Ihre Spalten und Abschnitte einfügen. Diese Widgets sind verschiedene Arten von Inhaltsblöcken, die Sie in Ihre Elementor-Abschnitte einfügen können.
Es steht eine umfangreiche Sammlung von Widgets zur Verfügung, die alle gängigen Webdesign-Elemente abdecken, die Sie sich vorstellen können. Wählen Sie einfach ein Widget aus und ziehen Sie es in Ihren Abschnitt oder Ihre Spalte.
Sie können Bilder, Text, Überschriften, Bildergalerien, Videos, Karten, Symbole, Testimonials, Slider, Karussells und vieles mehr hinzufügen.
Sie können auch Standard-WordPress-Widgets und sogar Widgets, die von anderen WordPress-Plugins erstellt wurden, auf Ihrer Website hinzufügen. Wenn Sie beispielsweise WPForms verwenden, um verschiedene Formulare für Ihre Website zu erstellen, können Sie dessen Widget in Elementor verwenden.
Sobald Sie mit der Bearbeitung fertig sind, können Sie auf den Pfeil neben der Schaltfläche „Veröffentlichen“ klicken, um verschiedene Speicheroptionen anzuzeigen.
Hinweis: Das Speichern eines Seitenlayouts veröffentlicht die Seite nicht auf Ihrer WordPress-Website, aber es wird gespeichert.
Sie können Ihre Seite jetzt in der Vorschau anzeigen oder zum WordPress-Dashboard wechseln.
Dies bringt Sie zurück zum Inhaltseditor. Sie können Ihre WordPress-Seite jetzt speichern oder auf Ihrer Website veröffentlichen.
Erstellen Ihrer eigenen Vorlagen in Elementor
Elementor ermöglicht es Ihnen, Ihre eigenen benutzerdefinierten Layouts als Vorlagen zu speichern. So können Sie Ihre eigenen Vorlagen wiederverwenden, um zukünftig noch schneller neue Seiten zu erstellen.
Bearbeiten Sie einfach die Seite, die Sie als Vorlage speichern möchten, mit Elementor. Klicken Sie in der Elementor-Bearbeitungsoberfläche auf den Pfeil neben der Schaltfläche „Veröffentlichen“.
Sie sehen nun weitere Optionen zum Speichern Ihres Beitrags. Klicken Sie einfach auf die Option „Als Vorlage speichern“.
Dies öffnet ein Popup-Fenster, in dem Sie einen Namen für Ihre Vorlage angeben müssen.
Nachdem Sie den Namen eingegeben haben, klicken Sie einfach auf die Schaltfläche „Speichern“.
Wenn Sie das nächste Mal ein benutzerdefiniertes Seitenlayout erstellen, können Sie es aus dem Tab „Meine Vorlagen“ auswählen.
Alles, was Sie tun müssen, ist auf die Schaltfläche 'Einfügen' für Ihr benutzerdefiniertes Seitenlayout zu klicken.
Sie können diese Vorlage auch exportieren und mit Elementor auf anderen WordPress-Websites verwenden.
Klicken Sie einfach auf das 3-Punkte-Symbol und dann auf die Option „Exportieren“.
Von hier aus können Sie die Vorlage auf Ihren Computer herunterladen.
Bonustipp: Elementor-Alternativen zum Erstellen benutzerdefinierter Layouts
Neben Elementor gibt es andere Landingpage- und Website-Builder, mit denen Sie benutzerdefinierte Layouts für Ihre Website erstellen können.
Hier sind einige der besten Elementor-Alternativen, die Sie verwenden können:
- SeedProd ist der beste Drag-and-Drop-Website-Builder für WordPress, mit dem Sie benutzerdefinierte Layouts für Ihre Landingpages erstellen können. Es stehen über 300 Vorlagen für Themes oder Landingpages zur Auswahl. SeedProd bietet auch unzählige Anpassungsoptionen und Blöcke, um beeindruckende Seiten zu erstellen. Weitere Details finden Sie in unserem vollständigen SeedProd-Testbericht.
- Divi ist ein visuelles Theme und ein Page Builder. Es ist seit über 14 Jahren auf dem Markt und bietet verschiedene Funktionen zum Erstellen von WordPress-Layouts, einschließlich einer Layout-Bibliothek. Es gibt viele Anpassungsoptionen im visuellen Builder, und Sie müssen keinen Code bearbeiten.
- Thrive Architect ist ein leistungsstarker und anfängerfreundlicher Seitenersteller, mit dem Sie schöne Layouts erstellen können. Er wird mit über 352 Vorlagen und vielen Anpassungsoptionen geliefert. Sie können den visuellen Front-End-Builder verwenden, um jedes Element auf der Seite zu bearbeiten. Weitere Details finden Sie in unserem Thrive Architect Testbericht.
- Beaver Builder ist ein weiterer beliebter Drag-and-Drop-Seitenersteller für WordPress. Er ist einfach zu bedienen und Sie können mit Beaver Builder problemlos Layouts für Seiten und Beiträge einrichten. Er bietet auch vorgefertigte Vorlagen für Landing Pages, aber es gibt nicht so viele wie bei SeedProd oder Divi.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie benutzerdefinierte WordPress-Layouts mit Elementor erstellen. Möglicherweise möchten Sie auch unseren Expertenvergleich von Elementor vs. Divi vs. SeedProd und unsere Auswahl für die beste Webdesign-Software sehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Moinuddin Waheed
Ich habe gesehen, wie Elementor seit seiner Entstehung vor sieben Jahren aus der Nähe gewachsen ist.
Es bietet eine sehr einfach zu bedienende Oberfläche, mit der jeder visuell ästhetische und ansprechende Websites erstellen kann.
Es hilft auch dabei, komplexe Designs zum Kinderspiel zu machen.
Aber ehrlich gesagt, hatte ich schlechte Erfahrungen in Bezug auf seine Ladezeit und Leistung.
Seitdem ich es nicht mehr benutze, habe ich mich nie wieder dafür entschieden.
Ich nutze heutzutage SeedProd und einige Block-basierte Builder, die die Full Site Editor-Funktion nutzen.
Aber nichtsdestotrotz ist Elementor sehr gut für jeden, der gerade mit der Erstellung einer WordPress-Website beginnt.
Jiří Vaněk
Die Geschwindigkeit der Website ist ein gewisser Kompromiss für die Verwendung von Elementor, da es die Webgestaltung für Sie erheblich erleichtert. Als WordPress Gutenberg einführte, habe ich es eine Weile nicht mehr benutzt. Der Block-Editor war für mich ein Albtraum. Ich verstand ihn nicht und fand ihn kompliziert. Dann entdeckte ich Elementor und dank ihm kehrte ich zu WordPress zurück und war froh, dass das Erstellen von Websites über WordPress wieder einfach war, wie zuvor. Ja, in einigen Fällen kann Elementor die Website verlangsamen, aber es geht mehr um die allgemeine Einrichtung der Website als um ein direktes Problem mit Elementor. Ich glaube jedoch, dass viele Leute WordPress überhaupt nicht nutzen würden, wenn es Elementor nicht gäbe, aufgrund der Komplexität des Gutenberg-Editors.
Allin
Ist es schlecht, beim Erstellen einer Website zwischen dem Customizer und Elementor hin und her zu wechseln – schwächt das die Website irgendwie? Ich benutze das Astra-Theme.
WPBeginner Support
Sie möchten bei einem Editor bleiben, da ein Hin- und Herwechseln die von Ihnen hinzugefügte Markup in Ihrem Inhalt ändern könnte.
Admin
Jiří Vaněk
Das ist keine gute Praxis. Ähnlich wie beim Schreiben eines Artikels. Wenn jemand von Elementor zu Gutenberg wechselt, führt dies normalerweise dazu, dass Stile durcheinander geraten und das Ergebnis schlecht ist. Es ist gut, sich nur auf eine Methode gleichzeitig zu beschränken.
Lindy Warrell
Ich hatte zu viel Angst, Elementor zu installieren, falls es mein Theme durcheinander bringt. Tut es das? Wenn nicht, werde ich es vielleicht ausprobieren, da ich die Gutenberg-Blöcke sehr einschränkend finde, wenn es darum geht, meine eigenen Seiten einzurichten oder zu gestalten.
WPBeginner Support
By default it shouldn’t, if you reach out to Elementor they can let you know how it will react with your theme
Admin
J M Das
Der Beitrag ist sehr nützlich. Ich habe eine Website für Immobilienangebote. Ich benutze dafür das Impress Listing Plugin. Wie kann ich die so erstellten benutzerdefinierten Layouts oder Vorlagen anstelle der Standard-Listing-Seite verwenden. Die Informationen auf der Seite besagen, dass die benutzerdefinierten Layouts oder Vorlagen zum Theme-Verzeichnis hinzugefügt werden müssen. Wie mache ich das. Ich benutze ein Child-Theme.
Elaine Wright
Wo speichert Elementor seine CSS-Dateien im Verzeichnisbaum? Wo finde ich die Datei(en), die es bearbeitet?
Speichert es etwas in der Datenbank?
Ich suche schon seit einiger Zeit nach einer Antwort darauf und finde nichts.
Danke!
Yula
Das war extrem hilfreich! Danke! Hat mir viel Arbeit erspart
Erwin
Sagen Sie damit, dass Sie keinen Child-Theme erstellen müssen, wenn Sie Elementor verwenden?
Was passiert, wenn Sie das Theme aktualisieren?
Redaktion
Elementor ist ein Seitenersteller und seine Einstellungen werden im Plugin gespeichert. Es funktioniert mit jedem Theme.
Admin
andre
Ist es möglich, ein Child-Theme mit Elementor zu bearbeiten? Speziell im Kategorie-Layout.
Da ich zwar ein schönes Design auf meiner "Startseite" habe, aber wenn ich zur Kategorie wechsle, passt das Design nicht zum Stil der Startseite.
Monique
Ich versuche, meine Executive-Seite mit Bildern und Biografie zu erstellen. Wie fange ich damit mit Elementor an?
David Liou
Bedeutet das, dass Sie Ihr Konto auf den Geschäftstyp upgraden müssen? Da die persönliche Version den Upload von Vorlagen nicht unterstützt.
WPBeginner Support
Hallo David,
Dieser Artikel handelt von selbst gehosteten WordPress.org-Websites. Bitte sehen Sie sich unseren Leitfaden zum Unterschied zwischen selbst gehostetem WordPress.org vs. kostenlosem WordPress.com-Blog an.
Admin
Alex
Ist die resultierende Website responsiv? Andere ähnliche Apps rühmen sich damit, dass sie bei der Erstellung vollständig responsiver Websites helfen, und haben festgestellt, dass sie eine völlige Enttäuschung sind.
Tenika
Ich habe die kostenlose Version verwendet, um meine Homepage zu gestalten, und sie ist vollständig responsiv. Dies ist ein wirklich großartiges Plugin und es tut alles, was Sie in der kostenlosen Version brauchen könnten! Es ist so gut, dass ich plane, die Pro-Version zu kaufen, nur um den Entwickler für ein so nützliches Plugin zu unterstützen und ihm zu danken.
Rodney Lacambra
Tolle Anleitung mit dem Elementor Drag & Drop Page Builder. Habe diese noch nicht ausprobiert, aber sie ist es wert.
Dies könnte eine großartige Alternative zum SiteOrigin Page Builder sein.
Danke fürs Teilen. Insgesamt gut geeignet, um benutzerdefinierte Layouts mit WordPress zu erstellen.
~Rod
Deepak
Ich benutze Elementor in meinem Blog und es zeigt mir die Fehlermeldung „Internetserver nicht gefunden“, wenn ich meine Seite mit diesem Plugin bearbeite.
Tenika
Sie sollten die Support-Seite auf deren Website überprüfen. Dort gibt es viele hilfreiche Tipps zur Fehlerbehebung.
Victorvijau
Danke für den Beitrag. Ich habe nach einem Plugin für diesen Zweck gesucht, um eine Seite für meine Website zu erstellen
Vielen Dank