Die besten WordPress Page Builder in 2020

WordPress ist einer der beliebtesten und größten CMS auf dem Markt. Durch die einfache Bedienbarkeit und Benutzerfreundlichkeit lassen sich schnell die Grundlagen lernen, um die erste eigene Seite live zu schalten.

Allerdings kommt man mit dem Standard-Editor schnell an Grenzen, was die Anpassungsoptionen der Seiten angeht.

An dieser Stelle setzen die Page Builder an. Mit einem visuellen front-end Editor, basierend auf einer Art Baukastensystem, das dir die volle Kontrolle über das Design auf Seiten und Beiträgen gibt.

Die visuelle Grundstruktur deiner Website setzt sich aus Theme und Page Builder zusammen.

Finde im Anschluss heraus, was das beste Theme für WordPress ist!

Inhalt

• Was sind WordPress Page Builder
• Worauf du bei der Wahl des richtigen Page Builder achten solltest
  
  • Ein kompatibles und leichtes Theme
  • Abhängigkeit
  • Geschwindigkeit
  • Responsiveness
• Die Besten WordPress Page Builder für deine Website
  
  • Elementor
  • Beaver Builder
  • Gutenberg
• Welcher Page Builder ist nun der Richtige?

Was sind WordPress Page Builder

Die meisten Page Builder kommen als Plugin und ersetzen entweder den Standard WordPress Editor, oder erweitern diesen in seinem Funktionsumfang. Meist ruft man mit einem Klick im Editor die Benutzeroberfläche des Page Builders auf, wo du deine Seite dann direkt per live-Ansicht (WYSIWYG – what you see is what you get) bearbeiten kannst.

Wo das Gestalten von Seiten und Beiträgen im alten WordPress Editor ohne fortgeschrittenes coding-Wissen quasi unmöglich war, kann nun jeder seine Seiten und Beiträge individuell gestalten.

Die Grundlegenden Bausteine aller Page Builder sind:

• Sections (Abschnitte): Reihen oder Zeilen, die untereinander stehen.
• Columns (Spalten): In jede Zeile können eine oder mehrere Spalten eingefügt werden.
• Widgets (Elemente): Vorgefertigte und anpassbare Elemente, die nach belieben in Spalten eingefügt werden können.

Diese Hierarchie gilt für alle Page Builder, auch wenn die einzelnen Komponenten manchmal anders genannt werden. Das beschleunigt den Prozess, Websites oder Landing Pages zu erstellen ungemein. Erfahrene Entwickler können sich so eine Menge Zeit sparen und Anfänger müssen sich nicht auf teure Entwickler verlassen.

Worauf du bei der Wahl des richtigen Page Builder achten solltest

Inzwischen gibt es eine Menge Page Builder auf dem Markt und ich kann dir jetzt schon sagen, dass viele davon keine gute Wahl sind. Du wirst viele Beiträge Online finden, die aus SEO Gründen oder mit Affiliate-Links viele davon miteinander vergleichen und alle möglichen Empfehlungen ausprechen, um alles abgedeckt zu haben.

Viele Page Builder behaupten, dass du Seiten „in Minuten“ erstellen kannst. Da du aber höchstwahrscheinlich trotzdem mehr Zeit in der Benutzeroberfläche verbringen wirst, solltest du dir gut überlegen, welche die beste Option für dich ist.

Also – wenn WordPress Page Builder Neuland für dich sind, solltest du folgende Dinge beachten, bevor du das erstbeste Plugin auf deiner Website aktivierst und drauf los legst.

Ein kompatibles und leichtes Theme

Das Theme bildet das Grundgerüst deiner WordPress Website. Heutzutage werden vermehrt “leichte” WordPress Themes angeboten, die mit ihrer schlanken Codebasis einen optimalen Ausgangspunkt für die Verwendung von Page Buildern bieten.

Beispiele hierfür sind Astra, OceanWP oder GeneratePress. Diese bilden einen flexiblen Rahmen und sind die perfekte Kombination mit dem richtigen Page Builder. Wir nutzen auf dieser und vielen Kundenseiten Astra.

