Divi vs. Elementor vs. Spectra – Welcher ist der beste Page Builder zum Entwerfen herausragender Websites?

Es wird oft gesagt, dass „Content is King“ ist .

Wenn dieser Inhalt jedoch nicht von einem guten Design begleitet wird, können Sie nicht das volle Potenzial Ihrer Website ausschöpfen.

Wenn Sie einen Online-Shop betreiben, wird sich ein großartiges Produkt mit einem erstklassigen Design fast immer mehr verkaufen.

Das Problem besteht darin, dass Sie als Solopreneur oder kleines Unternehmen möglicherweise keinen Designer engagieren können, der Sie bei der Erstellung optisch ansprechender Inhalte unterstützt.

Und das Erlernen von HTML und CSS ist nicht der einfachste oder schnellste Weg, in Ihrer Designagentur mit der Gestaltung von Websites für Ihre Kunden zu beginnen.

Vorschau in neuem Tab

Hier kommt ein Seitenersteller ins Spiel. Er hilft dabei, attraktive und professionelle Inhalte zu erstellen, ohne ein Vermögen auszugeben, zu viel Zeit oder Programmierkenntnisse zu benötigen.

Die Wahl zwischen Divi und Elementor ist das klassische Dilemma, da es sich dabei um zwei der größten Player auf dem Markt handelt.

In diesem Leitfaden vergleichen wir sie auch mit Spectra, einem anderen Seitenersteller, der frisch eingeführt wurde, aber möglicherweise die perfekte Lösung für Ihre Anforderungen ist.

Lass uns anfangen!

Website-Builder vs. Page-Builder

Zunächst einmal ist es gut, den Unterschied zwischen einem Seitenersteller und einem Website-Ersteller zu verstehen.

Ein Website-Builder ist ein cloudbasiertes Tool, mit dem Sie eine komplette Website von Grund auf erstellen können.

Ein Page Builder ist ein Plugin, das in WordPress verwendet wird, um ein vorhandenes Design anzupassen oder neue Seiten zu einer vorhandenen Website hinzuzufügen.

Das bekannteste Beispiel für einen Website-Builder ist Wix, obwohl es auch andere wie Squarespace, Softr oder Webflow gibt.

Diese Tools umfassen in der Regel auch Hosting und Domain-Management und werden so zu einem All-in-One für die Erstellung und Pflege von Websites.

Sie eignen sich hervorragend für Anfänger und erleichtern den Betrieb einer Website. Allerdings sind Sie für alles darauf angewiesen, diesen Anbieter zu nutzen, und haben kaum Kontrolle über Ihre Website.

Seitenersteller sind Tools, mit denen Sie ganz einfach eine Seite einer bestehenden Website gestalten können. Daher sind sie im Frontend recht ähnlich.

Wenn Sie beispielsweise bereits eine WordPress-Website haben und ein Theme für das Design verwenden, könnte ein einfacher Beitrag so aussehen:

Ein Seitenersteller kann dabei helfen, dieses Design zu verbessern oder Seiten mit besserem Design hinzuzufügen. Wenn Sie beispielsweise eine attraktivere Serviceseite erstellen möchten:

Mit anderen Worten:

• Bei Website-Buildern verwenden Sie ein webbasiertes System zum Erstellen und Hosten Ihrer Website
• Mit WordPress können Sie mithilfe von Vorlagen Ihre eigene Website erstellen und diese mit einem Seitenersteller anpassen

Die Grenzen zwischen einem Website-Builder und einem Page-Builder verschwimmen, da Website-Builder auch als Page-Builder funktionieren.

Wenn Sie jede Seite Ihres WordPress manuell mit Tools wie Elementor, Divi oder Spectra gestalten möchten, würden Sie theoretisch die gesamte Website mit einem Seitenersteller entwerfen.

In diesem Beitrag geht es um Seitenersteller.

Sollten Sie einen Page Builder verwenden?

Sofern Sie kein Entwickler sind und Ihr eigenes Theme von Grund auf erstellen möchten, ist ein Page Builder eine gute Wahl.

Sie eignen sich nicht für jeden oder jede Situation, aber für die meisten von uns machen Seitenersteller das Leben viel einfacher.

Sie können erstellen, ohne den Code zu kennen, und die Änderungen sehen, während Sie sie vornehmen. Allein aus diesen beiden Gründen empfehlen wir sie.

Es ist wichtig, eine gute Vorlage wie Astra zu verwenden, da Sie damit Ihrer Website ein professionelles Aussehen verleihen und grundlegende Designänderungen mühelos vornehmen können.

Aber irgendwann möchten Sie wahrscheinlich personalisiertere Designs erstellen, Elemente hinzufügen, die im WordPress-Editor nicht verfügbar sind, oder dank Vorlagen, Wireframes oder Mustern schneller arbeiten.

Wenn Sie eine Agentur sind, die Websites für Kunden entwerfen möchte, möchten Sie höchstwahrscheinlich einen Seitenersteller verwenden.

Design ist wichtig, aber auch Inhalt. Treten Sie der SureCrafted-Facebook-Gruppe bei, um über die Einführung von SureWriter auf dem Laufenden zu bleiben, einem Tool, mit dem Sie mehr und besser schreiben können.

Über Elementor

Elementor ist das bekannteste Page Builder-Plugin des gleichnamigen Unternehmens.

Obwohl es einer der bekanntesten und meistgenutzten Page Builder auf dem Markt ist (mit 5 Millionen aktiven Installationen weltweit), ist es relativ jung, da es erst 2016 eingeführt wurde.

Elementor verfügt über eine kostenlose und eine Pro-Version, die weitere Funktionen, Widgets und zusätzliche Vorlagen freischaltet.

Vorteile von Elementor:

• Sehr einfach zu bedienen mit einer intuitiven Benutzeroberfläche.
• Enthält viele Bausteine ​​in der kostenlosen Version.
• Dieser Seitenersteller ist marktbeherrschend. Die Kontinuität ist gewährleistet und es steht viel unterstützendes Material zur Verfügung.
• Aufgrund seines Marktanteils verfügt es über viele direkte und Drittanbieter-Integrationen. ZB Ultimate Addons für Elementor, das Elementor um weitere Funktionen erweitert (sogar zur kostenlosen Version).
• Es verfügt über einen Agenturplan, der es Ihnen ermöglicht, das Tool auf bis zu 1.000 Websites zu verwenden.

