Das WordPress Page-Builder ABC

WordPress-PageBuilder-HostPress-Blog

Auch wenn WordPress sich eigentlich durch eine unkomplizierte Handhabung auszeichnet, kann das Layout einer Website selbst Experten auf die Probe stellen. Die optimale Text- und Bildgestaltung eines Onlineshops, eines Blogs oder einer Informationswebsite ist häufig sehr komplex und mit einigen Schwierigkeiten verbunden. Deshalb erfreuen sich sogenannte Page-Builder mittlerweile einer sehr großen Beliebtheit.

 

In diesem Artikel erfährst du, was Page Builder überhaupt sind.

Wir stellen vier Beispiele vor und beleuchten die Vorteile und Nachteile bevor wir zum abschließenden Fazit kommen und der Frage nachgehen, für wen sich der Einsatz lohnen kann.

 

Was sind Page-Builder und wie funktionieren sie?

Page-Builder erweitern bzw. ersetzen die eingeschränkte Funktionalität des Standard WordPress Editors (vgl. Abbildung 1: TinyMCE Editor) und erlauben es, komplexe Seitenlayouts ohne Programmierkenntnisse zu erstellen. Page Builder stellen dem Benutzer einen Baukasten von Webseite-Elementen zur Verfügung, die dann z.B. per Drag & Drop platziert werden können. Zu den verfügbaren Elementen gehören, abhängig vom eingesetzten Pagebuilder: Textblöcke, Überschriften, Einzelbilder, Charts, Slider, Testimonials, Formulare, Tabellen und vieles mehr. Vorgefertigte Templates erleichtern die Erstellung von komplexen Layouts noch zusätzlich: Mit einem Klick ist der Standard-Aufbau einer Produkt-Landingpage erstellt. Jetzt müssen nur noch Bilder und Texte ausgetauscht werden.

Abbildung 1: TinyMCE WordPress Editor

Das Ziel von Page-Buildern besteht darin, auch unerfahrenen Benutzern ohne HTML, CSS und Javascript Kenntnissen die Möglichkeit zu bieten, komplexe Webseiten-Layouts und –strukturen zu erstellen. Pagebuilder erzeugen im Hintergrund Shortcodes, die dann wiederum von WordPress in HTML Code umgewandelt werden – eine Schwäche von Page Buildern, auf die wir später noch eingehen werden.

Welche Arten von Page Buildern gibt es?

Man unterscheidet zwei verschiedene Arten von Page-Buildern: Solche, die als eigenständiges Plug-In installiert (Stand Alone Page Builder) werden und solche, die direkt mit dem Theme installiert werden (Integrierter Page Builder). Integrierte WordPress Pagebuilder können nur in Verbindung mit dem aktivierten Theme genutzt werden. Sobald ein anderes Theme aktiviert wird, kann der Pagebuilder nicht mehr weiter verwendet werden. Webseitenbetreiber, die häufig Ihr Theme ändern und auf einen Page-Builder angewiesen sind, sollten deshalb zu einem Stand-Alone Page Builder greifen. Dieser funktioniert unabhängig davon, welches Theme gerade aktiv ist.

Abbildung 2: Page-Builder Elemente (WPBakery Page Builder)

 

Welche Vorteile bieten Page-Builder?

Der Einsatz von Page Buildern kann für verschiedene Anwendungszwecke durchaus sinnvoll sein, vor allem dann, wenn man komplexe Seiten mit einem individuellen Layout erstellen möchte. Bei unseren Tests konnten wir folgende Vorteile feststellen:

Moderne, individuelle Designs

Der größte Vorteil und das Hauptargument für einen Page Builder ist die einfache Erstellung von komplexen, individuellen Designs. Die meisten Builder unterstützen die Erstellung von Seiten sowohl in der Frontend als auch in der Backend Ansicht. Über das Baukastensystem können anschließend Elemente zur Seite hinzugefügt werden (Vgl. Abbildung 2). Jedes Element kann über ein eigenes Kontextmenü noch frei definiert werden. So können bei Bildern z.B. die Positionierung, Größe, Beschreibung oder ALT-Attribut frei definiert werden. Der Benutzer kann seine kreativen Ideen so einfach mit wenig Aufwand umsetzen.

