Beaver Builder vs Elementor - Ein ultimativer Leitfaden und Vergleich (2021)

Beaver builder vs Elementor

Welches sind zwei der beliebtesten Seitenersteller für WordPress? Wenn Sie nach einem suchen Beaver Builder vs Elementor Vergleich, Sie wissen bereits, dies sind zwei der besten Produkte auf dem Markt! Als Endbenutzer, der Ihre Website selbst gestalten möchte, wissen Sie sicher, dass diese Plugins unter den vielen verfügbaren Optionen zu Ihrer besten Wahl gehören.

Es gibt jedoch einige Unterschiede was Sie wissen müssen, bevor Sie Ihre Wahl treffen. Beide Produkte haben ihre Nuancen, die Ihre Entscheidung beeinflussen können.

Denn wenn Sie einmal eine Entscheidung getroffen haben, sind Sie meistens auf lange Sicht dabei, es gibt (fast) kein Zurück mehr. Die richtige Wahl zu treffen ist entscheidend! 

Sie müssen sicherstellen, dass Sie den Seitenersteller auswählen, der Ihren Anforderungen und Vorlieben entspricht.

Wenn Sie beispielsweise Seiten mit einem Seitenersteller erstellen und dann zum anderen wechseln, bleibt Ihr Inhalt erhalten, aber Sie erhalten ein unübersichtliches Layout mit überall verstreuten Shortcodes. Es kann sehr mühsam und zeitaufwändig sein, alles wieder aufzubauen.

Wir werden die Funktionen beider Plugins durchgehen und sie vergleichen, damit Sie die richtige Entscheidung treffen können.

Aber vielleicht haben Sie gerade eine Frage im Kopf.

Wenn Sie Page Builder-Plugins verwenden, wird Ihre Site erstellt abhängig darauf, warum überhaupt einen verwenden? Lassen Sie uns das im nächsten Abschnitt kurz besprechen. Wenn Sie den Vergleich starten möchten, können Sie zum Elementor vs Beaver Builder .

Mit diesem Beaver Builder vs Elementor-Plugin-Artikel wurde aktualisiert in September 2021 Hinzufügen relevanter und wichtiger Informationen und Aktualisierungen, wenn neue Funktionen entwickelt und für beide Produkte freigegeben werden. Sie können sicher sein, dass dieser Artikel die neuesten, unvoreingenommenen Informationen enthält.

Beaver Builder vs Elementor

Elementor und Beaver Builder sind beides leistungsstarke Werkzeuge zum Entwerfen von Websites. Elementor hat eine kostenlose Version, aber die PRO-Version (49 US-Dollar) zeichnet sich durch einen umfangreichen Satz von Elementen und eine Vorlagenbibliothek aus. Beaver Builder ist immer noch eine großartige Alternative durch seine Einfachheit und den attraktiven Preis ($99).

  Elementor-Logo beaver builder Logo
Insgesamt  5 / 5  4.5 / 5
Erster Platz ????  
Preise $ 49 $ 99
Kostenlos Version Ja Ja
Echtzeit-Editor Ja Ja
Frontend / Backend Beide Beide
Zielgruppe Entwickler / Designer / Benutzer / Agentur Web Developer / Designer
Unterstützte Elemente Über 80  31 
Code bereinigen Ja Ja
Vorgefertigte Vorlagen / Layouts Über 300 Über 50
Coole Funktion Dynamischer Inhalt Biber Themer
Performance
Was uns gefallen hat  Sehr leistungsstarke Lösung für die Erstellung von Designs aller Art  Einfache Benutzeroberfläche
   Überlegene Layout-Management-Optionen  Der Inhalt bleibt auch nach Deaktivierung des Plugins erhalten
   Attraktive Preisgestaltung mit Zugang  Einzigartiger Editor-Modus für Kunden
   Der beliebteste Seitenersteller aus einem bestimmten Grund  Ermöglicht die Verwendung von WordPress-Widgets in den Layouts
Was uns nicht gefallen hat    Teurer als die anderen Seitenersteller
     Keine Option zum Rückgängigmachen, Wiederherstellen oder Verlauf
Webseite Besuchen Sie die Elementor-Website Besuchen Sie Beaver Builder 

Was ist ein Page Builder?

Page Builder versprechen, die Gestaltung Ihrer Website viel einfacher zu machen und less kompliziert. Im Wesentlichen stellen diese Tools sicher, dass Sie keine technischen Kenntnisse benötigen, wenn es um Dinge wie HTML, CSS oder JavaScript geht.

Mit ihnen können Sie Seiten erstellen und entwerfen, die genau (oder zumindest so nah wie möglich) aussehen, wie Sie es sich vorgestellt haben, ohne mit Code herumspielen zu müssen.

Dies steht im Widerspruch zu dem, was bis vor einigen Jahren die Norm war, Programmierer zu sein oder zumindest gute Kenntnisse der Web-Technologie für die Entwicklung einer Website zu haben!

Mit dem Aufkommen dieser Produkte muss die Webentwickler einstellen scheint ein entfernter Gedanke geworden oder völlig unnötig geworden zu sein.

In Wirklichkeit ist dies nicht der Fall.

Webentwickler und -designer sind nach wie vor die beste Wahl für vollständig benutzerdefinierte Lösungen. Dies bedeutet nicht, dass kein Platz für Seitenersteller vorhanden ist. Beide haben ihre Anwendungsszenarien.

