Die 10 besten WordPress Page Builder Plugins im Vergleich 2022

Veröffentlicht: 2016-09-25

Versuchen Sie, sich für den besten WordPress-Seitenersteller für Ihre Website zu entscheiden?

Ich habe 10 verschiedene WordPress - Seitenersteller ausprobiert , um Ihnen bei Ihrer Entscheidung zu helfen. Ja – ich habe jede einzelne davon verwendet – dies ist nicht nur eine Liste, die auf der Marketingkopie basiert .

Ich werde diese 10 WordPress-Seitenersteller objektiv in fünf Kategorien vergleichen:

  1. Benutzeroberfläche – wie funktioniert die Benutzeroberfläche und macht sie es einfach, schöne Seiten zu erstellen?
  2. Enthaltene Widgets/Vorlagen – welche Optionen haben Sie, um Ihre Seiten zu erstellen?
  3. Gestaltungsoptionen – wie können Sie die Elemente auf Ihrer Seite gestalten?
  4. Andere bemerkenswerte Funktionen – bietet der Seitenersteller bemerkenswerte einzigartige Funktionen?
  5. Lock-in – was passiert, wenn Sie das Plugin jemals deaktivieren möchten? Sie werden immer Ihr benutzerdefiniertes Design verlieren, aber einige Seitenersteller hinterlassen ansonsten sauberen Code, während andere dies nicht tun.

Für jede Kategorie gebe ich dem Seitenersteller eine Punktzahl von 5.

Am Ende stelle ich dann alles zusammen und empfehle den meiner Meinung nach besten WordPress-Seitenersteller.

Hier sind die 10 WordPress-Seitenersteller, die ich mir ansehen werde – Sie können klicken, um zu einem bestimmten Seitenersteller zu springen:

  • Elementor
  • Biber Baumeister
  • Divi-Builder
  • Gedeihen Sie Architekt
  • SiteOrigin Page Builder
  • WPBakery Page Builder
  • Themify-Builder
  • Brillant
  • Visueller Komponist
  • WP Page Builder

Oder Sie gehen direkt zur Vergleichstabelle.

1. Elementor

Elementor wurde ursprünglich im Jahr 2016 eingeführt und ist einer der jüngeren Seitenersteller auf dieser Liste. Aber obwohl es einen späten Start hatte, hat Elementor schnell über 3.000.000 aktive Installationen bei WordPress.org erreicht, was es zum beliebtesten Seitenersteller da draußen macht, zumindest nach WordPress.org-Zahlen.

Sein Anspruch auf Berühmtheit ist eine schnelle, störungsfreie visuelle Benutzeroberfläche, flexible Gestaltungsoptionen und leistungsstarke andere Funktionen wie die vollständige Themenerstellung.

Obwohl es nur ein Seiteneditor war, können Sie mit der Premium-Version Elementor Pro jetzt viel mehr als nur Seiten erstellen. Die beiden bemerkenswertesten Merkmale sind:

  • Theme Builder – Entwerfen Sie Ihr gesamtes Design mit derselben praktischen Elementor-Oberfläche. Dazu gehören Ihre Kopfzeile, Fußzeile, Archivseiten, einzelne Beitragsseiten, WooCommerce-Produkt-/Shopseiten, benutzerdefinierte Beitragstypvorlagen usw. Sie erhalten spezielle Widgets für allgemeine Elemente und können sogar dynamisch Inhalte aus benutzerdefinierten Feldern einfügen.
  • Popup Builder – Entwerfen Sie flexible Popups mit der vollständigen Elementor-Oberfläche. Sie können alle regulären Elementor-Widgets einbinden, mit denen Sie E-Mail-Opt-in-Popups, Kontaktformular-Popups, Anmelde-Popups und mehr erstellen können.

Diese beiden Ergänzungen helfen Elementor wirklich, sich von der Konkurrenz abzuheben. Obwohl die Erstellung von Themen zu einem beliebten Feature wird, ist der Popup-Builder immer noch ziemlich einzigartig.

Lesen Sie unseren Elementor Pro-Test.

Preis: Kostenlose Core-Version. Elementor Pro beginnt bei 49 US-Dollar für die Verwendung auf einer einzelnen Website.

Schnittstelle – 5/5

Die Benutzeroberfläche von Elementor ist in zwei Hauptteile unterteilt, mit einem dritten Bereich für einige kleinere Einstellungen:

Elementor-Schnittstelle
  • 1 – dies ist die Live-Vorschau Ihres Designs. Es sieht genauso aus, wie Ihre Besucher es sehen werden. Sie können Text auch direkt in diese Benutzeroberfläche eingeben sowie verschiedene Elemente ziehen und ablegen, um sie neu anzuordnen.
  • 2 – Dies zeigt eine Liste der Elemente, die Sie verwenden können. Du ziehst sie einfach rüber. Und wenn Sie ein einzelnes Element oder einen Abschnitt auswählen, können Sie es hier gestalten.
  • 3 – Diese helfen Ihnen beim Zugriff auf responsive Vorschauen, Rückgängigmachen/Wiederherstellen von Änderungen und anderen kleineren Funktionen.

Hier sehen Sie beispielsweise, wie Sie über ein Text-Widget ziehen und dann einfach auf der Seite tippen (Inline-Bearbeitung), um den Text zu ändern:

elementor Inline-Styling

Mit Elementor Pro können Sie dieselbe Benutzeroberfläche verwenden, um Ihr Design und Ihre Popups zu entwerfen. Sie erhalten auch spezielle Widgets/Funktionen, die Ihnen dabei helfen.

Enthaltene Widgets/Vorlagen – 5/5

In der kostenlosen Version enthält Elementor 28 kostenlose Widgets . Und Sie können auch alle wichtigen WordPress-Widgets verwenden. Die Pro-Version fügt weitere ~30 Widgets hinzu, sodass Sie insgesamt 58 Widgets in der Pro-Version haben:

Elementor-Widgets