Den Gegensatz dazu bilden die Multifunktions-Themes, die oft mit Theme-eigenen Page Buildern kommen. Diese Themes versuchen alles aus einer Hand zu bieten und sind überladen mit Funktionen, die du meist gar nicht brauchst.

Viele der wichtigen Funktionen dieser Themes, wie zum Beispiel das Erstellen von Header oder Footer kann inzwischen auch von Page Buildern wie Elementor übernommen werden.

Abhängigkeit

Ein weiterer Nachteil von Page Buildern ist der sogenannte Lock-In-Effekt. Dieser wird dir erst bewusst, wenn du dich von deinem Builder wieder abwenden möchtest.

Jeder Page Builder kommt – wie jedes Plugin – mit Scripts und Style-Dateien. Zwar musst du selbst keinen Code schreiben, der existiert im Hintergrund natürlich trotzdem. Viele – vor allem die in Theme enthaltenen oder älteren Page Builder – nutzen sogenannte Shortcodes um Inhalte anzuzeigen.

So hinterlässt der sehr verbreitete WP Bakery Page Builder oder auch der Fusion Builder von Avada ein Chaos an kryptischen Shortcodes. Ohne das entsprechende Page Builder Plugin, kann WordPress nichts mit diesen Shortcodes anfangen. Auch ein anderer Page Builder kann diese Shortcodes nicht wieder in Inhalte umwandeln, du bist also an den entsprechenden Builder und/oder Theme gebunden. Page Builder sind unabhängig voneinander, es gibt keinen allgemeinen Standard. Das macht einen Wechsel, ohne alle mit Mühe erstellten Inhalte zu verlieren, unmöglich.

Such dir also einen Page Builder aus, der regelmäßige Updates erhält und alle Möglichkeiten und Funktionen bietet, die du auf lange Sicht benötigst, denn nachträglich wechseln ist sehr aufwändig und schwierig!

Geschwindigkeit

In der Vergangenheit war einer der größten Kritikpunkte an Page Buildern deren schlechte Performance in Sachen Geschwindigkeit. Zugegen, viele Page Builder haben dieses Problem auch heute noch. Da Ladezeiten, vor allem auf mobilen Geräten, immer wichtiger werden, scheiden hier für mich viele der Plugins aus.

Dieses Bild ist von der Website eines Kunden – sie nutzen schon länger den WP Bakery Page Builder. Trotz einiger Performance Optimierungen hat diese eine Wertung von 20 auf mobilen Geräten und 61 auf Desktop – weit weg von optimal. Mit den gleichen Maßnahmen auf unserer Website erzielen wir eine Wertung von 90 und 100.

Nicht jeder Page Builder macht deine Seite automatisch langsamer. Die Auswirkungen auf Ladezeiten hängen viel mehr damit zusammen, wie der Page Builder hinter der drag & drop Fassade funktioniert. Auch hier geht es um Shortcodes.

WordPress selbst unterstützt den Gebrauch von einigen Shortcodes, eine entsprechende Liste findest du hier. Shortcodes sind generell ziemlich nützlich, da sich komplexe Inhalte einfach aufrufen und darstellen lassen.

Allerdings fügst du mit Shortcodes eine extra „Ebene“ an Code ein. Somit muss jedes mal erst der Shortcode und dann der tatsächliche Code, der hinter dem Shortcode steht, gelesen werden. Code hinter Code also. In geringen Maßen ist das kein Problem, da spielt sich die zusätzliche Ladezeit im Bereich von Millisekunden ab.

Nutzt du einen Page Builder der ausschließlich auf Shortcodes basiert, kann sich das jedoch schnell auf negativ auf Ladezeiten auswirken und somit wertvolle Rankings und Geld kosten.

Zudem ist die Versuchung durch die fast unendlichen Möglichkeiten die zur Verfügung gestellt werden groß, mehr Elemente und styling-Optionen zu nutzen als nötig. Auch verwenden viele der vorgefertigten Elemente wie Testimonials, Slider, Gallerien etc. Javascript damit sie funktionieren.