Seitenersteller können Webdesigner effizienter machen.

Das Fazit ist, dass Webdesigner und Seitenersteller auf absehbare Zeit weiterhin nebeneinander existieren werden. Viele Entwickler und Designer verwenden Seitenersteller, um Websites für ihre Kunden zu erstellen.

Es gibt viele Artikel, Diskussionen und Debatten online zu diesem Thema, wenn Sie sich eingehender mit den Unterschieden zwischen der Einstellung von Webdesignern und der Verwendung eines Page Builder-Plugins befassen möchten.

Aber jetzt schweifen wir ab.

Denn der Fokus dieses Artikels liegt auf Beaver Builder Im Vergleich zu Elementor werden wir ein wenig darüber sprechen, warum Sie einen Page Builder verwenden möchten, anstatt einen professionellen Webdesigner einzustellen.

Warum überhaupt einen Page Builder verwenden?

Es gibt viele Gründe, warum Sie ein Page Builder-Plugin verwenden möchten:

Ein Komplettpaket

Zunächst einmal ist ein Seitenersteller wie ein All-in-One-Plugin. Sie haben Schaltflächen, Diashows, Kontaktformulare, Galerien, Inhaltsraster, Schaltflächen zum Teilen von Inhalten usw. in einem Paket. Wenn Sie keinen Seitenersteller verwenden, müssen Sie stattdessen mehrere Plugins installieren, eines für jeden spezifischen Bedarf.

Wenn Ihre Anforderungen steigen, müssen Sie möglicherweise viele verschiedene Plugins installieren. Und wenn Sie sich für Premium-Plugins entscheiden, summieren sich die Lizenzgebühren.

Und dann gibt es die Frage, welches Plugin das beste ist, zusammen mit den Wartungsarbeiten, die mit der Installation so vieler Plugins verbunden sind.

Einfach ausgedrückt, sind Seitenersteller bequem und insgesamt billiger.

Elemente

Vorlagen und Layouts

Der nächste Grund ist der offensichtlichste und auch der Hauptgrund, warum Sie einen WordPress-Seitenersteller installieren möchten: schöne benutzerdefinierte Vorlagen und Layouts.

Während wir Premium-Themen erhalten können, die uns viele Anpassungsfunktionen und -optionen bieten, gibt es meistens nicht viele Themen, die ALLE unsere Designanforderungen erfüllen.

Die meisten von ihnen werden "die meisten" unserer Bedürfnisse erfüllen.

Sie werden immer denken, dass etwas fehlt oder "Ich wünschte, ich könnte dies oder das tun."

Die Lösung? WordPress Page Builder mögen Beaver Builder und Elementor-Builder.

Es gibt keine Begrenzung für das, was Sie mit einem Seitenersteller erstellen können. Sie können Ihre Seiten beliebig anpassen und in einigen Fällen sogar Ihr gesamtes Thema.

Es gibt auch vorgefertigte Vorlagen, die Ihnen das Leben erleichtern. Diese sind voll entwickelte Websites und Seiten, die Sie NUR mit Ihren Inhalten anpassen müssen.

Layoutvorlagen

Sie müssen nicht wissen, wie man codiert

Obwohl Sie Seitenersteller noch besser machen können, indem Sie individuellere Designs erstellen, indem Sie wissen, wie HTML- und CSS-Codes geschrieben werden, ist dies NICHT erforderlich.

Die meisten Seitenersteller, wie Elementor und Beaver Builder Plugin, kommen mit einer Drag-and-Drop-Oberfläche, mit der Sie ganz einfach Seiten erstellen können, ohne ein einziges Wissen darüber zu haben, was ein Tag tut.

Das ist nun aus dem Weg, lass uns mit dem Vergleich der Beaver Builder vs Elementor-Seitenersteller.

Elementor vs. Beaver Builder: Die Schnittstelle

Eines der wichtigsten Dinge, die bei der Auswahl einer Anwendung oder Software berücksichtigt werden müssen, ist die Benutzeroberfläche. Während es hauptsächlich um persönliche Vorlieben geht, kann es schwierig sein, eine Anwendung zu verwenden, deren Benutzeroberfläche nicht Ihren Vorstellungen entspricht oder nicht Ihren Wünschen entspricht.

Es muss einfach zu bedienen sein und Ihre Produktivität verbessern.

Wir werden uns also die „Gesichter“ beider Plugins bzw. die Schnittstellen ansehen.

Die Schnittstelle allein macht ein Plugin nicht großartig. Es gibt noch andere Dinge zu beachten, z. B. die Verfügbarkeit von Funktionen und Modulen. Lesen Sie diese daher unbedingt bis zum Ende durch, bevor Sie Ihre Entscheidung treffen.

Aber natürlich kann das Erscheinungsbild und die Benutzererfahrung beim Erstellen einer Website damit ein Produkt herstellen oder beschädigen.

Beginnen wir mit der Benutzeroberfläche von Elementor.

Elementors Schnittstelle

Die Benutzeroberfläche von Elementor ist in zwei Hauptabschnitte unterteilt. Die Seitenleiste links und die Live-Vorschau Ihrer Site / Seite.

Besuchen Sie, um die kostenlose Version von Elementor herunterzuladen

Es funktioniert mit dem Konzept der Blöcke, das Sie in diesem 1-minütigen Video in Aktion sehen können:

VRoPdyk97mg

 Elementor-Schnittstelle