Die kostenlose Version enthält außerdem ~40 kostenlose Vorlagen . Und die Pro-Version fügt Hunderte von zusätzlichen Vorlagen hinzu.

Vorlagen gibt es in zwei Formaten:

  • Seiten – ganzseitige Designs, die Sie nur noch bearbeiten müssen.
  • Blöcke – einzelne Abschnitte, die Sie wie Lego zusammensetzen können.

Sie können auch Ihre eigenen Designs als Vorlagen speichern, um sie später wiederzuverwenden.

Styling-Optionen – 5/5

Wenn Sie auf einen Abschnitt, eine Spalte oder ein Widget klicken, bietet Elementor drei Styling-Registerkarten in der linken Seitenleiste.

Elementor-Styling

Die genauen Optionen hängen davon ab, welches Element Sie bearbeiten, aber im Allgemeinen bietet Elementor eine der umfangreichsten Gestaltungsoptionen aller Seitenersteller.

Über grundlegende Dinge wie Farben, Hintergründe und Typografie hinaus können Sie auch erweiterte Einstellungen steuern wie:

  • Benutzerdefinierte Ränder/Auffüllung.
  • Benutzerdefinierte CSS-Klassen/IDs. Mit Elementor Pro können Sie einzelnen Elementen direkt CSS-Stile hinzufügen.
  • Reaktionsschnelle Steuerung. Sie können Elemente auf bestimmten Geräten ein-/ausblenden.

Elementor hat kürzlich auch eine benutzerdefinierte Positionierung hinzugefügt, die es viel einfacher macht, Widgets an bestimmten Stellen auf der Seite zu platzieren.

Andere bemerkenswerte Eigenschaften – 5/5

Diese Funktionen sind in Elementor Pro verfügbar:

  • Vollständiges Themengebäude. Sie können dieselbe Elementor-Oberfläche verwenden, um Vorlagenteile wie Kopfzeilen, Fußzeilen, Singles und Archive zu erstellen. Grundsätzlich können Sie Ihr gesamtes Thema mit Elementor erstellen.
  • WooCommerce Builder – Gestalten Sie Ihre WooCommerce-Produkt- und Shopseiten.
  • Popup-Gebäude . Entwerfen Sie flexible Popups und richten Sie sie auf bestimmte Inhalte aus.
  • Formularintegrationen . Verbinden Sie das Formular-Widget mit beliebten E-Mail-Marketingdiensten (oder Zapier für noch mehr Flexibilität).
  • Globale Widgets. Mit diesen können Sie ein gemeinsames Element auf mehreren Seiten wiederverwenden und alle Instanzen des globalen Widgets bearbeiten, indem Sie einfach das globale Widget aktualisieren.
  • Überall einbetten . Verwenden Sie Elementor-Vorlagen in anderen Bereichen über Widgets oder Shortcodes.

Sperren – 5/5

Wenn Sie Elementor jemals deaktivieren, hinterlässt es sauberen Code. Wenn Sie beispielsweise einen <h3>-Header mit Elementor hatten, haben Sie nach dem Deaktivieren von Elementor immer noch einen <h3>-Header – es wird nur das Styling Ihres Themes verwendet.

2. Biberbauer

Beaver Builder ist seit geraumer Zeit ein fester Bestandteil des Page Builder-Marktes. Es gibt sauberen Code ( für einen Seitenersteller ) aus, ist bei Endbenutzern und Implementierern gleichermaßen beliebt und erhält regelmäßig Aufmerksamkeit in Form von neuen Funktionen und Updates.

Es gibt auch einige offizielle Add-Ons, die Sie für mehr Flexibilität damit kombinieren können – insbesondere ein optionales Beaver Builder-Theme und die Beaver Themer-Erweiterung.

Lesen Sie unseren Beaver Builder-Test.

Preis: Begrenzte kostenlose Version. Beginnt bei 99 US-Dollar für die Verwendung auf begrenzten Websites.

Schnittstelle – 5/5

Beaver Builder bietet eine einzigartige Schnittstelle für seinen visuellen Frontend-Builder. Sie erledigen den größten Teil Ihrer Arbeit über eine Seitenleiste auf der rechten Seite. Diese Seitenleistenoptionen werden jedoch nur angezeigt, wenn Sie auf eine Schaltfläche in der oberen Leiste klicken, sodass Sie jederzeit eine Vollbildvorschau anzeigen können:

Biberbauer Beispiel
  • 1 – Sie klicken darauf, um den Seitenleistenbereich zu öffnen
  • 2 – Dies ist eine Live-Vorschau Ihres Designs

Beaver Builder hat kürzlich die Inline-Textbearbeitung hinzugefügt, was bedeutet, dass Sie entweder direkt auf der Seite tippen können, um Ihren Text zu bearbeiten, oder das angezeigte Popup verwenden können:

Biber-Builder-Schnittstelle

Die Verwendung der Inline-Bearbeitung mit dem Popup ist ehrlich gesagt etwas umständlich. Aber Sie können den Editor einfach an die Seitenleiste anheften, um das zu beheben.

Enthaltene Widgets/Vorlagen – 4/5

In der kostenlosen Version bietet Ihnen Beaver Builder nur Zugriff auf 6 Module , obwohl Sie auch Standard-WordPress-Widgets verwenden können.

Die Premium-Version hingegen gewährt Ihnen Zugriff auf 30 Module . Diese Module sind auch alle modular, sodass Sie sie nach Bedarf aktivieren oder deaktivieren können.

In der Premium-Version erhalten Sie außerdem Zugriff auf ~56 Seitenvorlagen sowie die Möglichkeit, Ihre eigenen Designs als Vorlagen zu speichern.

Styling-Optionen – 5/5

Um Ihre Module und Abschnitte zu gestalten, können Sie entweder:

  • Verwenden Sie das Standard-Popup-Fenster
  • Stecken Sie das Fenster an die Seite, um eine Seitenleiste zu erstellen ( Sie können dies im Beispiel unten sehen ).

