Beaver Builder gegen Divi 2022

What You See Is What You Get (WYSIWYG)-Editoren sind seit den 1970er Jahren ein fester Bestandteil der Computersoftware, aber in der WordPress-Welt sehen wir, dass immer mehr Website-Besitzer auf Drag-and-Drop-Seitenersteller umsteigen, um ihnen zu helfen, stilvoll zu erstellen Blogbeiträge und Fachseiten.

Diese Akzeptanz hat sich intensiviert, seit WordPress 2018 den neuen Blockeditor namens Gutenberg in WordPress 5.0 eingeführt hat. Natürlich ist der klassische Editor weiterhin für diejenigen verfügbar, die den alten visuellen Editor bevorzugen.

Der neue Blockeditor ist kostenlos nutzbar, besticht durch eine benutzerfreundliche Oberfläche und hält viele nützliche Inhaltsblöcke zur Auswahl bereit.

Ich liebe die Einfachheit des WordPress-Blockeditors, aber es ist nicht zu leugnen, dass es sich um eine grundlegende Lösung handelt. Die Inhaltsblöcke haben nur wenige Anpassungsoptionen und es gibt kein integriertes Vorlagensystem. Dies schränkt die Gestaltungsmöglichkeiten stark ein.

Wenn Sie Ihre Website auf die nächste Stufe bringen möchten, empfehle ich die Verwendung einer fortschrittlichen Drag-and-Drop-Lösung zum Erstellen von Seiten wie Beaver Builder oder Divi.

Diese reaktionsschnellen WordPress-Plugins geben Ihnen mehr Kontrolle darüber, wie Sie Ihre Blog-Posts, Seiten und benutzerdefinierten Post-Typen gestalten.

In diesem Artikel möchte ich Ihnen zeigen, wie diese Seitenerstellungs-Plugins im Vergleich aussehen, damit Sie sehen können, welches für Sie und Ihre Projekte am besten geeignet ist.

Eine Lite-Version von Beaver Builder ist auf WordPress.org verfügbar, aber da der kostenlosen Version viele Funktionen fehlen, konzentriert sich dieser Artikel stattdessen auf die vollständige Version von Beaver Builder.

Die Beaver Builder-Schnittstelle

Beaver Builder ist ein Frontend-Editor, der aus verschiedenen Bereichen in WordPress gestartet werden kann.

Wenn Sie im WordPress-Blockeditor einen neuen Blogbeitrag, eine neue Seite oder einen benutzerdefinierten Beitragstyp erstellen, sehen Sie eine Option zum „Starten von Beaver Builder“ oder „Verwenden des Standard-Editors“.

Die Schaltfläche „Beaver Builder starten“ wird im Gutenberg-Editor nicht automatisch angezeigt. Es wird nur angezeigt, wenn Sie Ihrer Seite einen Beaver Builder-Block hinzufügen.

Wenn der Beaver Builder-Block nicht verfügbar ist, überprüfen Sie die Beaver Builder-Einstellungsseite, um sicherzustellen, dass der entsprechende Beitragstyp aktiviert ist.

Beaver Builder kann auch über den klassischen Editor und die Hauptauflistungsseite von Beiträgen, Seiten und benutzerdefinierten Beitragstypen gestartet werden.

Wenn Sie angemeldet sind, sehen Sie auch in der WordPress-Admin-Leiste eine Option zum Ändern einer Seite.

Wenn Beaver Builder geladen wird, sehen Sie auf der rechten Seite ein Menü, das verfügbare Module anzeigt. Hier werden auch Registerkarten für Zeilen, Vorlagen und gespeicherte Layouts angezeigt.

Ein Klick auf das X-Symbol oben schließt das Menü, aber Sie können das Menü neu laden, indem Sie auf das jetzt angezeigte +-Symbol klicken.

Oben rechts auf der Seite sehen Sie eine Erinnerung, dass Ihre Seite bearbeitet wurde und unveröffentlichte Änderungen enthält. Wenn Sie auf die Schaltfläche „Fertig“ klicken, werden Optionen angezeigt, mit denen Sie Ihr Layout verwerfen, den Entwurf speichern oder Ihr Layout veröffentlichen können.

Oben links auf der Seite wird der Beitrag, die Seite oder der benutzerdefinierte Beitragstyp angezeigt, den Sie bearbeiten. Wenn Sie darauf klicken, wird das Werkzeugmenü von Beaver Builder geladen.

In diesem Menü sind viele Einstellungen und Funktionen versteckt.

Von hier aus können Sie Ihr Layout veröffentlichen, das Layout als Vorlage speichern, das Layout duplizieren, alle Ihre Überarbeitungen anzeigen, Ihren Bearbeitungsverlauf überprüfen und vieles mehr.

Über dieses Menü kann auch auf globale Einstellungen sowie Javascript- und CSS-Einstellungen zugegriffen werden, und am unteren Rand des Menüs werden Verknüpfungen zum WordPress-Adminbereich und den Supportseiten angezeigt.

Rechts neben dem Werkzeugmenü befindet sich eine Benachrichtigungsglocke, die Plugin-Updates und die neuesten Beiträge aus dem Beaver Builder-Blog anzeigt.

Um Ihrem Layout ein neues Modul oder eine neue Zeile hinzuzufügen, ziehen Sie es einfach per Drag & Drop in den Hauptbereich der Leinwand.

Mehrere vorkonfigurierte Spalteneinstellungen sind für Zeilen zusammen mit gespeicherten Spaltenlayouts, gespeicherten Zeilen und vorgefertigten Zeilen verfügbar.

Nachdem Sie neue Zeilen hinzugefügt haben, wird auf Ihrer Seite eine Gliederung der Struktur angezeigt. Sie können ein Inhaltsmodul per Drag & Drop in eines dieser Felder ziehen.