Die Seitenleiste enthält WordPress widgets und Elemente, mit denen Sie Ihre Seiten zusammen mit den Einstellungen erstellen können, die Sie anpassen können.

Sie können Ihren Seiten Elemente hinzufügen, indem Sie sie in die Live-Vorschau ziehen und dort ablegen. Zum Beispiel haben wir auf unserer Beispielseite eine zusätzliche Überschrift hinzugefügt:

Drag & Drop Element oder

Das Bearbeiten von Text ist einfach. Klicken Sie einfach auf ein Textelement auf Ihrer Website und bearbeiten Sie es direkt.

Textbearbeitungselement oder

Sie können Text auch über die Seitenleiste bearbeiten.

Textbearbeitungselement oder Seitenleiste

Schließlich können Sie unten auf zusätzliche Einstellungen zugreifen.

Elementor mehr Schnittstelle

 

  • Allgemeine Einstellungen - Hier können Sie Informationen zur aktuellen WordPress-Seite anzeigen, z. B. den Titel der Seite, das ausgewählte Bild, den Veröffentlichungsstatus und andere.
  • Navigator - Wenn Sie darauf klicken, wird ein Popup-Fenster mit einem Navigationsbaum angezeigt, das die Navigation erleichtert.
  • Geschichte - Wenn Sie zu einer früheren Revision zurückkehren möchten, können Sie hier klicken. Beachten Sie, dass hier nur Änderungen angezeigt werden, die Sie in der aktuellen Sitzung vorgenommen haben.
  • Reaktionsmodus - Ermöglicht es Ihnen, einen Blick darauf zu werfen, wie Ihre Website auf verschiedenen Geräten / Bildschirmauflösungen aussehen wird.

Wenn Sie mit der Maus über ein Element fahren und mit der rechten Maustaste klicken, können Sie auf verschiedene Optionen zugreifen:

Rechtsklick Element oder

Über das Kontextmenü können Sie ein Element löschen, im Navigator anzeigen, als globales Element speichern (nur Pro-Version), duplizieren und vieles mehr.

Nachdem wir nun die Hauptoberfläche von Elementor gesehen haben, werfen wir einen Blick auf Beaver Builder nächsten.

Beaver BuilderSchnittstelle

Beaver Builder's Benutzeroberfläche ist minimalistischer als die des Elementor-Builders. 

Klicken Sie hier für eine Live-Demo

Wenn Sie keine Zeit haben, sich die Demo anzusehen, ist dieses 2-minütige Video von der Beaver Builder team, kann Ihnen schnell die Benutzeroberfläche und die Erstellung von Seiten zeigen:

tCNDDQ7Jrs8

Wie Sie im obigen Video gesehen haben, wenn Sie eine WordPress-Seite über . bearbeiten Beaver Builder, das sehen Sie:

Biber-Schnittstelle

Ganz oben hast du Beaver Builder's Leiste, die minimale, aber wesentliche Informationen zu Ihrer aktuellen Seite anzeigt. Um ein Element hinzuzufügen, klicken Sie auf das „+”In der oberen rechten Ecke.

Bibermodule

So fügen Sie ein Element oder ein „Modul“ gemäß Beaver Builder's Terminologie, können Sie sie einfach per Drag & Drop verschieben.

Biber Drag & Drop

Das hast du vielleicht bemerkt Beaver BuilderDer Texteditor von Elementor unterscheidet sich geringfügig von dem von Elementor. Aus dem obigen GIF können wir sehen, dass wir beim Bearbeiten von Texten einen Popup-Editor haben.

Sie können auch auf ein Textmodul klicken, um es zu bearbeiten Pop-up Texteditor.

Biber Texteditor

Wenn Ihnen diese Popup-Fensterfunktion nicht gefällt, können Sie den Texteditor links oder rechts vom Bildschirm ziehen, um ihn zu fixieren. Sobald Sie dies getan haben, können Sie auch eine Inline-Bearbeitung durchführen.

Biber Texteditor angepasst

Beachten Sie, dass durch das Anheften dieses Texteditors auch alles angeheftet wird, sodass es in Bezug auf das Layout wie der Elementor-Builder aussieht.

Biber-Schnittstelle angepasst

Wie Sie von oben sehen können, Beaver Builder hat jetzt das gleiche Layout wie Elementor. Wenn Sie möchten, können Sie es durch Ziehen und Anheften auf die rechte Seite verschieben.

Schließlich haben wir zusätzliche Einstellungen, indem wir auf den Abwärtspfeil in der oberen linken Ecke des Bildschirms klicken.

Biber zusätzliche Einstellungen

Fazit Fazit

Einer der größten Unterschiede und vielleicht ein Deal-Breaker für andere ist Beaver Builderfehlt der Bearbeitungsverlauf, um das Rückgängigmachen von Bearbeitungen zu erleichtern.

Abgesehen von diesem einen Problem bieten beide Plugins identische Layouts und Bearbeitungsleistungen.

In Bezug auf das Aussehen, Beaver Builder hat den Vorteil, dass es viel sauberer aussieht, obwohl dies nur eine persönliche Vorliebe sein kann. Das Ziehen und Ablegen von Elementen ist auch etwas genauer und einfacher in Beaver Builder als im Elementor-Plugin.

Module und Widgets

Elementor nennt seine Elemente „Widgets“ während Beaver Builder nennt sie „Module“.

