Was genau ist der Elementor Page Builder?

Was genau ist der Elementor Page Builder

Was genau ist der Elementor Page Builder?

Hier muss ich zunächst erklären, was genau ein Page Builder ist. Hast du jemals mit LEGO gespielt? Ich bin mir sicher, du hast oder du hast zumindest davon gehört – wer hat das nicht? 🙂 Ein Page Builder (auf deutsch: Seitenersteller) ist wie eine Kiste mit LEGO-Bauteilen, mit denen du einen beliebigen Typus Webseiten erstellen kannst.


Wenn du das klassische WordPress-Dashboard verwendest und das Ergebnis während der Arbeit an einer Seite nicht sehen kannst, musst du auf die Schaltfläche „Vorschau“ klicken, um zu sehen, wie die Seite aussieht. Page Builder wurden daher entwickelt, um dies zu überwinden. Sie bieten dir die Möglichkeit, die Änderungen so zu sehen, wie du sie vornimmst. Die gesamte Bearbeitung des Erscheinungsbilds deines Artikels erfolgt im Drag-and-Drop-Modus mit vorhanden Elementen, den sogenannten Widgets. Vereinfacht ausgedrückt, erstellst du die Seite oder den Beitrag aus diesen Elementen und passt sie dann an, um eine beeindruckend aussehende Seite zu erstellen.

Es gibt jetzt zahlreiche verschiedene Page Builder: BeaverBuilder, Novi Builder, Visual Composer und wie bereits erwähnt, sogar WordPress hat jetzt einen eigenen nativen Builder namens Gutenberg. Du könntest jetzt vielleicht sagen: “Hey, wenn WordPress bereits einen Page Builder hat, warum etwas anderes installieren?” Das ist eine faire Frage, und hier ist meine etwas voreingenommene Antwort…

Ich liebe es einfach, Elementor zu benutzen, und das ist alles!

Ich habe Elementor bereits verwendet, bevor das WordPress-Team Gutenberg startete und ich ziehe es vor, den Elementor Page Builder auf den meisten meiner Websites weiter zu verwenden. Es gibt Dutzende von nützlichen Add-Ons auf dem Elementor-Marktplatz, deren Installation die verfügbaren Optionen erheblich erweitert. Sie können natürlich auch andere Page Builder ausprobieren, was ich gelegentlich auch tue. Da ich jedoch persönlich ein Fan von Elementor bin, werde ich dies als Beispiel für die Vorteile von Page Buildern verwenden.

Warum ich Elementor mehr als andere Page Builder liebe

Ja, ich habe mich an Elementor gewöhnt, aber das ist nicht der einzige Grund, warum ich ihn mag. Es hat eine Reihe von guten Vorteilen:

  • Er ist kostenlos: Es gibt eine kostenpflichtige Version von Elementor Pro, die ihre Vorteile hat, aber das Kern-Plugin ist völlig kostenlos. Du kannst es ohne weitere Add-Ons herunterladen, installieren und verwenden und es verfügt dennoch über eine enorme Funktionalität. Besonders wichtig für Anfänger, die kein großes Budget haben!
  • Einfache Bedienung: Die Benutzeroberfläche ist einfach, die Verwendung der Widgets ist leicht verständlich und die Benutzeroberfläche sehr benutzerfreundlich.
  • Gut dokumentiert: Anfänger machen immer Fehler, es ist normal und wenn Sie einige Probleme haben, können Sie die Lösung in der Anleitung finden.
  • Es ist ein Plugin, kein Thema: Einige Page Builder sind selbst ein Thema, von dem du vielleicht denkst, dass es in mancher Hinsicht ein Plus ist. Wenn Sie jedoch jemals zu einem neuen Thema wechseln möchtest, kannst du das nicht!
  • Es gibt jede Menge Tutorials: Es gibt Dutzende von Video-Tutorials zur Verwendung von Elementor. Fast jedes Widget verfügt über einen Artikel mit Anleitungen. Beispiel: Hier ist ein Video, das den Prozess der Installation der Elementor-Vorlage beschreibt. Zwar nur auf englisch aber leicht verständlich:
Wie man Elementor installiert
Video anzeigen?

Wenn du eingebettete Videos auf dieser Seiten sehen möchtest, werden personenbezogene Daten (IP-Adresse) an den Betreiber des Videoportals gesendet. Daher ist es möglich, dass der Videoanbieter deine Zugriffe speichert und dein Verhalten analysieren kann.

Wenn du den Link hier unten anklickst, wird ein Cookie auf deinem Computer gesetzt, sodass die Website weiß, dass du der Anzeige von eingebetteten Videos in deinem Browser zugestimmt hast. Dieses Cookie speichert keine personenbezogenen Daten, es erkennt lediglich, dass eine Einwilligung für die Anzeige der Videos in deinem Browser erfolgt ist.

Erfahre mehr über diesen Aspekt der Datenschutzeinstellungen auf dieser Seite: Datenschutzerklärung

Videos anzeigen

Alternativ kannst du auch diesen Link benutzen, der dich direkt zum Video auf die Website des Videoanbieters bringt: https://www.youtube.com/watch?mWJhkn_e3oM

Das sind die Vorteile für Anfänger, erfahrene Webentwickler wissen, dass es in Elementor noch andere Profis gibt. Wenn du interessiert bist – lies diesen Artikel , es gibt viele Bewertungen von verschiedenen Personen.
Jetzt habe ich Dir erklärt, warum ich Elementor Page Builder für großartig halte. Kommen wir zu weiteren praktischen Beispielen. Ich gehe davon aus, dass du das Elementor-Plugin bereits installiert hast und es betriebsbereit ist. Ich werde den Prozess der Erstellung einer Seite und eines Beitrages durchlaufen. Wenn du dem folgst, wist wissen, wie du so etwas mit Elementor veröffentlichst, bevor du es verinnerlicht hast.

Also fangen wir an.

Die Verwendung von Elementor in WordPress

  • Installiere das Elementor-Plugin
  • Installiere ein separates Thema, wenn du eine besonderes verwenden willst
  • Füge mit Elementor eine neue Seite hinzu
  • Verwende ein Widget-Element oder füge eine Vorlage hinzu
  • Erstelle Abschnitte nach Bedarf
  • Erfahre, wie du Elementor-Widgets verwenden kannst
  • Bearbeite Hintergrundbilder nach Ihren Wünschen
  • Ändere die Schriftarten nach Bedarf
  • Vorgang für Beiträge wiederholen

So erstelle eine Seite mit Elementor

Öffne dein WordPress-Verwaltungs-Dashboard und gehe zu Seiten -> Neu hinzufügen.

Klicke anschließend auf die Schaltfläche „Mit Elementor bearbeiten“ und du wirst zum Elementor-Anpassungsfenster weitergeleitet.

Jetzt hast du zwei Möglichkeiten. Die erste besteht darin, die Seite von Grund auf neu zu erstellen. Dies bedeutet, dass du verschiedene Elemente per Drag & Drop in den Seitenarbeitsbereich ziehen. Der zweite ist viel einfacher, also zeige ich dir diesen Weg …
In der Mitte des Arbeitsbereichs siehst du zwei Schaltflächen. Klicke auf die graue Schaltfläche „Vorlage hinzufügen“.

Vorlage hinzufügen

Die jetzt geöffnete Bibliothek enthält viele Seitenvorlagen, von denen viele kostenlos verwendet werden können. Elementor-Vorlagen sind nicht dasselbe wie Themes. Ein Thema ist eine Reihe von vorgefertigten Seiten, die alle in einem soliden Design gestaltet sind, während eine Vorlage eine Sammlung von LEGO-Stücken (Elementen auch Widgets genannt) ist. Vorlagen sind im Grunde genommen eine Seite, die aus zahlreichen Elementen besteht.

Wähle die gewünschte Seite aus und klicke auf die Schaltfläche “Einfügen”. Ich habe die Produkt-Homepage ausgewählt, um dir zu zeigen, wie sie aussieht. Die Seite, die du geladen hast, wirkt sich nicht auf die Kopf- und Fußzeile deiner Website aus – sie füllt nur den „Body“ mit Demo-Inhalten. Wie du siehst, wird die eingefügte Seite mit benutzerdefinierten Standardelementen kombiniert und du kannst sie nach Belieben ändern.

Muster Produkt-Homepage

Um die Anpassung zu starten, musst du auf das Element klicken, das du ändern möchtest. Im Feld links wird ein Menü geöffnet. Dieses Menü hat drei Registerkarten: “Inhalt”, “Stil” und “Erweitert”.
Auf der Registerkarte “Inhalt” kannst du ändern, was in diesem Element angezeigt wird – Text, Bild, Link oder etwas anderes. Hier kannst du den gesamten Inhalt ganz ohne Styling anpassen.

Inhalt-Tab

Auf der Registerkarte “Stil” findest du die Tools, mit denen du das Erscheinungsbild deines Inhalts ändern kannst. Farben, Schriftarten, Hintergründe, Ausrichtungen, Ränder und Ränder. Die Benutzeroberfläche ist einfach, daher wirst du sicher verstehen wollen, wie man sie verwendet, nachdem du ein paar Minuten herumgespielt hast.

Produktseite anpassen-Stil

Die Registerkarte „Erweitert“ enthält verschiedene Zusatzfunktionen wie den Hintergrund des gesamten Elements oder die Eingangsanimation. Du wirst es nicht oft brauchen, aber du solltest dir trotzdem die Funktionen hier schauen, wenn du sie mal brauchst.

Erweitert-Tab