Auf der oberen linken Seite von Zeilen und Modulen sehen Sie Optionen zum Verschieben des Elements in einen anderen Teil Ihres Layouts. Von hier aus kann die betreffende Zeile bzw. das betreffende Modul auch dupliziert oder gelöscht werden.

Zeilen und Spalten haben eine Einstellungsschaltfläche und eine Aktionsschaltfläche, mit der Sie die Zeilen- und Spaltenbreite zurücksetzen können.

Breiten, Farben, Hintergründe, Ränder und mehr können auf der Registerkarte „Stil“ des Einstellungsfelds angepasst werden. Zusätzlich zu Rändern und Polsterung können Sie auf der Registerkarte „Erweitert“ die Sichtbarkeit auf angemeldete Benutzer beschränken und den Haltepunkt für mobile Benutzer anpassen.

Es dauert ein wenig, sich mit jedem WordPress-Seitenersteller vertraut zu machen, aber Beaver Builder ist zweifellos eine der am einfachsten zu erlernenden Lösungen. Es ist auch eines der schnellsten, da die Änderungen, die Sie vornehmen, fast sofort geladen werden.

Mit Beaver Builder können Sie jeden Aspekt Ihres Layouts gestalten, aber wie Sie sehen werden, bietet Divi beim Erstellen von Layouts viele weitere Anpassungsoptionen.

Die Divi Builder-Oberfläche

Elegant Themes verwendet das Wort Divi, um sowohl ihr beliebtes WordPress-Theme als auch den Drag-and-Drop-Seitenersteller zu beschreiben.

Das sorgt bei Elegant Themes-Neulingen für ein wenig Verwirrung, weshalb sie die Produkte manchmal dadurch unterscheiden, dass sie das Design „Divi Theme“ und den Seitenersteller „Divi Builder“ nennen.

Im Moment möchte ich mich auf Divi Builder konzentrieren. Dieser Seitenersteller ist in Divi Theme integriert, ist aber auch als eigenständiges WordPress-Plugin für diejenigen verfügbar, die es mit anderen WordPress-Themes verwenden möchten.

Sobald Divi Builder aktiviert ist, wird beim Hinzufügen eines neuen Beitrags, einer neuen Seite oder eines benutzerdefinierten Beitragstyps die Option „Divi Builder verwenden“ angezeigt.

Dadurch wird der Frontend Visual Builder gestartet, aber ein Backend-Editor namens Legacy Builder wird ebenfalls verfügbar sein.

Sie können jederzeit vom standardmäßigen WordPress-Blockeditor zu Divi Builder wechseln.

Divi Builder kann auch von den Hauptauflistungsseiten von Beiträgen, Seiten und benutzerdefinierten Beitragstypen aus gestartet werden.

Wie bei Beaver Builder sehen Sie, wenn Sie angemeldet sind, eine Option zum Aktivieren von Divi Builder in der WordPress-Admin-Leiste.

Elegante Themen haben auch einen Divi-Layout-Block.

Mit diesem Block können Sie jedes Divi-Layout direkt in ein Layout einfügen, das Sie mit dem standardmäßigen WordPress-Blockeditor erstellt haben.

Wenn Sie Divi Builder zum ersten Mal starten, werden Sie gefragt, ob Sie ein Layout von Grund auf neu erstellen, ein vorgefertigtes Layout auswählen oder eine andere bereits erstellte Seite klonen möchten.

Wenn Sie von vorne beginnen, lädt Divi Builder Ihre leere Leinwand und zeigt ein Feld zum Einfügen einer neuen Zeile an.

Es stehen 20 Zeilen zur Auswahl und jede hat eine andere Spaltenstruktur.

Nachdem Sie eine Zeile eingefügt haben, fordert Divi Builder Sie auf, ein Modul auszuwählen, das Ihrer Seite hinzugefügt werden soll.

Divi Builder lädt dann das Einstellungsfeld für das ausgewählte Modul.

Wenn Sie neu bei Divi Builder sind, empfehle ich Ihnen, sich mit der Funktionsweise des Editors vertraut zu machen, indem Sie ein vorgefertigtes Layout auswählen, da Sie damit etwas herumspielen können.

Erfahrene Benutzer ziehen es vielleicht vor, mit einer leeren Leinwand zu beginnen, aber beachten Sie, dass das Hauptmenü nicht automatisch geladen wird, wenn Sie diese Option auswählen.

Um das Hauptmenü zu laden, klicken Sie unten auf der Seite auf die Schaltfläche mit den drei horizontalen Punkten.

Die Hauptmenüpunkte sind in drei Spalten unterteilt.

Sie können Builder-Einstellungen über das Symbol mit den drei vertikalen Punkten auf der linken Seite des Menüs laden.

Drei verschiedene Anzeigemodi können von hier aus zu Ihrem Menü hinzugefügt werden: Schwebemodus, Klickmodus und Rastermodus. Diese Modi ändern, wie Sie mit Ihrem Layout interagieren und Änderungen vornehmen. Wenn Sie beispielsweise im Hover-Modus einfach mit der Maus über einen Teil Ihrer Seite fahren, werden Module, Spalten, Zeilen und Abschnitte hervorgehoben, und Sie können dann Änderungen vornehmen.

Andere Einstellungen im Builder-Einstellungsfeld umfassen den standardmäßigen Anzeigemodus, das Verlaufsstatusintervall und den Ablauf der Seitenerstellung.

Wenn Sie ein komplexes Layout erstellt haben, kann es vorkommen, dass der falsche Teil der Seite hervorgehoben wird. Sie möchten beispielsweise eine Spalte verschieben, wählen aber versehentlich die Zeile aus, zu der sie gehört.