Geringe Anschaffungskosten

Neben einigen kostenlosen PageBuildern verwenden die meisten Builder ein Preismodell, was eine jährliche Zahlung für die Nutzung vorsieht. Nach Ablauf von einem Jahr kann der Page Builder noch genutzt werden, jedoch erlischt Support und kostenlose Updates. Wie jedes andere WordPress Plugin auch, sollten Page Builder immer auf dem aktuellen Stand gehalten werden um mögliche Sicherheitsrisiken zu minimieren. Die Kosten für eine jährliche Nutzung betragen je nach Builder zwischen 40,00 und 100,00$.

Keine Programmierkenntnisse notwendig

Allein die Erzeugung von Reihen und Spalten, die sich responsiv verhalten, stellt unerfahrene Nutzer vor Probleme. Fortgeschrittene HTML und CSS Kenntnisse sind notwendig um z.B. das Grid-System von Bootstrap für WordPress nutzen zu können. Mit einem Page Builder müssen einfach nur die Reihen (rows) und Spalten (columns) mit wenigen Klicks eingefügt werden und man hat sein mobil-taugliches Layout fertig. Ähnlich verhält es sich, wenn man Animationen zu den Elementen einer Seite hinzufügen möchte. Anstatt sich mit CSS und Javascript auseinandersetzen zu müssen, ermöglichen die meisten Page Builder Animationen per Knopfdruck: Das Hineinfliegen eines Buttons oder die weiche Einblendung eines Bereichs wird so zum Kinderspiel.

Zeitersparnis / Effizienz

visual-composer-templates
Abbildung 3: Seiten Templates

Ein großer Vorteil von Page Buildern ist die Zeitersparnis beim Erstellen einer Seite. Die meisten Builder beinhalten verschiedene Seiten-Vorlagen (Templates), die genutzt werden können um ein Basis Layout mit einem Klick zu erstellen. Der grundsätzliche Aufbau einer Landingpage ist mit einem Klick vollzogen und es müssen nur noch Texte und Bilder ausgetauscht werden. Die Zeitersparnis hängt dabei von der Komplexität der zu erstellenden Seite ab. Je komplexer die Seite, desto größer ist in der Regel die Zeitersparnis mit einem Page Builder.

 

Welche Nachteile bringen Page-Builder mit sich?

Page Builder bringen jedoch nicht nur Vorteile mit sich. Es gibt eine Reihe von Nachteilen, die vor einem möglichen Einsatz bedacht werden sollten:

Abhängigkeit

Wie bereits erwähnt, erzeugen Page Builder im Hintergrund Shortcodes, die dann wiederum interpretiert werden um das gewünschte Design zu erhalten. Deaktiviert bzw. deinstalliert man den Page Builder, werden nur noch unleserliche Shortcodes mit einzelnen Text-Fragmenten dargestellt, weil diese nicht mehr länger korrekt interpretiert werden können. Man spricht hierbei vom Lock-In-Effekt.

Da es keinen einheitlichen Ansatz unter den Anbietern von Page Buildern gibt, ist die Portierung einer Unterseite zu einem anderen Page Builder nicht möglich. Bei manchen Page Buildern kann es sogar vorkommen, dass Inhalte bei Deaktivierung komplett verloren gehen. Ein Backup ist vor einer geplanten Änderung also absolute Pflicht.

Abbildung 4: Page Builder Layout
page-builder-kompatibilitaet
Abbildung 5: Gleiche Seite (Vgl. Abb. 4) mit deaktiviertem Page Builder

Kompatibilität

Je nachdem welche Plugins man bereits installiert hat, kann es zu Kompatibilitätsproblemen kommen. Konflikte zwischen dem Page Builder und anderen Plugins können dazu führen, dass eines oder beide Plugins nicht mehr ordnungsgemäß funktionieren. Es kann auch vorkommen, dass Konflikte erst nach einem Update des Plugins auftauchen. Um dieses Problem zu minimieren sollte man versuchen, möglichst wenige Plugins einzusetzen.

Tipp: Informiere dich vor dem Kauf eines Page Builders immer, ob dieser auch mit deinem Theme kompatibel ist.

Einschränkungen

