So erstellen Sie benutzerdefinierte WordPress-Layouts mit Elementor

Möchten Sie Ihre eigenen benutzerdefinierten Seitenlayouts in WordPress erstellen? Elementor ist ein Drag & Drop-Builder für WordPress-Seiten, mit dem Sie problemlos benutzerdefinierte WordPress-Layouts erstellen können, ohne Programmierkenntnisse zu benötigen. In diesem Artikel zeigen wir Ihnen, wie Sie mit Elementor mit wenigen Klicks benutzerdefinierte WordPress-Layouts erstellen.

Warum und wann benötigen Sie benutzerdefinierte WordPress-Layouts??

Viele kostenlose und erstklassige WordPress-Themes bieten mehrere Layout-Optionen für verschiedene Arten von Seiten. Manchmal entspricht jedoch keines dieser Layouts Ihren Anforderungen.

Wenn Sie wissen, wie Sie in PHP, HTML und CSS schreiben, können Sie eigene Seitenvorlagen erstellen oder sogar ein untergeordnetes Design für Ihre Site erstellen. Die Mehrheit der WordPress-Benutzer sind jedoch keine Entwickler, daher funktioniert diese Option für sie nicht.

Wäre es nicht toll, wenn Sie Seitenlayouts einfach per Drag & Drop erstellen könnten??

Genau das macht Elementor. Es ist ein Drag-and-Drop-Plugin für WordPress Page Builder, mit dem Sie ganz einfach eigene, benutzerdefinierte WordPress-Layouts ohne Programmierkenntnisse erstellen können.

Es verfügt über eine intuitive Benutzeroberfläche, mit der Sie benutzerdefinierte Layouts mit einer Live-Vorschau erstellen können. Es enthält viele einsatzbereite Module für alle Arten von Webdesignelementen.

Es gibt mehrere professionell gestaltete Vorlagen, die Sie sofort laden und als Ausgangspunkt verwenden können. Es funktioniert mit allen Standard-kompatiblen WordPress-Themes und ist mit allen gängigen WordPress-Plugins kompatibel.

Sehen wir uns jedoch an, wie Sie mit Elementor benutzerdefinierte WordPress-Layouts erstellen.

Erste Schritte mit Elementor

Zuerst müssen Sie das Elementor Pro-Plugin kaufen. Es ist die kostenpflichtige Version des kostenlosen Elementor-Plugins und bietet Zugriff auf zusätzliche Funktionen und 1 Jahr Support.

Als Nächstes müssen Sie das Elementor-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie besuchen Elementor »Einstellungen Seite, 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 auf Ihrer Site benutzerdefinierte Posttypen haben, werden diese hier ebenfalls 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 es nur für Administratoren aktiviert.

Vergessen Sie nicht, auf die Schaltfläche zum Speichern der Änderungen zu klicken, um Ihre Einstellungen zu speichern.

Erstellen eines benutzerdefinierten WordPress-Layouts mit Elementor

Zuerst müssen Sie eine neue Seite (oder einen neuen Beitrag) auf Ihrer WordPress-Site erstellen. Auf dem Nachbearbeitungsbildschirm sehen Sie die neue Schaltfläche "Mit Element bearbeiten" oder "Mit Element bearbeiten".

Wenn Sie darauf klicken, wird die Elementor-Benutzeroberfläche geöffnet, in der Sie Ihre Seite mit dem Element-Generator zum Ziehen und Ablegen von Seiten bearbeiten können.

Jetzt können Sie Abschnitte hinzufügen und Ihre Seite von Grund auf neu erstellen oder Sie können eine Vorlage hinzufügen.

Mit Vorlagen können Sie schneller loslegen. Elementor wird mit mehreren professionell gestalteten Vorlagen geliefert, die Sie beliebig anpassen können.

Beginnen wir mit einer Vorlage, indem Sie auf die Schaltfläche "Vorlage hinzufügen" klicken.

Daraufhin wird ein Popup-Fenster angezeigt, in dem Sie verschiedene Vorlagen sehen können. Sie sollten nach einer Vorlage suchen, die ähnlich ist, wie Sie es für Ihr Seitenlayout haben.