Mit Elementor Page Builder wird das Erstellen von Seiten so einfach und interessant wie das Spielen eines Videospiels. Du wählst die Vorlage mit passender Struktur aus, wendest sie an und passt sie dann an das Design des von dir verwendeten Themas an (oder nicht, es liegt ganz bei dir, wie deine Site aussehen soll, aber ich empfehle, sich mindestens an eine festgelegte Farbe zu halten). Nach dem Erstellen einer Seite kannst du diese Seite als Vorlage speichern und für alle anderen Teile deiner Webseite verwenden.

So erstellst du einen Beitrag mit Elementor

Wenn es um die Erstellung neuer Beiträge geht, kannst du nicht einfach den oben beschriebenen Prozess ausführen. Versuchen wir also, einen Beitrag von Grund auf zu erstellen, und sehen wir uns einige andere Funktionen an.

Woraus besteht ein Beitrag? Normalerweise besteht es aus dem Titel, dem angezeigten Bild, den Metadaten, dem Text, den Schaltflächen zum Teilen und den Kommentaren. In deinem Fall können sich auch einige Unterschiede ergeben. Wenn du also der Meinung bist, dass du weitere Schaltflächen oder Listen hinzufügen musst, solltest du dies einfach machen.

Hier erstelle ich einen sehr einfachen Beitrag, damit du sehen kannst, wie alle grundlegenden Funktionen gelingen. Ich werde damit beginnen, alle genannten Elemente auf dem Arbeitsfeld abzulegen (einige davon sind bereits vorhanden). Keine Sorge, wenn du irgendwann die Position eines Elements ändern möchten, ist dies kein Problem.

Beitrag 1

Es ist Zeit, alles schöner aussehen zu lassen. Drücke auf das Titelelement und lege die Details des gewünschten Erscheinungsbilds fest. In meinem Fall kann ich die Schriftart, Ausrichtung und Größe des Titels ändern.

Beitrag-Titel

Jetzt legen wir das Bild fest. Klicke auf das Bildelement, wähle das Bild aus und lege die Ränder fest.

Bild eingefügt

Ich habe auch den Text des Beitrags zum Textabschnitt hinzugefügt und die Schriftart und Größe der Buchstaben geändert. Die Schaltflächen und der Kommentarbereich sind in Ordnung, daher habe ich sie unverändert gelassen.

Als Vorlage speichern

Super! Eine einfache Beitragsseite ist fertig. Um es als Vorlage für die weitere Verwendung zu speichern, musst du die kleine Pfeiltaste unten neben dem Speichern Button drücken und eine Speicheroption auswählen.

Beitrag Schrift verändert

Fazit

Es gibt eine Menge anderer Funktionen, die Elementor Ihnen anbieten kann. Wenn Sie jedoch die Grundlagen von Elementor Page Builder beherrschen, steht Ihnen eine umfangreiche und praktische Toolbox zur Verfügung. Elementor Page Builder ist ein großartiges Tool, mit dessen Hilfe Sie ein noch besseres Blog erstellen können, als Sie es bereits getan haben.

9 Beste Drag and Drop WordPress Page Builder im Vergleich (2019)

9 Beste Drag and Drop WordPress Page Builder im Vergleich (2019)

Die 9 besten Drag and Drop WordPress Page Builder im Vergleich (2019)

Sie suchen nach einer einfachen Möglichkeit, Ihre WordPress-Webseite einfach zu erstellen und anzupassen? An dieser Stelle kommen Drag & Drop-Page Builder-Plugins für WordPress zum Einsatz.

Die WordPress Page Builder ermöglichen es Ihnen, Ihr Website-Layout zu erstellen, zu bearbeiten und anzupassen, ohne irgendwelchen Code schreiben zu  müssen, noch Code zu verstehen. In diesem Artikel werden ich Ihnen, die derzeit 8 besten Drag&Drop-Page-Builder für WordPress vorstellen und vergleichen.

Warum sollen oder wollen Sie einen Drag & Drop Page Builder für WordPress eigentlich verwenden?

Wenn Sie einen WordPress-Blog starten wollen, fällt es den meisten Anfängern schwer, ihr WordPress-Seitenlayout anzupassen.

Da auch zahlreiche WordPress-Themen, insbesondere die Premium-Themen mit unterschiedlichen Seitenlayouts ausgestattet sind, sind die meisten von ihnen für jeden, der keinen Code kennt (HTML / CSS), extrem schwer anzupassen.

Aus diesem Grund stellen mir Benutzer oft Fragen wie: “Wie können wir WordPress leichter mit Drag & Drop gestalten?” oder “Gibt es nicht einen einfachen Drag & Drop-Page Builder für WordPress?”

Wenn ich mit Leuten spreche, die von Blogger, Jimdoo, Weebly oder Wix zu WordPress wechseln, ist ihre häufigste Antwort: “Ich wünschte, WordPress hätte einen Drag&Drop-Page Builder”.

Nun, es gibt zahlreiche großartige Drag & Drop-Plugins für die Seitengestaltung von WordPress-Webseiten. Diese gestatten es Ihnen,  in WordPress völlig individuelle und einzigartige  Webseiten-Designs zu erstellen, ohne eine einzige Zeile Code schreiben zu  müssen.

Da es so viele verschiedene WordPress Page Builder Plugins auf dem Markt gibt, haben ich mich entschlossen, die besten Page Builder-Plugins für WordPress zu vergleichen und zu bewerten, sodaß Sie die richtige Lösung für Ihre Bedürfnisse wählen können.

Unsere Kriterien für den Vergleich dieser WordPress-Page Builder sind: Benutzerfreundlichkeit, Flexibilität, Geschwindigkeit und dia Gestaltung des Design.

Lassen Sie uns gemeinsam einen Blick auf die besten Page Builder für WordPress auf dem Markt werfen.

1. Der Beaver Builder

BeaverBuilder-Page-Builder

Beaver Builder ist ein Drag & Drop Page Builder Plugin für WordPress der  Premium-Klasse. Nach unserer Auffassung zählt es zu den WordPress Page Builder, die zu den, das haben Tests ergeben, schnellsten und Ressourcen schonenden auf dem Markt gehören.

Es ist extrem schnell und wird mit einer integrierten Übersicht geliefert, die Ihnen hilft, sich schnell mit der Benutzeroberfläche vertraut zu machen.

Beaver Builder wird mit einer Live-Drag & Drop-Schnittstelle geliefert. Sie können alle Ihre Änderungen sehen, wenn Sie sie hinzufügen, indem Sie einfach Elemente aus der rechten Seitenleiste auf Ihre Arbeitsfläche ziehen. Sie können auf jedes Element einer Seite klicken, um seine Eigenschaften zu bearbeiten.

Es gibt Module, mit denen Sie vieles hinzufügen können, was Sie brauchen, einschließlich Slider, Karussell, Hintergründe, Inhaltsblöcke, Schaltflächen und noch vieles mehr.

Es kommt auch mit über 30 gut gestalteten Vorlagen für Landingpages, die es Ihnen ganz einfach und rasend schnell ermöglichen, ansprechende Webseiten-Layouts zu erstellen.

Ich stelle fest, dass Beaver Builder sehr anfängerfreundlich ist. 

Sie fragen sich, ob es mit der neuen WordPress-Version kompatibel ist? Ja, das ist es.

Beaver Builder wurde im Rahmen des Gutenberg-Projekts aktualisiert. Es funktioniert also gut mit Ihrem neuen Gutenberg-Editor.

Die Preisgestaltung ist einfach: Ab 99 $ für unbegrenzte Webseiten.

Unsere Note: 2

Fazit: Beaver Builder ist zählt zu den besseren Page Buildern auf dem Markt. Es wird mit vorgefertigten Vorlagen geliefert, die Ihnen den Einstieg erleichtern. Die Möglichkeit, jedes kleine Detail individuell anzupassen, macht es zur perfekten Lösung für WordPress-Anwender. Aber es ist ein kostenpflichtiges Plugin.

divi builderplugin

Divi ist ein Drag & Drop-Design und WordPress Page Builder Plugin. Es ist extrem einfach zu bedienen und wird mit über 20 Layouts/Vorlagen für unterschiedliche Webseitentypen zu Verfügung gestellt.

Genau wie der Beaver Builder ist der Divi Builder ein visueller Drag & Drop Page Builder, ein echter WYSIWYG-Editor (d.h. was Sie sehen, ist auch das, was Sie bekommen).

Sie können direkt auf Ihre Seite in der Echtzeit-Vorschau alle Änderungen durchführen und so bequem mit der Bearbeitung beginnen. Sie müssen also nicht speichern und dauernd auf Vorschau klicken, um Ihr neues Design zu sehen.

Divi wird derzeit mit 46 Inhaltsmodulen geliefert, die Sie per Drag & Drop an jede beliebige Stelle in Ihrem Layout ziehen können. Sie können sie in 3 diversen Abschnittsarten, 20 Zeilentypen anordnen und jedes Element mit seinen erweiterten Designeinstellungen anpassen.

Mit Divi können Sie innerhalb weniger Minuten jede Art von benutzerdefiniertem Seitenlayout erstellen, ganz wie Sie wünschen. Sie können außerdem diese Divi-Layouts dann für die spätere Verwendung auf Ihrer Website speichern. So können Sie ein Layout auch von einer Divi-Installation in eine andere exportieren.

Das Divi Builder Plugin ist um Grunde das Rückgrat des Divi Themes, funktioniert aber ebenso gut mit jedem anderen WordPress Theme.

