Advertisement
  1. Web Design
  2. Elementor

Divi vs. Elementor: WordPress-Page-Builder im Vergleich

Scroll to top
Read Time: 6 min

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Lassen Sie uns über die Vor- und Nachteile der Verwendung der Divi vs. Elementor WordPress-Page-Builder sprechen. Divi und Elementor sind zwei der beliebtesten Page-Builder-Optionen und wenn Sie gerade erst mit dieser Art von Werkzeug beginnen, fragen Sie sich wahrscheinlich, welches für Sie am besten ist.

Wir werden uns die Unterschiede zwischen den beiden sowie die Ähnlichkeiten zwischen ihnen ansehen, und hoffentlich werden Sie am Ende in der Lage sein zu entscheiden, welcher für Sie am besten geeignet ist.

Divi oder Elementor?

Sehen Sie sich dieses Video für eine noch detailliertere Analyse, welche WordPress-Seite Builder der Richtige für Sie ist an. Folgen Sie mit uns auf unserem Envato Tuts+ YouTube-Kanal:

Wie wir die beiden vergleichen werden

Wir werden 4 Kategorien verwenden, um diese beiden WordPress-Page-Builder zu vergleichen:

  1. Benutzeroberfläche und User Experience (Benutzererfahrung)
  2. Module
  3. Vorgefertigte Templates
  4. Preis

Ganz am Ende gebe ich Ihnen auch meine persönliche Empfehlung. Schauen wir uns also Divi vs. Elementor an!

1. Benutzeroberfläche und Benutzererfahrung

Sowohl Divi als auch Elementor sind visuelle Drag-and-Drop-Tools, was sie wirklich einfach zu bedienen macht. Beginnen wir damit, eine Seite mit Elementor zu öffnen. Hier ist, was wir sofort sehen; eine Option zum Bearbeiten der Seite mit Elementor:

edit the page with Elementoredit the page with Elementoredit the page with Elementor

Dadurch wird eine Seitenleiste mit allen Elementor-Optionen ausgelöst. Um der Seite ein Element hinzuzufügen, suchen Sie in der Seitenleiste, was Sie suchen, und ziehen Sie es wie folgt in die Position:

drag headingdrag headingdrag heading
Ziehen eines Überschriftenelements in Position

In diesem Fall können wir direkt in das Überschriftenelement auf der Seite eingeben, oder wir können alle Eigenschaften ändern, die wir in der Seitenleiste mögen. Dies gilt auf verschiedene Weise für alle Elemente.

In Divi werden Sie auf der Seite aufgefordert, sie auf ähnliche Weise zu bearbeiten:

edit page in Diviedit page in Diviedit page in Divi

Wird das geklickt, betreten wir den Editor. An dieser Stelle ist es ein wenig anders als Elementor: Um ein Element hinzuzufügen, klicken wir auf das Plus-Symbol wie folgt:

add element diviadd element diviadd element divi

Dadurch wird dann ein Popup-Fenster mit allen verfügbaren Modulen geöffnet:

Divi modulesDivi modulesDivi modules

Wählen Sie das Modul, das Sie suchen, klicken Sie darauf. Das öffnet ein weiteres Popup mit allen verschiedenen Optionen und Eigenschaften. Dieses spezielle Popup ist schwebend, aber Sie können auf die Schaltfläche Nach links fangen klicken, um es auf der linken Seite des Bildschirms anzudocken, ähnlich wie Elementor.

Nachdem Sie Ihrer Seite ein Modul/Element hinzugefügt haben, müssen Sie, um es erneut zu bearbeiten, den Mauszeiger darüber bewegen und die Schaltfläche Einstellungen, das "Getriebesymbol", klicken.

User Experience

In Bezug auf die Gesamterfahrung scheint der Seitenbauer von Divi meiner Meinung nach etwas intuitiver und einfacher zu bedienen. Alle Module können schnell bearbeitet, gezogen und verschoben werden und haben viele Optionen leicht zur Hand.

Divis Farbcodierung macht die Dinge auch sehr klar; Die Abschnitte, Zeilen und Module verfügen alle über farbcodierte Steuerelemente und Rahmen, sodass Sie leicht erkennen können, wo Sie sich im Layout befinden. Elementor fehlt dieser visuelle Hinweis, was eine Schande ist, denke ich.

Divi bietet auch eine wirklich einfache Möglichkeit, das Padding und den Margin auf Teilen der Seite zu ändern. Zeigen Sie mit der Maus auf einen Abschnitt, eine Zeile oder ein Element, und Margin und Padding werden hervorgehoben. Ziehen Sie den markierten Bereich, um seine Größe zu ändern, und das ist alles, was es gibt:

Padding in DiviPadding in DiviPadding in Divi
Padding in Divi

Ebenso können Sie die minimale Höhe des Moduls, Abschnitts usw. ändern, indem Sie den Rahmen ziehen.

Dies ist auch in Elementor möglich, muss aber im Einstellungsfenster von dem, was Sie bearbeiten, durchgeführt werden.

2. Module (oder Elemente)

Hier ist die Sache: Elementor hat etwas mehr Module als Divi, auch in der kostenlosen Version. Wir werden die Preisgestaltung gleich besprechen, aber Elementor Pro hat noch mehr Elemente zur Auswahl.

Darüber hinaus erhalten Sie durch die Installation des Essential Addons for Elementor Plugins Zugriff auf noch mehr freie Elemente.

Essential Addons for Elementor pluginEssential Addons for Elementor pluginEssential Addons for Elementor plugin