Eine Möglichkeit, dies zu beheben, besteht darin, den Drahtmodell-Ansichtsmodus zu verwenden. Dadurch werden unnötige Designelemente aus Ihrer Ansicht entfernt, damit Sie die Struktur Ihrer Seite leichter erkennen können. Es ist unglaublich nützlich, wenn Sie Dinge innerhalb eines komplexen Layouts verschieben.

Die linke Seite des Menüs enthält auch Optionen, mit denen Sie Ihr Design in der Desktop-, Tablet- und Mobilansicht sehen können.

Es gibt sieben Optionen im mittleren Menü. Die X-Taste in der Mitte schließt das Menü nach unten.

Auf der linken Seite können Sie ein Layout aus der Bibliothek laden, Ihr aktuelles Layout speichern und Ihr Layout löschen. Auf der rechten Seite können Sie Seiteneinstellungen, den Bearbeitungsverlauf und die Portabilität anzeigen.

Im Post-/Seiteneinstellungsfeld können Sie den Titel, den Auszug, das Beitragsbild und die Kategorien ändern. Auch hier stehen eine Vielzahl von Designeinstellungen zur Verfügung, z. B. Abstand, Farbpalette, benutzerdefiniertes CSS und Sichtbarkeit.

Im Feld „Bearbeitungsverlauf“ können Sie die letzten Änderungen einfach rückgängig machen und wiederherstellen und einen vollständigen Verlauf aller von Ihnen vorgenommenen Änderungen anzeigen.

Layouts können über das Feld „Portabilitätseinstellungen“ im JSON-Format exportiert und importiert werden. Dies ist nützlich, um Layouts auf andere Websites zu übertragen.

Rechts auf der Seite kann Ihr Layout gespeichert und veröffentlicht werden.

In diesem Bereich können auch Video-Tutorials und Tastaturkürzel über die Divi-Helper-Box angezeigt werden. Es gibt auch eine Suchfunktion, die Ihnen hilft, Funktionen und Dokumentation zu finden.

Die Benutzeroberflächen für Beaver Builder und Divi Builder funktionieren unterschiedlich, aber wenn es darum geht, Zeilen und Spalten anzupassen, funktionieren sie tatsächlich auf ähnliche Weise.

Beide Lösungen zeigen Einstellungen in der oberen linken Ecke an und ermöglichen das Verschieben, Duplizieren und Anpassen von Zeilen und Spalten. Divi hat jedoch mehr Anpassungsoptionen.

Divi Builder hat ein Element über den Zeilen, genannt Abschnitte.

Abschnitte können mehrere Zeilen enthalten, und jede Zeile kann mehrere Spalten enthalten. Es gibt Ihnen ein wenig mehr Flexibilität bei der Erstellung von Seiten.

In den früheren Versionen von Divi Builder wurden Layouts direkt aus dem WordPress-Editor erstellt, aber der Frontend Visual Builder ist jetzt die Standardmethode zum Erstellen von Layouts mit Divi.

Zum Glück ist der alte Editor immer noch in Divi Builder verfügbar.

Um den Legacy Builder zu aktivieren, müssen Sie zuerst zum erweiterten Abschnitt des Divi-Plugin-Optionsbereichs gehen, die neueste Divi Builder-Erfahrung deaktivieren und den Classic Editor aktivieren.

Die Benutzeroberfläche des Legacy Builder sieht ähnlich aus wie der Drahtmodell-Ansichtsmodus, der im visuellen Editor verfügbar ist.

Es erlaubt Ihnen zwar keine Vorschau der Änderungen, die Sie in Echtzeit vornehmen, aber ich liebe es, wie schnell und effizient es ist. Alles wird etwas schneller geladen als im Frontend-Editor, und die Struktur Ihrer Seite ist besser zu erkennen.

Beaver Builder lädt alles etwas schneller als Divi Builder, und seine Benutzeroberfläche ist einfacher zu verstehen, aber Divi Builder bietet viel mehr Anpassungseinstellungen und zusätzliche Funktionen, die in Beaver Builder fehlen.

Die Einbeziehung des Wireframe-Modus und des Legacy Builder macht Divi Builder wohl auch zu einer flexibleren Lösung.

Für einen umfassenderen Überblick über die Funktionsweise von Divi Builder lesen Sie bitte unsere vollständige Bewertung von Divi Builder.

Beaver Builder Vorgefertigte Layouts

Ich bin ein großer Fan von vorgefertigten Layouts, da sie die Zeit für die Erstellung stilvoller Inhalte erheblich verkürzen. Sie helfen Ihnen auch zu verstehen, wie Sie erweiterte Layouts erstellen.

Beaver Builder bietet nicht so viele vorgefertigte Layouts wie Divi, aber die Qualität jeder Vorlage ist genauso hoch.

Zielseitenvorlagen und Inhaltsseitenvorlagen sind auf der Registerkarte „Vorlagen“ des Hauptinhaltsmenüs neben allen gespeicherten Vorlagen verfügbar.

Landingpage-Vorlagen sind vollständige ganzseitige Vorlagen. Insgesamt stehen 15 Zielseitenvorlagen zusammen mit einer leeren Canvas-Seitenvorlage zur Verfügung.

Es gibt Vorlagen für kleine Unternehmen, Fitnessstudios, Anwälte, Musiker, Fotografen, Restaurants, eBooks und mehr.

Wenn Sie eine Zielseitenvorlage auswählen, werden Sie gefragt, ob Sie Ihr vorhandenes Layout ersetzen oder an das bereits vorhandene Layout anhängen möchten.

Vorgefertigte Layouts werden in Sekundenschnelle in Ihr Layout eingefügt.

Sobald sie hinzugefügt wurden, können Sie sie nach Belieben anpassen und als benutzerdefinierte Vorlagen speichern.