Dies sind die Bausteine, mit denen WordPress-Seitenersteller den Inhalt Ihrer Seite erstellen können. Dies sind Texte, Überschriften, Schaltflächen, Galerien und andere Elemente. In den früheren Beispielen haben Sie die Text- und Überschriftenelemente gesehen.

Mal sehen, wie viele andere Elemente diese Plugins zu bieten haben.

Elemente des Elementors: Abschnitte, Spalten und Widgets

Der Elementor-Builder verfügt über drei Arten von Elementen:

  1. Abschnitte
  2. Spalten und
  3. Widgets.

Der Abschnitt ist der höchste in der Builder-Hierarchie. Jede Spalte und jedes Widget ist in einem Abschnitt vorhanden.

Die Spalte ist die zweite in der Hierarchie. Jedes Widget befindet sich in einer Spalte. Die Widgets sind die niedrigsten in der Hierarchie.

Die Widgets sind Ihre Inhalte wie Schaltflächen, Text und Bilder. Die Abschnitte und Spalten dienen zum Erstellen verschiedener Layouts.

Elementor bietet Ihnen 30 Widgets für die kostenlose Version und über 52 WordPress-Widgets für die PRO-Version. Diese Zahlen nehmen ständig zu, wenn neue Versionen veröffentlicht werden. Klicken Sie hier, um die neuesten Zahlen zu überprüfen.

Im folgenden GIF können Sie sehen, wie wir einen Abschnitt hinzugefügt haben. Anschließend haben wir eine zweispaltige Spalte in den Abschnitt eingefügt und schließlich Widgets in die Spalten eingefügt. Sie können einer Spalte mehrere Widgets hinzufügen, die Sie im zweiten GIF sehen, das das Styling zeigt.

Widgets für Element- oder Abschnittsspalten

Das Anwenden von Stilen auf den Abschnitt wirkt sich auf alles darin aus.

Das Gleiche gilt für Spalten, hat jedoch keine Auswirkungen auf Spalten außerhalb und Spalten, die Sie auf ein Widget anwenden, bleiben für sich. Das folgende GIF zeigt dies in Aktion für den Elementor-Builder.

Abschnitte Spalten Widgets Hierarchie

 

 Möglicherweise haben Sie bemerkt, wie Sie mit der rechten Maustaste auf ein Element klicken können, um es zu bearbeiten, zu duplizieren oder zu löschen. Dies ist eine sehr bequeme Aktion.

Element oder Rechtsklick-Menü

Jetzt haben Sie einen guten Überblick über die Elemente von Elementor. Schauen wir uns den anderen an.

Beaver Builder's Elemente: Zeilen, Spalten und Module

Wie das vorherige Plugin, Beaver Builder teilt seine Elemente auch in drei Kategorien ein:

  1. Reihen,
  2. Spalten und
  3. Module.

Zeilen sind die höchsten in der Hierarchie. Spalten werden in Zeilen und Module in Spalten eingefügt. Module sind Ihr eigentlicher Inhalt, während Spalten und Zeilen wiederum für Layoutzwecke dienen.

Beaver Builder's kostenlose Version bietet Ihnen 6 Module, während die Pro-Version Ihnen 30 Module zum Spielen bietet. Es ist ratsam, die Website zu überprüfen, um die aktuellen Module zu überprüfen, die mit beiden Versionen verfügbar sind.

Im folgenden GIF verwenden wir den Builder, um eine Zeile mit drei Spalten hinzuzufügen und die Spalten mit verschiedenen Modulen zu füllen.

Zeilenspaltenmodul

Das Styling funktioniert genauso wie bei Elementor.

In Zeilen angewendete Stile werden auch in Spalten und Modulen angewendet. In Spalten angewendete Stile wirken sich auf Module aus, und Sie können Modulen individuell bestimmte Stile zuweisen.

Modulstil für Zeilenspalten

Im Gegensatz zu Elementor, Beaver Builder hat keine benutzerdefinierten Rechtsklickoptionen. Sie müssen den Mauszeiger über ein Element bewegen, um Aktionen darauf ausführen zu können.

Rechtsklick Biber

Module und Widgets Fazit

Beide Plugins funktionieren ziemlich gleich.

Beide bieten einfache Möglichkeiten, ein Layout für Ihre Seiten zu erstellen. Elementor macht es jedoch ein bisschen einfacher, indem für jedes Element ein Rechtsklick-Menü angezeigt wird, mit dem Sie direkt in seine Einstellungen springen können.

Was die Anzahl der verfügbaren Module angeht, scheint Elementor die Nase vorn zu haben Beaver Builder, vor allem in der kostenlosen Version.

Styling

Wie Sie bereits gesehen haben, sind sowohl Elementor als auch Beaver Builder bieten feinkörnige Kontrolle über die Styling-Optionen. Sie können Stile auf Abschnitte oder Zeilen anwenden oder sie verfeinern und einzelne Widgets oder Module haben ihren eigenen Stil.

Lassen Sie uns ein wenig mehr auf die Styling-Optionen eingehen.

Elementor-Styling-Optionen

Bevor wir uns die im Editor selbst verfügbaren Styling-Optionen ansehen, werfen wir einen Blick auf die Styling-Einstellungen von Elementor, die in zu finden sind Elementor> Einstellungen.

Elementor-Styling-Optionen