Das Beste von allem, Divi hat im Grunde genommen, den besten Preis in allen Optionen in dieser Beziehung. Warum? Nun, für den Einzelpreis erhalten Sie das Divi-Thema, das Divi-Pagebuilder-Plugin und alle anderen Elegant Themes-Produkte.

Das bedeutet, dass Sie das Divi-Thema verwenden oder das Divi Builder-Plugin auf einem anderen Theme installieren können.

Preisgestaltung: Ab 89 $ pro Jahr

Achtung: bis 27 März 2019 gilt noch das Spezial-Angebot.

Unsere Note: 2-

Fazit: Divi ist eine großartige Alternative zum Beaver Builder. Es verfügt über einen leistungsstarken Page Builder mit grenzenlosen Gestaltungsmöglichkeiten. Ihre große Anzahl von Inhaltsmodulen ermöglicht es Ihnen, buchstäblich jede Art von Website zu erstellen, die Sie wirklich wollen. Allerdings hat Divi durch seinen Umfang auf den größten Ballast an Code und das wirkt sich auf die Performance der Webseiten aus. Daher nur Note 2-

3. Visual Composer Website-Builder

Visual Composer

Der Visual Composer Website Builder ist ein benutzerfreundlicher WordPress Website Editor, der Ihnen hilft, benutzerdefinierte Website-Layouts schnell zu erstellen.

Es kommt mit einem einfachen Drag & Drop-Builder, Out-of-Box-Inhaltselementen, professionellen Vorlagen und einer Vielzahl von leistungsstarken Funktionen zur Erstellung einer Website.

Ähnlich wie Beaver Builder und Divi bietet es auch ein echtes Frontend-Editier-Erlebnis bei der Gestaltung einer Website. Aber es gibt noch viel mehr, was man mit diesem Plugin machen kann. Im Gegensatz zu anderen Plugins in der Liste können Sie mit dem Visual Composer Website Builder Ihr Logo, Ihre Menüs, Kopf- und Fußzeilen, Seitenleisten usw. bearbeiten.

Aus diesem Grund beschließt das Team, es als Website-Ersteller zu bezeichnen, anstatt nur als Seitenersteller.

Das Plugin verfügt über leistungsstarke Designoptionen, mit denen Sie das Aussehen jedes Elements auf Ihrer Seite anpassen können. Sie haben einfache Optionen, um stilvolle Hintergründe wie Parallaxe, Farbverlauf, Diashow, Karussell, Zoom in/out, Video, etc. hinzuzufügen. Es verfügt auch über flexible Zeilen und Spalten für die Erstellung von Rasterlayouts auf Ihrer Website.

Visual Composer funktioniert gut mit allen WordPress-Themen. Auf diese Weise können Sie Ihre Designs wechseln, ohne eigene Layouts zu verlieren, die Sie mit Visual Composer erstellt haben.

Es beinhaltet auch die Unterstützung für den neuen Gutenberg Editor, Google Fonts und Yoast SEO.

Visual Composer wurde für Profis entwickelt, und es zeigt sich an der Aufmerksamkeit für Details wie die Erinnerung an Ihre Farbauswahlen, die es Ihnen ermöglichen, die gleiche Farbpalette für eine einheitliche Gestaltung im gesamten Design zu verwenden.

Preis: Nur 59 $ für eine Standardlizenz

Unsere Note: 3

Fazit: Der Visual Composer ist ein großartiges Plugin für Anfänger, um eine Website zu starten. Es bietet leistungsstarke Funktionen für die Erstellung von Websites auf einfache Weise. Die Website-Bearbeitung wird mit dem echten Frontend-Drag & Drop-Editor besonders einfach. Jedoch, da ich selbst den Visual Composer gekauft aber kaum genutzt habe, denn er hat mich nicht so zu 100 % überzeugt.

4. WP Bakery Page Builder

Wpbakery Page Builder

Der WPBakery Page Builder ehemals der Visual Composer, aber entspricht der WPBakery Page Builder = dem Visual Composer Page Builder?
Ab Oktober 2017 wurde das Visual Composer Page Builder Plugin für WordPress in WPBakery Page Builder umbenannt. Diese Änderungen haben keinen Einfluss auf weitere Updates des Plugins und Kunden, die in der Vergangenheit den Visual Composer Page Builder gekauft haben, können WPBakery Page Builder-Updates ohne Aufpreis erhalten.

Worin besteht also der Unterschied zwischen WPBakery Page Builder und Visual Composer?
Visual Composer Website Builder und WPBakery Page Builder sind beide unabhängige Produkte. Mit der Begründung, dass nicht einfach der eine durch den anderen ersetzt werden könne (noch haben wir Pläne, später ein Migrationstool zu schreiben).

WPBakery Page Builder kümmert sich um den Inhaltsteil, während der Visual Composer Website Builder ein neues Produkt ist, das darauf abzielt, Lösungen für die Erstellung der gesamten Website anzubieten (z.B. Logo und Menüelemente hinzufügen). Was die Designoptionen betrifft, so bietet der Visual Composer Website Builder viele weitere Funktionen und Bibliotheken. Darüber hinaus verfügt der Website-Builder über den Visual Composer Hub, wo Elemente und Vorlagen der Premiumklasse zum Herunterladen zur Verfügung stehen. In naher Zukunft wird Visual Composer Hub für Drittanbieter offen sein, um ihre Inhalte anzubieten.

Visual Composer Website Builder ist ein völlig neues WordPress Builder Plugin, das unter der Marke Visual Composer veröffentlicht wurde.  Siehe oben. Auf Leistung und Benutzerfreundlichkeit zugeschnitten, kombiniert es die besten Funktionen des Page Builders auf neue Weise mit völlig neuen Ideen, die in WordPress noch nie zu sehen waren.

Der WPBakery Page Builder ist und wird auf wpbakery.com verfügbar sein und wird neue Feature-Updates und kontinuierlichen Support erhalten.

WPBakery Page Builder arbeitet problemlos mit allen korrekt kodierten Themen. Was bedeutet “richtig kodiertes Thema”? Es gibt einen offiziellen WordPress-Kodex, der Regeln festlegt, die bei der Entwicklung Ihres WordPress-Themas zu beachten sind. Wenn Sie Ihr Design nach dem WordPress-Kodex entwickelt haben, dann ist es kein Problem, dort den WPBakery Page Builder zu verwenden.

Preis: 45 $ 

Unsere Note: 3-

Fazit: Der WPBakery Page Builder ist eine Weiterentwicklung und hat sich in dem letzen Jahr doch gemausert, aber man muss abwarten was die Zeit bringt. Darum nur die Note 3-. Da ich selbst beide Produkte genutzt habe, habe sie mich nicht so zu 100 % überzeugt.

Elementor ist ein weiteres sehr mächtiges Drag & Drop-Plugin um mit WordPress Webseiten einfach und schnell zu gestalten.

Es ist ein Live-Plugin für den Page Builder, d.h. Sie können Ihre Änderungen live sehen, während Sie sie mit Elementor bearbeiten. Beginnen Sie einfach zuerst mit der Erstellung von Abschnitten und wählen Sie dabei die Anzahl der Spalten für jeden Abschnitt aus.

Sie können dann  die sogenannten Widgets per Drag & Drop aus dem linken Bereich in Ihren Arbeitsbereich ziehen. Elementor kommt mit zahlreichen Widgets, einschließlich der am häufigsten verwendeten WordPress-Website-Elemente.

Von einfachen Bild- und Text-Widgets bis hin zu erweiterten Akkordeons, Slidern, Testimonials, Symbolen, Social Media, Tabs usw. Jedes Widget hat seine eigenen Einstellungen.

Elementor lässt Sie auch Widgets hinzufügen, die von anderen WordPress-Plugins erstellt wurden.

Sie wollen kein eigenes Layout erstellen?

Elementor wird mit ziemlich vielen gebrauchsfertigen Vorlagen geliefert, die Sie einfach in Ihre Seiten einfügen können. Sie können diese einfach anschauen, darauf zeigen und klicken, um dann darin ein beliebiges Element auf der Seite zu bearbeiten, den Inhalt zu ersetzen und schon sind Sie fertig. Elementor kommt in einer freien Version und einer PRO-Version. Die freie Version kann aber mit sehr vielen kostenlosen weitere Plugins fast zur Pro-Version aufgerüstet werden. Die Webseite ist zum größten Teil mit Elementor erstellt.

Zudem ist Elementor, mit über 2 Millionen Installationen, das am häufigsten genutzte Page BuilderSystem für WordPress.

Preisgestaltung: Ab 49 $  für eine Einzelplatzlizenz.

Unsere Note: 2+

Fazit: Elementor ist ein beliebtes Page Builder Plugin für WordPress. Es ist schnell, einfach zu bedienen und wird mit einer Vielzahl von Modulen / Vorlagen geliefert. Zudem wird Elementor permanent und unglaublich schnell weiterentwickelt. Ich selbst nutze es auf mehr als 40 Webseiten.

6. Brizy Page Builder

Brizy Page Builder

Die Erstellung von WordPress-Seiten sollte schnell und einfach sein. Brizy ist eine neue und innovative Art, WordPress-Seiten visuell zu erstellen. Es werden keine Designer- oder Entwicklerkenntnisse benötigt. Die einzigen Werkzeuge, die Sie benötigen, sind Klicks und Drag & Drop, also im Grunde nur die Maus.

Die HIGHLIGHTS