Nachteile von Elementor:

• Viele Benutzer beschweren sich darüber, dass Elementor Ihre Website bei komplexen Designs verlangsamen kann.
• Das Plugin generiert in der Vergangenheit Fehler, wenn es große Updates erhält.
• Wenn Sie noch nie einen Seitenersteller verwendet haben, ist die Lernkurve möglicherweise steil, da er sich völlig vom WordPress-Gutenberg-Editor unterscheidet.

Hauptmerkmale von Elementor:

• Über 100 Widgets und über 300 Vorlagen.
• Die Pro-Version enthält einen Theme-Builder, mit dem Sie das Erscheinungsbild Ihres gesamten Themes ändern können.
• Funktionen und Widgets zum Ändern des Designs Ihres Shops, wenn dieser mit WooCommerce erstellt wurde.

Beispiel einer Elementor-Website

Elementor verfügt über eine Seite, auf der Dutzende von Showcases und Fallstudien von Websites zusammengestellt werden, die sein Tool verwenden.

Eines der vielleicht interessantesten ist Hive, ein Projektmanagement-Tool, das zeigt, dass Elementor kein Plugin für Blogger oder kleine Unternehmen ist. Auch große Unternehmen können es nutzen.

Über Divi Builder

Divi ist der Name zugleich für das von Elegant Themes entwickelte Theme und Plugin für WordPress.

Das Unternehmen wurde 2008 gegründet, der Page Builder kam jedoch kurz vor Elementor im Jahr 2015 auf den Markt.

Obwohl es schon länger existiert, ist es weniger verbreitet als Elementor. Obwohl die Zahlen immer noch spektakulär sind (fast 1 Million Benutzer), ist das beeindruckend, wenn man bedenkt, dass es keine kostenlose Version gibt.

Vorteile von Divi:

• Leicht zu erlernen und mit dem Erstellen von Seiten zu beginnen.
• Logische Navigation und einfache Prozesse zum Hinzufügen und Anpassen von Blöcken
• Tolles Preis-Leistungs-Verhältnis. Die Lizenz umfasst neben dem Seitenersteller zwei Themes, ein Social-Media-Sharing-Plugin und ein E-Mail-Opt-in- und Lead-Generierungs-Plugin.
• Es bietet eine lebenslange Lizenz. Alle Lizenzen ermöglichen die Nutzung auf unbegrenzten Websites und sind daher eine großartige Lösung für Agenturen.
• Dank der Anpassungsoptionen können Sie fast jedes Design erstellen, das Sie sich vorstellen können. Dazu gehören Filter und Effekte, Animationen und Scrolleffekte, Hintergrundvideos, Hintergrundmasken und Muster.

Nachteile von Divi:

• Es fehlt eine kostenlose Version.
• Die Benutzeroberfläche kann manchmal komplex und überwältigend sein.
• Harte Inhaltsbindung. Wenn Sie das Plugin deaktivieren, bleiben nur die Shortcodes übrig.

Hauptmerkmale von Divi:

• Globale Elemente und Stile, damit Sie dasselbe Element gleichzeitig auf verschiedenen Seiten aktualisieren können.
• Über 200 Website-Elemente und 2.000 vorgefertigte Website-Layouts zur Auswahl.
• WooCommerce-Module geben Ihnen die volle Kontrolle über das Design Ihrer Produktseiten oder passen die Warenkorb- und Checkout-Seiten an Ihre Marke an.

Beispiel einer Divi-Website

Elegant Themes verfügt außerdem über einen Abschnitt, in dem Sie Dutzende nach Kategorien geordnete Websites sehen können. Dies ist praktisch, um Ideen für Ihre Website zu erhalten, wenn Sie deren Plugin verwenden.

Wenn Sie beispielsweise nach einem Design für den E-Commerce suchen, können Sie einen Filter verwenden.

Über Spectra

Spectra ist ein Plugin, das Teil der Brainstorm Force-Produktfamilie ist, einem Unternehmen, das auch das Astra-Theme, Ultimate Addons für Elementor, Ultimate Addons für Beaver Builder und WPBakery Page Builder-Plugins entwickelt hat.

Diese Plugins fügen den Seitenerstellern, für die sie entwickelt wurden, weitere Funktionen hinzu.

Obwohl Spectra mit seiner Veröffentlichung im Jahr 2022 das jüngste ist, steckt viel Geschichte dahinter.

Tatsächlich war dieses Plugin ursprünglich als Ultimate Addons for Gutenberg bekannt. Es wurde nach der Gutenberg-Version von WordPress benannt und umbenannt, als Gutenberg als WordPress-Blockeditor bekannt wurde.

Vorteile von Spectra:

• Auf Benutzerfreundlichkeit ausgelegt, mit logischer Navigation und einfachen Bedienelementen.
• Bietet eine Reihe nützlicher Blöcke zum Anpassen Ihrer WordPress-Website.
• Kostenlose Version, damit Sie kostenlos mit der visuellen Verbesserung Ihrer Website beginnen können (Pro-Version befindet sich in der Entwicklung).
• Sehr einfach zu beherrschen und für den durchschnittlichen WordPress-Benutzer sehr intuitiv.
• Sehr solides Unternehmen, das für die Entwicklung verantwortlich ist und dessen Kontinuität und perfekte Integration mit den übrigen Produkten des Unternehmens gewährleistet.

Nachteile von Spectra:

• Sie können keine zusätzlichen Blöcke über Plugins von Drittanbietern hinzufügen. Aber technisch gesehen funktioniert jedes andere Gutenberg-Plugin mit Spectra.
• Da ihm eine eigene Schnittstelle fehlt, müssen Sie es zusammen mit den übrigen Elementen und Blöcken Ihres WordPress-Editors verwenden.

Hauptmerkmale von Spectra:

• Funktioniert mit dem WordPress-Blockeditor, sodass kein zusätzlicher Editor erforderlich ist.
• Dutzende vorgefertigte Website-Vorlagen zum schnellen Erstellen von Seiten.
• Superschnelles, minimales externes Scripting und Dateiabhängigkeiten halten den Code sauber.