Die genauen Optionen hängen vom Modul ab, aber im Allgemeinen gibt Ihnen Beaver Builder eine ziemlich gute Kontrolle über Ihre Elemente, einschließlich benutzerdefinierter Abstände und reaktionsschneller Steuerelemente.

Und Beaver Builder bietet auch einen sehr einzigartigen Schalter, mit dem Sie einzelne Module ein- oder ausblenden können, je nachdem, ob ein Benutzer angemeldet ist oder nicht:

Biberbauer-Styling

Andere bemerkenswerte Eigenschaften – 4/5

  • Biber Themer. Obwohl dies eine separate Erweiterung ist, fügt sie vollständige Themenerstellungsfunktionen wie Elementor hinzu.
  • Weiße Beschriftung . Sie können Beaver Builder ganz einfach mit einem White-Label versehen, wenn Sie Websites für Kunden erstellen.
  • Beaver Builder-Thema . Dieses optionale Design gibt Ihnen noch mehr Kontrolle darüber, wie Ihre Website aussieht.

Obwohl die einzigartigen Funktionen gut sind, gebe ich einen Punkt ab, weil Sie mehr bezahlen müssen, um sie zu erhalten.

Sperren – 5/5

Wie Elementor hinterlässt Beaver Builder 100 % sauberen Code mit der richtigen HTML-Formatierung.

3. Divi-Builder

Divi Builder ist ein beliebter Premium-Seitenersteller von Elegant Themes. Obwohl es am häufigsten als Teil des Divi-Designs verwendet wird, ist Divi Builder auch ein eigenständiges Plugin, das Sie auch mit anderen Designs verwenden können.

Im Gegensatz zu den beiden vorherigen Seitenerstellern können Sie mit Divi Builder Ihre Inhalte sowohl über eine visuelle Frontend-Oberfläche als auch über eine Backend-Oberfläche bearbeiten, obwohl die meisten Benutzer wahrscheinlich die Frontend-Oberfläche bevorzugen werden.

Mit der neuesten Version, Divi 4.0, fügte Divi auch eine vollständige Unterstützung für die Themenerstellung hinzu, was es in dieser Hinsicht mit Elementor und Beaver Builder auf eine Stufe stellt. Das heißt, Sie können jetzt Divi verwenden, um Ihre Kopf- und Fußzeile, Vorlagen usw. zu entwerfen.

Lesen Sie unseren Divi Builder-Test.

Preis: Verfügbar als Teil der 89-Dollar-Mitgliedschaft von Elegant Themes

Schnittstelle – 5/5

Die Backend-Oberfläche von Divi Builder sieht folgendermaßen aus:

Divi Builder-Schnittstelle

Meistens verwenden Sie jedoch die visuelle Benutzeroberfläche des Frontends. Der Divi Builder ist definitiv einzigartig. Ich bin persönlich kein Fan , aber ich kenne viele Leute, die es lieben, also werde ich aus diesem Grund keine Punkte vergeben.

Im Grunde genommen handelt es sich statt um irgendeine Art von Seitenleiste um Popups und schwebende Schaltflächen. Unten sehen Sie ein Beispiel für das Hinzufügen eines Moduls:

Divi Builder visuelle Benutzeroberfläche

Wie bei den beiden vorherigen Seitenerstellern können Sie auch die Inline-Bearbeitung verwenden, um Ihren Text direkt auf der Seite zu bearbeiten:

Divi-Inline-Bearbeitung

Es liegt an Ihnen, ob Sie diesen Ansatz der Seitenleiste vorziehen, die von einigen anderen Seitenerstellungs-Plugins verwendet wird.

Enthaltene Widgets/Vorlagen – 5/5

Divi Builder enthält 46 Module , mit denen Sie Ihre Designs erstellen können:

Divi Builder-Module

Sie erhalten außerdem Zugriff auf riesige 316 vorgefertigte Vorlagen , die auf 40 verschiedene Layoutpakete verteilt sind, sowie die Möglichkeit, Ihre eigenen Designs als Vorlagen zu speichern:

Divi-Vorlagen

Styling-Optionen – 5/5

Wie Beaver Builder können Sie mit Divi Builder Elemente aus einem Popup-Fenster gestalten, das Sie bei Bedarf an die Seite heften können.

Eines der Markenzeichen von Divi war schon immer, wie viel Styling-Kontrolle es Ihnen gibt. Auf drei verschiedenen Registerkarten können Sie eine Vielzahl von Einstellungen konfigurieren, darunter responsive Steuerelemente, benutzerdefinierte Abstände und vieles mehr.

Sie können sogar benutzerdefiniertes CSS zum Hauptelement oder vor/nach dem Hauptelement hinzufügen. Die CSS-Editoren beinhalten sogar grundlegende Validierung und Autovervollständigung! Und Sie können auch direkt aus dem Editor heraus einen Farbwähler öffnen:

Divi CSS-Optionen

Alles in allem geht Divi Builder mit seinen Styling-Optionen wirklich an die Grenzen – es ist gutes Zeug.

Andere bemerkenswerte Eigenschaften – 5/5

  • Themenerstellung – Entwerfen Sie Ihr gesamtes Thema mit der Divi Builder-Oberfläche.
  • A/B-Tests. Eine der besten Zusatzfunktionen ist das integrierte A/B-Testsystem von Divi Builder. Kein anderer Seitenersteller macht es so einfach, Tests im Kern aufzuteilen.
  • Divi-Thema . Wenn Sie den Divi Builder mit dem Divi-Design koppeln, haben Sie die volle Kontrolle über das Erscheinungsbild Ihrer Website.
  • Benutzerzugriffskontrollen . Divi Builder enthält starke rollenbasierte Zugriffskontrollen.
  • WordPress Customizer-Steuerelemente . Sie können das Aussehen einiger Elemente mit dem nativen WordPress Customizer anpassen.

Sperren – 3/5