SMART & ÜBERSICHTLICH
Die meisten Page Builder bieten alle Optionen für ein bestimmtes Element in einer seitlichen Seitenleiste, so dass es oft schwierig ist, sich auf die jeweilige Aufgabe zu konzentrieren. Brizy zeigen nur das, was benötigt wird, Frontpage & Center, sind in der Nähe des Elements, das Sie bearbeiten.

INTUITIVES DRAG & DROP
Das Verschieben von Inhaltselementen, Spalten oder Zeilen ist mit unserer intuitiven Drag & Drop-Funktion ein Kinderspiel. Einfach greifen und an die gewünschte Position ziehen und schon fällt alles dorthin wo es hin muss.

DESIGNELEMENTE
Text, Schaltflächen, Bilder, Symbole, Videos, Karten und vieles mehr sind bereit, um Ihnen zu helfen, Ihr Seitendesign im Handumdrehen zu erstellen.

ÜBER 150 VORGEFERTIGTE BLÖCKE
Blöcke sind vorgefertigte Designs, die Sie zu Ihrer Seite hinzufügen können, bereit, angepasst zu werden. So können Sie in wenigen Minuten die Hauptstruktur Ihrer Seite erstellen und gleichzeitig sicherstellen, dass sie fantastisch aussieht.

ÜBER 4000 ICONS INKLUSIVE
Erhältlich in den Versionen Outline und Glyph, werden da selbst die anspruchsvollsten Anforderungen an Symbole erfüllt. Finden Sie schnell die Symbole, nach denen Sie suchen, indem Sie durch Kategorien filtern oder nach Schlüsselwörtern suchen.

GLOBALES STYLING
Wollten Sie schon immer alle ähnlichen Farben in Ihrer Webseite mit einem einzigen Klick ändern? Mit Brizy können Sie das! Nicht nur das, sondern Sie können auch alle Texte, die die gleichen Eigenschaften haben, in einem Schritt ändern.

TABLET & HANDYFREUNDLICH
Wechseln Sie sofort in den Modus Mobile ANSICHT, wo Sie Änderungen vornehmen können, die nur für diese Art von Geräten gelten. Dies gibt Ihnen die Möglichkeit, Ihr Seitendesign zu differenzieren und für kleinere Bildschirme zu optimieren.

INTELLIGENTER TEXTEDITOR
Klicken und tippen Sie einfach, um alle Texte an Ort und Stelle zu bearbeiten. Durch die Änderung von Farben, Schriften und Ausrichtungen direkt vor Ort können Sie perfekt darstellen, wie das Design am Ende aussehen wird.

BILDER RICHTIG GESTALTET
Übernehmen Sie die volle Kontrolle über Ihre Website-Bilder, indem Sie unsere leistungsstarken und benutzerfreundlichen Optionen nutzen. Hochladen, Fokussieren, Zoomen und Ändern der Größe sind mühelos und in Sekundenschnelle erledigt.

INHALTLICHE ANPASSUNGEN
Nur ein paar Klicks sind nötig, um die Inhalte in Breite, Höhe und Ausrichtung anzupassen. Alles mit intuitiven Optionen, die dort platziert werden, wo sie sein sollten.

SPALTENGRÖßE ÄNDERN
Ändern Sie die Größe der Spalten, indem Sie den dazwischen angezeigten Griff ziehen, wobei die Prozentwerte oben angezeigt werden. Der Inhalt wird automatisch an die neue Größe angepasst.

UNDO / REDO
Machen Sie sich keine Sorgen, wenn Sie einen Fehler machen oder etwas löschen, was Sie nicht hätten tun sollen. Mit Undo können Sie alles zurückbekommen.

AUTOMATISCH in der CLOUD SPEICHERN
Die Fortschritte, die Sie beim Aufbau Ihrer Seite erzielen, werden immer in der Cloud gesichert, so dass Sie Ihre Arbeit nicht verlieren.

Preisgestaltung: kostenlos

Unsere Note: 3+

Fazit: Brizy ist ein interessantes, neues Projekt am Page Builder Firmament. Mit bereits 40.000 Installationen und einer Facebookcommunity kann sich dieser Brizy Page Builder zum neuen Star entwickeln. Ich selbst habe es bei einer Website schon ausprobiert und war sehr positiv überrascht von der Geschwindigkeit bei der Entwicklung. Allerdings muss man die weitere Entwicklung genau beobachten.

7. Oxigen Page Builder

Oxygen Page Builder

Den Oxygen Page Builder habe ich erst vor kurzem kennengelernt und muss ihn erst testen und beobachten. Ich werde dann weiter berichten.

Preisgestaltung: 99 $ Einmalzahlung

Unsere Note: folgt

Fazit: folgt nach Test

8. Thrive Architect Page Builder by Thrive Themes

Thrive Architect Page Builder

Leider teilt Thrive Themes, der Anbieter des Thrive Architect PageBuilder, die Anzahl der aktiven Installationen nicht mit.

Der Thrive Architect Page Builder ist ein wenig komplex in der Anwendung, und neue Benutzer haben des öfteren ihre liebe Not, sich damit auseinander zu setzen. Allerdings musste ich ihn wegen seiner Popularität in unsere Liste aufnehmen, da er inzwischen von einige Affilate Gurus sehr stark promotet wird.

Als Komponenten verfügt der Thrive Architect Page Builder zahlreiche Elemente. Es kommt mit mehreren eigenen Widgets, und Sie können jedes beliebige Widget herunterladen und installieren.

Zudem ist der Thrive Architect Page Builder ein Baustein der Thrive Themes, welche mit zahlreichen einzelnen Bausteine ausgestattet sind. Dis sind die folgenden Bestandteile:

  1. Thrive Architect & Thrive Optimize
  2. Thrive Themes
  3. Thrive Leads
  4. Thrive Quiz Builder
  5. Thrive Ultimatum
  6. Thrive Ovation
  7. Thrive Clever Widgets
  8. Headline Optimizer
  9. Thrive Apprentice
  10. Thrive Comments

Es kommt auch mit einem Redo-Tool, mit dem Sie hin und her wechseln können, um Änderungen, die Sie vorgenommen haben, rückgängig zu machen oder wiederherzustellen. Dies ist ein großer Zeitgewinn, und es gibt Ihnen die Gewissheit, dass Sie Änderungen rückgängig machen und rückgängig machen können.

Das Thrive Architect Page Builder Plugin und alle seine Widgets sind vollständig Gutenberg kompatibel. Es gibt auch zahlreiche Vorlagen insbesondre für Landingpages.

Preisgestaltung: ab 67 $ für eine einzelne Webseite

Unsere Note: 3+

Fazit: Der Thrive Architect Page Builder ist ein sehr ausgereiftes Plugin mit Drag-and-Drop-Schnittstelle zum Erstellen und Anpassen von Landingpages. Allerdings ist der Umfang nicht mit anderen in diesem Vergleich genannten Lösungen vergleichbar. Nur das komplette Paket mit allen 10 einzelnen Produkten verfügt über geringfügig mehr Umfang schlägt aber mit einer monatlichen Gebühr ab 19 $ zu. Ein weiterer negativer Punkt ist, dass die meisten Dokumente und Videos nur in Englisch zur Verfügung stehen und noch wenig in der deutschen Gruppe auf Facebook passiert. Allerdings gibt es einige Kurse, auch auf Deutsch, bei Udemy, die oft zu einem geringen Salär angeboten werden.

9. Page Builder by SiteOrigin

Page Buider by SiteOrigin

Mit mehr als einer Million aktiven Installationen ist der Page Builder von Site Origin ein beliebter kostenloser WordPress Page Builder auf dem Markt. Einer der Hauptgründe für seine Beliebtheit ist der Preis (kostenlos). Es ist als voll funktionsfähiges, kostenloses Plugin erhältlich.

Site Origin Page Builder ist ein wenig kompliziert in der Anwendung, und neue Benutzer haben oft Schwierigkeiten, sich damit vertraut zu machen. Allerdings mussten wir wegen seiner Popularität in unsere Liste aufgenommen werden.

Für Komponenten ermöglicht Ihnen der Site Origin Page Builder die Verwendung von WordPress Widgets. Es kommt mit mehreren eigenen Widgets, und Sie können jedes beliebige Widget herunterladen und installieren.

Sehen Sie sich unsere Liste der 25 nützlichsten WordPress Widgets an, da Sie sie alle mit diesem Page Builder verwenden können.

Es kommt auch mit einem History-Tool, mit dem Sie hin und her wechseln können, um Änderungen, die Sie vorgenommen haben, rückgängig zu machen oder wiederherzustellen. Dies ist ein großer Zeitgewinn, und es gibt Ihnen die Gewissheit, dass Sie Änderungen rückgängig machen und rückgängig machen können.

Das SiteOrigin Plugin und alle seine Widgets sind vollständig Gutenberg kompatibel. Es gibt auch einen neuen SiteOrigin Layoutblock, den Sie als Gutenberg-Block verwenden können.

Preisgestaltung: Kostenlos

Unsere Note: 3-4

Fazit: Site Origin Page Builder ist ein gutes kostenloses Plugin mit Drag-and-Drop-Schnittstelle zum Erstellen und Anpassen von Layouts. Allerdings ist die Live-Editierung nicht mit anderen in diesem Vergleich genannten Lösungen vergleichbar.

Elementor 2.0 ist da

Elementor 2.0 ist da

Die Einführung von Blöcken - Der schnellste Weg zur Erstellung von WordPress-Webseiten

Elementor 2.0 ist da
Video anzeigen?