Plugins zur Erweiterung der Anzahl der Module sind auch für Divi verfügbar, aber nicht so viele.

supreme modules litesupreme modules litesupreme modules lite
Supreme Modules Lite

Wenn wir die beiden Page-Builder aus Modulsicht vergleichen würden, würde ich sagen, Elementor gewinnt diese Runde.

3. Vorgefertigte Page-Builder-Vorlagen

Vorgefertigte Seitenvorlagen sind ein großer Zeitgewinn beim Entwerfen einer Website. Derzeit enthält Elementor rund 40 kostenlose Vorlagen, doppelt soviele in der Pro-Version.

Um auf die Vorlagen zuzugreifen, bearbeiten Sie eine Seite in WordPress und klicken Sie dann auf das Symbol Vorlage hinzufügen:

To access the templates edit a page in WordPress then hit the Add Template iconTo access the templates edit a page in WordPress then hit the Add Template iconTo access the templates edit a page in WordPress then hit the Add Template icon

Sie erhalten ein Popup mit allen verfügbaren Vorlagen, und es werden einige mit PRO markiert, die nur mit der kostenpflichtigen Version von Elementor verfügbar sind. Erfahren Sie mehr über diesen Prozess mit den folgenden Tutorials:

Divi hingegen hat rund 170 Layout Packs im Angebot (zum Zeitpunkt des Schreibens) und jeden Monat werden das mehr.

Diese Layout Packs (mehr als nur Vorlagen) sind ein wenig anders, um zu sehen, was ich damit meine, bearbeiten Sie eine Seite und wählen Sie die Option Wählen Sie ein vorgefertigtes Layout aus.

Choose a Premade LayoutChoose a Premade LayoutChoose a Premade Layout

Wie Sie anhand der angebotenen Paketen sehen werden, besteht ein Layout-Paket aus mehreren Seitendesigns, nicht nur aus einem. Werfen Sie zum Beispiel einen Blick auf dieses Restaurant-Layout-Paket. Sie sehen, dass es mehrere Seiten und eine Reihe von Layoutoptionen umfasst.

Take a look at this restaurant layout packTake a look at this restaurant layout packTake a look at this restaurant layout pack

Dies ist eine große Verbesserung gegenüber den einfachen Vorlagen, die mit Elementor verfügbar sind, obwohl Elementor etwas namens Template Kits hat, die in der Pro-Version verfügbar sind.

Ein weiterer großer Vorteil bei der Verwendung von Elementor ist die Verwendung von Blöcken.

Another big advantage to using Elementor is its use of BlocksAnother big advantage to using Elementor is its use of BlocksAnother big advantage to using Elementor is its use of Blocks

Dies sind sehr einfache, sehr kleine, Blöcke von Elementen. Zum Beispiel ein Heldenbereich oder ein Kontaktformular, ein Pull-Zitat, und sie sind alle editierbar, sobald Sie sie in Ihr Layout eingefügt haben.

A/B-Testing

Divi bietet einen weiteren Layout-Bonus, und das ist A/B-Tests. Sie können zwei Layouts für Ihre Seite auswählen, sie beide auf verschiedene Varianten anwenden und die Effektivität jedes einzelnen Seiten testen.

Also, wenn es um vorgefertigte Vorlagen geht, glaube ich, dass Divi das bessere Angebot hat, vor allem wegen der Layout-Packs, die genial sind.

4. Preise und Lizenzierung

Nun zu den Preisen (denken Sie daran, dass sich die Preise ändern können), und hier könnte die Wahl zwischen den beiden für viele Menschen sehr klar werden.

Beginnend mit Elementor, deckten wir die kostenlose Version bereits, und die Pro Version kostet Sie 49 USD, 99 USD oder 199 USD, abhängig von der Anzahl der Website-Lizenzen, die Sie wollen. Bei 199 USD pro Jahr sollten 1.000 Websites abgedeckt sein, wenn Sie für Kunden arbeiten. Auch hier ist die kostenlose Version ein großer Bonus.

Divi hingegen hat keine kostenlose Version. Die Preise beginnen bei 89 USD pro Jahr für eine voll ausgestattete Lizenz oder 249 USD gewähren Ihnen lebenslangen Zugriff. Also, auch wenn Sie immer etwas bezahlen müssen, würde ich persönlich sagen, dass die beiden Preisstufen, die für Divi angeboten werden, ein ausgezeichnetes Preis-Leistungs-Verhältnis sind.

Fazit: Divi vs. Elementor

Welche der beiden Page-Builder würden Sie also empfehlen? Ich würde sagen, dass, wenn Sie gerade erst anfangen und mehr über die Verwendung von Page-Builder lernen möchten, wählen Sie Elementor. Seine kostenlose Version bedeutet, dass Sie keine Zeit investieren müssen und gleich loslegen können.

Wenn Sie planen, die Dinge ernster zu nehmen und einen Page-Builder langfristig zu verwenden, würde ich sagen, dass Divi ein besseres Preis-Leistungs-Verhältnis und eine umfangreichere Auswahl an Funktionen bietet.

Das ist jedoch meine persönliche Meinung, also denken Sie daran, dass es sich immer lohnt, selbst einen Blick auf die Dinge zu werfen. Und wenn Sie mehr Details benötigen, werfen Sie einen Blick auf das Video oben auf der Seite.

Vielen Dank für das Lesen, und lassen Sie es uns in den Kommentaren wissen, was Ihr bevorzugter Page-Builder für WordPress ist!

Nützliche Ressourcen

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.