Die meisten Page Builder sind auf die Erstellung von Seiten ausgelegt. Das bedeutet, dass Beiträge, Portfolio-Einträge oder ähnliches weiterhin über den Standard Editor erstellt werden müssen. Möchte man die Funktionalität auch bei Beiträgen nutzen, sollte man genau darauf achten, welche Seitentypen vom Page Builder unterstützt werden oder ob es ggf. Erweiterungen für den Builder gibt.

Performanz

Page Builder bieten dem Benutzer eine Vielzahl von neuen Elementen an: Slider, Testimonials und vieles mehr. Viele dieser Elemente verwenden Javascript damit sie funktionieren. Hinzu kommt die Tatsache, dass sämtliche Skripte und Dateien bei jedem Seitenaufruf komplett geladen werden – auch dann, wenn die Skripte für eine entsprechende Seite nicht notwendig sind. Im Allgemeinen bedeutet dies für die Webseite:

  • Mehr Requests (Javascript / CSS Dateien)
  • Mehr Quellcode

Die Folge ist eine erhöhte Ladezeit, was zu Unzufriedenheit beim Benutzer führen kann.

Sicherheitsrisiken

Jedes WordPress Plugin sollte immer auf dem aktuellen Stand gehalten werden um mögliche Sicherheitsrisiken auf ein Minimum zu reduzieren. Viele WordPress-Themes liefern bereits einen Page Builder mit (z.B. WPBakery Page Builder). Der Builder ist meist sogar eine Voraussetzung für die Nutzung des Themes. Hier tritt nun folgendes Problem auf: Da man nur die Lizenz an dem Theme erwirbt, nicht aber an dem mitgelieferten Plugin, ist ein manuelles Updaten nicht möglich. Falls eine Sicherheitslücke erkannt wurde, muss man solange warten bis das Theme geupdatet wird (und damit dann auch der Page Builder).

Ein solch konkreter Fall wurde z.B. im Oktober 2015 publik. Der WP Bakery Page Builder (damals noch Visual Composer) war für mehrere Cross Site Scripting (XSS) Attacken anfällig. Alle Anwender, die den Page Builder über das Theme nutzten, mussten nun zuerst auf ein Update des Themes warten um die Sicherheitslücken zu schließen.

 

Vier Page Builder in der Einzelbetrachtung

Nachdem wir einen Blick auf die Vorteile und Nachteile geworfen haben, wollen wir uns im Folgenden vier konkrete Beispiele von Page Buildern anschauen.

1. Elementor – Kostenloser Page Builder

Einer der beliebtesten Page-Builder für WordPress ist Elementor. Obwohl Elementor erst seit 2016 auf dem Markt ist, gehört er zu den meistgenutzten Page-Buildern überhaupt. Ein Hauptgrund für die Beliebtheit liegt darin, dass er in der Basisversion kostenlos ist. Mit vielen verschiedenen Website-Elementen (Text, Bild. Posts-Slider, Countdown, Portfolio, etc.), einem benutzerfreundlichen Interface und vielen verschiedenen Styling-Optionen ist Elementor ein guter Einstieg für jeden, der nach einem kostenlosen Page-Builder sucht. Neben der kostenlosen Basisversion wird noch eine PRO Version angeboten. Diese Version verfügt über mehr Elemente und zusätzliche vorgefertigte Templates als die Basisversion, kostet jedoch für eine Seite einmalig 49,00$.

2. Beaver Builder – Umfangreiche Template Sammlung

Auch Beaver Builder punktet mit einer simplen Handhabung und vielen interessanten Features. Der Page Builder erlaubt sowohl ein Live-Editieren der Website in einem WYSIWYG Editor, als auch das Editieren im Backend in einem erweiterten Editor. Beaver Builder enthält zudem eine große Auswahl an vorgefertigten Layout-Templates, welche die Erstellung von unterschiedlichen Seiten in wenigen Minuten ermöglicht. Das Plugin kann in der Standard für 99,00$ erworben werden. Die zusätzlichen Versionen „Pro“ und „Agency“ erweitern den Umfang um Multisite-Support und White Labeling.

3. WPBakery Page Builder (Visual Composer)