Inhaltsseitenvorlagen sind universelle Vorlagen für Teile einer Seite, die für jede Art von Website geeignet sind.

25 Inhaltsseitenvorlagen sind verfügbar. Es gibt Layouts, die Ihnen helfen, einen Infobereich, Teaminformationen, Dienstleistungen, ein Kontaktformular, Preistabellen, ein Anmeldeformular und mehr einzufügen.

Beaver Builder bietet auch Dutzende vorgefertigter Reihen. Diese Layouts können einfach in jeden Teil Ihrer Seite eingefügt werden.

Sie finden sie unter den Zeilen-Tabs des Hauptinhaltsmenüs.

Wenn Sie das Templating-System von Beaver Builder verwenden, können Sie die Zeit, die zum Erstellen neuer Layouts benötigt wird, erheblich verkürzen.

Layouts können jederzeit gespeichert und beliebig oft wiederverwendet werden.

Alle gespeicherten Vorlagen können über das Hauptverwaltungsmenü von Beaver Builder verwaltet und bei Bedarf später bearbeitet werden.

Sie können Vorlagen, Zeilen, Spalten und Module speichern, und jedes gespeicherte Layout kann Kategorien zugeordnet werden.

Beaver Builder hat fantastische Arbeit geleistet, indem er vorgefertigte Layouts in seine Benutzeroberfläche integriert hat. Layouts können in Sekundenschnelle eingefügt und Anpassungen gespeichert und immer wieder verwendet werden.

Vorgefertigte Divi-Layouts

Wie Beaver Builder bietet Divi Benutzern eine große Auswahl an vorgefertigten Layouts.

Über 1.100 Layoutpakete stehen zur Auswahl.

150 dieser Layouts sind Layoutpakete, die Designs für eine Reihe von Bereichen auf Ihrer Website enthalten, z. B. Ihre About-Seite, Ihr Blog, Ihre Zielseite und Ihre Galerie.

Wie bereits erwähnt, besteht eine der verfügbaren Optionen beim Starten von Divi Builder auf einer neuen Seite darin, ein vorgefertigtes Layout auszuwählen.

Die Divi-Bibliothek kann auch über das Hauptmenü geladen werden.

Mit der Divi-Bibliothek können Sie vorgefertigte Layouts, gespeicherte Layouts und ganze Seiten einfügen.

Sie können Ihre Suche nach einem geeigneten Layout eingrenzen, indem Sie das Suchfeld verwenden oder eine der 13 Kategorien auswählen, denen Layouts zugeordnet sind.

Achten Sie darauf, Ihr aktuelles Layout zu speichern, bevor Sie ein vorgefertigtes Layout einfügen, da Divi Builder es überschreibt.

Layoutpakete heben alle im Paket enthaltenen Layouts hervor, ich empfehle jedoch dringend, auf die Schaltfläche „Live-Demo anzeigen“ zu klicken, um genau zu sehen, wie Ihre Website aussehen wird, wenn Sie ein Design auswählen.

Um diesen Punkt zu veranschaulichen, werfen Sie einen Blick auf den Demobereich für das Divi Web Freelancer-Design, das im folgenden Screenshot gezeigt wird.

Abhängig von Ihrem Hosting-Setup kann es bis zu einer Minute dauern, bis Divi Builder alle Layouts in einem Layoutpaket importiert hat.

Sobald Sie ein Layout in Ihre Seite eingefügt haben, können Sie es anpassen und zu Ihrem eigenen machen, indem Sie Farben ändern, Module hinzufügen und Abschnitte entfernen, die für Sie nicht relevant sind.

Layouts können jederzeit über das Divi-Hauptmenü in der Divi-Bibliothek gespeichert werden.

Sie können jedes Layout benennen und in Kategorien gruppieren.

Das Divi-Admin-Menü ist mit der Hauptoptionsseite des Plugins, dem Divi Theme Builder, der Divi-Bibliothek und einigen anderen Einstellungsseiten verknüpft (die wir später besprechen werden).

Divi Theme Builder ist ein fantastisches Tool, mit dem Sie benutzerdefinierte Seitenvorlagen erstellen können. Sie können die Vorlagen dann Beiträgen, Seiten und benutzerdefinierten Beitragstypen zuweisen.

Für jede Vorlage können Sie der Kopf-, Haupt- und Fußzeile ein Layout zuweisen. Sie können dann genau festlegen, für welche Bereiche Ihrer Website diese Vorlagen verwendet werden sollen.

Sie könnten beispielsweise ein einzigartiges Design für Ihr Blog erstellen, es aber von bestimmten Post-Kategorien ausschließen. Sie können auch einzigartige Vorlagen für Ihre Suchergebnisseite, 404-Seite, Archive, Homepage und mehr erstellen.

Alle gespeicherten Layouts können auf der Seite „Divi-Bibliothek“ angezeigt werden, die im Hauptmenü von Divi Admin verlinkt ist.

Layouts können von dieser Seite importiert und exportiert werden. Von hier aus können Sie auch Ihre Layout-Kategorien verwalten.

Wenn Sie auf der Hauptseite der Divi-Bibliothek auf klicken, um ein Layout zu bearbeiten, gelangen Sie zu einer Übersicht Ihres Designs im Drahtmodellansichtsmodus.

Dieser Modus ist nützlich, um die Struktur Ihres Layouts anzupassen, aber wenn Sie spezifischere Änderungen vornehmen möchten, können Sie zur Desktopansicht, Tabletansicht oder Telefonansicht wechseln. Auf diese Weise können Sie Ihr gespeichertes Layout mit dem visuellen Editor ändern.

Wenn Sie möchten, können Sie den regulären visuellen Frontend-Editor starten und Anpassungen auf der Seite selbst vornehmen.