Beispiel einer Spectra-Website

Spectra verfügt noch nicht über eine Zusammenstellung vollständiger Websites. Wenn Sie Seitenbeispiele sehen möchten, die in jeder Art von Geschäft oder Situation verwendet werden können, werfen Sie einen Blick auf diese Starter-Vorlagen.

Starter-Vorlagen sind eine Reihe von Vorlagen, die Sie mit nur wenigen Klicks auf Ihre Website anwenden können, um in Sekundenschnelle eine voll funktionsfähige Website zu erstellen.

Elementor vs. Divi Builder vs. Spectra – Vollständiger Funktionsvergleich

Nachdem Sie nun die Teilnehmer dieses Vergleichs etwas besser kennen, werden wir nun die grundlegenden Merkmale jedes einzelnen von ihnen besprechen.

Worauf sollten Sie bei der Auswahl Ihres Seitenerstellers achten?

Nicht alle Funktionen haben in jeder Situation den gleichen Wert:

Vielleicht steht für Sie die Benutzerfreundlichkeit im Vordergrund und der Preis ist Ihnen nicht so wichtig. Oder vielleicht möchten Sie diese Tools mit Hunderten von Clients verwenden und eine Lizenzierung ist unerlässlich.

Am Ende dieses Vergleichs finden Sie außerdem eine kleine Zusammenfassung, in der wir Ihnen die beste Lösung für Ihre Situation empfehlen.

Dennoch empfehlen wir Ihnen, jeden Abschnitt oder zumindest die Punkte, die Ihnen am relevantesten erscheinen, sorgfältig zu lesen.

Schnittstelle und Benutzerfreundlichkeit

Ein Seitenersteller muss benutzerfreundlich sein, da die Wahrscheinlichkeit groß ist, dass Sie ihn am Ende ständig verwenden.

Kurz gesagt, diese Tools funktionieren ohne Code, indem sie Inhaltsblöcke per Drag & Drop in verschiedene Teile der Seite ziehen.

Dies wird als WYSIWYG (What You See Is What You Get) bezeichnet, da die Seite im Editor genauso aussieht wie in der endgültigen Version.

Weiter unten sehen Sie, welche Blöcke jedes Plugin bietet. Konzentrieren wir uns nun darauf, wie jedes Plugin damit funktioniert.

Elementor – Ein Standardansatz

Sobald Sie Elementor installiert haben, können Sie im WordPress-Administrationsbereich > Elementor > Einstellungen entscheiden, wie Sie es verwenden möchten.

Wenn Sie beispielsweise eine neue Seite erstellen, wird die Schaltfläche „Mit Elementor bearbeiten“ angezeigt, mit der Sie entscheiden können, ob Sie den Builder von Elementor starten möchten.

Wenn Sie dies tun, werden die Inhalte, die Sie zuvor im WordPress-Editor erstellt haben (sofern vorhanden), als einzelner Block geladen.

Sie können keine Blöcke zwischen den gerade importierten Inhalten hinzufügen (z. B. eine Schaltfläche zwischen dem Text und dem Foto). Sie können nur oberhalb oder unterhalb dieses Blocks neue Elemente hinzufügen.

In Elementor können Sie:

1. Erstellen Sie Abschnitte.
2. Diese Abschnitte können über Spaltenlayouts verfügen.
3. In den Abschnitten/Spalten werden die Widgets angezeigt, die Sie aus der Seitenleiste ziehen.

Hier ist zum Beispiel eine Grundstruktur mit:

• Ein Abschnitt mit einer Überschrift und einem Symbol darin.
• Ein weiterer Abschnitt mit 3 Spalten darin und jeweils einer Schaltfläche.

Die Mechanik ist also sehr einfach:

• Fügen Sie neue Abschnitte hinzu, indem Sie unten auf die Schaltfläche „ +“ klicken, und wählen Sie ein Spaltenlayout aus.
• Ziehen Sie ein beliebiges Widget in das Feld „ Widget hierher ziehen “, wodurch automatisch ein neuer Abschnitt mit dem Widget darin erstellt wird.

Anschließend können Sie diese Abschnitte neu positionieren, indem Sie sie auf der Seite ziehen.

Widgets können nur innerhalb desselben Abschnitts gezogen werden. Wenn Sie es in einen anderen Abschnitt verschieben möchten, klicken Sie mit der rechten Maustaste, kopieren Sie es und fügen Sie es an der neuen Position ein.

Die Verwendung des Rechtsklicks in Elementor macht die Sache viel einfacher, da sie sehr intuitiv ist, und das ist ein großer Pluspunkt.

Das Ändern der Abschnitte und der verschiedenen Widgets ist technisch einfach, aber aufgrund der Vielzahl der verfügbaren Änderungen ist es unmöglich, sie hier alle zu erklären.

Die Vorgehensweise ist aber immer die gleiche:

1. Wählen Sie das Widget oder den Abschnitt aus, den Sie ändern möchten.
2. Stellen Sie sicher, dass Sie es richtig ausgewählt haben, indem Sie sich den Namen in der Seitenleiste ansehen.
3. Navigieren Sie durch die verschiedenen Registerkarten für Inhalt, Stil und erweiterte Optionen, um die erforderlichen Änderungen vorzunehmen.

Die Optionen, die Sie dort finden, variieren stark, je nachdem, ob Sie einen Abschnitt oder ein Widget ausgewählt haben.

Sie ändern sich auch je nach ausgewähltem Widget-Typ.

Die Änderungen, die Sie möglicherweise an einer Schaltfläche vornehmen möchten (Größe, Farbe, Link), sind nicht dieselben wie an einem Widget, das eine Adresse in Google Maps anzeigt.

Unten in der Seitenleiste finden Sie einige Tools, die Ihnen die Arbeit erheblich erleichtern, zum Beispiel:

1. Ein Navigator, der Ihnen die Struktur Ihrer Seite visuell anzeigt.
2. Ein Verlauf, um die zuletzt vorgenommenen Änderungen anzuzeigen und alle Änderungen rückgängig zu machen.
3. Ein Responsive-Modus, um zu sehen, wie Ihre Inhalte auf verschiedenen Mobilgeräten aussehen würden.
4. Eine Option zum lokalen Speichern von Überarbeitungen vor der Live-Veröffentlichung oder zum Zurücksetzen auf einen früheren Zustand nach einer vorübergehenden Änderung (z. B. nach der Anpassung einer Seite für Black Friday-Angebote).