Einer der Kritikpunkte an Divi Builder war schon immer, dass es auf Shortcodes basiert. Das bedeutet, wenn Sie es jemals deaktivieren, wird es eine Reihe von Shortcodes in Ihren Inhalten hinterlassen.

Das ist zwar ein kleiner Wermutstropfen, aber jetzt, da es Plugins wie Shortcode Cleaner gibt, ist das weniger ein Problem. Sie verlieren die Formatierung – wie ein <h3>-Tag – aber Sie verlieren nicht den Inhalt selbst.

4. Gedeihen Sie Architekt

Thrive Architect ist die überarbeitete Version dessen, was einst Thrive Content Builder war. Die neue Benutzeroberfläche weist viele Ähnlichkeiten mit der Benutzeroberfläche von Elementor auf, die Sie gleich sehen werden.

Obwohl jeder es verwenden kann, ist es aufgrund seines Fokus auf Konversionsraten besonders beliebt bei Bloggern und Affiliate-Vermarktern. Und eines der Dinge, die ich persönlich an Thrive Architect mag, ist, dass sein Standard-Stil sofort nach dem Auspacken ziemlich gut aussieht.

Lesen Sie unseren Thrive Architect-Test.

Preis: Es ist Teil der Thrive Suite, die 19 $ pro Monat kostet (wird jährlich abgerechnet).

Schnittstelle – 5/5

Wie ich bereits sagte, werden Sie einige Ähnlichkeiten zwischen der Benutzeroberfläche von Thrive Architect und der Elementor-Benutzeroberfläche feststellen ( Elementor kam zuerst, falls Sie sich fragen ):

Thrive Architect-Schnittstelle

Es ist die gleiche Idee, Sie haben:

  • 1 – dies ist die Live-Vorschau Ihres Designs. Es sieht genauso aus, wie Ihre Besucher es sehen werden. Sie können Text auch direkt in diese Benutzeroberfläche eingeben sowie verschiedene Elemente ziehen und ablegen, um sie neu anzuordnen.
  • 2 – Dies zeigt eine Liste der Elemente, die Sie verwenden können. Du ziehst sie einfach rüber. Und wenn Sie ein einzelnes Element oder einen Abschnitt auswählen, können Sie es hier gestalten.
  • 3 – Diese helfen Ihnen beim Zugriff auf responsive Vorschauen, Rückgängigmachen/Wiederherstellen von Änderungen und anderen kleineren Funktionen.

Ja – ich habe das aus dem Elementor-Bereich kopiert und eingefügt .

Eine einzigartige Sache ist die Breadcrumb-Auswahl, wenn Sie auf ein verschachteltes Element klicken. Diese Funktion ist eigentlich ziemlich praktisch, wenn Sie schnell zwischen einem Element und einem Abschnitt springen möchten:

Gedeihen Sie Architektenabschnitte

Und Thrive Architect bietet auch echte Inline-Textbearbeitung. Tatsächlich hat Thrive Architect meiner Meinung nach die nahtlosste Inline-Bearbeitungsfunktion aller Seitenersteller:

Inline-Bearbeitung

Enthaltene Widgets/Vorlagen – 4/5

Thrive Architect bietet 40 verschiedene Widgets , darunter einige nette wie einen immergrünen Countdown-Timer.

Thrive Architect enthält auch Hunderte von Vorlagen, die in ~36 „Sets“ unterteilt sind. Und Sie können auch Ihre eigenen Designs als Vorlage speichern.

Styling-Optionen – 5/5

Thrive Architect unterscheidet sich von Elementor in der Art und Weise, wie es mit dem Styling umgeht. Anstatt Ihnen Registerkarten zu geben, enthält Thrive Architect alles in einer einzigen Spalte.

Die Gestaltungsoptionen sind ziemlich detailliert und umfassen reaktionsschnelle Steuerelemente und benutzerdefinierte Abstände:

gedeihen Architekten-Styling

Sie können auch Ihr eigenes benutzerdefiniertes CSS auf Seitenebene hinzufügen. Für einzelne Elemente können Sie nur CSS-Klassen oder IDs zuweisen.

Andere bemerkenswerte Eigenschaften – 3/5

Eine coole Funktion ist die Option, Seitenereignisse einzurichten. Mit diesen können Sie ein Lightbox-Popup basierend auf bestimmten Auslösern anzeigen:

Seitenereignisse

Und eine weitere coole Sache ist, wie gut es sich in andere Thrive Themes-Produkte integrieren lässt. Beispielsweise:

  • Wenn Sie Thrive Optimize verwenden, können Sie A/B-Tests mit Thrive Architect durchführen.
  • Wenn Sie Thrive Leads verwenden, können Sie die detaillierten Opt-Ins von Thrive Leads problemlos in Thrive Architect integrieren.

Sperren – 5/5

Thrive Architect hinterlässt 100 % sauberen Code wie Elementor und Beaver Builder.

5. SiteOrigin-Seitengenerator

SiteOrigin Page Builder gibt es schon seit einer gefühlten Ewigkeit. Und in diesem „für immer“ ist es gelungen, über 1 Million aktive Installationen bei WordPress.org zu sammeln, was es zu einem der beliebtesten Seitenerstellungs-Plugins auf dem Markt macht.

Obwohl SiteOrigin Page Builder etwas leichter ist als die meisten anderen Optionen auf dieser Liste, bietet es eine hervorragende Leistung und jede Menge hilfreiche CSS-Steuerelemente.

Preis: Kostenlos. Das SiteOrigin Premium-Bundle beginnt bei 29 $

Schnittstelle – 3/5

SiteOrigin verfügt über zwei Schnittstellen, die Sie zum Erstellen Ihres Designs verwenden können.

Sie haben den ursprünglichen Backend-Editor:

siteorigin Page Builder-Schnittstelle

Sie können Blöcke ziehen und ablegen oder auf einen bestimmten Block klicken, um ihn zu bearbeiten.

Dieser Editor bietet Ihnen den meisten Platz zum Arbeiten, aber es fehlt jede Art von Live-Vorschau.

