So erstellen Sie benutzerdefinierte WordPress-Layouts mit Beaver Builder

Suchen Sie nach einer Möglichkeit, benutzerdefinierte Layouts in WordPress zu erstellen, ohne sich mit Code befassen zu müssen? Wir verstehen das. Die meisten Anleitungen da draußen fühlen sich entweder an, als würden Sie einen Roman lesen, oder sie gehen davon aus, dass Sie ein Coding-Experte sind.

Uns ist aufgefallen, dass einige erfahrene WordPress-Benutzer vor Page Buildern wie Beaver Builder zurückschrecken, aus Sorge, sie könnten klobige Designs erstellen oder ihre Websites verlangsamen.

Aber hier ist, was wir aus der Hilfe für Tausende von Anfängern gelernt haben: Der richtige Page Builder kann die Erstellung von Websites dramatisch vereinfachen und dennoch professionelle Ergebnisse liefern.

In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen, wie Sie mit Beaver Builder benutzerdefinierte WordPress-Layouts erstellen. Egal, ob Sie bei Null anfangen oder vorgefertigte Vorlagen verwenden, Sie lernen, wie Sie genau das erstellen, was Sie wollen, ganz ohne Programmierung.

Warum Beaver Builder verwenden, um benutzerdefinierte WordPress-Layouts zu erstellen 👀

Viele Premium WordPress-Themes werden mit fertigen Seitenlayouts für verschiedene Bereiche einer Website geliefert. Manchmal passt ein integriertes Layout jedoch möglicherweise nicht zu Ihren Bedürfnissen.

Sie können in WordPress benutzerdefinierte Seiten-Templates erstellen, indem Sie ein Child-Theme erstellen und dann Ihre eigenen Seiten-Templates hinzufügen. Dafür benötigen Sie jedoch Kenntnisse in PHP, HTML und CSS.

Hier kommen Tools wie Beaver Builder ins Spiel. Es ist ein Drag-and-Drop Seitenersteller-Plugin für WordPress. Es hilft Ihnen, Ihre eigenen benutzerdefinierten Seitenlayouts zu erstellen, ohne Code schreiben zu müssen.

Beaver Builder ist sehr einfach zu bedienen und anfängerfreundlich. Gleichzeitig ist es mit unglaublichen Funktionen ausgestattet, um professionell aussehende Seiten zu erstellen.

Es funktioniert mit allen WordPress-Themes und verfügt über zahlreiche Module, die Sie einfach per Drag & Drop auf Ihre Seite ziehen können. Sie können jede Art von Layout erstellen, die Sie möchten, und es genau so einrichten, wie Sie es sich vorgestellt haben.

In diesem Beaver Builder Tutorial zeigen wir Ihnen, wie Sie Beaver Builder verwenden, um benutzerdefinierte Seitenlayouts in WordPress zu erstellen. Sie können die folgenden Links verwenden, um durch diesen Artikel zu navigieren:

• Schritt 1: Richten Sie das Beaver Builder Plugin ein
• Schritt 2: Erstellen Sie Ihr erstes benutzerdefiniertes Seitenlayout mit Beaver Builder
• How to Manage Page Layout Templates in Beaver Builder

Schritt 1: Richten Sie das Beaver Builder Plugin ein

Zuerst müssen Sie das Beaver Builder Plugin kaufen. Es ist ein kostenpflichtiges Plugin, dessen Preise ab 99 $ für unbegrenzte Websites beginnen.

Installieren und aktivieren Sie als Nächstes das Beaver Builder Plugin. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.

Nach der Aktivierung müssen Sie die Seite Einstellungen » Beaver Builder besuchen, um Ihren Lizenzschlüssel einzugeben.

Nach Eingabe Ihres Lizenzschlüssels sind Sie nun bereit, schöne Seitenlayouts zu erstellen.

Schritt 2: Erstellen Sie Ihr erstes benutzerdefiniertes Seitenlayout mit Beaver Builder

Erstellen Sie zunächst einfach eine neue Seite in WordPress, indem Sie zu Seiten » Neue Seite hinzufügen navigieren.

Bevor wir Beaver Builder öffnen, geben Sie Ihrer neuen Seite einen Titel und speichern Sie sie als Entwurf.

Nach unserer Erfahrung würde der Page Builder sich nicht öffnen, es sei denn, wir tun dies zuerst.

Wenn Sie das getan haben, klicken Sie auf die Schaltfläche „Beaver Builder starten“, um loszulegen.

Dies öffnet das Frontend Ihrer Seite in der Beaver Builder-Oberfläche.

Wenn Sie Beaver Builder zum ersten Mal verwenden, sehen Sie ein Willkommens-Popup, das Ihnen eine geführte Tour anbietet.

Danach müssen Sie auf die Schaltfläche „+“ im oberen Menü klicken. Diese Schaltfläche wird zu einem „x“-Symbol. Wechseln Sie dann zur Registerkarte „Vorlagen“.

Beaver Builder wird mit einigen professionell gestalteten Vorlagen geliefert, damit Sie sofort loslegen können.

Keine Sorge; Sie können die Vorlage nach Belieben anpassen. Es ist nur eine schnelle Möglichkeit, mit einem Layout zu beginnen.

Wenn Sie ein Layout auswählen, lädt Beaver Builder es in das Vorschaufenster. Bewegen Sie Ihre Maus über ein Element, und Beaver Builder wird es hervorheben.

Sie können einfach auf das Schraubenschlüsselsymbol auf jedem hervorgehobenen Element klicken, um es zu bearbeiten.

Beaver Builder zeigt ein Popup mit verschiedenen Einstellungen an, die Sie bearbeiten können.