Sehr praktische Funktionen, die Ihnen die Arbeit mit diesem Seitenersteller erheblich erleichtern werden.

Divi – Etwas komplex und nicht intuitiv

Mit Divi können Sie auch definieren, welche Beitragstypen der Seitenersteller verfügbar sein soll, indem Sie im WordPress-Administrationsbereich > Plugin-Optionen > Beitragstyp-Integration nachsehen.

Beim Erstellen einer neuen Seite müssen Sie sich entscheiden, ob Sie den nativen WordPress-Editor oder Divi verwenden möchten.

Wenn Sie bereits Inhalte hatten, passiert mit Elementor das Gleiche wie zuvor.

Der Inhalt wird in einen Abschnitt geladen und Sie können darin keine Blöcke hinzufügen, sondern nur darüber oder darunter.

Sie können auch eine benutzerdefinierte Vorlage verwenden oder eine vorhandene Seite klonen.

Divi handhabt auch die Gestaltung der Seiten hierarchisch, allerdings sind in diesem Fall die Namen etwas anders.

• Mit der blauen + -Schaltfläche können Sie Abschnitte erstellen.
• Zeilen mit der grünen + -Schaltfläche (Zeilen sind diejenigen, die Spalten enthalten können).
• Und Sie können Module mit der grauen + -Schaltfläche hinzufügen.

Es ist komplexer, auf diese Weise zu arbeiten. Beispielsweise können Sie erst dann eine Liste mit allen verfügbaren Modulen sehen, wenn Sie auf „Hinzufügen“ klicken.

Wenn Sie also gerade erst anfangen, mit diesem Plugin zu arbeiten, werden Sie Schwierigkeiten haben, genau zu erkennen, was Sie damit machen können.

Außerdem wird durch die Auswahl jedes Moduls nicht automatisch die Optionsseitenleiste angezeigt.

Sie müssen auf das Zahnrad klicken, um die Anpassungsoptionen anzuzeigen (oder doppelklicken).

Diese Anpassungsoptionen sind denen, die Sie in Elementor gesehen haben, sehr ähnlich. Sie finden auch ähnliche Registerkarten für Inhalt, Layout und erweiterte Optionen.

Das modale Optionsfenster wird nicht automatisch geschlossen, wenn Sie darauf klicken, was den Arbeitsablauf etwas umständlicher macht.

Die Arbeit mit Divi ist im Allgemeinen umständlicher als die Arbeit mit Elementor.

Im Gegenzug verfügt es über mehrere Tools, mit denen Sie die Struktur Ihrer Inhalte auf sehr verständliche Weise erkennen können.

Beispielsweise wird die Wireframe-Ansicht über die Symbolleiste aktiviert, die Sie mit der zentralen violetten Schaltfläche bereitstellen müssen.

Es ermöglicht Ihnen, die Struktur der Seite schematisch zu sehen.

Die Rasteransicht hingegen zeigt etwas Ähnliches, jedoch sind alle Elemente sichtbar.

Die beiden Ansichten sind sehr praktisch, aber überwältigend, wenn man es nicht gewohnt ist, mit vielen sichtbaren Elementen zu arbeiten, oder wenn man eine sehr aufwändige Seite erstellt.

Hier finden Sie auch ähnliche Optionen wie die, die Sie gerade in Elementor gesehen haben:

1. Responsive-Modus-Layout für verschiedene Geräte.
2. Eine Geschichte der Veränderungen.
3. Ebenenansicht, die Ihnen hilft, die Struktur der Seite besser zu verstehen.

Spectra – Eine natürliche und intuitive Integration mit WordPress

Spectra funktioniert etwas anders als die beiden vorherigen Alternativen.

Sobald Sie es aus dem offiziellen WordPress-Repository heruntergeladen und installiert haben, müssen Sie es nicht mehr wie bei Elementor oder Divi von einem externen Layout-Editor laden.

Spectra lädt seine Blöcke (in den anderen Plugins als Widgets und Module bezeichnet) im nativen WordPress-Editor.

Dies erleichtert den Einstieg enorm.

Wenn Sie bereits wissen, wie Sie den WordPress-Blockeditor verwenden, wissen Sie bereits, wie Sie den Spectra-Editor verwenden.

1. Ziehen Sie die gewünschten Blöcke in den Editor.
2. Passen Sie sie über die rechte Seitenleiste an.

​​Hier finden Sie allerlei Möglichkeiten, zum Beispiel:

• Auf der Registerkarte „Allgemein“ können Sie Voreinstellungen des gerade hinzugefügten Blocks laden.
• Ändern Sie auf der Registerkarte „Stil“ die Farben für den „Normal“- und „Hover“-Status des Blocks.
• Blenden Sie auf der Registerkarte „Erweitert“ die Sperre auf bestimmten Geräten oder abhängig von anderen Bedingungen aus.

Mit Spectra können Sie auch eine Säulenstruktur erstellen, eine grundlegende Funktion, mit der Sie komplexere Designs erstellen können.

Dazu müssten Sie lediglich den Containerblock hinzufügen, der Ihnen die Auswahl dieser Option ermöglicht.

Sobald Sie fertig sind, können Sie die benötigten Blöcke einfach per Drag & Drop hinzufügen.

Das heißt, in Spectra verwenden Sie auch eine hierarchische Struktur: Container > Column > Block .

Spectra basiert auf dem WordPress-Editor, sodass Sie immer noch alle Dinge tun können, die Sie gesehen haben, ohne wie bei den vorherigen Plugins ein externes Tool laden zu müssen.

1. Aktivieren Sie den Listenmodus, um die Struktur der Seite, an der Sie arbeiten, besser zu verstehen.
2. Wechseln Sie zwischen verschiedenen Ansichten, um zu sehen, wie Ihr Design auf verschiedenen Geräten aussehen würde.
3. Greifen Sie auf Revisionen zu, um zu einer früheren Version zurückzukehren.

Wenn Sie einen Überblick über Spectra sehen möchten, um den Rest des Vergleichs besser zu verstehen, schauen Sie sich das Video unten an!