In den Allgemeines In den Einstellungen können Sie konfigurieren, ob die Standardfarben und -schriftarten von Elementor deaktiviert werden sollen. Es wird empfohlen, diese Kontrollkästchen zu aktivieren, um die Stilkonsistenz auf Ihrer Website zu gewährleisten.

Unter dem Stil Auf der Registerkarte können Sie verschiedene andere Designeinstellungen konfigurieren.

Elementor-Einstellungsstil

Wir werden nicht alle diese Punkte behandeln, aber wie Sie sehen können, können Sie auf dieser Seite viele Styling-Optionen optimieren. Kommen wir zu den Styling-Optionen des Editors.

Elementor Basic Style-Optionen

Die verfügbaren Gestaltungsoptionen bleiben für die meisten Elemente in Elementor ziemlich ähnlich. Unten sehen Sie die grundlegenden Stiloptionen für das Überschriftenelement.

Elementor Stile

Übrigens haben Sie vielleicht bemerkt, dass sich der Schriftstil und die Farbe geändert haben - das liegt daran, dass wir gerade die aktiviert haben Deaktivieren Sie die Standardfarben . Deaktivieren Sie die Standardschriftarten in den Einstellungen von Elementor.

Jetzt erbt es die Farben und Schriftarten des Themas, anstatt die benutzerdefinierten zu verwenden (was Sie unseren früheren Beispielen entnehmen können).

Kehren wir zu den Stiloptionen zurück, die uns zur Verfügung stehen. Oben haben wir:

  • Textfarbe
  • Typografie
  • Text Shadow
  • Mischmodus

Erweiterte Stiloptionen für Elementor

Wenn Sie der Meinung sind, dass dies nicht ausreicht, können Sie auf der Registerkarte Erweitert weitere Optionen anzeigen.

Elementor erweiterte Stile

Hier können Sie alles konfigurieren, von benutzerdefinierten Rändern und Auffüllungen über Bildlaufeffekte bis hin zu Hintergrundeinstellungen usw. Sie können auch ein benutzerdefiniertes CSS anwenden, wenn Sie möchten (dies ist nur in der PRO-Version verfügbar).

Eine der einzigartigen Funktionen von Elementor ist die Möglichkeit, benutzerdefinierte Werte für verschiedene Bildschirmgrößen festzulegen.

Fortgeschrittene Reaktionsstile

Auf diese Weise können Sie genauer steuern, wie Ihre Inhalte auf verschiedenen Geräten und Bildschirmauflösungen angezeigt werden.

Beaver Builder Styling-Optionen

Im Gegensatz zu Elementor, Beaver Builder erbt standardmäßig die Schriftarten und Farben Ihres Designs. Dies ermöglicht eine Konsistenz out of the box.

Beaver BuilderDie Styling-Optionen variieren je nach Element, aber im Grunde haben Sie Stil, Trennzeichen, Typografie, . fortgeschritten Optionen.

Stile

Biberstile

Der Style Einstellungen werden angezeigt, wenn Sie eine Zeile bearbeiten, sowie andere Elemente wie Schaltflächen. Sie finden Optionen für:

  • Breite
  • Inhaltsbreite
  • Höhe
  • Farben wie Linkfarbe, Textfarbe, Linkhoverfarbe usw.
  • Hintergrundtyp, Farbe und Deckkraft
  • Grenze

Das Anwenden von Farben wie Text-, Link- und Hover-Farben wird auf jedes Element in der Zeile angewendet. Sie können diese Einstellungen jedoch überschreiben und benutzerdefinierte Werte pro Element festlegen.

Biber fortgeschrittene Stile

In den fortgeschritten Einstellungen, für die Sie Optionen finden können:

  • Abstand
  • Responsive Layout-
  • Transparenz
  • HTML-Element - Sie können eine benutzerdefinierte HTML-ID und Klasse für ein bestimmtes Element zur weiteren Anpassung festlegen

Beide Beaver Builder und Elementor ermöglichen Ihnen die Feinabstimmung, wie Ihre Inhalte auf verschiedenen Geräten angezeigt werden, indem Sie auf das Gerätesymbol neben einer Einstellung klicken (die nur für Einstellungen sichtbar ist, die dies unterstützen).

Biber reagiert

Separator

Biber-Separator-Stile

Das Separator ist eine weitere Styling-Option, mit der Sie Ihren Elementen ein verfeinertes Aussehen verleihen können.

Hier finden Sie Optionen für Ihr Trennzeichen. Wenn Sie sich fragen, wie ein Trennzeichen aussieht, sehen Sie sich ein Beispiel oben an - die rote Linie unter der Überschrift im Bild oben. Sie haben Optionen für:

  • Separator-Stil
  • Trennposition
  • Linienstil
  • Linienfarbe
  • Dicke und Breite

Typografie

Typografie im Biberstil

Das Typografie Mit den Optionen können Sie steuern, wie Ihr Text angezeigt wird. Diese Einstellung wird normalerweise für die angezeigt Üerschrift Modul. Hier haben Sie Optionen für:

  • HTML-Tag
  • Schriftstil, Größe und Gesicht
  • Textfarbe
  • Die Margen

Styling Fazit

Beide Plugins bieten eine Vielzahl von Styling-Optionen und Konfigurationen. Sie ermöglichen ein Endeless Anpassung bis in die kleinsten Details jedes Elements auf einer Seite. Wir sind der Meinung, dass beide Page Builder in dieser Hinsicht weitgehend gleichwertig sind.

