Möchten Sie benutzerdefinierte WordPress-Layouts für Ihre Website erstellen, um ihr ein einzigartiges Aussehen zu verleihen?
Unabhängig von Ihren Fähigkeiten ist es einfach, ein benutzerdefiniertes WordPress-Layout zu erstellen, ohne einen Entwickler einstellen zu müssen.
In diesem Artikel zeigen wir Ihnen, wie Sie mit dem besten WordPress Page Builder Plugin, SeedProd, ein benutzerdefiniertes WordPress-Layout erstellen. Wir zeigen Ihnen auch, wie Sie dies mit Beaver Builder tun.
Viele von Ihnen fragen sich wahrscheinlich, warum ein benutzerdefiniertes Layout erstellen, wenn Sie einfach ein Premium-Theme auswählen und Ihre Seite mit einem seiner vorgefertigten Layouts starten können.
Warum benutzerdefinierte WordPress-Layouts erstellen
Sie finden eine Reihe von Premium-WordPress-Themes, die mehrere beeindruckende integrierte Layouts bieten, die sofort einsatzbereit sind. Sie können sich definitiv für diese schönen Layouts entscheiden und Ihrer Website ein ansprechendes Aussehen verleihen.
Das Problem bei solchen Layouts ist jedoch, dass sie aufgrund ihrer sofortigen Verfügbarkeit von Hunderttausenden von Benutzern im gesamten Web weit verbreitet sind.
Das bedeutet, wenn Sie ein vorgefertigtes Layout für Ihre WordPress-Website verwenden, können Sie keinen unverwechselbaren Look erzielen, es sei denn, Sie passen es stark an. Darüber hinaus erfüllen diese Layouts möglicherweise nicht Ihre Anforderungen. In diesen Fällen ist die Erstellung eines benutzerdefinierten Layouts die beste Option.
Wenn Sie sich für Gutenberg (Block-Editor) entscheiden, erhalten Sie nicht die Leichtigkeit und Freiheit, Ihre Website so zu gestalten, wie Sie möchten. Möglicherweise müssen Sie Ihr eigenes CSS hinzufügen, um Ihre benutzerdefinierten einzelnen Beitrags-Vorlagen zu verbessern.
Erstellen eines benutzerdefinierten WordPress-Layouts mit SeedProd
Der beste Weg, visuell beeindruckende benutzerdefinierte Layouts für Ihre WordPress-Website zu erstellen, ist die Verwendung des SeedProd Builders.
SeedProd ist anfängerfreundlich und gibt Ihnen die Möglichkeit, das Frontend Ihrer Website visuell zu bearbeiten. Sie müssen niemals Code verwenden oder blinde Änderungen vornehmen, nur um eine Vorschau anzuzeigen und festzustellen, dass es nicht funktioniert.
SeedProd ist zweifellos der beste Weg, um benutzerdefinierte WordPress-Layouts zu erstellen. Hier erfahren Sie mehr über dieses Plugin: SeedProd-Bewertung.
Um ein benutzerdefiniertes Layout für Ihre Website zu erstellen, müssen Sie SeedProd installieren und aktivieren auf Ihrer Website.
Navigieren Sie dann zu Ihrem wp-admin-Panel, und Sie sehen SeedProd in der linken Taskleiste.
Dies ermöglicht Ihnen den Zugriff auf das SeedProd-Dashboard. Dort können Sie ein vorgefertigtes Theme-Kit verwenden oder einzelne Landingpages erstellen. Für dieses Tutorial wählen wir Theme Builder » Theme Template Kits.
Jetzt sehen Sie eine Bibliothek von Kits, aus denen Sie wählen können. Diese Kits enthalten Stock-Bilder und Dummy-Inhalte, die Sie schnell bearbeiten können, um sie zu Ihrer eigenen zu machen.
Sobald Sie ein Kit ausgewählt haben, werden alle Seiten und Beiträge im Kit importiert und auf Ihrer Website veröffentlicht. Sie können dies verwenden, um Vorlagen für Ihre Seiten und Beiträge zu erstellen.
Um das Beitragslayout anzupassen, wählen Sie unter Single Post Design bearbeiten.
Jetzt öffnet sich der Drag-and-Drop-Visual-Builder, in dem Sie eine Live-Vorschau Ihrer Seite zusammen mit Anpassungsoptionen zur Bearbeitung sehen.
Um Änderungen an Ihrer benutzerdefinierten Seiten-Vorlage vorzunehmen, können Sie einfach einen beliebigen Blog auswählen und erhalten Optionen zum Bearbeiten des Inhalts, der Typografie, der Farbe, des Hintergrunds und mehr. Um neue Blöcke hinzuzufügen, ziehen Sie einfach einen Block aus dem linken Menü und platzieren Sie ihn dort, wo Sie ihn in Ihrem Design haben möchten, wie hier:
Sie sehen vorgefertigte Blöcke zum Hinzufügen:
- Beiträge
- Beitragsüberschrift
- Beitragsinhalt
- Beitragszusammenfassung
- Beitragsautor-Bio
- Kommentare
- Seitenlogo
- Beitragsnavigation
...und mehr. Sie sehen auch Blöcke zum Hinzufügen von Text, Abständen, Bildern, Schaltflächen, Spalten, Kontaktformularen, Countdown-Timern, Gewinnspielen und anderen Widgets.
SeedProd integriert sich auch in WooCommerce, sodass Sie benutzerdefinierte Felder wie Produktgitter, Warenkorb- und Checkout-Schaltflächen und vieles mehr hinzufügen können.
Grundsätzlich haben Sie die volle Kontrolle über jeden neuen Beitrag, den Sie auf Ihrem WordPress-Blog veröffentlichen.
SeedProd ist so einfach zu bedienen, dass es selbst für Anfänger nicht viel zu lernen gibt.
Wir zeigen Ihnen die Grundlagen und Sie können die erweiterten Funktionen selbst erkunden. Wenn Sie einen Block auswählen, sehen Sie, dass er orange hervorgehoben wird. Dann erscheint ein Menü über dem Block, in dem Sie seine Position ändern, ihn löschen, duplizieren und mehr können.
Um eine ganze Zeile zu ändern oder zu löschen, können Sie die Zeile auswählen und sie wird lila hervorgehoben.
So können Sie die Zeile hervorheben und mit dem Plus-Symbol eine neue Zeile hinzufügen. Sie sehen Layouts, aus denen Sie wählen können.
Dann können Sie das Navigationssymbol auswählen, um es per Drag & Drop in einen anderen Bereich der Seite zu ziehen. Um Zeilen und Blöcke neu anzuordnen, müssen Sie sie nur greifen und dorthin verschieben, wo Sie sie haben möchten.
SeedProd kommt mit intelligenten Abschnitten und Blöcken, die Sie Ihrer Seite hinzufügen können. Wählen Sie im linken Menü den Tab „Abschnitte“. Hier erhalten Sie fertige Header, Handlungsaufforderungen, FAQs, Footer und vieles mehr.
Sie können Blöcke mit Vollbild-Inhalt wählen oder einen mit einem vorgefertigten Layout auswählen. Mit diesen Funktionen können Sie im Handumdrehen ein benutzerdefiniertes Layout für Ihre Website erstellen. Sie können auch einen Vorlagennamen eingeben und ihn für die zukünftige Verwendung speichern.
Die Designs sind automatisch responsiv. Sie können sogar die mobile Vorschau verwenden, um sicherzustellen, dass das Design Ihrer Website auf Mobilgeräten gut aussieht.
Das ist alles! Es ist wirklich so einfach, mit SeedProd ein benutzerdefiniertes Layout für Ihre Website zu erstellen.
SeedProd ist zweifellos die beste Option, um ein benutzerdefiniertes WordPress-Layout zu erstellen. Sie erhalten vorgefertigte einfache Beitrags-Vorlagen, die es so einfach machen, verschiedene Layouts für Ihre Website zu erstellen.
Darüber hinaus können Sie mit dieser erstellten Vorlage weiterhin neue WordPress-Beiträge erstellen.
Es gibt eine kostenlose Version von SeedProd im WordPress-Plugin-Repository. Die Pro-Version bietet Ihnen Zugriff auf großartige Funktionen für Ihre Website.
Erstellen eines benutzerdefinierten WordPress-Layouts mit Beaver Builder
Das Beaver Builder Plugin ist ein beliebtes Drag-and-Drop-Page-Builder-Plugin, mit dem Sie in wenigen Minuten einige der beeindruckendsten Layouts für Ihren WordPress-Blog erstellen können.
Das Beste an diesem Plugin ist die Flexibilität, die es bietet. Sie können fast alles steuern.
Farben, Texte, Schriftarten, Bilder – alles kann vollständig angepasst werden, um genau den Look zu erhalten, von dem Sie immer geträumt haben.
Eine weitere Sache, die Sie an Beaver Builder lieben werden, ist, dass es im Gegensatz zu anderen Page-Builder-Plugins absolut anfängerfreundlich ist und Sie keine Stunden damit verbringen müssen, herauszufinden, wie man es benutzt. Außerdem bietet es Dutzende von visuell beeindruckenden Vorlagen, die Ihnen den Einstieg erleichtern.
Lesen Sie hier unsere Beaver Builder Bewertung. Lassen Sie uns nun sehen, wie Sie Ihre benutzerdefinierten Layouts mit diesem Plugin erstellen.
Schritt 1: Installieren und Einrichten von Beaver Builder in WordPress
Der erste Schritt ist die Installation und Aktivierung von Beaver Builder auf Ihrer Website. Sie können das Plugin herunterladen, indem Sie die Website von Beaver Builder besuchen. Sobald es aktiviert ist, gehen Sie zu Einstellungen » Page Builder.
Hier können Sie den Lizenzschlüssel eingeben, um den Support zu aktivieren und Updates zu erhalten. Sobald Sie fertig sind, können Sie Ihr erstes benutzerdefiniertes Layout erstellen.
Schritt 2: Erstellen Sie Ihr erstes benutzerdefiniertes Layout
Um Ihr erstes benutzerdefiniertes Layout zu erstellen, gehen Sie in Ihrem WordPress-Dashboard zu Alle Seiten » Neu hinzufügen. In Ihrem Texteditor haben Sie die Möglichkeit, zum Seitenersteller zu wechseln.
Klicken Sie einfach auf diese Option und Sie sehen, wie der Page Builder-Tab gestartet wird. Hier sehen Sie verschiedene Vorlagenoptionen. Wählen Sie also diejenige aus, die Ihnen für Ihr Layout am besten gefällt. Sie können auch auf den Dropdown-Pfeil klicken und den gewünschten Layouttyp auswählen. Dies kann für Ihre Landingpages oder Ihre Inhaltsseiten sein.
Sobald dies erledigt ist, werden Sie zu seinem Drag-and-Drop-Builder weitergeleitet. Um ein bestimmtes Feld zu bearbeiten, müssen Sie nur mit der Maus über diesen Bereich fahren, darauf klicken und mit der Anpassung Ihres Designs beginnen.
Sie können bis zu 6 Spalten, Seitenleisten, Audios, Bilder, Trennlinien und mehr zu Ihren Layouts hinzufügen. Um Zeilen und Seitenleisten hinzuzufügen, klicken Sie auf die Registerkarten Zeilenlayouts. Ziehen Sie dann die gewünschte Anzahl von Spalten und legen Sie sie in Ihrem visuellen Builder ab.
Dies ermöglicht Ihnen, Ihre Vorlagenhierarchie zu organisieren.
Sobald Ihre Spalten hinzugefügt wurden, klicken Sie einfach darauf und passen Sie sie an Ihre Anforderungen an. Sie können den Hintergrund, die Textfarbe ändern, Links, Texte, Rahmen und mehr zu Ihren Spalten hinzufügen. Diese Spalten und Zeilen können auch für die spätere Verwendung gespeichert werden. Klicken Sie dazu einfach am Ende des Popups auf die Schaltfläche Speichern.
Für andere Elemente müssen Sie die Option Basismodule verwenden. Sie haben auch verschiedene andere Elemente, die Sie Ihrem Layout hinzufügen können, wie Schaltflächen, Akkordeons, Preistabellen, Karten, Countdown-Timer und vieles mehr.
Sie müssen die Elemente einfach von rechts ziehen und im visuellen Builder auf der linken Seite ablegen. Jedes dieser Elemente ist anpassbar. Wenn Sie beispielsweise eine neue Überschrift hinzufügen möchten, klicken Sie einfach auf Überschrift und ziehen Sie sie in Ihr Layout. Klicken Sie danach auf das Überschriftenelement, um es anzupassen.
Hier haben Sie 3 verschiedene Registerkarten. Allgemein, Stil und Erweitert. Die erste ermöglicht es Ihnen, Ihre Texte, Links usw. zu Ihren Überschriften hinzuzufügen. Die zweite Registerkarte ermöglicht es Ihnen, Ihre Überschrift mit verschiedenen Farben, Schriftarten usw. zu gestalten. Die Option Erweitert ermöglicht es Ihnen, an den Rändern, der Sichtbarkeit, der Reaktionsfähigkeit, der Animation usw. zu arbeiten.
Sie können mit derselben Methode beliebig viele Elemente und Module hinzufügen und sie dann an Ihre Anforderungen anpassen. Die Dropdown-Menüs hier machen dies wirklich einfach.
Nachdem Sie Ihre Layouts bearbeitet haben, klicken Sie auf die Schaltfläche Fertig in der oberen rechten Ecke Ihres Bildschirms. Sie sehen ein neues Popup mit verschiedenen Optionen, wie unten im Screenshot gezeigt.
Mit diesen Optionen können Sie Ihren Entwurf entweder speichern, veröffentlichen oder verwerfen.
Schritt 3: Ihr Layout wiederverwenden
Beaver Builder ermöglicht es Ihnen auch, Ihr benutzerdefiniertes WordPress-Layout zu speichern und es jederzeit wiederzuverwenden. Um diese Option zu nutzen, gehen Sie zu Extras in der oberen rechten Ecke Ihres Bildschirms. Sie sehen die folgenden Optionen auf Ihrem Bildschirm.
Wählen Sie nun die Option je nach Ihren Anforderungen aus. Wenn Sie die Vorlage für die spätere Verwendung nutzen möchten, klicken Sie auf die Option Vorlage speichern und benennen Sie dann Ihr Layout. Danach klicken Sie auf die Schaltfläche Speichern.
Ihre neue Vorlagendatei wird gespeichert und ist jederzeit für die zukünftige Verwendung bereit.
Schritt 4: Verwalten Ihrer Vorlagen
Die Layouts, die Sie mit Beaver Builder erstellen, können auf unbegrenzten Websites verwendet werden. Die von seinen Benutzern erstellten Vorlagen werden in einem benutzerdefinierten Post-Typ namens Vorlagen gespeichert.
Standardmäßig ist diese Option ausgeblendet. Sie können sie sichtbar machen, indem Sie zu Einstellungen » Page Builder » Vorlagen gehen.
Klicken Sie nun auf die Option Vorlagen-Admin aktivieren und klicken Sie auf die Schaltfläche Vorlageneinstellungen speichern. Wenn Sie dies tun, werden Sie einen neuen Menüpunkt namens Vorlagen in Ihrer WordPress-Admin-Leiste bemerken. Alle Seitenlayouts, die Sie als Vorlage speichern, werden auf dieser Seite angezeigt.
Exportieren Ihrer WordPress-Layouts
Da die von Ihnen erstellten Layouts als benutzerdefinierter Post-Typ gespeichert werden, können Sie Ihre Beaver Builder-Vorlagen einfach exportieren. Dafür haben Sie die integrierte Exportfunktion in WordPress. Um diese Funktion zu nutzen, gehen Sie zu Extras » Exportseite.
Wählen Sie nun Vorlagen aus. Klicken Sie auf den Dropdown-Pfeil und wählen Sie die Vorlage aus, die Sie exportieren möchten. Klicken Sie anschließend auf die Schaltfläche Exportdatei herunterladen und WordPress sendet Ihnen eine XML-Datei zum Herunterladen.
Importieren von Beaver Builder-Layouts
Um ein Layout zu importieren, gehen Sie zum Dashboard der Website, auf die dieses Layout importiert werden soll. Gehen Sie nun zu Einstellungen » Import » WordPress. Klicken Sie unter dem Reiter WordPress auf die Option Jetzt installieren. Dies lädt das WordPress-Importeur-Plugin herunter und installiert es.
Sobald das Plugin heruntergeladen ist, können Sie die gerade heruntergeladene XML-Datei hochladen. Ihr Layout ist nun bereit, auch auf Ihrer anderen Website verwendet zu werden.
Und das ist alles. Sie können jetzt benutzerdefinierte Post-Layouts im Handumdrehen erstellen, ohne jemals PHP-Dateien, HTML und andere Codes anfassen zu müssen. Wir hoffen, Ihnen hat unser Tutorial gefallen.
Wenn ja, möchten Sie vielleicht auch einige der anderen Beaver Builder-Alternativen kennenlernen, die Sie ausprobieren können.
Kommentare Antwort hinterlassen