Widgets, Module und Blöcke

Die wahre Leistungsfähigkeit von Page Builder-Plugins wird normalerweise durch die Blöcke definiert, die sie verwenden können. Das analysieren wir in diesem Abschnitt.

Jeder Seitenersteller benennt die Teile, die zur Gestaltung der endgültigen Seite verwendet werden, anders:

• Elementor – Widgets
• Divi – Module
• Spektren – Blöcke

Sie beziehen sich jedoch alle auf dasselbe: das Grundelement, das Sie in die verschiedenen Abschnitte oder Container einbetten, um dem endgültigen Design zu entsprechen.

Elementor – 30+ Basic-, 60+ Pro-Widgets und optionale Add-ons

Mit der kostenlosen Version von Elementor können Sie mehr als 30 Kern-Widgets verwenden.

Wir können sie nicht alle erklären, da der Vergleich sehr umfangreich wäre.

Glücklicherweise sind die meisten davon selbsterklärend und ermöglichen das Hinzufügen von Funktionen, die WordPress nicht standardmäßig enthält, wie zum Beispiel den Toggle-Block.

Wenn Sie für den Elementor Pro-Plan bezahlen, haben Sie außerdem Zugriff auf weitere Widgets, darunter Testimonial-Karussells, Countdowns, Preistabellen und PayPal- oder Stripe-Zahlungsschaltflächen.

Darüber hinaus stehen Ihnen auch Widgets zu Ihrem Thema zur Verfügung. Sie können beispielsweise ein Suchfeld, ein Autorenfeld oder ein ausgewähltes Bild hinzufügen.

Die interessantesten Blöcke für den E-Commerce werden die Widgets für WooCommerce sein. Sie ermöglichen es Ihnen, aus beliebigem Grund an einer beliebigen Stelle auf Ihrer Seite eine Schaltfläche zu platzieren.

Auf diese Weise sind Sie nicht auf das Standard-WooCommerce-Design beschränkt.

Diese letzten drei Gruppen von Widgets sind nur im Elementor Pro-Plan verfügbar.

Wenn Sie jedoch ein bestimmtes Element vermissen, können Sie den Elementor-Add-On-Markt von Drittanbietern ausprobieren.

Diese Add-ons funktionieren sogar mit der kostenlosen Version von Elementor, Sie müssen sie jedoch separat erwerben.

Ultimate Addons für Elementor enthält beispielsweise die Erweiterungen Party Propz, Particle Background und sogar ein Musik-Widget. Diese werden sich als nützlich erweisen, um Ihre Website für Halloween anzupassen oder Ihre Website für Weihnachten neu zu gestalten.

Divi – Über 200 Elemente und ein Marktplatz

Die Divi-Bibliothek ist wirklich riesig, da sie über 200 zu installierende Elemente umfasst.

Die meisten davon sind in der Standard-Plugin-Lizenz enthalten.

Es gibt auch spezielle Module für WooCommerce.

Es gibt auch kostenlose Module, die von der Community entwickelt wurden.

Als ob das nicht genug wäre, finden Sie auch weitere Module auf dem Divi-Marktplatz.

Spectra – 28 Blöcke und 3 Erweiterungen kostenlos. Zusätzliche Blöcke und Funktionen in Spectra Pro

Spectra bietet 28 Basisblöcke und 3 Erweiterungen.

Insgesamt 31 Artikel, womit diese Alternative der kostenlosen Version von Elementor ebenbürtig ist.

Falls Sie sich fragen: Die drei Erweiterungen sind:

• Mit der Mauerwerksgalerie können Sie den einfachen Galerieblock umwandeln.
• Mithilfe der Anzeigebedingungen können Sie Blöcke basierend auf dem Benutzerstatus (angemeldet oder nicht), der Benutzerrolle, dem Browser und dem Betriebssystem ein- oder ausblenden.
• Reaktionsbedingungen: um Blöcke auf bestimmten Geräten auszublenden (z. B. der Einfachheit halber kein Foto auf einem Smartphone anzuzeigen).

Spectra bietet ein großes Preis-Leistungs-Verhältnis, wenn man bedenkt, dass es sich um etwas handelt, das kostenlos ist.

Das Erstellen besserer Inhalte mit 30 neuen Blöcken aus dem WordPress-Editor macht Spectra lohnenswert, wenn Sie die Qualität Ihrer Website verbessern möchten, ohne Geld oder Zeit in die Erlernung der Verwendung eines neuen Tools zu investieren.

Die Pro-Version bringt mehr Blöcke und Funktionen:

• Melden Sie sich an und registrieren Sie Formularblöcke, einschließlich sozialer Formulare für Google und Facebook.
• Instagram-Block, um die neuesten Instagram-Beiträge direkt auf Ihrer Website anzuzeigen.
• Schieberegler.
• Filter für den Bildergalerieblock.
• Übergangseffekte.
• Countdown-Blöcke, damit Sie Timer erstellen können, sogar immergrüne.

Und viele weitere Funktionen, die Spectra Pro zu einem harten Konkurrenten zum kostenpflichtigen Plan von Elementor und Divi machen.

Vorlagen und Wireframes

Jetzt kennen Sie die verschiedenen Werkzeuge und Zutaten, die jedes Werkzeug bietet.

Wenn Sie jedoch einen Seitenersteller verwenden, liegt das möglicherweise daran, dass Ihre Designfähigkeiten nicht die besten sind und Sie zusätzliche Hilfe benötigen, um eine großartige Website zu erstellen.

Hier kommen vordefinierte Blöcke ins Spiel.

Vordefinierte Blöcke helfen Ihnen, besser zu entwerfen und schneller zu arbeiten.

Es ist einfacher, eine von einem Experten entworfene Vorlage zu verwenden und diese zu ändern, als sie von Grund auf neu zu erstellen.

Elementor – 30+ Basic- und 300+ Pro-Vorlagen

In Elementor können Sie neue Widgets hinzufügen, indem Sie auf die Schaltfläche „+“ klicken. Es ist aber auch möglich, Vorlagen hinzuzufügen, indem Sie auf das Ordnersymbol klicken.