Wenn du eingebettete Videos auf dieser Seiten sehen möchtest, werden personenbezogene Daten (IP-Adresse) an den Betreiber des Videoportals gesendet. Daher ist es möglich, dass der Videoanbieter deine Zugriffe speichert und dein Verhalten analysieren kann.

Wenn du den Link hier unten anklickst, wird ein Cookie auf deinem Computer gesetzt, sodass die Website weiß, dass du der Anzeige von eingebetteten Videos in deinem Browser zugestimmt hast. Dieses Cookie speichert keine personenbezogenen Daten, es erkennt lediglich, dass eine Einwilligung für die Anzeige der Videos in deinem Browser erfolgt ist.

Erfahre mehr über diesen Aspekt der Datenschutzeinstellungen auf dieser Seite: Datenschutzerklärung

Videos anzeigen

Alternativ kannst du auch diesen Link benutzen, der dich direkt zum Video auf die Website des Videoanbieters bringt: https://www.youtube.com/watch?time_continue=1&v=VRoPdyk97mg

Wir stellen vor: #elementor Blocks, eine neue, flexible Möglichkeit, #WordPress-Seiten zu erstellen.

Wir freuen uns, #Elementor Blocks vorzustellen, bereits vorgefertigte Sektionsvorlagen, die einfach zu einer kompletten und schönen Website oder Landingpage kombiniert werden können.

Denke bei den Blöcke an Legosteine. Sie wählen die relevanten Blöcke aus – beginne mit den Heros (Helden), den Dienstleistungen (Services), einem Testimonial (testimonial)  und den anderen Teilen Deiner Seite, und dann passt Du jeden einzelnen an, damit er zu Deiner Website passt.

Die Arbeit mit einer solch vollständigen Seitenvorlage ist großartig, aber manchmal möchtest Du nicht, dass die gesamte Seite für Dich voreingestellt ist. Mit den Blocks erhältst Du die Bequemlichkeit vorgefertigter Layouts und die Flexibilität der einzelnen Zusammenstellung und Auswahl der einzelnen Abschnitte.

elementor-blocks-library

Wie es funktioniert

Brauchen Sie eine Heldensektion? Vielleicht ein Empfehlungsschreiben? Sortieren Sie durch die Liste der relevanten Blöcke und finden Sie denjenigen, der am besten zu Ihnen passt.

Wir haben alle Elemente einer Seite identifiziert und kategorisiert und Ihnen eine breite Palette von Blöcken zur Verfügung gestellt.

Und so funktioniert es

Wenn Sie auf’Vorlage hinzufügen’ klicken, sehen Sie die Registerkarte’Blöcke’. Hier können Sie die verschiedenen verfügbaren Blöcke durchsuchen und filtern, indem Sie den gewünschten auswählen.

Anstatt mit einem leeren Abschnitt zu beginnen, können Sie einen Block auswählen, um Ihren Abschnitt mit Inhalt zu füllen. Dann können Sie es anpassen und zu Ihrem eigenen machen. Jeder Block ist mit Blick auf Einfachheit und Unabhängigkeit gebaut, was dem Anwender das Zusammenfügen der verschiedenen Blöcke erheblich erleichtert.

vid_gif_1

Für Anfänger und Profis gleichermaßen geeignet

Blöcke sind nicht nur ein neues Feature, sie stellen einen alternativen Workflow dar, der sowohl für Anfänger als auch für professionelle Webdesigner, die Websites für ihren Lebensunterhalt erstellen, nützlich sein kann.

Für Anfänger es ermöglicht Dir, das zu erstellen, was Du willst – Anfängern fehlt es manchmal an Erfahrung, um einen notwendigen Teil einer Seite zu erstellen. Sie wissen, dass ihre Landingpage einen Kontaktformularbereich benötigt, sie wissen nur nicht, wie man ihn erstellt. Bei Blocks geht es nur darum, den richtigen Block auszuwählen, ihn einzufügen und den Inhalt ein wenig zu optimieren.

Für professionelle Designer, es ermöglicht durch Blöcke einen schnelleren Workflow – Blöcke sind einfach und unabhängig. Dies macht es einfach, verschiedene Blöcke miteinander zu kombinieren. Sobald Du einen bestimmten Block hinzugefügt hast, kannst Du den Block ganz einfach duplizieren, ziehen, löschen oder ändern, ohne die anderen Bereiche der Seite zu beeinflussen.

Schnellerer Workflow

Die Verwendung von Blöcken kann einen echten, psitiven Einfluss auf Deinen Workflow haben.

Bei richtiger Anwendung kannst Du einen schlanken Prozess entwickeln, der so aussieht:

  • Erzeugen von Basis-Elementen
  • Erstellen von Seiten mit Blöcken
  • Anpassen jedes Blocks
  • Speichern Deiner neuen benutzerdefinierten Blöcke als Abschnittsvorlagen.
  • Wiederverwenden gespeicherte Abschnitte in anderen Projekten 


Dieser Erzeugen > Erstellen > Anpassen > Sichern > Wiederverwenden Workflow ist ein kontinuierlicher Prozess, der optimiert werden kann, um Dich als Webdesigner in die Lage zu versetzen, viel mehr Projekte in viel kürzerer Zeit abzuschließen.

Eine riesige Liste von Blöcken, die weiter wachsen wird

Wir haben eine riesige Auswahl an Designer-Blöcken erstellt, die so gut wie jeden benötigten Abschnitt abdecken.

Es gibt nicht weniger als 235 verschiedene Blöcke in Elementor, verteilt auf 15 beliebte Kategorien: Header, Services, Kontakte, Preis, Team, Testimonials, Portfolio / Galerie, Kunden / Freunde, About, Call to action, FAQ, Progress Bar, Countdown, Subscribe, Formulare, Footer, Features.

Wir haben sowohl dunkle als auch helle Block-Bausteine aufgenommen. Dies ist entscheidend, da Du einen dunklen Block leicht mit einer einfachen Änderung der Hintergrundfarbe und einigen kleinen Optimierungen an eine dunkle Website anpassen kannst.

Suche nach dem, was Du suchst und wähle Deine beste Kombination. In Zukunft wird die Blocks-Bibliothek auch Kategoriefilter enthalten.

List-Blocks-4.2-1

Arbeiten Sie klüger, nicht härter. Beginnen Sie mit #elementor Blocks, und bauen Sie Websites unglaublich – schnell!

Erstelle jetzt Deine erste Seite mit Blöcken

Blöcke sind das erste Feature-Release von Elementor 2.0. Wenn Du es verpasst haben solltest, schaue unsere 2.0-Roadmap an.

Nächsten Monat werden wir die Header-Footer-Funktion veröffentlichen, die Dir die Kontrolle über das Header- und Footer-Design gibt, was bisher statisch war und was vom Theme stammt.

Da wir immer mehr Funktionen von Elementor 2.0 veröffentlichen, werden Blöcke immer relevanter, da sie zur Erstellung dynamischer Inhalte verwendet werden.

Welche Blöcke möchtest Du gerne sehen? Gehe die Liste durch und teile uns in den Kommentaren mit, welche Blöcke Du am liebsten hinzufügen möchtest.

Dieser Beitrag ist eine Übersetzung des original Beitrags von Elementor.com Auch die Bilder sind © Elementor.com

Bitte Teilen

Share on facebook
Share on google
Share on twitter
Share on linkedin

Widget Eintragungsformular-Test

Leadgeneireungs-Widget

Wie kannst Du in Elementor ein Formular zur Leadgewinnung im Widget machen?

Heute habe ich mal einige Versuche gemacht um Dir zeigen zu können, ist es überhaupt möglich einen Beitrag oder eine Seite so zu gestalten, dass diese in einem Widget in der Seitenleiste sichtbar wird und Du damit eine Formular zu Leadgewinnung erstellen kannst.

Und ja, es ist gelungen. jetzt willst Du sicherlich wissen, wie kannst Du das auch realisieren. Du sieht unten das Ergebnis, das ich als Dummy-Vorlage hier erstellt habe. Und das Du jetzt in der rechten Seitenleiste sehen kannst. 

Gib hier deine Überschrift ein

Kurzer Text

  • Listenelement #1
  • Listenelement #2
  • Listenelement #3

Die einzelnen Schritte

Zuerst habe ich mit einem Beitrag (Post) wie diesem hier experimentiert und war da mit dem Einfügen in ein Widget auf dem Holzweg. Also nächster Versuch und kam dann über das Backend unter Design in den Widget-Einstellung dahinter, dass nur Seiten scheinbar in ein Widget angezeigt werden können. Also nächster Versuch:

  • Seite erstellen.
  • Abschnitt mit Überschrift anfertigen
  • dann Text-Widget darunter.
  • Bild-Widget hinzufügen und
  • anschließend das Formularfeld,
  • sowie alternativ ein Listenelement-Widget.
  • Im weiteren Verlauf, den Abschnitt zum bearbeiten anklicken und
  • Jetzt die Inhaltsbreite auf 240 px einstellen
  • Sodann die Headline Schriftgröße und Farbe einrichten
  • Bild des Reports hinzufügen und eventuell Größe anpassen.
  • Nachfolgend das Formular mit Autoresponder (MailChimp, MailPoet oder passenden von Elementor vorgegebenen) verbinden
  • Und weitere Einstellungen am Formular nach Wunsch vornehmen
  • Zum Schluss kannst Du um das Element (Die Spalte) in der Mitte noch weitere Anpassungen realisieren, wie Rahmen, Hintergrundfarbe etc.