Vorlagen

Bisher haben wir leistungsstarke Tools gesehen, mit denen wir benutzerdefinierte Seiten von Grund auf neu erstellen können. Aber wäre es nicht besser, wenn wir Vorlagen verwenden könnten? Vorlagen würden es ermöglichen, den Entwurfsprozess viel schneller zu gestalten.

Das Tolle ist, dass sowohl Elementor als auch Beaver Builder bieten Vorlagenfunktionen. 

In diesem Zusammenhang sind Vorlagen vorgefertigte Designs, mit denen Sie die Gestaltung Ihrer Seiten auf den Weg bringen können. Sowohl Elementor als auch Beaver Builder bietet uns viele Vorlagen zur Auswahl.

Als Webdesigner oder Entwickler möchten Sie wahrscheinlich die Möglichkeit haben, eigene Themen oder bestimmte Seitenvorlagen zu erstellen, die Sie im Rahmen Ihres Designprozesses wiederverwenden / optimieren können.

Lass uns einen Blick darauf werfen.

Elementor-Vorlagen

Wenn Sie in Elementor eine neue Seite erstellen, sehen Sie, dass Sie entweder einen Abschnitt hinzufügen oder eine Vorlage verwenden können.

In der kostenlosen Version stehen Ihnen rund 40 Vorlagen zur Auswahl. In der Pro-Version stehen über 300 verschiedene Seiten und Blockvorlagen zur Auswahl.

Besuchen Sie die Website, um alle Vorlagen zu überprüfen

Element oder neue Vorlage

Nach dem Klicken auf Vorlage hinzufügen Klicken Sie auf die Schaltfläche, um ein Menü mit den Vorlagen zur Auswahl zu erhalten.

Elementor Template-Auswahl

Elementor bietet zwei Arten von Vorlagen an: Block- und Seitenvorlagen.

Blockvorlagen sind Abschnittsvorlagen, mit denen Sie bestimmte Teile Ihrer Seite erstellen können. Ein Beispiel für eine Blockvorlage ist ein Kontaktformular oder ein CTA-Abschnitt.

Unten sehen Sie Beispiele für verfügbare CTA-Vorlagen.

Element- oder Blockvorlagen

Page Templates sind ganzseitige Vorlagen, die über das Builder-Plugin für bestimmte Seitentypen und / oder Zwecke entwickelt wurden.

Unten sehen Sie Vorlagen für eine Zielseite und eine Startseite. Darüber hinaus stehen verschiedene Geschmacksrichtungen zur Auswahl. Sie haben beispielsweise eine Homepage-Vorlage, die auf Restaurants und eine auf Agenturen zugeschnitten ist.

Elementor-Seitenvorlagen

Sie können auch Ihre benutzerdefinierten Seitenvorlagen erstellen und sogar vollständige Themen zur Wiederverwendung speichern. Klicken Sie dazu auf den kleinen Aufwärtspfeil neben der Schaltfläche "Veröffentlichen" und wählen Sie "Als Vorlage speichern".

Elementor benutzerdefinierte Vorlagen

Sie können sogar Vorlagen von Drittanbietern importieren, indem Sie sie auf Ihre Site hochladen. Dies ermöglicht das Endeless Individualisierungsmöglichkeiten.

Element oder Importvorlage

Beaver Builder Vorlagen

In Beaver Builder, stehen Ihnen drei Arten von Vorlagen zur Auswahl: Landing Pages, Content Pages und Saved Templates. Im Gegensatz zu Elementor, Beaver Builder hat keine Vorlagen auf Blockebene, obwohl Sie Plugins verwenden können, um die gleiche Funktionalität zu erhalten.

Klicken Sie hier, um alle Vorlagen anzuzeigen

Beachten Sie, dass die kostenlose Version von Beaver Builder hat überhaupt keine Vorlagenoptionen, so dass Sie alles von Grund auf neu machen müssen, wenn Sie die kostenlose Version verwenden möchten.

beaver builder Vorlagen

Landing Page Templates dienen zum Erstellen von aufwendigen Landing Pages. Zum jetzigen Zeitpunkt können Sie innerhalb von 30 verschiedenen Landingpage-Vorlagen auswählen Beaver Builder.

Biber Landing Page Vorlage

Inhaltsseitenvorlagen sind für Inhaltsseiten wie Infoseite, Kontaktseite, Homepage usw. vorgesehen. Zum jetzigen Zeitpunkt stehen 25 Inhaltsseitenvorlagen zur Auswahl mit Beaver Builder.

Biber-Inhaltsseitenvorlage

 

Gespeicherte Vorlagen sind Ihre benutzerdefinierten gespeicherten Vorlagen. Wie in Elementor können Sie mit dem Builder eine Seite als Vorlage erstellen, um sie später wiederzuverwenden.

Das Importieren von Vorlagen ist auch möglich auf Beaver Builder, aber es ist nicht so intuitiv wie das von Elementor. Sie können herausfinden, wie dies funktioniert, indem Sie die Dokumentation lesen. hier Ihren Kundenservice-Helpdesk-Kontakt..

Vorlagen Fazit

Der Elementor-Builder bietet mehr Vorlagen zur Auswahl und einfachere Import- und Exportoptionen für Vorlagen als Beaver Builder. Wie für die Design und Aussehen, beide Plugins bieten Ihnen eine Vielzahl von schönen Vorlagen, die für viele verschiedene Arten von Nischen geeignet sind.