Wenn Sie diese Live-Vorschau möchten, hat SiteOrigin Page Builder einen Live-Editor-Modus hinzugefügt:

siteorigin Live-Vorschau

Dies ist nicht dasselbe wie bei den anderen Seitenerstellern auf dieser Liste, da Sie die Elemente nicht per Drag-and-Drop in die Live-Vorschau ziehen können . Aber es ist auch mehr als nur eine Vorschau Ihres Designs, denn es gibt eine gewisse Interaktivität zwischen den abstrakten Feldern auf der linken Seite und der Live-Vorschau.

Sie können beispielsweise in der Live-Vorschau mit der Maus über ein Kästchen fahren, und das entsprechende Kästchen in der Seitenleiste zeigt auch die Hervorhebung an. Sie können auch in der Live-Vorschau auf ein Element klicken, um dessen Einstellungen zu öffnen:

Beispiel einer Siteorigin-Schnittstelle

Enthaltene Widgets/Vorlagen – 2/5

Neben den zentralen WordPress-Widgets bietet SiteOrigin Page Builder auch ein kostenloses Widgets-Bundle-Plugin, das einen modularen Satz von 23 Widgets hinzufügt, die Sie verwenden können. Es enthält auch ~ 25 vorgefertigte Vorlagen, die Sie verwenden können, obwohl dies im Vergleich zu anderen Seitenerstellern ziemliche Barebones sind.

Sie können Ihre Designs nicht als Vorlagen speichern, aber Sie können vorhandene Seiten einfach klonen, wodurch Sie ähnliche Funktionen erhalten.

Styling-Optionen – 3/5

Die Gestaltungsoptionen von SiteOrigin Page Builder werden im Vergleich zu den anderen Seitenerstellern enttäuschend sein, wenn Sie CSS nicht kennen . Aber wenn Sie mit der Verwendung Ihres eigenen CSS vertraut sind, sind sie tatsächlich ziemlich hilfreich.

Neben dem Hinzufügen von CSS-Klassen und IDs können Sie CSS auch direkt zu einzelnen Elementen hinzufügen, einschließlich eines Abschnitts für CSS nur für Mobilgeräte:

Siteorigin-Styling-Optionen

Sie erhalten auch viele Nicht-CSS-Styling-Optionen – nur nicht so viele wie bei den anderen Plugins. Wenn Sie ein Entwickler sind, der plant, Ihr eigenes CSS zu verwenden, könnten Sie dem Plugin wahrscheinlich eine 5 für diese Kategorie geben. Aber ich schlage es auf eine 3 herunter, weil ich denke, dass es für normale Benutzer passt.

Andere bemerkenswerte Eigenschaften – 2/5

SiteOrigin Page Builder ist ziemlich leichtgewichtig, aber Sie erhalten einen einfachen benutzerdefinierten Beitragstyp-Builder im SiteOrigin Premium-Bundle.

Sperren – 4/5

SiteOrigin Page Builder hinterlässt eine Mischung aus sauberem HTML und Shortcodes. Das heißt, einige der Widgets – wie der Texteditor – hinterlassen sauberes HTML, während andere – wie das Schaltflächen-Widget – Shortcodes hinterlassen.

6. WPBakery-Seitenersteller

WPBakery Page Builder, früher bekannt als Visual Composer, ist ein weiterer äußerst beliebter Premium-Seitenersteller. Ein großer Teil dieser Popularität kommt von der Tatsache, dass WPBakery Page Builder mit scheinbar 99 % der Themen bei ThemeForest gebündelt ist. Tatsache bleibt jedoch, dass es auf einer großen Anzahl von Websites verwendet wird.

Preis: $64

Schnittstelle – 3/5

Wie Divi Builder bietet Ihnen WPBakery Page Builder sowohl eine visuelle Front-End-Bearbeitung als auch eine Back-End-Bearbeitung.

Sie können die Back-End-Schnittstelle verwenden, wenn Sie möchten:

wpbakery-Backend

Aber ich denke, die meisten Leute werden am Frontend glücklicher sein, das so aussieht:

wpbakery-Frontend-Schnittstelle

Sie fügen neue Elemente ein und gestalten sie mithilfe von Popups – es gibt weder einen Seitenleistenbereich noch eine Inline-Bearbeitung.

Ich persönlich bin kein Fan von diesem Ansatz, aber einige Leute mögen es, weil der Live-Vorschau nichts im Wege steht, wenn Sie kein Popup geöffnet haben .

Enthaltene Widgets/Vorlagen – 3/5

WPBakery Page Builder bietet 39 Elemente plus alle normalen WordPress-Widgets. Einige dieser Elemente würden jedoch in einem anderen Seitenersteller kombiniert werden, sodass die tatsächliche Anzahl eher ~33 entspricht :

wpbakery-Module

Sie erhalten auch ~86 Vorlagen. Einige Vorlagen sind ganze Seiten, während andere nur Abschnitte sind.

Styling-Optionen – 3/5

Im Vergleich zu Elementen wie Elementor oder Divi Builder sind die Stiloptionen von WPBakery Page Builder etwas eingeschränkt.

Sie haben eine gute Kontrolle über Zeilen:

wpbäckerei-styling

Allerdings sind die Gestaltungsmöglichkeiten für einzelne Elemente etwas eingeschränkter.

Wenn Sie Ihr eigenes CSS verwenden möchten, können Sie einzelnen Elementen eine benutzerdefinierte CSS-Klasse oder ID hinzufügen, oder Sie können tatsächliche Stile auf Seitenebene hinzufügen:

wpbäckerei css

Andere bemerkenswerte Eigenschaften – 3/5

Ich bin mir nicht sicher, ob WPBakery Page Builder selbst irgendwelche besonders bemerkenswerten einzigartigen Funktionen hat . Aber was es hat, ist eine riesige Add-On-Community von Drittanbietern. Während viele andere Seitenersteller Add-Ons von Drittanbietern haben, ist WPBakery Page Builder einzigartig in der Anzahl, die weit über 250+ Add-Ons liegt.