Und das Ganze dann entweder als Vorlage speichern oder die Seite veröffentlichen. Ich habe es als Vorlage gespeichert und als privat veröffentlicht, damit es nich gefunden wird.

Der nächste Schritt

Nachdem das geschafft war, habe ich mich im Backend unter Design, Widget, die Elementor Bibliothek in die Seitenleiste gezogen und dort kannst Du dann einstellen welche Seite angezeigt werden soll. Abschließend alles überprüfen und wenn alles OK aussieht ist das geschafft.

So kannst Du also mit eigenen Mitteln und Ohne zusätzliche kostenpflichtige Plugins auch ein solches Formular einbinden. Und ja, es ist nicht 100 % perfekt. Warum, weil Du keinen einfachen Splittest damit machen kannst.

Wenn Dir dieser Beitrag gefallen hat, freue ich mich über einen Kommentar unten. 

Hol Dir Jetzt den GRATIS Report!

erfolgreiche Landingpages mit Elementor
  • Wie Du Deine Landingpage von Beginn richtig aufbaust
  • Die Vorteile einer Landingpage
  • Dein Erfolg dank effektiverer Langingpages

Trag unten Deine E-Mail Adresse und Du erhältst den REPORT gratis und sofort!

Elementor: Landingpage – Vielfalt ohne Ende

Elementor: EASYLandingpage Online-Marketing für Alle!

Elementor: Landingpage Projekt - Übersicht

In den vergangen Tagen habe ich mal einige landingpages im Rahmen eines Projektes erstellt. Diese möchte hiermit mal öffentlich zeigen.

14 Landingpages zur Auswahl

Du siehst in dieser Landingpage Slideshow 14 Landingpages unterschiedlicher Ausprägung, die aber für weitere Gelegenheiten abgewandelt werden können, so dass es eigentlich unzählige Varianten geben könnte. Allein den Hintergrund zu wechseln, Die Headline abzuändern, die Farbe der Headline anzupassen (mehr als 1.6 Mill. Farben). Headline animiert zu gestalten. Die Texte, die Bilder, Videos, Buch-Cover, Podcasts, etc., etc. pp. 

Darum versuche Deine eigenen landingpages zu kreieren. Kopiere nicht die die landingpages der Gurus! Diese mögen ja optimiert und getestet sein, aber vielleicht sind Sie schon abgelutscht wie ein alter Drops. Klar, Du darfst Dir Anregungen holen. Keine Frage!

Und falls Du noch weitere Fragen hast, hole Dir mein E-Book: “Geheimnisse erfolgreicher Elementor Landingpages!” Klicke einfach unten auf den Link. 

Elementor 2.0 – der erste Beta-Test

Elementor 2.0 - Mein 1. Beta - Test

Elementor 2.0 Beta-Test: mein 1. Versuch

Seit kurzem ist die lang erwartete Version 2.0 vom Elementor PageBuilder zum testen da. Und selbstverständlich muss die sofort getestet werden, aber nicht in einer Live geschalteten Webseite. Darum werde ich sie auf einen lokalen WordPress Webseite einem kleinen Test unterziehen.

Heute, am Sonntag, den 11. März 2018 habe ich den ultimativen 1. Versuch gewagt und dabei noch ein kurzes Video aufgenommen, das ich jetzt gleich auch auf YouTube veröffentlichen werde. Und Du kannst dann weiter unten das Ergebnis sehen. 

Als erstes fällt auf, das bei den Vorlagen ein neuer Tab-Reiter links hinzugekommen ist. Dieser trägt die Aufschrift Blocks. Derzeit sind Blöcke in 13 Kategorien (categorys) vorhanden und es werden bis zum finalen Start bestimmt noch einige hinzu kommen. Was derzeit wohl die meisten vermissen werden sind Header und Footer Blöcke. Die Blöcke sind in 2 Versionen vorhanden. 1 mal mit weißem und zum anderen mit schwarzem Hintergrund. Und klar ist Du kannst sie deinen Wünschen anpassen. Die Texte sind naturgemäß in englisch.

Elementor 2.0 Beta-Test: Die Kategorien

Zuerst einmal möchte ich Dir jetzt die einzelnen Kategorien vorstellen und zwar dem Alphabet nach. Das wären im einzelnen:

  1. About (über uns)
  2. Call To Action
  3. Clients (Kunden)
  4. Kontakt(Kontakt-Formular)
  5. FAQ (Fragen und Antworten)
  6. Features (Merkmale und Eigenschaften)
  7. Hero (Idole, Protagonisten)
  8. Portfolio (Geschäftsbereiche)
  9. Pricing (Preisangaben)
  10. Services (Dienstleistungen, Serviceleistungen)
  11. Stats (Statistiken, Übersicheten)
  12. Team (Mannschaft, Belegschaft, Team)
  13. Testimonial (Referenzen)

Elementor 2.0 Beta-Test: Die einzelne Blöcke

Und als nächstes möchte ich Dir jetzt die einzelnen Blöcke vorstellen. 

Unter der Kategorie About findest Du 20 Blöcke. Das heißt, je 10 verschiedene mit weißem und mit schwarzem Hintergrund.

So bietet die Kategorie Call To Action, jeweils 13 Blöcke. Die Kategorie Clients, Portfolio & Team verfügen über 8 unterschiedliche Blöcke. FAQ weist 5 weiße und 5 schwarze Blöcke aus, während Features & Hero je 12 Blöcke inne hat. Dann hat Pricing & Stats 7 von jeder Farbstellung und 21 Blocks findest Du unter Services & Testimonials

Elementor 2.0 Beta-Test: Fazit

Zusammenfassend kann ich sagen, die Blöcke machen schon einen stabilen Eindruck Und es werden auch bestimmt in den nächsten Wochen die fehlenden Dinge und weitere Blöcke hinzukommen. Zumal heute Ben Pines verkündet hat, dass jetzt bereits 600.000 Installationen bereits Elementor nutzen und allein im letzten Monat 100.000 neue Nutzer zu Elementor gefunden haben. Das Alles wird einen neuen Schub der Motivation dem ganzen Team von Elementor geben und ich bin zuversichtlich, das sich die Innovationen weiter fortsetzen, so wie in der Vergangenheit.

Unten wirst Du jetzt noch das Video finden:

Elementor 2.0 - Mein 1. Beta - Test
Video anzeigen?

Wenn du eingebettete Videos auf dieser Seiten sehen möchtest, werden personenbezogene Daten (IP-Adresse) an den Betreiber des Videoportals gesendet. Daher ist es möglich, dass der Videoanbieter deine Zugriffe speichert und dein Verhalten analysieren kann.

Wenn du den Link hier unten anklickst, wird ein Cookie auf deinem Computer gesetzt, sodass die Website weiß, dass du der Anzeige von eingebetteten Videos in deinem Browser zugestimmt hast. Dieses Cookie speichert keine personenbezogenen Daten, es erkennt lediglich, dass eine Einwilligung für die Anzeige der Videos in deinem Browser erfolgt ist.

Erfahre mehr über diesen Aspekt der Datenschutzeinstellungen auf dieser Seite: Datenschutzerklärung

Videos anzeigen

Alternativ kannst du auch diesen Link benutzen, der dich direkt zum Video auf die Website des Videoanbieters bringt: https://www.youtube.com/watch?v=6yD6QAbasYw&feature=youtu.be

Elementor 2.0

Elementor 2.0 startet bald

Spannend: Was bringt Elementor 2.0 für Dich

Heute hat Ben Pines einen Blog-Artikel auf Elementor.com und ein Video in der Facebook Elementor Community veröffentlicht zu Elementor 2.0, den ich mal auf deutsch übersetzt habe:

Elementor v 2.0

Endlich ist alles innerhalb Ihrer WordPress-Website in Reichweite. Sie werden in der Lage sein, es visuell und einfach zu gestalten: Blöcke, Kopf- und Fußzeilen, dynamische Inhalte, einzelne Beiträge, Archivseiten, Suchergebnisseiten, 404 Seiten und vieles mehr.

Elementor startete vor 20 Monaten, und in dieser Zeit etablierten wir es als die Nummer 1 Lösung für den Seitenaufbau.

Jetzt ist es an der Zeit, über die Seitenebene hinauszugehen.

Ich würde gerne unsere kommende Roadmap durchgehen und beschreiben, wie wirkungsvoll Elementor 2.0 für Ihren Workflow sein wird.

Die Roadmap für die Zukunft

Wie bereits erwähnt, wird Elementor 2.0 bewusst nicht auf einmal gestartet. Die schrittweise Einführung jeder neuen Funktion hilft Ihnen dabei, sich an die einzelnen Funktionen zu gewöhnen.

Diese Methode ermöglicht es uns, gleichzeitig an einer Reihe von Funktionen zu arbeiten und jedes einzelne erst dann freizugeben, wenn es vollständig erprobt, getestet und zur Auslieferung bereit ist. Dies ist ein effektiver und stabiler Prozess, der uns seit der Einführung gute Dienste geleistet hat.

Nächste Woche werden wir die erste Beta-Version von Elementor 2.0 veröffentlichen – das Blocks-Feature. Blöcke sind eine neue Reihe von vorgefertigten Layouts, die es Ihnen ermöglichen, schnell verschiedene Sektionsdesigns zu mischen und aufeinander abzustimmen, wodurch Sie Ihre Websites und Landing Pages schneller als je zuvor generieren können.