Was ihre kostenlosen Versionen betrifft, gewinnt Elementor zweifellos gegen Beaver Builder. Mit Elementor können Sie immer noch aus über zwei Dutzend kostenlosen Vorlagen wählen und sogar die Möglichkeit haben, sie zu importieren und zu exportieren. Auf Beaver Builder, müssen Sie auf ihre Premium-Version aktualisieren, um diese Funktion nutzen zu können.

Themenerstellung

Die Theme-Building-Funktion ist ein sehr mächtiges Werkzeug, das sowohl Elementor als auch Beaver Builder bietet seinen Nutzern.

Für Elementor wird der Theme-Builder automatisch freigeschaltet, sobald Sie auf die Premium-Version aktualisieren. Wie für Beaver Builder, müssten Sie ein separates Plugin namens Beaver Themer installieren, das für 147 US-Dollar separat erhältlich ist.

Theme Builder von Elementor

Um auf den Theme Builder zuzugreifen, können Sie zu gehen Vorlagen> Theme Builder. Von dort aus können Sie Themenvorlagen erstellen oder bearbeiten. Sie können Vorlagen erstellen oder bearbeiten für:

  • Seite
  • Kopfzeile
  • Fußzeile
  • Single Post
  • Archiv
  • 404 Seiten
  • Usw.

Der Theme Builder von Elementor funktioniert fast genauso wie der Page Builder.

Sie haben alle normalen Elemente sowie neue und spezifische Elemente für die Art des Themenabschnitts, an dem Sie arbeiten. So sieht beispielsweise der Theme Builder aus Einzelne Post.

Elementor Single Post Editor

Wie Sie sehen können, haben Sie eine neue Reihe von WordPress-Widgets, die für einzelne Beiträge wie Post-Titel, ausgewähltes Bild, Post-Kommentare usw. spezifisch sind.

Wenn Sie nicht bei Null anfangen möchten, können Sie auch vorgefertigte Vorlagen verwenden, auf die Sie zugreifen können, indem Sie wie im normalen Seitenersteller auf das Ordnersymbol im Inhaltseditor klicken.

Sobald Sie mit dem Erstellen Ihrer benutzerdefinierten Designvorlage fertig sind, können Sie steuern, wann und wo sie angezeigt wird. Sie können beispielsweise festlegen, dass Ihre benutzerdefinierte einzelne Beitragsvorlage nur für einen bestimmten Beitragsautor angezeigt wird.

Beaver Builder's Theme Builder

Beaver Builder's Theme Builder funktioniert, obwohl anders aktiviert, ähnlich wie der Theme Builder von Elementor. Dies ist ein großartiges Tool, wenn Ihre Kunden verlangen, dass Sie benutzerdefinierte Designs für sie erstellen.

Sie können erst auf den Theme Builder zugreifen, wenn Sie das Beaver Themer-Plugin installiert haben. Sobald Sie es aktiviert haben, können Sie darauf zugreifen Beaver Builder > Ther-Layouts Von dort aus können Sie eine benutzerdefinierte Vorlage für Folgendes erstellen:

  • Kopfzeile
  • Fußzeile
  • Archiv
  • Einzelne Beiträge (Singular)
  • 404 Seiten
  • Teil

 

beaver builder Theme Builder

Sobald Sie sich für das Layout entschieden haben, das Sie erstellen oder bearbeiten möchten, können Sie es weiter anpassen, indem Sie auswählen, wo und wann es angezeigt werden soll.

Beispielsweise können Sie für die benutzerdefinierte Fußzeile auswählen, ob sie auf Ihrer gesamten Site angezeigt wird und Ihre Standardfußzeile effektiv ersetzt, oder ob sie nur auf bestimmten Posts oder Seiten angezeigt werden soll.

Sie können es auch weiter anpassen, indem Sie es nur anzeigen, wenn ein Beitrag von einem bestimmten Autor verfasst wurde.

Diese regelbasierte Anpassung in Beaver Builder ist ziemlich mächtiges Zeug, weil es eine Menge Flexibilität und Anpassungsmöglichkeiten mit sich bringt.

beaver builder die benutzerdefinierten Regeln

Was den Editor selbst betrifft, haben Sie die gleiche Benutzeroberfläche wie der Beaver Builder Seitenersteller

Unten sehen Sie den Themenlayout-Editor in Aktion, in dem wir die von uns erstellte benutzerdefinierte Fußzeile bearbeiten. Sie haben Zugriff auf die gleiche Anzahl von Modulen und anderen Elementen wie im regulären Seitenersteller.

beaver builder Themen-Editor

Fazit des Theme Builders

Beide Builder-Plugins bieten eine hervorragende Kontrolle und Anpassung der Themenerstellung. Wenn wir jedoch über die Preise sprechen sollen, ist das Elementor-Builder-Plugin billiger als Beaver Builder da sein Theme Builder in die Premium-Version integriert ist.

AnzeigenPreise

Wir haben die beiden Plugins bereits ziemlich oft verglichen und wir haben gesehen, was Sie in ihren kostenlosen und Pro-Versionen bekommen können. Aber wie viel kostet jeder Bauherr? Und welches gibt Ihnen den größten Wert?

Beide Premium Builder-Versionen sind in drei Preisstufen erhältlich.

Elementor-Preise