Sie können die Schriftart, Farbe, den Hintergrund, die Schriftart, den Abstand, den Rand und mehr ändern.

Die Beaver Builder-Layouts basieren auf Zeilen. Sie können Zeilen per Drag & Drop neu anordnen. Sie können auch eine neue Zeile entfernen oder hinzufügen.

Klicken Sie einfach auf denselben „+“-Button wie zuvor und navigieren Sie zum Abschnitt „Zeilen“. Von hier aus können Sie jede der Ihnen angezeigten Zeilen und Spalten auswählen.

Beaver Builder fügt die Zeile der Live-Vorschau auf Ihrer Website hinzu.

Sie können Elemente mit den grundlegenden oder erweiterten Modulen und Widgets zu Ihrer Zeile hinzufügen. Diese Module ermöglichen es Ihnen, die am häufigsten verwendeten Elemente wie Schaltflächen, Überschriften, Text, Bilder, Diashows, Audio, Video usw. hinzuzufügen.

Klicken Sie einfach auf die Schaltfläche ‚+‘ und navigieren Sie zum Abschnitt ‚Module‘. Ziehen Sie dann ein Element in die Zeile, die Sie gerade hinzugefügt haben.

Klicken Sie auf ein WordPress-Designelement, um dessen Eigenschaften zu bearbeiten.

Sie können auch eine Zeile oder ein Modul speichern, um sie später auf anderen Seiten wiederzuverwenden. Klicken Sie beim Bearbeiten einer Zeile oder eines Moduls auf die Schaltfläche ‚Als Vorlage speichern‘.

Klicken Sie auf die Schaltfläche „Fertig“ in der oberen rechten Ecke, wenn Sie mit der Bearbeitung Ihrer Seite fertig sind.

Beaver Builder zeigt eine Reihe von Schaltflächen an, um Ihre Seite zu veröffentlichen oder als Entwurf zu speichern.

Sie können auch ein gesamtes Seitenlayout für andere Seiten Ihrer WordPress-Website wiederverwenden. Öffnen Sie einfach die Seite mit dem Page Builder und klicken Sie dann in der oberen Leiste auf den Pfeil nach unten, um auf ‚Werkzeuge‘ zuzugreifen.

Beaver Builder zeigt Ihnen ein Popup an. Sie können die Seite als Vorlage speichern oder schnell eine doppelte Seite mit demselben Layout erstellen.

Wie man Seitenlayout-Vorlagen in Beaver Builder verwaltet

Sie können alle Vorlagen, die Sie erstellt haben, unter Beaver Builder » Vorlagen überprüfen. Hier können Sie Ihre vorhandenen Vorlagen verwalten, in der Vorschau anzeigen und bearbeiten.

Ein großer Vorteil von Beaver Builder Vorlagen ist, dass sie benutzerdefinierte Beitragstypen sind. Das bedeutet, dass Sie Ihre Beaver Builder Vorlagen einfach mit der integrierten Exportfunktion in WordPress exportieren können.

Besuchen Sie die Seite Werkzeuge » Exportieren und wählen Sie Vorlagen aus. Klicken Sie auf die Schaltfläche „Exportdatei herunterladen“, und WordPress sendet Ihnen eine XML-Datei zum Herunterladen.

Melden Sie sich jetzt bei der WordPress-Site an, auf die Sie die Vorlagen importieren möchten. Besuchen Sie die Seite Einstellungen » Import und klicken Sie auf WordPress.

Sie werden aufgefordert, das WordPress-Importeur-Plugin herunterzuladen und zu installieren. Danach können Sie einfach die XML-Datei Ihrer Vorlage hochladen und importieren.

Alternative: Verwenden Sie SeedProd, um ein benutzerdefiniertes Theme zu erstellen

Während Beaver Builder großartig ist, ist es vielleicht nicht für jeden die perfekte Wahl. Das ist in Ordnung! Es gibt andere ausgezeichnete Alternativen, wie z. B. SeedProd.

SeedProd ist ein weiterer benutzerfreundlicher Page Builder, den wir oft empfehlen. Er ist nicht nur zum Erstellen von Landing Pages gedacht. Sie können ihn sogar verwenden, um ganze WordPress-Themes zu erstellen. Wir haben ihn in vielen Projekten gut eingesetzt, unter anderem beim Erstellen von Landing Pages für OptinMonster.

Was SeedProd auszeichnet, sind seine umfangreichen Anpassungsoptionen. Diese ermöglichen es Ihnen, ganz einfach coole Funktionen zu Ihren Seiten hinzuzufügen, wie z. B. rotierende Testimonials, auffällige Animationen, professionelle Preislisten, Feature-Boxen und mehr.

Außerdem verfügt SeedProd über KI-Tools, die schnell gute Texte und Bilder für Ihre Website generieren können. Das kann eine echte Zeitersparnis sein, wenn Sie Ihre Seiten erstellen.

Möchten Sie mehr erfahren? Sehen Sie sich diese Bewertungen an, um zu sehen, wie SeedProd im Vergleich zu anderen beliebten Seitenerstellern abschneidet:

• Elementor vs Divi vs SeedProd (Verglichen) – Welches ist das Beste?
• Instapage vs. Leadpages vs. Unbounce vs. SeedProd

Wir hoffen, dieser Artikel hat Ihnen geholfen, benutzerdefinierte Seitenlayouts in WordPress mit Beaver Builder zu erstellen. Möglicherweise möchten Sie auch unseren Leitfaden lesen, wie Sie eine mobilfreundliche WordPress-Website erstellen und unsere Expertenauswahl der besten WordPress Theme Builder.

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.