Der WPBakery Page Builder (vorher WPBakery Visual Composer) ist einer der beliebtesten Page Builder auf dem Envato Marketplace ist der Pagebuilder von WPBakery. Neben einer Vielzahl von Elementen (Vgl. Abbildung 2) bietet er genau wie der Beaver Builder sowohl einen Frontend- als auch Backend-Editor an. Der Builder zeichnet sich vor allem durch seine gute Kompatibilität gegenüber anderen Plugins aus. Der Page Builder von WPBakery wird in vielen Themes direkt mitgeliefert, kann aber auch zu einen Preis von 46,00$ einzeln erworben werden.

4. Gutenberg – der neue WordPress Editor ab V5.0


Mit der neuen WordPress Version 5.0, welche für Ende 2018 angekündigt ist, soll ein neuer Editor den bisherigen TinyMCE Editor (Vgl. Abbildung 1) ablösen. Der neue Editor hört auf den Namen Gutenberg. Der Name lässt schon vermuten, dass es sich hierbei um eine kleine Revolution handelt. Genau wie damals die Druckerpresse von Johannes Gutenberg den modernen Buchdruck revolutioniert hat, soll der Gutenberg Editor die Art und Weise wie man in WordPress Seiten erstellt revolutionieren.

Der Gutenberg Editor grenzt sich dabei stark von seinem Vorgänger, dem TinyMCE Editor ab, denn Gutenberg ist ein waschechter Page Builder!

Anders als die meisten anderen Vertreter von Page Buildern, arbeitet Gutenberg jedoch nicht mit Shortcodes sondern mit Blöcken. Für jedes Element (z.B. Überschrift, Bild, Zitat, Tabelle, etc.) wird ein spezifischer Block zur Verfügung gestellt. Die Blöcke können einfach per Drag & Drop in Ihrer Position geändert werden. Jeder Block verfügt zudem über ein eigenes Kontextmenü, anhand die Eigenschaften der Elemente eingestellt werden können.

gutenberg-editor
Abbildung 6: Gutenberg Editor

 

Wer bereits jetzt einen Blick auf den zukünftigen Editor werfen möchte, kann ihn sich auf der offiziellen WordPress Gutenberg Webseite herunterladen.

 

Fazit: Wann ist der Einsatz eines Page-Builders sinnvoll?

Page Builder bieten unerfahrenen Benutzern die Möglichkeit auch ohne technisches Know How komplexe WordPress Seiten zu erstellen. Startseiten oder Landingpages können in einem ansprechenden Design mit wenig Zeiteinsatz umgesetzt werden.

Die Frage, ob der Einsatz eines Page Builders sinnvoll ist, kann jedoch nicht uneingeschränkt mit „Ja“ beantwortet werden. Man muss sich im Klaren darüber sein, dass man sich in eine große Abhängigkeit begibt: Seiten, die mit einem Page Builder erstellt wurden erfordern den dauerhaften Einsatz des Plugins. Eine Änderung des Themes kann im schlimmsten Fall die komplette Neuerstellung der Seiten bedeuten. Zudem haben die Builder einen nicht unerheblichen Einfluss auf die Performanz der Webseite.

 

Erfahrene Benutzer, die mit HTML, CSS, JS und PHP vertraut sind, sollten nach wie vor auf den Standard Editor zurückgreifen und komplexe Strukturen über neu angelegte Template Dateien mit Custom Fields lösen.

Wo die Entwicklung von Page Buildern in Zukunft hingeht ist derzeit noch offen. Der Gutenberg Editor, der ab WordPress Version 5.0 veröffentlicht werden soll, könnte das Ende der klassischen Page Builder einläuten. Die Entwickler des Tailor Page Builders haben bereits den Support für ihr Plugin eingestellt. Andere Anbieter wie Elementor oder WPBakery Page Builder arbeiten bereits an der Kompatibilität zu Gutenberg.

WordPress scheint jedoch verstanden zu haben, dass der alte TinyMCE Editor den Anforderungen der Benutzer nicht mehr länger genügt. Ob der Gutenberg Editor diese Probleme lösen kann oder ob man auch weiterhin auf klassische Page Builder setzen muss um komplexe Layouts zu erstellen, wird die Zukunft zeigen.

Das WordPress Page-Builder ABC
5 (100%) 4 votes