Beginnen wir mit Elementor. Es gibt persönliche, geschäftliche und unbegrenzte Preisoptionen.

  • Persönliches - 49 US-Dollar für eine einzelne Site.
  • Geschäft - 99 US-Dollar für drei Standorte.
  • Expert - 199 US-Dollar für 25 Websites
  • Studio - 499 US-Dollar für 100 Websites
  • Unbegrenzte - 999 US-Dollar für unbegrenzte Websites.

elementor Preisgestaltung

Alle Pläne verfügen über die gleiche Anzahl von Funktionen und werden 1 Jahr lang weiterhin Premium-Support und Updates erhalten. Sie werden mit dem Theme Builder geliefert.

Klicken Sie hier für den niedrigsten Preis für Elementor

Beaver Builder AnzeigenPreise

Wie Elementor, Beaver Builder Die Preisgestaltung erfolgt ebenfalls in drei Stufen.

  • Standard - 99 USD
  • Pro - $ 199
  • Agentur - 399 $

 

BB Preisgestaltung

Das Standard Lizenz hat keinen Multisite-Support und Beaver Builder Thema. Das PRO Lizenz unterstützt Multisite-Unterstützung und wird mit Beaver Builder Thema, aber es gibt keine weiße Beschriftung.

Schließlich wird das Agentur Lizenz hat alle Standard- und Pro-Funktionen plus weiße Beschriftung. Alle Pläne gelten für unbegrenzte Websites.

Denken Sie daran, dass Beaver Ther ein separater Kauf von . ist Beaver Builder selbst das kostet 147 $.

Klicken Sie hier für den niedrigsten Preis auf Beaver Builder

Kostenlos gegen Pro

Beide Plugins werden mit kostenlosen und Pro-Versionen geliefert, aber die kostenlose Version von Elementor ist hier der klare Gewinner.

Die kostenlose Version von Elementor enthält Dutzende von Modulen und Vorlagen kostenlos. Beaver Builder kommt nur mit sehr einfachen, was es in seiner kostenlosen Version sehr eingeschränkt macht.

Preis Fazit

Wenn Sie eine kostenlose Version wünschen, ist Elementor Ihre klare Wahl.

Was die Premium-Versionen betrifft, so mag es scheinen, dass Beaver Builder teurer ist, bieten die höherstufigen Pläne entwicklerfreundlichere Funktionen, insbesondere White-Labeling.

Wenn Sie ein Entwickler sind, der Hosting weiterverkaufen möchte, sollten Sie sich dies ansehen Diskussion. Kurz gesagt, mit Elementor können Sie die Website eines Kunden nicht selbst hosten und ihm eine monatliche Gebühr berechnen, wenn Sie Elementor zum Erstellen oder Gestalten seiner Website verwendet haben.

Wir sind der Meinung, dass Elementor besser für Solo-Benutzer geeignet ist, während Beaver Builder ist besser für Entwickler - vor allem wegen der White-Labeling- und Hosting-Optionen.

Wenn Sie noch nach anderen Optionen suchen, haben wir auch bewertete Elementor vs Divi hier, und auch Beaver Builder gegen Divioder endlich, wenn du willst Weitere Bewertungen, unsere Einstellung zu DiviWir sind jedoch der Meinung, dass Sie Ihre Auswahl an dieser Stelle einschränken und unsere Schlussfolgerung unten betrachten sollten.

Elementor vs. Beaver Builder: Abschluss

Insgesamt sind dies derzeit die beiden besten Plugins für den Seitenersteller für WordPress. 

Elementor bietet eine riesige Menge an Vorlagen und Elementen, während Beaver Builder versucht es einfach zu halten und erfüllt dennoch die Bedürfnisse jedes Webdesign-Benutzers.

Beaver Builder ist entwicklerfreundlich. Es bietet White-Labeling-Optionen und unterliegt keinen Einschränkungen, wie Entwickler Dienste oder Websites verkaufen können, die damit erstellt wurden.

Elementor ist nicht Open Source, solange Beaver Builder ist, aber Elementor ist insgesamt leistungsfähiger.

Aus Sicherheitsgründen hatte Elementor eine ernsthafte Sicherheitslücke In der Vergangenheit wurde dies jedoch behoben, und das Produkt entwickelt sich immer weiter. In letzter Zeit wurden 5 Millionen aktive Installationen durchgeführt, und es wurde eine starke Strategie verfolgt, um bald 10 Millionen zu erreichen!

Also ja, Sie kaufen definitiv ein gutes Produkt!

Wenn Sie ein Solo-Entwickler oder -Benutzer sind, der nach einem ausgezeichneten Plugin mit vielen Funktionen und schnellen Updates sucht, dann entscheiden Sie sich für das Elementor Page Builder-Plugin. Wenn Sie ein Entwickler oder ein Benutzer sind, der nicht von unzähligen Funktionen und schnellen Updates überwältigt werden möchte, wählen Sie Beaver Builder.

Aber am Ende liegt es ganz bei Ihnen, die endgültige Entscheidung zu treffen.

Wie beide Beaver Builder und Elementor entwickeln sich beide ständig weiter, es gibt keinen klaren Gewinner, aber wir mögen Elementor immer noch ein bisschen besser, obwohl Sie basierend auf den von uns beschriebenen Faktoren und Ihren aktuellen Bedürfnissen leicht die richtige Entscheidung treffen können.

Besuchen Sie Elementor

 

Über den Autor
David Attard
Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/
David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...