Dann, im nächsten Monat, werden wir die lang erwartete Kopf- und Fußzeile veröffentlichen, die es Ihnen ermöglicht, Ihre gesamte Seite von oben nach unten zu gestalten, einschließlich des Kopf- und Fußbereiches, alles mit Elementor. Dies schließt das Entwerfen Ihres Menüs, Logos und Suchleiste ein; löst einen riesigen Schmerz von Theme-Benutzern, die mit dem Header- oder Footer-Design eines bestimmten Themas feststecken.

Nach dieser Veröffentlichung kommen weitere Goodies hinzu:

  • Die Möglichkeit, einzelne Beiträge und Archivseiten zu erstellen.
  • Anpassung Ihrer Suchergebnisse und 404 Seiten
  • Leistungsstarke Designkontrolle für WooCommerce-Shops, Produktseiten und andere eCommerce-Seiten
  • Umfassender Entwickler-Support, der neue Möglichkeiten für Plugin- und Theme-Entwickler bietet, die Elementor erweitern.
  • Neues Ressourcen-Center für Elementor-Entwickler mit ausführlichen Anleitungen und Tutorials zum Erstellen von Elementor-Erweiterungen.
  • Ein brandneuer Prozess, der die Erstellung dynamischer Inhalte in Gang setzt, die Sie begeistern werden, einschließlich einer umfassenden Integration von Advanced Custom Fields & Toolset.
  • Die neuen, bahnbrechenden Funktionen werden hier nicht enden. Dies ist ein neuer Weg, und er wird Ihnen die Arbeit wesentlich erleichtern.

Kompatibilität mit WordPress 5.0

Eine immer wiederkehrende Frage ist, wie gut sich Elementor in Gutenberg integrieren wird. Unser Team beobachtet das Gutenberg-Projekt sehr genau, und es scheint ein wertvoller und dringend benötigter visueller Texteditor zu sein.

Die neue Version von Elementor wird vollständig mit Gutenberg kompatibel sein, und wir denken jetzt über verschiedene Möglichkeiten nach, den neuen WordPress-Editor mit Elementor zu verbinden. Sobald es fertig ist, kannst du deinen Beitrag in Gutenberg schreiben und ihn dann mit Elementor gestalten.

Mit über 500.000 aktiven Installationen und Zählungen ist es jetzt klarer denn je – Elementor ist ein unverzichtbares Werkzeug für Webdesigner. Sobald die kommenden Features veröffentlicht sind, wird Elementor zu einem noch leistungsfähigeren Designer-Tool, das in der Lage sein wird, die gesamte Website dynamisch zu erstellen und dabei jede Menge Zeit bei jedem Projekt einzusparen.

Ein Theme Builder ist Teil Ihres Pakets

Nach der Veröffentlichung von Elementor 2.0 werden wir alle Themenbauteile in der bestehenden Pro-Version bündeln, so dass Sie kein weiteres Plugin kaufen müssen.

Wir betrachten die erweiterten Fähigkeiten nicht als ein”nice to have”-Projekt. Es ist Teil des Pro-Pakets, das jeder Elementor-Benutzer in seinem täglichen Arbeitsablauf anwenden wird.

Es ist schon einige Monate her, seit wir mit der Entwicklung von Features begonnen haben, die dynamisches Content Design ermöglichen. Ich kann Ihnen versprechen, dass Sie, sobald Sie sie einmal benutzt haben, nicht mehr in der Lage sein werden, zur vorherigen statischen Methode zurückzukehren.

Das Beste ist: Elementor versucht immer ein wenig besser zu werden!

Mit Elementor 2.0 war es noch nie so einfach, ein Upgrade auf Pro durchzuführen. Wir freuen uns wie immer über Ihre Kommentare, Fragen und Rückmeldungen.

Die Zukunft des Webdesigns kommt. Melden Sie sich unten an und lassen Sie sich benachrichtigen, sobald die erste v2.0-Funktion der nächsten Woche veröffentlicht wird.

Und hier gehts zur Seite oben

Wie Du in Elementor Vorlagen einsetzt

Wie Du in Elementor Vorlagen einsetzt

Wie Vorlagen von Elementor Dir helfen

neue Suche in Bibliothek
© Elementor.com

Um Dir bei der Gestaltung Deiner Webseite zu helfen, ist des kostenlose WordPress-Plugin Elementor Pagebuilder eine große Hilfe. Es ermöglicht Dir dank fast 100 gratis Vorlagen, einfach und schnell eine für Dich passende Webseite zu gestalten. Und das sind die 7 wichtigsten Punkte die Du beachten musst:

  • Seite oder Beitrag erstellen
  • Vorlage auswählen
  • Achtung auf PRO
  • Seite oder Beitrag Texte und Bilder abändern
  • Bilderrechte beachten (Abmahngefahr)
  • Seite oder Beitrag speichern
  • Seite oder Beitrag eventuell als eigene Vorlage speichern

Darum lautet meine klare Empfehlung für Dich. Nutze die Vorlagen von Elementor und zwar je nach Möglichkeit. Und ja die ElementorPRO-Vorlagen bieten Dir noch mehr Möglichkeiten. Genauer gesagt 21 zusätzliche Widgets-Elemente. Wie beispielsweise Formulare und Slider, Beiträge einfügen, Preislisten, Preistabellen etc. 

Eine weitere wichtige Tatsache ist, dass Du die vorhandenen Bilder entweder durch eigene Bilder ersetzen solltest oder zumindest die vorhandenen Bilder auf die Nutzung hin überprüfen solltest. Ob Du die Berechtigung zur Nutzung hast und welche Angaben Du diesbezüglich machen musst. Dazu gibt es zum Beispiel die Webseite: https://www.tineye.com/ , damit kannst Du die Herkunft von Bildern überprüfen. Besonders praktisch ist, dass Du das über den Browser machen kannst. Denn es gibt für Chrome, FireFox, Opera und deren Ableger eine solche Erweiterung und dann kannst Du das Bild per rechtem Mausklick in Augenschein nehmen.

Dieser wohl gemeinte Rat ist für Deutschland wichtig und stellt keine Rechtsberatung dar, da ich kein Anwalt bin und dementsprechend keine verbindliche Rechtsauskunft geben darf!

Ich hoffe, Du hast jetzt , dank des kleinen Tipps, wieder einen kleinen Schritt zur Entwicklung Deiner eignen Webseite gemacht. Falls Du weitere Fragen hast schreib unten in den Kommentar und ich werde versuchen Dir zu antworten.

Beste Grüße aus Calau

Jörg Rothhardt

Weitere Infos zu Elementor gibt es auf diesem Beitrag.

Abschnitte & Spalten

Abschnitte & Spalten

Abschnitte & Spalten: Was ist bei Elementor damit gemeint?

Abschnitte & Spalten

Abschnitte

Bei Elementor sind die grundsätzlichen Elemente einer Webseite und das muss ma zuerst Verstehen, zuerst einmal die Abschnitte, welche die Gestaltung deiner Seite oder deines Beitrages in der Höhe und Breite definiert. Das heißt, als Allererstes mußt Du, nach dem Du eine neue Seite oder Beitrag erstellt hast, einen Abschnitt hinzufügen. Dieser wiederum kann aus einer oder mehreren Spalten bestehen. Darin fügst Du dann eine Überschrift, Text, Bild oder Video usw. Aus den Widget-Elementen von Elementor ein. Wie Du im linken Bild und hier siehst, habe ich oben einen Abschnitt mit 1 Spalte eingefügt, den ich mit Farbe, 1 Wellenlinie und 1 Überschrift,  gefüllt habe. Den zweiten Abschnitt habe ich mit zwei Spalten gemacht, links 1 Bild und rechts dieser Text. Das Bild ist mit einem Schatten versehen und pulsiert bei Berührung

Die Möglichkeiten der Spalten

Wechsel bim darüberfahren mit der Maus

Die Möglichkeiten der Spalten

Wechsel bim darüberfahren mit der Maus

Die Möglichkeiten der Spalten

Wechsel bim darüberfahren mit der Maus

Die Spalten

Wie schon weiter oben beschrieben, wählst Du bei der Auswahl einen neuen Abschnitt auch zugleich die Anzahl und das Aussehen der Spalten aus, da Du so deine Website wunderbar gestallten kannst. Zudem kannst Du so auch noch zusätzlich in einer weiteren Spalte wieder neue Spalten mit dem Spalten-Widget einfügen und so weiter interessante Ansichten erstellen. Der Schatten um das Bild bietet gerade hier einen klasse Effekt und hebt das Bild gut hervor. Weiter unten zeige ich noch weitere coole Effekte.

Spalten-Struktur
Elementor vs. Visual Composer
Cover 5 kostenlose Strategien für Backlinks
Tools-Werkzeuge
Burg Eltz

Das ist erst ein teil der tollen Funktionen von Elementor Abschnitten & Spalten und in den nächsten Zeit erfährst Du mehr. Sei gespannt….

Elementor: Visueller Formular-Editor

Elementor-Kontaktformular

Interessant: Der visuelle Formular-Editor für WordPress​

Formular Widget (Pro)

So verwendest Du das Elementor Form Widget

Mit dem Formular-Editor – Widget musst Du die Seite, die Du gestalten willst, nicht verlassen, wenn Du ein neues Formular erstellst. In diesem Tutorial werden wir alle verfügbaren Optionen dieses Widgets durchgehen.

So verwendest Du das Elementor Form Widget