Nebeneinander glaube ich nicht, dass die Qualität der vorgefertigten Layouts von Divi Builder besser ist als die Designs, die in Beaver Builder verfügbar sind, aber das gesamte Setup in Divi Builder ist deutlich besser.

Die Layoutpakete von Divi Builder bieten Ihnen bis zu einem Dutzend Vorlagen, mit denen Sie eine vollständige Website erstellen können, während Beaver Builder nur Einzelseitenlayouts und Layouts für bestimmte Abschnitte Ihrer Seite anbietet.

Auch in Divi Builder gibt es so viel mehr Auswahl, da das Plugin 950 Zielseitenvorlagen gegenüber 15 von Beaver Builder bietet. Eine große Auswahl an Layouts von Drittanbietern ist auch für Divi verfügbar.

Es ist jedoch wichtig zu beachten, dass Beaver Builder dazu neigt, Layouts etwas schneller in Ihre Seite einzufügen als Divi Builder.

Sehen Sie sich die Seite Divi-Layouts an, um zu sehen, welche vorgefertigten Layouts mit Divi Builder verfügbar sind.

Beaver Builder-Inhaltsmodule

Insgesamt stehen 29 Module in Beaver Builder zur Verfügung. Die Module sind in sechs Kategorien unterteilt: Basic, Media, Actions, Layout, Info und Posts.

Es gibt eine große Auswahl an Modulen zum Hinzufügen von reichhaltigen Inhalten, zum Anpassen Ihres Layouts und zum Abrufen von Inhalten aus Ihrem Blog.

Eines der Module in der Layout-Kategorie ist das Sidebar-Modul, mit dem Sie WordPress-Widgets einfügen können. Dies eröffnet viele Möglichkeiten, Funktionalität aus anderen WordPress-Plugins in Ihre Layouts zu integrieren.

Wenn ein Modul per Drag & Drop in Ihren Canvas-Bereich gezogen wurde, wird sein Einstellungsfeld angezeigt.

In allen Modulen finden Sie gemeinsame Einstellungen für Stil, Abstände, Sichtbarkeit, Animationen und mehr. Jedes Modul verfügt jedoch über einzigartige Einstellungen, mit denen Sie ändern können, was angezeigt wird.

Beispielsweise gibt es im Kartenmodul Felder zum Eingeben der Kartenadresse, der Kartenhöhe und des Kartentitelattributs.

Beaver Builder verfügt nicht über die größte Sammlung von Inhaltsmodulen und bietet nicht so viele Anpassungsoptionen wie Divi.

Ich glaube jedoch, dass Beaver Builder alles hat, was Sie brauchen, um schöne Layouts zu erstellen, da fehlende Funktionen über WordPress-Widgets in Layouts eingefügt werden können.

Inhaltsmodule von Divi Builder

38 Inhaltsmodule stehen in Divi Builder zur Auswahl.

Neben wesentlichen Modulen wie Bild, Video, Portfolio und Testimonial gibt es nützliche Module zum Hinzufügen von Bartresen, Klappentexten, Schiebereglern und Handlungsaufforderungen.

Divi Builder fügt außerdem einen neuen benutzerdefinierten Beitragstyp für Projekte hinzu.

Wie Beaver Builder verfügt Divi über ein Seitenleistenmodul, mit dem Sie WordPress-Widgets in Ihre Layouts integrieren können.

Divi Builder verwendet ein farbcodiertes System, um Ihnen beim Erstellen stilvoller Layouts zu helfen.

Abschnitte sind blau, Reihen sind grün und Module sind dunkelgrau (fast schwarz).

Sie können ein neues Modul hinzufügen, indem Sie den Mauszeiger über eine Spalte bewegen und auf die Schaltfläche „Neues Modul hinzufügen“ klicken.

Wie ich bereits gezeigt habe, wird bei der Auswahl eines Moduls automatisch das Moduleinstellungsfeld angezeigt, sodass Sie Werte eingeben und den Stil anpassen können.

Alle von Ihnen vorgenommenen Anpassungen können in der Divi-Bibliothek gespeichert werden. Dadurch können Sie beim Erstellen von Seiten viel Zeit sparen.

Beispielsweise könnten Sie das Kartenmodul so ändern, dass es eine Karte Ihrer Firmenadresse anzeigt. Sie können die Karte dann einfach speichern und in Ihre Info-Seite, Ihr Kontaktformular, Blog-Posts und mehr einfügen.

Divi Builder bietet mehr Styling- und Anpassungsoptionen als Beaver Builder und verfügt über neun zusätzliche Inhaltsmodule, aber ich glaube nicht, dass sich irgendjemand mit dem, was in beiden WordPress-Plugins verfügbar ist, eingeschränkt fühlen wird, insbesondere da WordPress-Widgets mit dem Seitenleistenmodul in Layouts eingefügt werden können.

Beaver Builder konfigurieren

Die globale Einstellungsbox kann aus dem Tools-Menü innerhalb der Benutzeroberfläche von Beaver Builder geladen werden.

Es ermöglicht Ihnen, die Seitenüberschrift und die Ränder und Auffüllung von Zeilen, Spalten und Modulen zu aktivieren und zu deaktivieren. In diesem Bereich können auch responsive Layouts angepasst werden, und es gibt Felder zum Einfügen von CSS- und Javascript-Code.

Die Haupteinstellungsseite von Beaver Builder ist in mehrere Abschnitte unterteilt.

Um automatische Plugin-Updates zu erhalten, müssen Sie Ihren Lizenzschlüssel im Lizenzbereich eingeben. Module und Beitragstypen können im nächsten Abschnitt aktiviert und deaktiviert werden.

Der Zugriff auf das Vorlagensystem kann im nächsten Abschnitt angepasst werden. Sie können Kernvorlagen, Benutzervorlagen oder alle Vorlagen aktivieren. Vorlagen können auch deaktiviert werden.