Hier kannst du deine Website sehr leicht völlig überladen, heißt: Mehr Requests nach Javascript und CSS-Dateien, was eine erhöhte Ladezeit zur Folge hat. Denn je mehr Elemente eine Seite enthählt, desto mehr Code muss beim Aufrufen der Seite geladen werden.

Wenn du Probleme mit der Geschwindigkeit deiner WordPress Website hast oder mehr zum Thema erfahren willst, kannst du hier lesen wie man WordPress schneller macht.

Responsiveness

Weltweit findet über 50% des Verkehrs im Internet über mobile Geräte statt. Dementsprechend wichtig ist es, dass deine Seite auch für diese richtig angezeigt wird. Dies ist mittlerweile einer der wichtigen Google Ranking Faktoren. Dafür müssen sich die Inhalte deiner Website dynamisch an die Größe des Bildschirms anpassen.

Stell also sicher, dass der Page Builder deiner Wahl über Optionen zum Anzeigen deiner Seiten in einer mobilen Vorschau verfügt.

Die Besten WordPress Page Builder für deine Website

Elementor

Elementor ist ein drag & drop front-end Editor, der sich seit seiner Erscheinung 2016 mit inzwischen über 3 Millionen Installationen großer Beliebtheit erfreut. Elementor ist bekannt für seine Leistung in Sachen Geschwindigkeit, intuitive Bedienung und riesige Auswahl an Designmöglichkeiten.

Elemente werden einfach aus der Sidebar am linken Bildschirmrand auf die Seite gezogen und können dort weiter angepasst werden.

Die kostenlose Version des Plugins bietet einen einfachen, aber trotzdem sehr starken und vor allem schnellen Page Builder. Mit enthalten sind ca. 30 Elemente (Widgets) und rund 100 gratis Vorlagen, die nach belieben bearbeitet werden können. Da Elementor ein open-source Projekt ist, existieren viele Erweiterungen in Form von Plugins, die die bereits vorhandenen Funktionalitäten noch weiter vergrößern.

Die Pro Version startet ab $49 und gibt dir die Kontrolle über deine gesamte Website, inklusive Kopfzeile (Header) und Fußzeile (Footer) .

• Theme builder zum erstellen von Header, Footer und mehr
• Pop-up builder
• Formulare mit Marketing Integrationen
• Integration für Woocommerce
• Dynamische Inhalte und custom fields

Komplett auf ein Theme verzichten kann Elementor dennoch nicht, kann aber mit fast jedem kombiniert werden. Elementor selbst hat eine Liste mit empfohlenen Themes, ich empfehle dir Themes mit einer schlanken Codebasis wie Astra, OceanWP oder GeneratePress. Achja, Elementor nutzt übrigens (für einen Page Builder) sauberen Code, ohne Shortcodes.

Was spricht für den Elementor Page Builder

• solide, leistungsstarke Gratisversion
• kostenlose Vorlagen, die nach belieben bearbeitet werden können
• große Auswahl an Elementen mit endlosen Designmöglichkeiten
• erstellen von Templates für Header, Footer, Pop-ups, Archives – quasi das gesamte Theme (Pro)
• kann mit CSS Klassen und IDs noch weiter angepasst werden

Beaver Builder

Beaver Builder ist ein weiterer drag & drop Page Builder der live im front-end bedient wird. Die sehr intuitive Benutzeroberfläche und starke Leistung hat auch dieses Tool sehr populär gemacht. Deine Änderungen kannst du alle direkt sehen, indem du Elemente von der rechten Sidebar auf deine Seite ziehst. Jedes Element kann anschließend weiter bearbeitet und angepasst werden.

Auch hier sind viele Elemente (Widgets) enthalten, die alle weiter angepasst werden können. Mit dabei sind zum Beispiel Kontaktformulare, Buttons, Karusells, Videos und viele weitere. Das ganze funktioniert auch in Kombination mit WooCommerce.