Formularname – Hier kannst Du den Namen des Formulars eingeben.
Formularfelder – Eine Liste aller Felder des Formulars. Sie können Felder beliebig duplizieren, hinzufügen oder löschen. Du kannst sie auch per Drag & Drop verschieben, um die Reihenfolge zu ändern.
Wenn Du direkt auf eines der Felder klicken, werden alle seine Einstellungen angezeigt.

  • Typ – Wählen Sie den gewünschten Feldtyp aus.
  • Label – Der Name des Feldes, das auf dem Formular und in der E-Mail angezeigt wird, die Sie vom Benutzer erhalten.
  • Platzhalter – Der Text innerhalb des Feldes, der dem Benutzer hilft, das Feld auszufüllen.
  • Erforderlich – Setzen Sie das Feld wie gewünscht, wenn Sie dem Benutzer nicht die Möglichkeit geben möchten, das Feld zu überspringen.
  • Spaltenbreite – Ermöglicht es Ihnen, die Breite des Feldes festzulegen. Dies ist nützlich, wenn Sie mehrere Felder in einer Zeile erhalten möchten. Wenn Sie z.B. 3 Felder in einer Zeile erhalten möchten, müssen Sie jedes Feld mit einer Breite von 33% setzen.
  • Nachricht – Ein Textfeld, in dem Sie die Anzahl der angezeigten Zeilen festlegen können.

Elementor Form Widget - Die Feldtypen

  • Text – Ein einfaches Textfeld. Als Beispiel, das diesen Typ verwendet: Name
  • Tel – Vom Typ – Telefonnummern. Die Tastatur stellt sich automatisch auf diesen Typ ein.
  • E-Mail – Ein Feld vom Typ – E-Mail. Inklusive Validierung für E-Mail.
  • Textarea – Ein Textbereichs-Feld, mit dem Sie die Anzahl der Zeilen festlegen können.
  • Zahl – Ein Nummernfeld. Die Tastatur stellt sich automatisch auf diesen Typ ein.
  • Auswahl – Mit einem Auswahlfeld kann der Benutzer aus einer Dropdown-Liste von Optionen auswählen. Die Optionen werden durch das Schreiben getrennter Textzeilen in der Einstellung Optionen erstellt.
  • URL – Mit diesem Typ kann der Benutzer seine Website-URL eingeben.
  • Kontrollkästchen – Ein Kontrollkastchenfeld (CheckBox) ermöglicht es dem Benutzer, eine oder mehrere der Optionen zu aktivieren. Die Optionen werden wieder durch das Schreiben von getrennten Textzeilen in der Einstellung “Optionen” erzeugt. Bei diesem Typ haben Sie auch die Einstellung”Inline-Liste”, mit der Du die Ankreuzfelder in einer horizontalen Linie darstellen können.
  • Radio – Ein Feld vom Typ Radio ermöglicht es dem Benutzer, eine Option zu aktivieren. Die Optionen werden wiederum durch das Schreiben von getrennten Zeilen erzeugt. Bei diesem Typ hast Du wieder die Einstellung”Inline-Liste”.
  • reCAPTCHA – Füge Deinem Formular einen reCAPTCHA hinzu, um sicherzustellen, dass der Benutzer kein Roboter ist. Du kannst die Größe als normal oder kompakt und den Stil als hell oder dunkel einstellen.
  • Honeypot – Diese Anti-Spam-Technik funktioniert durch Hinzufügen eines Feldes, das für den Benutzer nicht sichtbar ist, aber dennoch von Spambots gesehen wird. Auf diese Weise, wenn der Spambot das Feld automatisch ausfüllt, kann die Spam-Einsendung erkannt und blockiert werden.
  • Versteckt – Füge ein verstecktes Feld hinzu, das für den Benutzer nicht sichtbar ist, aber ein Feld als Teil des Kontaktformulars übermittelt.

Eingabegröße – Lege die Größe der Felder fest, von extra klein bis extra groß.

Beschriftungen – Du kannst die Beschriftungen auf dem Formular ein- oder ausblenden.

Elementor Form Widget - Der Absenden-Button

  • Text – Wählen Sie den Text, der auf der Schaltfläche”Senden” angezeigt wird.
  • Größe – Legt die Größe der Schaltfläche”Senden” fest.
  • Spaltenbreite – Legt die Breite des Buttons in Prozent fest.
  • Textarea – Ein Textbereichs-Feld, mit dem Sie die Anzahl der Zeilen festlegen können.
  • Ausrichtung – Legt die Ausrichtung rechts, zentriert, links oder ausgerichtet fest.
  • Icon – Fügt dem Absende -Button ein Icon aus der Font “Awesome Icon-Liste” hinzu.
  • Icon Position – Vor oder nach dem Text in der Schaltfläche.
  • Icon Abstand – Legt den Abstand zwischen dem Symbol und dem Schaltflächentext fest.

Elementor Form Widget - E-Mails & Optionen

  • E-Mail an – Legt fest, wohin die E-Mail gesendet wird. Sie können mehrere E-Mails einstellen, indem Sie jede E-Mail mit einem Komma trennen.
  • Betreff der E-Mail – Legt die Betreffzeile der E-Mail fest.
  • Von E-Mail – Hiermit wird das Feld von E-Mail festgelegt.
  • Von Name – Hiermit wird der Name der Person festgelegt, die die E-Mail gesendet hat.
  • Antwort auf – Wenn Du die E-Mail erhältst und auf Antwort klickst, ist dies die E-Mail, an die die Antwort gesendet wird. Um dem Benutzer, der die Nachricht gesendet hat, zu antworten, wählen Sie die Option “E-Mail-Feld”.
  • Metadaten – Füge weitere Informationen wie Datum, Uhrzeit, Seiten-URL, User Agent, Remote IP und Credit in die E-Mail ein.
  • HTML senden – Diese Option sendet die E-Mail-Benachrichtigungen in HTML.
  • Redirect to – Fügen Sie den Link hinzu, zu dem der Benutzer automatisch weitergeleitet wird, nachdem er das Formular erfolgreich abgeschickt hat.
  • Benutzerdefinierte Nachrichten – Bearbeiten Sie die Nachrichten, die der Benutzer sehen wird: Erfolgsmeldung, Fehlermeldung, Pflichtfeldnachricht und ungültige Nachricht.
Bitte beachte, dass das Formular-Widget eine neue Benutzeroberfläche hat. Stelle daher sicher, dass Du den folgenden Artikel unseres Blogs gelesen hast, um den neuen Speicherort der Einstellungen zu finden: https://elementor.com/pro-v140-form-integrations/ Leider nur auf Englisch. Aber ein Tipp, nutzen zum Übersetzen diesen sehr guten Online-Übersetzer: Deepl.com

Elementor Form Widget - MailPoet & MailChimp-Integration

Für uns interessant! Du kannst auch in MailChimp und MailPoet mit der eingebauten Integration von Elementor arbeiten. Sieh Dir dazu dieses MailChimp-Tutorial-Video an.

Elementor Form Widget - Formular Design

Formular

  • Spaltenabstand – Legt den exakten Abstand zwischen den Spalten der Formularfelder fest.
  • Zeilenabstand – Legt den Abstand zwischen den Zeilen fest.

Etikett

  • Abstand – Legt den Abstand zwischen den Beschriftungen und den Feldern fest.
  • Textfarbe – Legt die Farbe der Feldbeschriftungen fest.
  • Typografie – Passt die Typografie des Etiketts an.

Feld

  • Textfarbe – Legt die Farbe der Feldbeschriftungen fest (Der Text, den der Benutzer ausfüllt).
  • Typografie – Legt die Typografie des eingegebenen Textes fest.
  • Hintergrundfarbe – Legt die Hintergrundfarbe der Felder fest.
  • Randfarbe – Legt die Randfarbe der Felder fest.
  • Rahmenbreite – Legt die Breite der Feldgrenzen fest.
  • Radius des Randes – Legt den Radius des Randes fest. Die Standardeinstellung hat einen abgerundeten Rand

Taste/Schalter (Button)

  • Normal / Hover – Wählen Sie diese Option, um die Schaltflächeneinstellungen für Normal- und Hover-Status zu ändern.

Normal

  • Textfarbe – Legt die Textfarbe der Schaltfläche fest.
  • Typografie – Legt die Typografie für den Text der Schaltflächen fest.
  • Hintergrundfarbe – Legt die Hintergrundfarbe für die Schaltfläche fest.
  • Rahmentyp – Wähle den Typ des Knopfrahmens aus.
  • Breite – Legt die Breite des Rahmens fest.
  • Farbe – Legt die Farbe des Rahmens fest.
  • Rand Radius – Verleiht dem Button eine abgerundete Kantenform.
  • Text-Padding – Fügt einen Abstand zwischen dem Text und dem Rand des Buttons ein.

Hover (Schweben)

  • Textfarbe – Legt die Textfarbe für die Schaltfläche für den Hover-Modus fest.
  • Hintergrundfarbe – Legt die Hintergrundfarbe für die Schaltfläche für den Hover-Modus fest.
  • Randfarbe – Legt die Randfarbe im Hover-Modus fest.
  • Animation – Fügt der Schaltfläche eine Hover-Animation hinzu.

Bitte beachte, dass das Formular-Widget eine neue Benutzeroberfläche hat. Stelle daher sicher, dass Du den folgenden Artikel unseres Blogs gelesen hast, um den neuen Speicherort der Einstellungen zu finden:

https://elementor.com/pro-v140-form-integrations/

Leider nur auf Englisch. Aber ein Tipp, nutzen zum Übersetzen diesen sehr guten Online-Übersetzer: Deepl.com

Generelle Hilfe bekommst Du, leider wiederum nur auf Englisch, auf der Dokumenten-Seite von Elementor.