Ein Layout-Builder oder Pagebuilder ist ein WordPress-Plugin oder -Tool, mit dem Seiten per Drag-and-drop visuell gestaltet werden, ohne HTML oder CSS zu schreiben.
Was bedeutet das?
Pagebuilder sind Erweiterungen (Plugins) für WordPress, die das klassische Texteditor-Konzept durch eine visuelle Bearbeitungsoberfläche ersetzen. Statt HTML-Code zu schreiben, ziehen Sie vorgefertigte Elemente wie Überschriften, Bilder, Spalten, Buttons oder Formularfelder per Maus an die gewünschte Stelle. Viele Pagebuilder zeigen das Ergebnis direkt in der Vorschau (Frontend-Editing), sodass der Unterschied zwischen Bearbeitungsmodus und fertiger Seite minimal ist.
Die bekanntesten Pagebuilder für WordPress sind Elementor, Divi, WPBakery (früher Visual Composer) und Beaver Builder. Jeder hat eigene Stärken. Elementor ist besonders weit verbreitet und bietet mit seiner kostenlosen Version bereits viele Funktionen. Divi ist stark auf kreative Gestaltung ausgerichtet und gehört zu einem Theme-Bundle. WPBakery ist in vielen Premium-Themes vorinstalliert und benutzt Shortcodes als Speicherformat.
Neben Plugin-basierten Pagebuildern hat WordPress seit Version 5.0 den Gutenberg-Editor als Teil des Kerns. Gutenberg arbeitet mit Blöcken, die ähnlich wie Pagebuilder-Elemente auf der Seite platziert werden. Es ist weniger mächtig als spezialisierte Pagebuilder, reicht aber für viele Anwendungsfälle aus und hat den Vorteil, keine zusätzlichen Abhängigkeiten zu erzeugen.
Beispiel aus der Praxis
Sie möchten eine neue Dienstleistungsseite für Ihr Unternehmen anlegen. Mit Elementor erstellen Sie eine dreispaltige Sektion mit Icon-Boxen für Ihre drei Kernleistungen, darunter einen vollbreiten Hintergrundbereich mit Kundenstimmen und ganz unten ein Kontaktformular. All das gelingt ohne eine einzige Zeile Code durch einfaches Ziehen von Widgets in das Layout. Wenn Sie sechs Monate später den Text anpassen wollen, öffnen Sie die Seite im Pagebuilder und schreiben direkt in der Vorschau. Änderungen sind in Minuten erledigt.
Der Nachteil zeigt sich bei einem Wechsel des Themes oder Pagebuilders: Die Seiteninhalte, die im Shortcode- oder Block-Format gespeichert sind, sind dann nicht mehr nutzbar. Das Divi-Shortcode-Format ist zum Beispiel nur mit aktiviertem Divi lesbar. Ohne das Plugin erscheint der rohe Shortcode-Text im Frontend.
Häufiger Fehler
Viele Pagebuilder laden umfangreiche CSS- und JavaScript-Dateien auf jeder Seite, auch wenn dort nur ein Bruchteil der Funktionen genutzt wird. Das verlangsamt die Ladezeit messbar. Prüfen Sie nach der Gestaltung Ihrer Seiten die Ladegeschwindigkeit mit einem Performance-Test-Tool. Wenn der Pagebuilder unkomprimiert mehrere hundert Kilobyte CSS lädt, schalten Sie in den Plugin-Einstellungen die Assets ein, die Sie tatsächlich nutzen, oder aktivieren Sie die Option „Asset Optimization“ beziehungsweise „Critical CSS“, die viele Pagebuilder mittlerweile anbieten. Ein sauber eingestellter Pagebuilder muss die Ladezeit nicht belasten.