Dadurch wird ein modales Fenster geöffnet, in dem Sie eine große Auswahl vordefinierter Blöcke durchsuchen können, die übersichtlich nach Kategorien geordnet sind.

Wenn Sie einen Call-to-Action erstellen möchten, müssen Sie kein Feld, keinen Text, keine Überschrift oder Schaltfläche hinzufügen.

Sie können einen Call-to-Action-Block hinzufügen, der diese Elemente bereits enthält, und ihn an Ihr Design anpassen.

Neben vordefinierten Blöcken haben Sie auch die Möglichkeit, eine komplette Webseitenvorlage zu verwenden.

Dies beschleunigt Ihre Arbeit, wenn Sie eine Seite erstellen und nicht nur einen Artikel schöner machen.

Obwohl Elementor Hunderte von Block- und Seitenvorlagen bietet, bedenken Sie, dass die meisten davon nur im Pro-Plan verfügbar sind.

Divi – Fast 300 Layout-Pakete, aber keine Wireframes oder Stile

Wenn Sie eine neue Seite oder einen neuen Artikel erstellen und mit Divi bearbeiten, haben Sie die Möglichkeit, ein vorgefertigtes Layout auszuwählen.

Diese Layouts sind in etwa 300 Paketen organisiert. Jedes Paket enthält mehrere Layouts (z. B. eine Startseite sowie eine Kontaktseite und eine Blogseite).

Insgesamt stehen Ihnen also mehr als 2.000 vordefinierte Seiten zur Verfügung.

Allerdings verfügt Divi nicht über Wireframes. Für die über 200 Blöcke werden keine unterschiedlichen Stile angeboten. Sie müssen die einfache Version hinzufügen (z. B. den Call-to-Action-Block) und sie manuell ändern.

Spectra – Voreinstellungen und Hunderte von Vorlagenkits

Wenn Sie mit Spectra einen Block hinzufügen, finden Sie in der Seitenleiste einen Abschnitt mit Voreinstellungen (abhängig vom verwendeten Block).

Dadurch können Sie den Stil schnell ändern, ohne ihn manuell ändern zu müssen. Eine viel effizientere Art zu arbeiten.

Im oberen Bereich des Editors finden Sie außerdem einen Button zum Starten der Template-Kits.

Dort finden Sie auf der Registerkarte „Vorlagen-Kits“ Dutzende vollständiger Website-Designs, die mit ein paar Klicks verwendet werden können.

Fast 300 vorgefertigte Blockmuster sind nach Kategorien geordnet, um Ihrer Seite schnell professionellere Blöcke hinzuzufügen (stellen Sie sich diese als viel fortgeschrittenere Voreinstellungen vor).

Und fast 60 Wireframes, ebenfalls nach Kategorien geordnet, die Ihnen helfen, schnell zu arbeiten und professionellere Ergebnisse zu erzielen.

• Profi-Tipp : Mit Spectra können Sie den Stil auch aus einem Block kopieren und in einen anderen einfügen. Eine tolle Funktion, die Ihre Arbeit beschleunigen wird!

Integrationen

Oft möchten Sie nicht nur eine schönere Website erstellen, sondern auch, dass sie mit Tools von Drittanbietern funktioniert, die Sie bereits in Ihrem täglichen Leben verwenden.

Und hier spielen Integrationen eine wichtige Rolle.

Elementor – Wesentliche und am häufigsten verwendete Integrationen

Elementor bietet eine Vielzahl von Integrationen.

• Marketingtools wie Mailchimp, ActiveCampaign, Zapier oder ConvertKit, damit Sie E-Mail-Marketingplattformen mit Ihren Formularen verbinden können.
• WordPress-Plugins wie WooCommerce, LearnDash, TutorLMS oder MemberPress zum Schutz von Inhalten, die Sie mit Elementor hinzufügen.
• Soziale Netzwerke wie Facebook, Discord oder YouTube, um Inhalte aus diesen Netzwerken hinzuzufügen.
• Und andere Integrationen wie Font Awesome oder ReCaptcha.

Divi – Integration mit fortschrittlicheren Tools

Divi verfügt auch über eine Vielzahl nativer Integrationen.

• Hervorhebungstools zum Erstellen von Trichtern wie CartFlows, WooFunnels oder WPFunnels.
• E-Mail-Marketing-Tools wie Aweber, Hubspot, Infusionsoft, Ontraport und SalesForce.
• Viele Social-Sharing-Buttons, obwohl diese über das Monarch-Plugin integriert sind (in der Divi-Lizenz enthalten). Benutzer können die Inhalte beispielsweise in Evernote speichern und auf Hacker News teilen.

Wie Sie sehen, sind dies etwas erweiterte Optionen, als der durchschnittliche Unternehmer nutzen würde, da nicht jeder eine gemeinsam nutzbare Website wie Hacker News hat.

Auf dem Marktplatz finden Sie auch einige zusätzliche Integrationen. Dies sind die gleichen wie die zusätzlichen Module, die Sie installieren können.

Spectra – Alles, was WordPress Ihnen bieten kann

Einen großen Vorteil bietet die Tatsache, dass es sich bei Spectra um einen Seitenersteller auf Basis des WordPress-Editors handelt.

Jedes Plugin, das sich in den WordPress-Blockeditor integrieren lässt, ist dann garantiert mit Spectra kompatibel, da beide auf der gleichen Grundlage funktionieren.

Möchten Sie, dass das Kunden-Dashboard von SureCart mit einem schöneren Hintergrund besser aussieht? Möchten Sie weitere Elemente hinzufügen, beispielsweise ein geheimes Angebot, das nur Personen angezeigt wird, die nicht für einen bestimmten SureMembers-Kurs registriert sind?

Das können Sie ganz einfach machen.

Dies geschieht bei jedem Plugin, das Sie in WordPress installiert haben.

Da die meisten Plugins zusätzliche Blöcke für den Blockeditor anbieten, können Sie diese problemlos mit Spectra verwenden.

SEO und Leistung

Wenn Sie über Seitenersteller gelesen haben, sind Sie sich wahrscheinlich bereits der Geschwindigkeitseinbußen bewusst, die sie den Seiten, auf denen sie verwendet werden, hinzufügen können.

Sie möchten einen schönen Shop mit hoher Conversion-Rate haben, aber auch schnell genug sein, um bei Google gut zu ranken und den hohen Erwartungen der Nutzer gerecht zu werden.