Wählen Sie nun die gewünschte Vorlage aus und klicken Sie auf die Schaltfläche "Einfügen", um sie Ihrer Seite hinzuzufügen.

Elementor lädt jetzt die Vorlage für Sie.

Sie können jetzt mit der Bearbeitung der Vorlage beginnen, um sie an Ihre Bedürfnisse anzupassen. Klicken Sie einfach auf ein Element, um es auszuwählen, und Elementor zeigt Ihnen seine Einstellungen in der linken Spalte.

Lassen Sie uns nun über die Funktionsweise von Elementor-Layouts sprechen.

Elementarlayouts werden mithilfe von 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.

Mit Elementor-Widgets können Sie alles in Ihre Spalten und Abschnitte einfügen.

Diese Widgets sind verschiedene Inhaltsblöcke, die Sie in Ihren Elementor-Abschnitten platzieren können.

Wählen Sie einfach ein Widget aus und legen Sie es in Ihrem Abschnitt oder Ihrer Spalte ab. Es gibt zahlreiche Widgets, die alle gängigen Webdesign-Elemente abdecken, die Sie sich vorstellen können.

Sie können Bilder, Texte, Überschriften, Bildergalerien, Videos, Karten, Symbole, Testimonials, Slider, Karussells und vieles mehr hinzufügen.

Sie können auch Standard-WordPress-Widgets und sogar die von anderen WordPress-Plugins auf Ihrer Site erstellten Widgets hinzufügen.

Wenn Sie mit der Bearbeitung fertig sind, können Sie auf die Schaltfläche Speichern klicken, um die Änderungen zu speichern.

Hinweis: Beim Speichern eines Layouts wird die Seite nicht auf Ihrer WordPress-Site veröffentlicht. Es wird nur Ihr Seitenlayout gespeichert.

Sie können jetzt eine Vorschau Ihrer Seite anzeigen oder zum WordPress-Dashboard wechseln.

Dies bringt Sie zurück zum WordPress-Post-Editor. Sie können Ihre WordPress-Seite jetzt speichern oder auf Ihrer Website veröffentlichen.

Eigene Vorlagen in Elementor erstellen

Mit Elementor können Sie Ihre eigenen benutzerdefinierten Layouts als Vorlagen speichern. Auf diese Weise können Sie Ihre eigenen Vorlagen wiederverwenden, um in Zukunft noch schneller neue Seiten zu erstellen.

Bearbeiten Sie einfach die Seite, die Sie als Vorlage mit Elementor speichern möchten.

Klicken Sie in der Benutzeroberfläche von Elementor Builder auf das Ordnersymbol neben der Schaltfläche "Speichern" und wählen Sie "Vorlage speichern"..

Daraufhin wird ein Popup-Fenster angezeigt, in dem Sie einen Namen für Ihre Vorlage angeben und auf die Schaltfläche "Speichern" klicken müssen.

Wenn Sie das nächste Mal ein benutzerdefiniertes Seitenlayout erstellen, können Sie es auf der Registerkarte "Meine Vorlagen" auswählen.

Sie können diese Vorlage auch exportieren und mit Elementor auf anderen WordPress-Sites verwenden.

Sie müssen besuchen Elementor »Bibliothek Seite, um Ihre gespeicherten Vorlagen anzuzeigen. Fahren Sie mit der Maus zu Ihrem Vorlagennamen und klicken Sie dann auf den Link "Vorlage exportieren".

Nachdem Sie Ihre Vorlagendatei heruntergeladen haben, können Sie mit Elementor die Bibliothekseite einer anderen WordPress-Site aufrufen und anschließend Ihre Vorlage importieren.

Das ist alles für jetzt.

Wir hoffen, dass Sie in diesem Artikel erfahren haben, wie Sie mit Elementor benutzerdefinierte WordPress-Layouts erstellen. Vielleicht möchten Sie auch unsere Schritt-für-Schritt-Anleitung, wie Sie WordPress beschleunigen und die Leistung steigern können.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.