Im Bereich Benutzerzugriffseinstellungen können Sie festlegen, welche WordPress-Benutzergruppen Beaver Builder verwenden können. Die Berechtigungen sind in fünf verschiedene Bereiche unterteilt, wie z. B. Zugriff auf den Builder und auf das Admin-Menü von Beaver Builder.

Auf der Seite mit den allgemeinen Einstellungen können Sie außerdem Symbolsätze, Plugin-Branding, Design-Branding und Hilfeeinstellungen aktivieren und deaktivieren. Caching und Debugging sind im Abschnitt Tools verfügbar.

Ich empfehle, die Einstellungsseite von Beaver Builder nach der Installation von Beaver Builder zu überprüfen, aber die meisten Anpassungen, die Sie vornehmen werden, finden innerhalb der Hauptoberfläche von Beaver Builder statt.

Konfigurieren von Divi Builder

Wie bei Beaver Builder verbringen Sie die meiste Zeit damit, Layouts im Divi Builder-Editor selbst anzupassen, aber es gibt einige wichtige Einstellungen, die Sie im Hauptmenü von Divi Admin finden können.

Die Haupt-Plugin-Optionsseite hat eine Registerkarte zur Eingabe Ihres Elegant Themes-Benutzernamens und API-Schlüssels. Sie müssen dies abschließen, um automatische Plugin-Updates zu erhalten.

Im nächsten Tab können Sie Ihren Google-API-Schlüssel eingeben. Dies ist notwendig, wenn Sie das Kartenmodul verwenden möchten. Google Fonts können auch von dieser Seite aus deaktiviert werden.

Auf der nächsten Registerkarte können Sie Divi Builder für bestimmte WordPress-Beitragstypen aktivieren und deaktivieren. Dies ist nützlich, wenn Sie den Zugriff auf Divi Builder für bestimmte Beitragstypen wie Ihre Galerie einschränken möchten.

Auf der Registerkarte „Erweitert“ können Sie die CSS- und Javascript-Minifizierung aktivieren und deaktivieren. Hier können Sie auch den Legacy Builder-Editor aktivieren.

Divi Builder gibt Ihnen die vollständige Kontrolle darüber, was jede Benutzergruppe auf Ihrer Website tun kann und was nicht.

Während Sie mit Beaver Builder den Zugriff auf einige Schlüsselbereiche beschränken können, können Sie mit Divi Builder genau definieren, auf welche Funktionen Benutzer zugreifen können.

Sie können beispielsweise verhindern, dass Benutzer Layouts laden oder Funktionen in Divi Builder deaktivieren.

Das Support-Center von Divi stellt einen Bericht über Ihr System bereit. Dies kann Ihnen helfen, Probleme mit Ihrem Hosting-Setup zu diagnostizieren.

Zum Beispiel zeigte der Bericht für meine Test-WordPress-Website, dass meine WordPress-Installation eine begrenzte Menge an Ressourcen hatte.

Auf dieser Seite ist auch der Fernzugriff verfügbar. Dies kann dem Support-Team von Elegant Themes helfen, alle Probleme zu lösen, die Sie mit Divi Builder haben.

Das Support-Center hat auch Links zu nützlichen Video-Tutorials und es gibt einen abgesicherten Modus, der Funktionen deaktiviert, die Probleme mit anderen WordPress-Plugins und -Themes verursachen könnten.

Auch auf dieser Seite werden Fehler angezeigt, wenn WP_DEBUG_LOG aktiviert ist.

Divi Builder ist ein einfach einzurichtendes WordPress-Plugin mit nur wenigen Einstellungen, die nach der Installation überprüft werden müssen.

Die herausragende Funktion im Einstellungsbereich ist der Divi-Rolleneditor. Es ist etwas, das Besitzer großer WordPress-Websites mit mehreren Mitarbeitern zu schätzen wissen werden.

Das Beaver Builder-Theme

Beaver Builder Theme ist ein HTML5- und Bootstrap-WordPress-Framework, das in den Beaver Builder Pro- und Agency-Plänen enthalten ist.

Es ist ein minimales WordPress-Design, das als leere Leinwand für die Erstellung von Designs mit Beaver Builder dient. Hooks und Filter sind innerhalb des Themes verfügbar, um Entwicklern beim Ändern des Website-Designs zu helfen, und es bietet eine großartige Unterstützung für WooCommerce.

Alle Einstellungen für das Beaver Builder Theme sind im WordPress Customizer enthalten.

Stil und Position können für Dutzende von Bereichen Ihrer Seite angepasst werden. Es gibt auch Layouts für Kopfzeile, Navigationsmenü, Blog, Archive, Blogbeiträge, WooCommerce-Seiten und Fußzeile.

Während Beaver Builder im Kern ein minimales WordPress-Thema bleibt, haben die Entwickler die Extrameile gegangen, um viele zusätzliche Anpassungsoptionen hinzuzufügen.

Nehmen Sie zum Beispiel das Logo Ihrer Website. Sie können ein normales Logobild, eines für Retina-Geräte, Einblendlogos für normale Geräte und Retina-Geräte und ein weiteres Logo für mobile Geräte hochladen.

In vielen anderen WordPress-Designs können verschiedene Teile des Designs wie Kopfzeile, Seitenleiste und Fußzeile verhindern, dass Beaver Builder Layouts korrekt anzeigt. Aus diesem Grund haben viele Benutzer von Beaver Builder auf Beaver Builder Theme umgestellt.

Es ist eine gute Wahl, wenn Sie Beaver Builder-Layouts auf Ihrer Website verwenden möchten.

Das Divi-Thema