Sperren – 3/5

Wie Divi Builder hinterlässt WPBakery Page Builder eine Reihe von Shortcodes in Ihren Inhalten, wenn Sie ihn jemals deaktivieren.

7. Themify-Builder

Themify Builder ist, wenig überraschend, das Page Builder-Angebot von Themify. Themify bündelt es mit vielen seiner Themen, um Kunden einfache Anpassungsoptionen zu bieten. Sie können es aber auch als eigenständiges Plugin kaufen und mit jedem Thema verwenden.

Preis : Leichte kostenlose Version. Pro beginnt bei 39 $ oder 59 $ (je nach Add-Ons)

Schnittstelle – 4/5

Wie Divi Builder und WPBakery Page Builder können Sie mit Themify Builder Ihre Designs sowohl mit Back-End- als auch mit Front-End-Schnittstellen erstellen.

Mit Version 4.0 hat Themify Builder einige Aktualisierungen an der Benutzeroberfläche vorgenommen, was dazu führte, dass ich die Punktzahl um eine Stufe nach oben schraubte.

Die Backend-Oberfläche sieht folgendermaßen aus:

Themify Builder-Backend

Aber auch hier werden die meisten Leute wahrscheinlich die Frontend-Oberfläche verwenden wollen, die so funktioniert:

Themify Builder-Schnittstelle
  • 1 – lässt Sie neue Module einfügen ( 2 verschiedene Möglichkeiten )
  • 2 – Live-Vorschau
  • 3 – Responsive Vorschauen, Rückgängigmachen/Wiederherstellen und andere Einstellungen

Es gibt keine Inline-Bearbeitung – Sie müssen Ihren Text in einem Popup bearbeiten:

Bearbeiten von Text in themify

Dennoch fühlt sich die neue Benutzeroberfläche viel "schneller" an als die alte, was zu einem viel schnelleren Bearbeitungserlebnis führt.

Es fügt auch eine Auswahl im Breadcrumbs-Stil über dem Einstellungs-Popup hinzu, mit der Sie schnell zwischen einem Modul selbst und den Zeilen und Spalten wechseln können, in denen es sich befindet.

Schließlich ist eine meiner Lieblingsneuergänzungen die Möglichkeit, Ränder und Auffüllungen hinzuzufügen, indem Sie einfach auf die Seite klicken und ziehen. Dies ist ein riesiges Upgrade und macht es viel einfacher, die Positionierung auf Ihrer Seite anzupassen. Sie können sehen, wie ich den Rand ( rosa ) anpassen kann, indem ich ihn einfach ziehe:

Ränder themifizieren

Wirklich, mein einziger großer Kritikpunkt ist immer noch die fehlende Zeilenbearbeitung.

Enthaltene Widgets/Vorlagen – 3/5

Themify Builder bietet ~32 Module (abhängig von Ihren Add-Ons) sowie alle normalen WordPress-Widgets.

Sie erhalten auch ~143 ganzseitige Vorlagen sowie eine kleinere Anzahl von Zeilen , bei denen es sich im Grunde um vorgefertigte Abschnitte handelt .

Styling-Optionen – 4/5

Wenn Sie auf ein beliebiges Element klicken, erhalten Sie vier verschiedene Registerkarten, mit denen Sie es gestalten können:

  • Inhalt
  • Styling ( siehe unten )
  • Sichtbarkeit ( lässt Sie ein Element auf bestimmten Geräten ausblenden )
  • Animation
themify Builder-Styling-Optionen

Eine weitere nette Sache ist, dass Sie mit Themify Builder Ihre reaktionsschnellen Haltepunkte anpassen können ( allerdings nur auf Site-Ebene ).

In Version 4.0 hat Themify Builder auch benutzerdefinierte Formteiler hinzugefügt, mit denen Sie aus 25 voreingestellten Formen wählen können.

Andere bemerkenswerte Eigenschaften – 4/5

Eine coole Sache an Themify Builder ist, dass Sie immer noch den regulären WordPress-Editor verwenden können, während andere Seitenersteller Sie dazu zwingen, die Seitenersteller-Oberfläche für alles zu verwenden. Der Themify Builder-Inhalt ist im WordPress-Editor markiert, sodass Sie Inhalte darum herum platzieren können:

themify Builder im WordPress-Editor

Diese Funktion funktioniert auch im neuen WordPress-Blockeditor.

Ein weiteres nettes neues Feature ist die Möglichkeit, verschiedene Auflösungen für responsives Design zu verwenden. Viele Seitenersteller geben Ihnen nur generische „Mobile“- und „Tablet“-Vorschauen, aber mit Themify Builder können Sie tatsächlich verschiedene Geräte testen.

Sperren – 5/5

Themify Builder hat sich in Bezug auf Lock-In massiv verbessert . Wenn Sie es jetzt deaktivieren, hinterlässt es Ihren Inhalt mit sauberem HTML.

8. Brizy

Brizy wurde im April 2018 eingeführt und ist einer der „jüngsten“ Seitenersteller auf dieser Liste. Aber es stammt von einem bekannten Entwickler – ThemeFuse – und hat schnell 60.000 aktive Installationen erreicht. Darüber hinaus bietet es einfach nur einen einzigartigen Ansatz für einige Teile des Seitenaufbaus, was es zu einem interessanten Angebot macht.

Die Entwickler veröffentlichen auch schnell neue Funktionen, und Brizy bietet bereits Unterstützung für die Themen- und Popup-Erstellung.

Preis: Kostenlose Basisversion. Die Pro-Version beginnt bei 49 $.

Schnittstelle – 5/5

Brizy ist ausschließlich ein visueller Frontend-Seitenersteller.

Um Ihre Seite zu erstellen, müssen Sie zuerst einen Block hinzufügen. Sie können einen leeren Block verwenden oder aus den vorgefertigten Abschnittsblöcken auswählen:

Brizy könnte der beste WordPress-Seitenersteller sein

Der Teil „einzigartige Benutzeroberfläche“ ist das, was passiert, wenn Sie anfangen, Elemente hinzuzufügen. Anstatt eine Seitenleiste oder ein Popup zu haben, in dem Sie das Element anpassen/gestalten, geschieht fast alles inline (einschließlich der Eingabe).

Schau mal was ich meine:

lebhafte Schnittstelle

Das Ergebnis ist eine wirklich schnelle Möglichkeit, Seiten zu erstellen.

Enthaltene Widgets/Vorlagen – 4/5

Brizy bietet derzeit 26 Grundelemente an. Diese Zahl ist klein, aber Brizy ist noch neu, also wird sie hoffentlich mit der Zeit zunehmen.

Sie erhalten auch zusätzliche Elemente für bestimmte Funktionen, z. B. ein Menüelement beim Erstellen einer Kopfzeile.

Es enthält auch über 150 Blöcke (Vorlagenabschnitte), die Sie verwenden können.

Styling-Optionen – 5/5

Aufgrund der Funktionsweise der Benutzeroberfläche von Brizy gibt es keine festgelegte Formel für Gestaltungsoptionen wie bei den anderen Seitenerstellern.

Sie können eine Seitenleiste für erweiterte Einstellungen wie Abstände und reaktionsschnelle Steuerelemente erweitern:

lebhaftes Styling

Sie können auch grundlegende Stile auf Seitenebene hinzufügen, sodass Sie nicht jedes einzelne Element manuell bearbeiten müssen:

lebhafte Schriftarten

Aber meistens verwenden Sie die Inline-Steuerelemente, um Ihre Elemente zu gestalten, was Ihnen eine gute Kontrolle gibt.

Andere bemerkenswerte Eigenschaften – 5/5

Die Benutzeroberfläche von Brizy ist bereits ziemlich einzigartig, aber sie hat seit ihrer Veröffentlichung auch schnell eine ziemlich herausragende Feature-Liste zusammengestellt:

  • Theme Builder – Entwerfen Sie Kopf- und Fußzeilen, Archive und Vorlagen für einzelne Posts mit Brizy. Der WooCommerce-Support ist unterwegs . Es enthält auch eine dynamische Funktion, um benutzerdefinierte Feldinhalte aus beliebten Plugins wie ACF und Toolset einzufügen.
  • Popup-Builder – Entwerfen Sie Popups mit der Brizy-Oberfläche und verwenden Sie Bedingungen, um zu steuern, wo/wann sie angezeigt werden.
  • Globale Banner , die über mehrere Seiten hinweg synchronisiert werden.
  • Integrationen mit beliebten E-Mail-Marketingdiensten (und Zapier).

Sperren – 4/5

Brizy hinterlässt größtenteils sauberen HTML-Code, wenn Sie ihn jemals deaktivieren. Aber es hinterlässt immer noch eine Reihe von Divs mit Brizy-CSS-Klassen im Code, was die Abstände etwas durcheinander bringt und eine Reinigung erfordern würde.

9. Visueller Komponist

Oben habe ich Ihnen gesagt, dass WPBakery Page Builder früher als Visual Composer bekannt war. Der Grund für dieses „früher“ ist, dass das Team hinter Visual Composer beschlossen hat, WPBakery Page Builder auszugliedern, um ein völlig neues Produkt mit dem Namen Visual Composer auf den Markt zu bringen.

Darauf konzentrieren wir uns in diesem Abschnitt.

Obwohl es vom selben Team stammt, ist es ein völlig separates Produkt.

Der Hauptunterschied besteht darin, dass Visual Composer ein vollständiger Website -Builder ist, während WPBakery Page Builder nur ein Seitenersteller ist.

Preis: Begrenzte kostenlose Version. Die Pro-Version beginnt bei 49 $.

Schnittstelle – 3/5

Wenn Sie mit Visual Composer eine neue Seite erstellen, können Sie aus einigen verschiedenen Layouts für Ihre Leinwand wählen. Sie können eine vollständig leere Leinwand erstellen, Ihre Kopf-/Fußzeile einfügen usw.

Von dort aus können Sie alles über eine visuelle Oberfläche gestalten:

Visual Composer-Schnittstelle

Die Benutzeroberfläche ist glatt und störungsfrei, es fehlt jedoch die Inline-Bearbeitung, was etwas enttäuschend ist. Stattdessen müssen Sie den Text in der Seitenleiste bearbeiten:

Visual Composer-Texteditor

Außerdem finde ich die Optionen in der Seitenleiste nicht so brauchbar, da alles eine einzige lange Spalte ist. Ich bevorzuge den Ansatz, den die meisten anderen Seitenersteller verwenden, nämlich die Aufteilung der Einstellungen in Registerkarten.

Enthaltene Widgets/Vorlagen – 5/5

Wenn Sie Visual Composer zum ersten Mal installieren (oder wenn Sie nur die kostenlose Version verwenden), erhalten Sie nur Zugriff auf einige Blöcke und keine Vorlagen.

Lassen Sie sich jedoch nicht täuschen – Visual Composer hat eine riesige Auswahl an Elementen und Vorlagen – Sie müssen sich nur mit dem Visual Composer Hub verbinden und diejenigen herunterladen, die Sie verwenden möchten:

Visual Composer-Blöcke

Wie Sie sehen können, gibt es eine riesige Vielfalt, von Inhaltsblöcken bis hin zu Integrationen und mehr. Auch bei den Vorlagen gibt es eine ähnliche Vielfalt.

Styling-Optionen – 4/5

Die Styling-Optionen von Visual Composer sind solide, aber nichts sticht wirklich hervor. Sie erhalten alle Funktionen, die Sie erwarten, wie z. B. Formteiler, benutzerdefinierte Abstände, Parallaxe usw.