Beaver Builder kommt mit einer Gratisversion, diese enthält allerdings nur 6 Module und man trifft sehr schnell auf Grenzen, da doch sehr essentielle Module fehlen. Obwohl es kostenlose Erweiterungen gibt, ist die Gratisversion meiner Meinung nach nicht Konkurrenzfähig. Dafür kann das Plugin mit einer Willkommens-tour für Neulinge punkten, die dir Schritt für Schritt alle Optionen erklärt und dich mit dem Plugin vertraut macht – zum Testen vor dem Kauf also nicht schlecht.

Die Pro Version ist ab $99 erhältlich und du erhältst zusätzlich das Beaver Builder Theme, welches den Customizer nutzt, um dir volle Kontrolle über jeden Aspekt deiner Seite zu geben. Trotzdem kannst du auch dieses Plugin mit fast jedem Theme kombinieren.

Vorgefertigte Templates sind auch hier wieder mit dabei und können nach Belieben angepasst und erweitert werden. Dazu gehören Designs für alle möglichen Seiten sowie Landing Pages. Shortcodes nutzt Beaver Builder keine.

Gutenberg

Was ist eigentlich mit Gutenberg?

Im Dezember 2018 erschien mit WordPress 5.0 der neue WordPress Block Editor, auch bekannt als Gutenberg. Dieser nutzt sogenannte “blocks”, die den sections der Page Builder sehr ähnlich sind und den Nutzern mehr Kontrolle über ihre Seiten und Beiträge geben soll.

Ist Gutenberg also auch ein Page Builder bzw. übernimmt er jetzt deren Rolle?

Nein, nicht wirklich – zumindest NOCH nicht.

Obwohl – mit entsprechenden CSS Kenntnissen, kannst du auch jetzt schon sehr viel mit Gutenberg bewerkstelligen. Die Gutenberg Blocks hinterlassen sauberen HTML und CSS – keine Shortcodes. Was Performance und Integration in WordPress angeht auf jeden Fall zu empfehlen!

Ohne diese Kenntnisse kannst du die „wirklichen“ Page Builder im Moment nur sehr schwer durch den Gutenberg Editor ersetzen, wenn du weiterhin die volle Design-Kontrolle über deine Seiten und Beiträge willst.

Der Gutenberg Editor ist noch relativ am Anfang seiner Entwicklung und kann mit den vielen Optionen der Page Builder momentan nicht mithalten. Dennoch kann man in den kommenden Phasen erkennen, in welche Richtung das Ganze in Zukunft geht.

Welcher Page Builder ist nun der Richtige?

Am Ende ist die Suche nach dem besten Page Builder für deine Website eine feine Balance zwischen Performance und Anpassungsoptionen. Du wirst sehr viele unterschiedliche Meinungen finden, wenn du nach WordPress Page Buildern bei Google suchst.

Generell gibt es sehr viele Builder und Themes, die auf Anfänger abzielen, viele davon kann ich dir allerdings nicht empfehlen – denk dran, der nachträgliche Wechsel ist schwer!

Wenn du nach dem besten kostenlosen WordPress Page Builder suchst, ist Elementor nur schwer zu schlagen. Von den hier vorgestellten Plugins, hat Elementor definitiv die Nase vorn in Funktionalität, Features, Performance und Designvorlagen.

Vor allem im Vergleich der kostenlosen Versionen ist Elementor dem sehr ähnlichen Beaver Builder voraus. Wenn du keine Zeit zum experimentieren hast und dir das Geld für die Pro Versionen sparen willst, ist Elementor mit der ein oder anderen gratis Erweiterung definitiv die beste Option.

Falls du noch offene Fragen zu WordPress Page Buildern hast, schreib uns einfach einen Kommentar, wir helfen dir gern weiter!

Dein Interesse wurde geweckt? Gerne kannst uns unverbindlich kontaktieren und wir besprechen deine WordPress Webseite und welcher Page Builder genutzt werden sollte.