Beaver Builder vermarktet sein Design als Rahmenthema für Beaver Builder, während Elegant Themes Divi Theme als vielseitiges All-in-One-WordPress-Thema vermarktet.

Dies unterstreicht, wie einflussreich Marketing sein kann, da es mehr Ähnlichkeiten zwischen Beaver Builder Theme und Divi Theme gibt, als die Leute denken.

Am Anfang war Divi ein All-in-One-WordPress-Thema, aber der größte Teil der Vielseitigkeit, die alle mit Divi-Thema in Verbindung brachten, wurde später zu Divi Builder migriert. Dies war zweifellos das Richtige.

Da die meisten Funktionen in Divi Builder integriert sind, kann Divi Theme als Framework wie Beaver Builder Theme betrachtet werden. Wenn Sie also zufällig beide Produkte besitzen, können Sie Divi Theme mit Beaver Builder oder Beaver Builder Theme mit Divi Builder verwenden.

Sobald das Divi-Design aktiviert wurde, sehen Sie einige subtile Änderungen im Divi-Admin-Menü.

Dazu gehört, dass die Plugin-Optionsseite durch eine Theme-Optionsseite und einen Link zum WordPress Customizer ersetzt wird.

Abgesehen davon, dass der Einstellungsbereich erweitert wird, bleibt alles andere gleich.

Interessanterweise wird das Divi Builder-Plugin automatisch deaktiviert, wenn Divi Theme aktiviert ist. Dies ist notwendig, da die Funktionalität von Divi Builder direkt in Divi Theme (und das Extra WordPress Theme von Elegant Themes) integriert ist.

Im WordPress Customizer finden Sie Hunderte von nützlichen Optionen, die auf etwa ein Dutzend Abschnitte verteilt sind. Diese können verwendet werden, um Bereiche wie Kopfzeile, Fußzeile und Seitenleisten zu steuern.

Der Hauptinhaltsbereich für Beiträge, Seiten und benutzerdefinierte Beitragstypen wird weiterhin von Divi Builder gesteuert.

Wenn es um die Anpassung Ihres Website-Designs geht, glaube ich nicht, dass Divi Theme besser oder schlechter ist als Beaver Builder Theme. Es gibt einige Bereiche, in denen Divi Theme Ihnen mehr Optionen bietet, und einige Bereiche, in denen Beaver Builder Theme mehr bietet.

Alle Plugin-Optionen von Divi Builder wurden in den umfangreicheren Optionsbereich von Divi Theme integriert.

Beispielsweise sind die Posttyp-Einstellungen jetzt auf der Registerkarte „Builder“ verfügbar, und die Optionen der Seite „Erweiterte Einstellungen“ befinden sich jetzt auf der Seite „Allgemeine Optionen“.

Die Seite mit den allgemeinen Einstellungen enthält auch Felder für Social-Media-Symbole, Scrollen, benutzerdefinierten CSS-Code und mehr.

Zusätzliche Optionen sind auch für Benutzer von Divi Theme verfügbar.

Es gibt einen speziellen Optionsbereich für das Navigationsmenü Ihrer Website und eine Layoutseite, auf der Sie angeben können, welche Funktionen für Beiträge und Seiten aktiviert werden sollen.

Es gibt auch Seiten zum Hinzufügen eines 468×60-Pixel-Banners und allgemeine SEO-Details zu Ihrer Website.

Wie Beaver Builder Theme ist Divi Theme ein minimales WordPress-Theme, das für die Verwendung mit Divi Builder optimiert wurde.

Ich empfehle dringend, dieses Design zu verwenden, wenn Sie die große Auswahl an vorgefertigten Layouts von Divi nutzen möchten.

Die Kosten des Biberbauers

Merkmale und Funktionalität sind zwei Faktoren, die Sie bei der Überprüfung von Beaver Builder und Divi berücksichtigen müssen. Sie müssen jedoch auch die Kosten dieser Produkte und das Budget berücksichtigen, das Sie für Ihre Projekte zur Verfügung haben.

Viele Premium-WordPress-Unternehmen berechnen mehr für die Verwendung ihrer Produkte auf zusätzlichen Websites. Beispielsweise kann der Einstiegsplan eine Website unterstützen, der Zwischenplan kann drei Websites unterstützen und der erweiterte Plan kann zehn Websites unterstützen.

Beaver Builder und Elegant Themes sind großzügiger und bieten Support und Updates für eine unbegrenzte Anzahl von Websites.

Obwohl sich dieser Artikel hauptsächlich auf die Premium-Version von Beaver Builder konzentriert hat, würde ich dennoch empfehlen, sich Beaver Builder Lite anzusehen.

Es ist eine gute Lösung für einfache Websites und hilft Ihnen auch zu sehen, wie die Benutzeroberfläche von Beaver Builder funktioniert.

Bitte beachten Sie jedoch, dass der kostenlosen Version von Beaver Builder nützliche Module wie Kontaktformular, Preistabelle und Karte fehlen. There is no access to the Beaver Builder templating system or pre-made layouts either.

For the vast majority of projects, the full version of Beaver Builder is a better fit than the lite version.

Three different premium plans are available: Standard, Pro, and Agency. All plans come with one year of premium support and access to premium modules and templates.

The standard plan retails at $99 per year. To get WordPress multisite support and access to the Beaver Builder Theme, you need to upgrade to the $199 per year Pro plan.

The $399 per year Agency plan adds white labeling. Web design companies may be interested in this plan as it allows you to rebrand the plugin as your own and change all references to Beaver Builder in templates and the admin area.

Beaver Builder bietet eine 30-tägige Geld-zurück-Garantie.

Alle Beaver Builder-Mitglieder erhalten außerdem nach einem Jahr 40 % Rabatt. Dadurch sinkt der Preis für die Pläne von Beaver Builder in den Folgejahren auf 59,40 $ pro Jahr, 119,40 $ pro Jahr und 239,40 $ pro Jahr.