Sollten Sie also die Verwendung eines Seitenerstellers vermeiden?

Von den drei hier analysierten Plugins ist Spectra das leichteste und wiegt nur etwa 15 MB, verglichen mit 50 MB für Divi und 25 MB für Elementor (das Gewicht der kostenlosen Version).

Obwohl Gewicht nicht gleichbedeutend mit Leistung ist, kann es ein guter Hinweis auf die technische Komplexität eines Plugins oder Themes sein.

Astra zum Beispiel, das ebenfalls von Brainstorm Force entwickelte Theme wie Spectra, wiegt weniger als 50 KB.

Die Durchführung von Leistungstests ist sehr komplex, da viele Faktoren berücksichtigt werden müssen, die die Ergebnisse beeinflussen können.

Unsere Methode bestand darin, Geschwindigkeitstests an den Beispielvorlagen durchzuführen, die von den Seitenerstellern selbst bereitgestellt wurden.

Elementor – Core Web Vitals auf Mobilgeräten fehlgeschlagen (45 %), auf dem Desktop bestanden (80 %)

Das Ausführen dieses Food-Blog-Website-Kits über Google Pagespeed zeigte uns das folgende Ergebnis.

Divi – Core Web Vitals auf Mobilgeräten nicht bestanden (60 %), auf dem Desktop bestanden (89 %)

Beim Ausführen dieser Restaurantseiten-Demo über Google Pagespeed haben wir das folgende Ergebnis erhalten.

Spectra – Core Web Vitals auf Mobilgeräten bestanden (79 %), auf Desktops bestanden (95 %)

Das Ausführen dieser Beispiel-Backwebsite über Google Pagespeed zeigte uns die folgenden Ergebnisse.

Auch hier bitten wir Sie, diese Daten mit Vorsicht zu genießen.

Wir empfehlen Ihnen, die Bibliotheksvorlagen von Elementor, Divi und Spectra zu besuchen, Ihre eigenen Tests durchzuführen und Ihre eigenen Schlussfolgerungen zu ziehen.

Ökosystem und andere Funktionen

Zu diesen Seitenerstellern gibt es einige zusätzliche Punkte zu erwähnen.

Sie sind möglicherweise weniger relevant als die oben genannten, aber wenn Sie zwischen zwei Optionen hin- und hergerissen sind, hilft Ihnen dies vielleicht bei der Entscheidung.

Elementor – Nur ein Seitenersteller

Elementor wurde als Seitenersteller geboren und ist es auch geblieben.

Zwar bietet das Unternehmen auch andere Produkte an, etwa einen Website-Builder in der Cloud, aber das gesamte Umfeld der Produkte des Unternehmens dreht sich um dasselbe Konzept.

Elementor verfügt außerdem über einen Theme-Builder, mit dem Sie neben den Seiten auch andere Teile Ihres Themes ändern können.

Mit kostenpflichtigen Plänen können Sie auch Popups zum Erfassen von E-Mails erstellen oder an der Erstellung eines Designs mitwirken, indem Sie den Seiten selbst Live-Notizen hinzufügen.

Divi – Ein paar zusätzliche Tools

Elegant Themes, die Muttergesellschaft, die Divi Builder entwickelt hat, bietet auch einige zusätzliche Tools an. Sie alle sind in der einzigartigen Lizenz enthalten.

Zusätzlich zu einigen zusätzlichen Themes (auch Divi und Hello genannt) können Sie Folgendes verwenden:

• Bloom, um bessere E-Mail-Erfassungsformulare zu erstellen.
• Monarch, um bessere Schaltflächen zum Teilen in sozialen Netzwerken zu erstellen.

Divi verfügt außerdem über eine Cloud-Speicherfunktion namens Divi Cloud, mit der Sie Ihre Layouts speichern und von überall darauf zugreifen können.

Mit dem Kauf der Lizenz können Sie bis zu 50 Elemente speichern. Wenn Sie unbegrenzt viele Elemente speichern möchten, müssen Sie ein kostenpflichtiges Abonnement abschließen, das 9 US-Dollar pro Monat kostet.

Spectra – Ein sehr vollständiges Ökosystem

Spectra als Plugin bietet eigentlich nichts Besonderes.

Aber denken Sie daran, dass dies das eigenständige Produkt von Brainstorm Force ist. Das Unternehmen konzentriert sich zu 100 % auf die Entwicklung benutzerfreundlicher, erschwinglicher und zuverlässiger WordPress-Lösungen.

So wie Divi Builder ein Theme enthält, enthält Spectra auch das Astra-Theme (tatsächlich können Sie beide Produkte in einem Paket erhalten, wie Sie im Abschnitt „Preise“ sehen werden).

Der Einfluss von Brainstorm Force reicht in alle Richtungen:

• Möchten Sie professionellere Vorlagen? Sie finden sie als Starter-Vorlagen.
• Möchten Sie die SEO Ihres Blogs verbessern? Verwenden Sie das WP-Schema.
• Zeigen Sie Ihre Arbeit professionell? WPPortfolio zu Ihren Diensten.
• Besucher in Leads umwandeln? Sie können es mit ConvertPro tun.
• Besser mit den Kunden Ihrer Agentur kommunizieren, um deren Designs zu optimieren? Projekt Huddle zur Rettung.
• Erstellen Sie einen professionellen Verkaufstrichter, um Ihren Umsatz zu steigern? CartFlows ist Ihre Lösung.

Mit SureCart (einem kostenlosen Plugin) können Sie sogar Ihren eigenen Online-Shop erstellen, sodass Sie nicht auf WooCommerce angewiesen sind. Oder erstellen Sie mit SureMembers eine Online-Mitgliederwebsite.

Wie Sie sehen, wird eine ganze Reihe von Tools von derselben Firma entwickelt.

Da sie alle auf der gleichen Philosophie der Einfachheit basieren, wird es Ihnen sehr leicht fallen, neue Tools zu nutzen, wenn Sie sie in Ihre digitale Strategie integrieren müssen.

Preisgestaltung

Der Preis ist kein kritischer Punkt bei der Auswahl eines Seitenerstellers, da diese normalerweise nicht übermäßig teuer sind.