Sie erhalten auch reaktionsschnelle Steuerelemente, um das Design basierend auf dem Gerät eines Benutzers zu bearbeiten, sowie eine Vielzahl von reaktionsschnellen Vorschauoptionen.

Zwei nette Funktionen sind die Optionen, eine Zeile oder ein Element klebrig zu machen und zu steuern, wie Spalten gestapelt werden.

Andere bemerkenswerte Eigenschaften – 5/5

Wie ich oben erwähnt habe, ist Visual Composer ein vollständiger Website-Builder, sodass Sie Ihre gesamte Website mithilfe seiner Benutzeroberfläche erstellen können, einschließlich Kopfzeilen, Fußzeilen, Vorlagen und mehr.

Sie können auch dynamische Inhalte aus Standard- und benutzerdefinierten Feldern einfügen, z. B. aus denen, die Sie mit ACF hinzufügen.

Die andere herausragende Funktion ist der Visual Composer Hub, der mit unzähligen Vorlagen und Inhaltselementen ausgestattet ist, die Sie importieren können.

Sperren – 5/5

Deaktiviert man Visual Composer, hinterlässt dieser relativ sauberes HTML. Das HTML enthält immer noch die CSS-Klassen von Visual Composer, aber es gibt keine Front-End-Probleme oder Shortcodes.

10. WP Page Builder

WP Page Builder ist ein neues Angebot von Themeum, einem etablierten WordPress-Entwickler. Obwohl das Plugin selbst neu ist, stammt es von einem Team, das schon eine Weile im WordPress-Bereich tätig ist.

Themeum stellt auch das Tutor LMS-Plugin her, das wir vor nicht allzu langer Zeit überprüft haben.

Preis: Ziemlich großzügige kostenlose Version. Die Pro-Version beginnt bei 39 $.

Schnittstelle – 4/5

WP Page Builder hat eine ziemlich standardmäßige Benutzeroberfläche, was Seitenersteller angeht. Sie erhalten rechts eine visuelle Vorschau Ihres Designs und links eine Seitenleiste, in der Sie Ihre Designs steuern können.

Eine Sache, die mir sehr gefällt, ist die Möglichkeit, den Abstand (Ränder/Padding) mit einem Drag-and-Drop-Schieberegler anzupassen. Sie können auch einen ähnlichen Drag-and-Drop-Ansatz verwenden, um die Spaltengröße zu ändern:

Es gibt jedoch keine Inline-Bearbeitung, was ein kleiner Wermutstropfen ist. Stattdessen müssen Sie den Text im Seitenleisten-Editor bearbeiten:

Enthaltene Widgets/Vorlagen – 5/5

Selbst in der kostenlosen Version bietet WP Page Builder eine hervorragende Auswahl an Widgets. Die kostenlose Version bietet Ihnen beispielsweise Preistabellen, Postraster, Flipboxen und mehr. Die meisten anderen Seitenersteller reservieren diese Elemente für die Premium-Version.

Sie erhalten auch Zugriff auf über 31 Layout-Bundles, bei denen es sich um thematische Vorlagenpakete für bestimmte Nischen handelt. Jedes Layout enthält mehrere Vorlagen:

WP Page Builder-Vorlagen

Styling-Optionen – 4/5

Ich habe bereits die Drag-and-Drop-Abstands-/Layout-Steuerelemente erwähnt, was eine wirklich praktische Funktion ist.

Darüber hinaus erhalten Sie auch eine gute Auswahl an Stiloptionen. Beispielsweise erhalten Sie Formteiler, die Option, Elemente auf bestimmten Geräten auszublenden und unterschiedliche Einstellungen für verschiedene Geräte zu verwenden, und viele allgemeine Stiloptionen:

Obwohl es solide ist, haben Sie nicht so viele Optionen wie bei etwas wie Elementor oder Divi, weshalb ich mit einer Punktzahl von „4“ anstelle von „5“ gehe.

Andere bemerkenswerte Eigenschaften – 3/5

WP Page Builder ist ein solider Seitenersteller, aber er hat nicht die Art von Extras aufgebaut, die Sie mit anderen Seitenerstellern erhalten. Zum Beispiel gibt es keine Themenerstellung, keinen Popup-Builder usw.

Außer dem Seitenersteller selbst sehe ich keine herausragenden Funktionen.

Sperren – 3/5

When you disable WP Page Builder, it removes everything , including your content. Even if you just added a single text block, that text block will still disappear when you disable WP Page Builder.

The content will reappear if you reactivate the plugin.

Which Is The Best WordPress Page Builder?

So which of these 10 page builders should you choose? Well, here's how the scores stack up (in order):

Page Builder Overall (25 is Max) Interface Widgets / templates Styling Notable features Lock-in
Elementor 25 5 5 5 5 5
Biber Baumeister 23 5 4 5 4 5
Divi-Builder 23 5 5 5 5 3
Brillant 23 5 4 5 5 4
Gedeihen Sie Architekt 22 5 4 5 3 5
Visueller Komponist 22 3 5 4 5 5
Themify Builder 20 4 3 4 4 5
WP Page Builder 19 4 5 4 3 3
WPBakery Page Builder fünfzehn 3 3 3 3 3
SiteOrigin Page Builder 14 3 2 3 2 4

And personally, that's pretty much how I would recommend them to people, as well.

On my own sites, I use a mix of Elementor and Thrive Architect, depending on the site.

If you're looking for the best value of price vs features, here's another table comparing the score to the pricing options:

Page Builder Overall (25 is Max) Free Version? Starting Price
Elementor 25 ja $49
Biber Baumeister 23 ja $99
Divi-Builder 23 Nein $89
Brillant 23 ja $49
Gedeihen Sie Architekt 22 Nein $19
Visueller Komponist 22 ja $49
Themify Builder 20 ja $39
WP Page Builder 19 ja $39
WPBakery Page Builder fünfzehn Nein $64
SiteOrigin Page Builder 14 ja $29

Now over to you — which one do you think is the best WordPress page builder?