Wenn Sie sich über einen Aspekt der Verwendung von Beaver Builder nicht sicher sind, empfehle ich Ihnen dringend, sich die detaillierte Wissensdatenbank anzusehen. Sie können auch über den Ticket-Support und im Beaver Builder-Community-Forum, in der Beaver Builder-Facebook-Gruppe und im Beaver Builder-Slackroom um Hilfe bitten.

Die Kosten von Divi

Die Preispolitik einer Elegant Themes-Mitgliedschaft ist einfacher.

Es sind zwei Pläne verfügbar, und beide Pläne geben Ihnen vollen Zugriff auf alle Produkte von Elegant Themes.

Die jährliche Mitgliedschaft bei Elegant Themes kostet 89 $ pro Jahr.

Wie Beaver Builder können Sie Produkte wie Divi Builder nach Ablauf Ihrer Mitgliedschaft weiterhin verwenden, erhalten jedoch keinen Support und keine Updates, wenn Sie nicht verlängern.

Wenn Sie glauben, dass Sie Ihre Mitgliedschaft um ein paar Jahre verlängern werden, sollten Sie den lebenslangen Zugangsplan in Betracht ziehen. Für eine einmalige Gebühr von 249 $ erhalten Sie lebenslangen Zugriff, Support und Updates für alle Produkte von Elegant Themes.

Elegant Themes bietet allen Neukunden außerdem eine 30-tägige Geld-zurück-Garantie.

Um Ihnen zu helfen, ihre Produkte besser zu verstehen, hat Elegant Themes einen der umfangreichsten Dokumentationsbereiche geschaffen, die ich je gesehen habe. Es gibt Hunderte von schriftlichen Tutorials und Video-Tutorials, die erklären, wie Elegant Themes WordPress-Themes und -Plugins funktionieren.

Mitglieder können auch über den Ticket-Support um Hilfe bitten, und es gibt ein großes Community-Forum, ein Meetup-Netzwerk und eine beliebte Facebook-Gruppe.

Ein Vergleich der Kosten von Beaver Builder und Divi ist schwierig, da sie leicht unterschiedliche Preismodelle haben.

Obwohl es eingeschränkter ist, schätze ich die Tatsache, dass eine kostenlose Version von Beaver Builder verfügbar ist, da Beaver Builder Lite für einfache Blogs und einfache Website-Projekte ausreicht.

Ich glaube jedoch, dass die Vollversion von Beaver Builder für die Mehrheit der WordPress-Benutzer die beste Option ist.

Mit 99 US-Dollar kostet eine Standardlizenz für Beaver Builder 10 US-Dollar mehr als Elegant Themes, nachfolgende Verlängerungen werden jedoch mit nur 59,40 US-Dollar pro Jahr berechnet.

Dies ist ein großzügiger Rabatt für treue Mitglieder, aber ein Lebenszeitplan von Elegant Themes kann für viele Website-Besitzer immer noch billiger sein.

Eine Mitgliedschaft bei Elegant Themes beinhaltet auch das Divi-Thema, während Sie 199 US-Dollar bezahlen müssen, um Zugriff auf das Beaver Builder-Thema zu erhalten.

Noch wichtiger ist, dass eine Elegant Themes-Mitgliedschaft fünf hochwertige Produkte umfasst: Divi Theme, Divi Builder, das WordPress-Magazin-Theme Extra, das E-Mail-Opt-in-WordPress-Plugin Bloom und das Social-Media-WordPress-Plugin Monarch.

Aus diesem Grund glaube ich, dass eine Elegant Themes-Mitgliedschaft für die meisten WordPress-Benutzer ein besseres Preis-Leistungs-Verhältnis bietet.

Abschließende Gedanken

Drag-and-Drop-Seitenersteller können WordPress-Benutzern helfen, innerhalb von Minuten über eine benutzerfreundliche Oberfläche schöne Website-Layouts zu erstellen.

In einem Vergleichsartikel wie diesem liegt es in meiner Verantwortung, die Stärken und Schwächen von Beaver Builder und Divi aufzuzeigen, es ist jedoch wichtig, sich daran zu erinnern, dass es sich bei diesen beiden Lösungen um raffinierte Produkte handelt und es viele Ähnlichkeiten zwischen ihnen gibt.

Der Prozess zum Erstellen neuer Zeilen und Spalten ist in beiden Produkten ähnlich, aber ich habe das Gefühl, dass die Benutzeroberfläche von Beaver Builder einfacher zu erlernen und auch etwas schneller ist.

Divi bietet viele weitere Anpassungsoptionen und mehr vorgefertigte Layouts. Da fünf Produkte in einer Elegant Themes-Mitgliedschaft enthalten sind, würde ich argumentieren, dass sie auch ein besseres Preis-Leistungs-Verhältnis bietet.

Ich hoffe, Ihnen hat unser ausführlicher Einblick in Beaver Builder und Divi gefallen.

Um mehr über Beaver Builder zu erfahren, besuchen Sie die offizielle Verkaufsseite oder lesen Sie unsere vollständige Bewertung von Beaver Builder. Sie können auch besser verstehen, wie Beaver Builder funktioniert, indem Sie die Beaver Builder-Demoseite besuchen oder die kostenlose Version des Plugins testen.

Auf der Elegant Themes-Website und in unserem vollständigen Bericht über Divi Builder erfahren Sie, wie Divi funktioniert. Obwohl keine kostenlose Version von Divi Builder verfügbar ist, können Sie das Plugin auf der Divi Builder-Demoseite testen. Auf diese Weise können Sie sehen, was Divi Builder leisten kann.

Danke fürs Lesen.
Kevin