Page Builder für WordPress

Du möchtest deinen WordPress Seiten schnell und einfach ein schickes Design verpassen? Dann könnte ein Page Builder genau das Richtige für dich sein. Damit kannst du ganz ohne Code-Kenntnisse per Drag & Drop individuelle Layouts erstellen. Die bekanntesten Page Builder stelle ich dir hier kurz vor.

Was ist ein Page Builder?

Ein Page Builder ist ein Plugin, mit dem du deine WordPress Seiten und Beiträge in einem erweiterten Funktionsumfang bearbeiten kannst. Du nutzt dann nicht mehr den normalen WordPress-Editor, sondern den Page Builder.

Bei den meisten Page-Builder kannst du Seiten per Drag & Drop bearbeiten und siehst das Ergebnis in einer Live-Ansicht.
Dabei wird zunächst eine Zeile angelegt, die wiederum in Spalten unterteilt wird. Hier kannst du dann die einzelnen Elemente wie z.B. Textblöcke, Bilder oder Buttons einfügen. Und jedes Element kannst du dann noch individuell gestalten.

Brauche ich dann noch ein Theme?

Ein Theme benötigst du natürlich trotzdem noch als Basis. Hier kannst du z.B. ein WordPress Standard-Theme nehmen oder auch Themes, die besonders gut mit PageBuildern zusammenarbeiten. Ich selbst nutze OceanWP, ein schlankes Theme, das extra Widgets für Elementor anbietet. Auch Astra ist ein Leichtgewicht und ist sehr gut mit Elementor und Beaver kombinierbar.

Und was ist denn mit dem Gutenberg Editor?

Der Gutenberg Editor geht schon etwas in die Richtung eines Page-Builders. Allerdings bietet er im direkten Vergleich nur sehr wenige Möglichkeiten. Vielleicht werden die Funktionen in Zukunft ja noch erweitert. Aber bis dahin ist Gutenberg definitiv kein Ersatz für einen PageBuilder.

Welche Arten von Builder gibt es?

In der Regel sind Page-Builder Stand-Alone-Plugins. D.h. du kannst sie mit fast jedem WordPress-Theme nutzen.
Daneben gibt es noch Page-Builder, die nur mit einem bestimmten Theme funktionieren und auch nicht als einzelnes Plugin erhältlich sind. Das ist bei einigen bekannten Themes wie Enfold oder Avada der Fall.

Vorteile:

  • Einfache Bedienung
    Besonders für WordPress-Einsteiger oder -Umsteiger ist es oft schwierig, eine Seite ansprechend zu gestalten. Auch wenn es durch Gutenberg ein wenig besser geworden ist. Mit einem Page Builder ist das Erstellen und Anpassen von Seiten sehr einfach und intuitiv in der Handhabung.
  • Schnelligkeit
    Für mich ist der größte Vorteil die Zeitersparnis. Wenn ich mit Elementor eine neue Seite erstelle oder Kleinigkeiten anpasse, geht das sehr viel schneller als wenn ich den Code erst noch anpassen muss.
  • Weniger Plugins
    Vor allem die kostenpflichtigen Builder bieten sehr viele Features, die sonst über extra Plugins nachgerüstet werden. Wie z.B. Slider, Portfolio, Testimonials, Coming-Soon, usw.
    Je nachdem welchen Builder du nutzt, kannst du dann auf einige Plugins verzichten.
  • Templates
    Die meisten PageBuilder-Plugins liefern schon fertige Templates mit. Diese kannst du dann als Grundlage für dein Seiten-Design nutzen. Und was ich sehr nützlich finde: auch deine eigenen Designs oder individuellen Elemente kannst du als Template abspeichern. Über eine Vorlagen-Bibliothek kannst du die Bausteine immer wieder nutzen. Oder exportieren und auf anderen Webseiten verwenden.
  • Kein Coden erforderlich
    Auch wer keine CSS- oder HTML-Kenntnisse hat, kann mit einem PageBuilder gut klarkommen. Zum Schnelleinstieg kannst du vorgefertigte Layouts importieren und mit wenigen Klicks an deine Wünsche anpassen. Sogar die Darstellung für Handy und Tablet kannst du gezielt anpassen.
  • Spaß-Faktor
    Mit der neuen Builder-Generation macht es einfach Spaß zu arbeiten! Denn deine Vorstellung kannst du schnell und einfach umsetzen. Und das Ergebnis siehst du gleich in der Live-Vorschau.

