Der Page Builder bei WordPress-Projekten im revier

Je nach Anforderungen an eine Webseite wählen wir das entsprechende Content Management System (CMS) aus. Für kleine bis mittlere Webseiten bei denen unsere Kunde selbst die Inhalte pflegen möchte setzen wir WordPress als CMS ein. Hier kann man auf eine große Anzahl an Plugins und vorgefertigte Themes zurückgreifen und diese entsprechen den Kundenwünschen anpassen. Aus unserer Erfahrung heraus erleichtert ein Page Builder die Pflege von Inhalten ungemein. Das liegt hauptsächlich an der benutzerfreundlichen und visuellen Oberfläche des Page Builders.

Natürlich hat WordPress selbst ebenfalls einen Editor, um Inhalte zu pflegen. Dieser heißt Gutenberg-Editor und ermöglicht es den Redakteuren Inhaltsblöcke in einer visuellen und modularen Weise zu erstellen und zu bearbeiten. Im Vergleich zum vorherigen TinyMCE-Editor erleichtert der Block-Ansatz die Inhaltspflege ungemein. Trotzdem setzen wir lieber einen Page Builder ein.

Warum setzen wir Page Builder ein?

Unsere Erfahrung mit dem Gutenberg-Editor hat gezeigt, dass das Schreiben von Inhalten herausfordernd sein kann.  Jeder Absatz ist ein eigener Block und es gibt keine visuelle Hilfe um erkennen zu können, wo der eine Block aufhört und der nächste beginnt. Dies erschwert die Bearbeitung von Seiteninhalten. Aus unserer Erfahrung heraus, kann man mit einem Page Builder komplexe Designs und Layouts einfacher umsetzen als mit dem Gutenberg Editor.

Neben der Inhaltspflege und der Designumsetzung erweitern viele Page Builder die Funktionalitäten von WordPress. Darunter fallen beispielsweise:

• Kopieren und Einfügen Seiteninhalten über mehrere Seiten hinweg
• Drag-and-Drop-Funktionalität, um Elemente an die gewünschte Stelle zu platzieren
• Blöcke oder Module anzupassen und sie für eine spätere Verwendung zu speichern

Es gibt sehr viele Page Builder für WordPress. In diesem Artikel konzentrieren wir uns auf den Beaver Builder und den Breakdance Editor.

Beaver Builder 

Der Beaver Builder ist ein beliebtes Page Builder Plugin und ist bereits seit 2014 auf dem Markt. Er wurde mit dem Anspruch entwickelt, stabil und funktional zu sein. Seit 2017 gibt es darüber hinaus ein Add-on namens Beaver Themer, das die Gestaltung von sich wiederholenden Seitenelementen wie z.B. Header, Footer oder Sidebar ermöglicht. Damit ist der Beaver Builder einer der ersten Page Builder gewesen, der solche Theme Builder Funktionen bereitstellen konnte.  

Im Gegensatz zu den meisten Page Builder werden hier keine Shortcode generiert, sodass möglichst sauber HTML-Code ausgegebenen wird. Das bedeutet, dass man die Inhalte beibehalten kann auch wenn man das Plugin deinstalliert 

Breakdance Editor 

Der Breakdance Editor wurde Ende 2022 veröffentlicht und ist somit relativ neu auf dem Markt. Er wurde von der WordPress-Entwicklungsschmiede Sofltyy entwickelt, welche zuvor den Drag-and-Drop Editor “Oxygen” oder auch das WordPress Plugin “WP All Import” programmiert haben. Die Erfahrung und das Feedback der beiden vorherigen Projekte floss anschließend in die Umsetzung des Breakdance Editors.

Benutzerfreundlichkeit 

Die Copy-und-Paste-Funktionalität von Inhaltselementen ist beim Breakdance Editor sehr gut durchdacht und macht Spaß in der Benutzung. Man kann in zwei Tabs jeweils eine Seite bearbeiten und einfach per Copy-und-Paste von einer Seite Inhalte oder auch nur die Stylings auf die andere Seite übertragen. So kommt man bei der Inhaltserstellung sehr schnell voran. Auch die Bibliothek von verschiedenen Seitenlayouts und Elementen, die man bereits als Vorschau sieht und einfach per Klick einfügen kann, erleichtert die Pflege ungemein. 

Zwar bietet auch der Beaver Builder die Möglichkeit Inhalte zu kopieren und einzufügen, aber es benötigt ein paar mehr Klicks als beim Breakdance Editor.  Darüber hinaus kann man ebenfalls Vorlagen im Beaver Builder anlegen. Die Auswahl der Vorlagen ist hier jedoch nur über die Benennung der Elemente möglich, weswegen man manchmal ein wenig ausprobieren muss bis man die richtige Vorlage eingefügt hat.

Beide Editoren verfügen über eine ausgesprochen gute Benutzerfreundlichkeit, der Breakdance Editor hat hier durch seine schnellen Zusatzfunktionen die Nase vorn.

Designmöglichkeiten 

Der Breakdance Editor sticht vor allem durch seinen umfangreichen Theme Builder hervor. Das bedeutet, dass nicht nur die Inhalte durch den Page Builder erstellt werden, sondern auch das Theme. Somit bietet er eine umfangreiche Auswahl an Einstellungsmöglichkeiten, um auch komplexere Designs umzusetzen. Globale Stylings von Buttons, Links und Texten können im Editor gesetzt und angepasst werden. Die Stylings können an den einzelnen Elementen auch im selben Umfang überschrieben werden. 

Beim Beaver Builder wurde das Konzept eines globalen Stylings von Elementen mit dem Release im Sommer 2023 angekündigt. Bisher ist es hier nur möglich den Header, Footer und die Sitebar global zu gestalten und Elemente abzuspeichern beziehungsweise einzufügen. Verändert sich beispielsweise die Button-Farbe im Nachhinein, dann müssen alle Buttons auf der Webseite manuell angepasst werden. 

Leistung und Geschwindigkeit 

Die Ladegeschwindigkeit ist mittlerweile ein wichtiger Faktor, wenn es um die Auswahl eines Page Builders geht. 

Leider hat der Beaver Builder im Vergleich zum Breakdance Editor auch hier das Nachsehen. Mit derselben Grundlage an Plugins bezüglich Caching und Bildoptimierung landet eine leere Seite (inklusive Header und Footer) bei einem PageSpeed Score von 78. Im Vergleich dazu ergibt sich beim Breakdance Editor ein Score von 98.  

Allein schon die Unterschiede in der Ladegeschwindigkeit und Nutzerfreundlichkeit sprechen für den Breakdance Editor. Allerdings deckt der Breakdance Editor noch nicht alle Funktionalitäten ab, welche für die meisten Webseiten bei uns benötigt werden. 

In einigen Fällen lohnt es sich also auf den Breakdance Editor umzusteigen, bei Mehrsprachigkeit und Redakteur-Rechten hat aber aktuell der Beaver Builder noch deutliche Vorteile. Mit weiteren Updates könnte der Breakdance Editor diese Nachteile allerdings ausbügeln.

Wir sind daher gespannt auf die weiteren Entwicklungen.