• * Spectra Pro wird als eigenständiges Produkt erhältlich sein, was zu einem deutlich niedrigeren Preis führt.
• * Der Lifetime-Plan des Astra Growth Bundle beinhaltet das Astra Pro-Theme, viele andere Plugins, Zugang zur Skilljet Academy und alle zukünftigen Produktveröffentlichungen. Deshalb sieht es im Vergleich zu Divi teurer aus.

Elementor – Freemium-Modell

Elementor bietet einen 100 % kostenlosen Plan, den Sie auf so vielen Websites nutzen können, wie Sie möchten.

Bedenken Sie jedoch, dass dieser Plan nur 30 Widgets umfasst.

Wenn Sie mehr benötigen, müssen Sie für den Pro-Plan bezahlen, der für eine einzelne Website 59 US-Dollar pro Jahr kostet.

Alle kostenpflichtigen Pläne verfügen über dieselben Funktionen. Der einzige Unterschied besteht in der Anzahl der möglichen Installationen:

• Es gibt einen etwas versteckten Plan, der es Ihnen ermöglicht, es für 99 $/Jahr auf bis zu 3 Websites zu nutzen.
• Bis zu 25 Websites für 199 $/Jahr.
• Bis zu 1.000 Websites für 399 $/Jahr.

Divi – Nur ein kostenpflichtiger Plan

Divi hat keinen kostenlosen Plan und nur eine einzige Lizenz:

• Für 89 $/Jahr.
• Für eine einmalige Zahlung von 249 $ (wenn Sie Divi länger als 3 Jahre nutzen möchten, lohnt es sich).

Beide Lizenzen können auf unbegrenzten Seiten genutzt werden und beinhalten auch die Plugins und Themes.

Spectra – Kostenlose Pro-Version in Kürze erhältlich

Das grundlegende Spectra-Plugin und seine über 30 Blöcke sind völlig kostenlos.

Es gibt eine Pro-Version in der Entwicklung, allerdings wissen wir derzeit nicht, wie viel sie kosten wird und was sie enthalten wird.

Was wir wissen ist, dass es zumindest im Growth Bundle von Astra enthalten sein wird, das eine Handvoll zusätzlicher Tools sowie unbegrenzte Website-Nutzung bietet.

Spectra Pro kann auch unabhängig erworben werden.

Urteil: Welcher Page Builder ist der Beste für Sie?

Wenn Sie nach all dem Vergleich immer noch nicht wissen, welches Plugin für Sie am besten geeignet ist, finden Sie hier eine kurze Zusammenfassung.

Elementor kann für WooCommerce-Benutzer und Vermarkter großartig sein

Elementor ist ein Tool, das Ihnen dabei hilft, besser zu entwerfen, und das sich stark auf Konvertierungen konzentriert.

Es verfügt über Countdowns, Testimonial-Karussells, Stripe- und PayPal-Buttons und viele Blöcke für WooCommerce.

Zusammen mit der Tatsache, dass es außerdem über einen Popup-Builder, einen Landing-Page-Builder und einen kompletten Theme-Builder verfügt, ist es die ideale Lösung für diejenigen, die eine Website suchen, auf der sie alles im Detail steuern können.

Wenn Sie einen großen WooCommerce-Shop haben oder Online-Shops auf dieser Plattform entwerfen möchten, könnte Elementor Ihre beste Wahl sein.

Divi ist gut für Designagenturen

Divi verfügt über alle Zutaten, die es braucht, um das perfekte Werkzeug für eine kleine oder große Designagentur zu sein.

• Dank der Einzellizenz können Sie es auf unbegrenzten Websites verwenden, was den ROI Ihrer Dienste erhöht.
• Es bietet viele Optionen, um jedes gewünschte Design zu erstellen.
• Es verfügt über Tools wie Divi Cloud (um Ihre eigenen Designs von überall aus zu speichern und darauf zuzugreifen) oder „Client Hand Off“-Funktionen.

Spectra ist nützlich für Blogger, kleine Unternehmen und E-Commerce

Bei Spectra dreht sich alles um Einfachheit und Geschwindigkeit. Es ist nicht nur der am einfachsten zu verwendende Seitenersteller, sondern ermöglicht Ihnen auch das Kopieren und Einfügen von Stilen, um schneller zu arbeiten.

Dies macht es zu einer idealen Lösung für Blogger, die ihren Inhalten schnell und einfach ein professionelleres Aussehen verleihen möchten.

Aber das ist nicht ihr einziger Zweck.

Dank seiner WooCommerce-Blöcke und seiner vordefinierten Vorlagen können Sie damit auch das optische Erscheinungsbild Ihres Unternehmens oder Online-Shops verbessern.

Dank der Hunderten von Vorlagen, Wireframes und Mustern können Sie damit sogar Seiten für Drittunternehmen sehr effizient entwerfen.

Einpacken

Wie Sie sehen, machen Elementor, Divi und Spectra sehr ähnliche Dinge auf unterschiedliche Weise. Es gibt jeweils Vor- und Nachteile und bestimmte Stärken und Schwächen.

Ehrlich gesagt werden Sie es nicht bereuen, wenn Sie sich für einen dieser Seitenersteller entscheiden.

Alles in allem glauben wir jedoch, dass unser eigenes Spectra das größte Potenzial bietet.

Das Wichtigste bei der Auswahl eines Seitenerstellers ist, dass Sie sich damit wohl fühlen. Andernfalls werden Sie die Verwendung eher meiden.

Und hier glänzt Spectra wirklich, da Sie keinen externen Editor verwenden müssen, da es vollständig in den WordPress-Blockeditor integriert ist.

Abgesehen davon, dass es schnell und einfach zu bedienen ist:

• Sie können kostenlos und ohne Risiko damit arbeiten.
• Eine funktionsreichere Version ist in Vorbereitung, wenn Sie zusätzliche Blöcke oder Funktionen benötigen.
• Es ist Teil eines großen Ökosystems, das Ihnen beim Wachstum Ihres Unternehmens hilft.

Haben Sie sich bereits entschieden, welchen Page Builder Sie verwenden möchten? Welche weiteren Vergleiche würden Sie als Nächstes gerne sehen?

Lass es uns unten in den Kommentaren wissen!