Nachteile

  • Lock-In Effekt
    Ein großer Nachteil einiger Page Builder ist der sogenannte Lock-In Effekt. Was das ist, siehst du, wenn du das Plugin deaktivierst. Logischerweise ist das Design dann weg. Aber leider sind die vom Plugin angelegten Shortcodes noch da. Diese musst du dann manuell bereinigen.
    Das Problem tritt bei den meisten Page Buildern auf, außer bei Beaver und Elementor.
    Hier ein Beispiel einer Seite, die mit dem Divi Builder erstellt wurde:
page builder lock in effekt
Lock-In Effekt: So sieht die Seite aus, wenn der Divi Builder deaktiviert wird.
  • Page Speed
    Ein weiterer genereller Kritikpunt ist die Ladezeit. Wie jedes WordPress Plugin bringt auch ein Page Builder eine ganze Reihe von Skript- und Style-Dateien mit. Das alles wirkt sich dann natürlich auf die Geschwindigkeit der Seite aus.
    Genau aus diesem Grund wollte ich selbst lange keinen Page-Buildern nutzen. Aber hier hat sich in den letzten Jahren wirklich sehr viel getan. Obwohl ich Elementor nutze, liegt meine Ladezeit unter 500ms. Damit kann ich sehr gut leben!

  • ladezeit mit page-builder
    Für meine eigene Seite nutze ich Elementor und habe dabei sehr gute Ladezeiten.

    WordPress Page Builder kurz vorgestellt

    Da es mittlerweile sehr viele Builder-Plugins gibt, stelle ich dir hier nur die bekanntesten vor. Mit allen 5 habe ich in den letzten Jahren gearbeitet und dabei auch meinen Lieblings-Builder entdeckt.

    Elementor

    Elementor Page Builder

    Von allen Page-Buildern ist Elementor mein absoluter Favorit! Für meine eigene Webseite nutze ich das Plugin nun schon seit einigen Monaten zusammen mit OceanWP und bin wirklich glücklich damit. Allerdings nutze ich Elementor nur für Seiten. Für die Blog-Artikel verwende ich den normalen WordPress-Editor. Gutenberg allerdings noch nicht…

    Der Einstieg in Elementor ist auch für Anfänger gut machbar: Wenn Du die Seite mit dem Page Builder bearbeitest, siehst du rechts deine Seite in einer Live-Vorschau. Links daneben ist die Widget-Leiste, aus der du die Elemente per drag & drop in die Seite einfügst. Dabei kannst du jedes einzelne Element detailliert einstellen.

    Elementor Editor

    Schon in der kostenlosen Version bietet Elementor so ziemlich alles was man sich nur wünschen kann:

    • Drag & Drop
    • Live-Preview
    • Ca. 30 Elemente: Text, Code, Buttons, Counter, Slider, Video, Akkordeon, Sidebar,…
    • Vorlagen zum Importieren
    • Speichern von Seiten / Elementen in der Bibliothek
    • Hinterlässt beim Deaktivieren keine Shortcodes
    • Gutenberg-Integration
    • Schnell, da er nur dort geladen wird, wo er eingesetzt wird.
    • Viele Addons von Drittanbietern
    • Templates von Drittanbietern

    In der kostenpflichtigen Version von Elementor gibt es natürlich noch sehr viel mehr Features wie z.B.:

    • 300+ Pro Templates & Blocks
    • Lokale Fonts
    • Slides & Carousels
    • Eigenes CSS
    • Portfolio
    • Effekte wie z.B. animierte Headlines, Scroll-Effekte, Flip-Boxen
    • Popup-Builder
    • Sticky Elements
    • Theme-Builder
    • Header- und Footer-Designer
    • Custom Fields
    • Marketing-Integration

    Damit ist Elementor Pro ein wirklich mächtiges Tool, mit dem du sogar ein komplettes Theme designen kannst. Ganz ohne Coden.
    Die genauen Unterschiede zwischen kostenlosen und der Pro-Version findest du in dieser Gegenüberstellung.

    Nachteile: Die Oberfläche lädt gelegentlich nicht ganz so flott.

    Preis
    Bei Elementor gibt es 3 Preismodelle: $49,- für 1 Seite, $99,- für 3 Seiten und $199,- für unbegrenzte Seiten. Bei einer Verlängerung der Lizenz nach 1 Jahr erhältst du einen Nachlass von 25%.

    Beaver Builder

    Beaver Builder

    Beaver Builder habe ich auch für meine eigene Seite getestet und er hat bei mir einen sehr guten Eindruck hinterlassen. Letztlich hat mir Elementor aber dann doch mehr zugesagt. Das lag vielleicht auch daran, dass Beaver Lite so gut wie keine Features enthält.

    Du kannst mit der kostenlosen Variante also nur das Grundlayout festlegen und hast nur die Elemente Audio, HTML, Foto, Video, Text, Sidebar zur Verfügung. Und natürlich die WordPress-Widgets. Die weiteren Features und das Bedienkonzept kannst Du auch in einer Online-Demo testen.
    Ansonsten funktioniert Beaver nach dem gleichen Prinzip wie Elementor, ist dabei aber etwas stabiler und dezenter in der Aufmachung.

    beaver builder interface

    Die kostenpflichtige Version von Beaver Builder kann auf jeden Fall mit Elementor Pro mithalten und bietet alle nötigen Features:

    • Drag & Drop
    • Live-Preview
    • Ca. 30 Module: Video, Buttons, Counter, Slider, Video, Akkordeon, Sidebar,…
    • Über 50 Vorlagen
    • Speichern von Seiten / Elementen in der Bibliothek
    • Keine Shortcodes nach Deaktivierung
    • Schnell, auch im Backend
    • Addons von Drittanbietern
    • White Labeling
    • Developer Friendly
    • Template Override

    Im Prinzip ist der Funktionsumfang ähnlich wie bei Elementor. Allerdings gibt es 3 verschiedene Lizenzen, die sich nicht nur im Preis sondern auch im Funktionsumfang unterscheiden.

    Nachteile: Der Preis ist im Vergleich zu anderen Plugins recht hoch.

    Preis
    Auch Beaver Builder bietet 3 Preisvarianten und kann aber auf beliebig vielen Webseiten eingesetzt werden.
    Die Standardversion kostet $99,-. Mit der Pro-Lizenz für $199,- erhältst du noch die Features für MultiSite und das Beaver Theme. In der Agency Version für $399,- werden noch erweiterte MultiSite-Funktionen und White Labeling mitgeliefert.
    Wenn du deine Lizenz nach 1 Jahr verlängern möchtest, erhältst du einen Rabatt von 40%.

    SiteOrigin

    SiteOrigin

    Den PageBuilder von SiteOrigin gibt es schon seit sehr vielen Jahren und das sieht man ihm auch an. Das Design der Oberfläche ist nicht ganz so modern wie bei den beiden vorherigen Page-Buildern.
    Die Bedienung ist recht einfach und wenn man sich erst mal an das Handling gewöhnt hat, funktioniert er sehr gut. Auch bei den Speed-Tests schneidet SiteOrigin immer sehr gut ab.

    siteorigin oberfläche

    Mit SiteOrigin kannst du deine Seiten sowohl im Backend als auch im Front-End bearbeiten. Im Standard gibt es alle wichtigen Elemente und zahlreiche Erweiterungen. Auf jeden Fall solltest du das das SiteOrigin Widgets Bundle gleich mitinstallieren. Dadurch kannst du gleich zusätliche Features nutzen.

    SiteOrigin Widgets
    SiteOrigin Widgets
    • Live-Preview
    • Ca. 10 Widgets: Buttons, Image, Maps, Post Loop,…
    • Knapp 30 Vorlagen
    • Revisionen
    • sehr gute Speed-Werte
    • Addons von Drittanbietern
    • Kostenlos

    SiteOrigin bietet deutlich weniger Features als die meisten anderen PageBuilder. Dafür ist dieses Plugin auch wirklich kostenlos.

    Nachteile: Die Oberfläche ist nicht ganz so intuitiv und modern wie bei Elementor oder Beaver. Auch bleiben nach dem Deaktivieren einige Shortcodes übrig.

    Preis
    Kostenlos!

    Divi Builder

    Divi Builder

    Der Divi Builder kann nicht nur mit dem bekannten Divi Theme kombiniert werden, sondern auch mit jedem anderen Theme. Ich selbst habe ihn bisher fast nur mit Divi benutzt und finde die Bedienung recht einfach. Auch für WordPress-Einsteiger.

    Der Aufbau der PageBuilders ist gut strukturiert, so dass man sich schon nach kurzer Zeit zurecht findet.

    Divi Builder frontend
    Divi Builder: visueller Editor

    Die Oberfläche im Frontend ist für meinen Geschmack etwas aufdringlich und die Bedienung etwas hektisch. Daher nutze ich häufig nicht die Live-Vorschau, sondern die Drahtgitter-Vorschau. Wer auch diese Ansicht nicht mag, kann auch den Backend-Editor nutzen. Ob dir der Divi-Builder insgesamt zusagt, kannst du in einer Live-Demo testen.

    Divi Builder drahtgitter
    Ansicht im Drahtgitter-Modus

    Die Funktionen des Divi Builders sind sehr umfangreich und werden regelmäßig erweitert:

    • 46 Inhalts-Module: Slider, Buttons, Portfolio, Beiträge, Slider, Video,…..
    • Eigenes CSS für Module
    • Import von Templates
    • Speichern von Elementen in der Bibliothek
    • Revisionen
    • Ca. 150 Design-Vorlagen
    • A/B Tests
    • gute Speed-Werte

    Nachteile: Nach der Deaktivierung bleiben auch hier Shortcodes übrig. Zudem lädt die Oberfläche häufig langsam und die Skripte und Styles werden grundsätzlich auf allen Seiten geladen. Egal ob sie mit dem Divi-Builder erstellt wurden oder nicht.

    Preis
    Vom Divi Builder gibt es leider keine kostenlose Version. Der Preis ist mit $89 pro Jahr vergleichsweise recht hoch, aber dafür erhältst du auch Zugriff auf alle Themes und Plugins von Elegant Themes. Für Designer und Agenturen kann sich sogar eine Lifetime-Lizenz für $249 lohnen. Für mich hat sich diese schon nach kurzer Zeit bezahlt gemacht.

    WPBakery

    wpbakery

    Der Visual Composer bzw. WPBakery ist ein sehr verbreiteter Page Builder. Das liegt vor allem daran, dass er bei sehr vielen Envato Themes kostenlos mitgeliefert wird. 2017 wurde das Plugin in WPBakery umbenannt und der Visual Composer ist nun ein neues Builder-Plugin.
    Während WPBakery weiterhin mit vielen Themes ausgeliefert wird, ist der neue Visual Composer separat erhältlich. Diesen habe ich bisher noch nicht getestet. Von den Funktionen und der Bedienung her, ähnelt dieser Elementor und Beaver.

    Ähnlich wie beim SiteOrigin-Builder oder Divi kannst du bei WPBakery zwischen einer Backend- und Frontend-Bedienung wählen. Die Darstellung ist nicht mehr ganz so zeitgemäß, aber die Funktionen sind sehr vielfältig.

    • 50 Inhalts-Elemente: Slider, Buttons, Portfolio, Beiträge, Slider, Video,…..
    • Eigenes CSS
    • Grid-Builder
    • 100+ Vorlagen
    • Speichern von Presets und Templates
    • viele AddOns

    Nachteile: Für Anfänger ist die Bedienung nicht ganz so einfach. Auch hier hinterlässt das Plugin seine Shortcodes.

    Preis

    WPBakery ist mit einem Preis von $45,- der günstigste unter den kostenpflichtigen Page Buildern. Zudem fallen für Updates keine Kosten an, da es sich um eine Lifetime-Lizenz handelt.

    Fazit

    Für mich sind Elementor und Beaver Builder aktuell die Top-Favoriten. Beide bieten viele Features, sind sehr gut zu bedienen und hinterlassen sauberen Code. Da können die anderen Plugins nicht wirklich mithalten.

    Und welcher Page Builder ist der beste?
    Diese Frage kann ich leider pauschal nicht beantworten. Denn dabei kommt es immer darauf an, was du wie und zu welchem Preis umsetzen möchtest.

    Wenn du einen kostenlosen Page Builder suchst:

    Bei den kostenlosen Plugins empfehle ich auf jeden Fall Elementor. Das Plugin lässt sich sehr gut bedienen und die Ausstattung ist sehr umfangreich. Ich selbst nutze Elementor mit dem Theme OceanWP und dem kostenpflichtigen Core Bundle OceanWP. Dieses enthält spezielle Features, die auch Elementor erweitern. Ohne dieses AddOn hätte ich auch die Pro Version von Elementor gekauft.

    Wenn du das beste Preis-Leistungs-Verhältnis suchst:

    Auch hier empfehle ich Elementor, da er zum kleinen Preis die meisten Features bietet. Der direkte Konkurrent Beaver ist mit der vergleichbaren Ausstattung sehr viel teurer. Das lohnt sich vermutlich wirklich nur für Agenturen.

    Wenn du auch noch ein Premium Theme benötigst:

    Hier hat Elegant Themes mit Divi und dem Divi Builder sehr viel zu bieten.

    Wenn du lieber im Backend arbeitest:

    Nicht jeder mag die Arbeit im Frontend einer Seite. In diesem Fall würde ich zunächst SiteOrigin (kostenlos) testen. Wenn du dann noch weitere Features benötigst, solltest du dir Divi Builder oder WPBakery ansehen.

    Wie hat Dir dieser Beitrag gefallen? Gar nichtNa jaOKGutSehr gut
    (19 Stimmen, Ø: 4,63 von 5)
    Menü schließen