So verwenden Sie den Elementor Page Builder mit WordPress

Wenn wir über WordPress-Seitenersteller sprechen, ist Elementor definitiv der beliebteste und derjenige mit der größten Anzahl aktiver Installationen und der größten Community. Bisher wurden über 8 Millionen Websites mit Elementor erstellt. Es wird von vielen Experten wegen seiner Benutzerfreundlichkeit, Geschwindigkeit und enormen Möglichkeiten beim Erstellen von WordPress-Sites empfohlen.

Ich habe die Pro-Version von Elementor getestet und eine Landingpage erstellt. Es kommt mit der Drag-and-Drop-Funktion und funktioniert mit jedem Thema und Sie können alle Free-, Pro- und WordPress-Widgets gleichzeitig verwenden. Lesen wir diesen Artikel, um mehr über die Installation und Konfiguration von Elementor mit WordPress zu erfahren.

Warum Elementor Page Builder wählen?

Elementor ist derzeit einer der ersten und einer der fortschrittlichsten WordPress-Seitenersteller auf dem Markt. Es hat auch ein riesiges Ökosystem und viele kleinere Autoren erstellen nützliche Add-Ons und Vorlagen, die Sie verwenden können, um die für das Endergebnis benötigte Zeit zu reduzieren.

Im Fall von Elementor kann das Endergebnis eine wirklich großartige Website sein, die mit allen Funktionen ausgestattet ist, die Sie benötigen oder benötigen. Sie werden keine Art von WordPress-Site finden, die Sie nicht mit Elementor erstellen können. Wenn Sie zusätzliche Funktionen benötigen, können Sie diese einfach mit Shortcodes implementieren.

Funktionen von Elementor Page Builder

Die kostenlose Version von Elementor enthält eine begrenzte Anzahl von Elementen, aber mit der Pro-Version erhalten Sie Add-Ons wie QI, Ultimate Add Ons usw. Außerdem haben Sie eine Reihe nützlicher Elemente und Vorlagen, um Ihre Website mit Leichtigkeit zu erstellen .

Es wäre nicht fair, das Crocoblock-Add-On für Gutenberg und Elementor wegzulassen, das für die meisten Elementor-Benutzer eines der beliebtesten Tools ist, da es die Funktionen des nativen Elementor erweitert.

Elementor hat seine Funktionen in 4 Kategorien unterteilt.

1. Grundlegende Widgets

Basic Widgets wird mit der kostenlosen Version geliefert und diese reichen völlig aus, um eine beeindruckende Website zu erstellen, die keine erweiterten Optionen wie Inhaltsverzeichnis, Portfolio oder Formular erfordert. Außerdem können Sie in der kostenlosen Version kein Header-/Nav-Menü erstellen und müssen möglicherweise ein cooles WordPress-Theme mit dem gewünschten Navigationsmenü finden.

2. Pro-Widgets

Pro Widgets mit Elementor Pro decken fast jeden Aspekt und jedes Widget ab, das Sie zum Erstellen jeder Art von Website benötigen. Fügen Sie Beiträge aus verschiedenen Kategorien, Beitragstypen hinzu und wählen Sie sie aus oder listen Sie einfach die neuesten auf, Preistabellen, Galerie, Flip-Box, Einbettung von einfachen Social Media-Netzwerken, verschiedene Medienkarussells, Lottie Widget und HotSpot (darüber werde ich später sprechen).

3. Themenelemente

Theme Elements kommt auch mit Elementor Pro und sie sind natürlich wichtig, um alle Vorlagenseiten und einzelne Beitragsvorlagen zu erstellen. Wie Sie wissen, gibt es Seiten, die dynamisch mit Inhalten wie Kategorie, Tag, Autor usw. gefüllt werden.

Für diese Seiten müssen Sie mithilfe von Designelementen eine Vorlage erstellen. Dasselbe gilt für den Single Post, bei dem Sie eine schöne Vorlage für Ihre Posts entwerfen können, die von allen Posts verwendet wird, ohne sie jedes Mal neu erstellen zu müssen. Fügen Sie einfach den Inhalt hinzu, wie Sie es gewohnt sind, und fertig.

4. WooCommerce-Widgets

Und nicht zuletzt WooCommerce-Widgets. Diese Widgets ermöglichen es Ihnen, ähnlich wie beim Theme Builder, die Vorlagenseiten und die Einzelproduktvorlage mit Leichtigkeit mithilfe von WooCommerce-Elementen zu erstellen.

Preise und Pläne von Elementor Page Builder

Elementor Pro wird mit 5 verschiedenen Plänen geliefert, die alle den gleichen Elementor Pro Page Builder und Funktionen wie:

• Live-Editor per Drag & Drop
• Sich anpassendes Design
• 90+ Basis- und Pro-Widgets
• 300+ Basis- und Pro-Vorlagen
• Theme-Builder

Der niedrigste Plan ist Essential für 1 Site zum Preis von 49 USD. Mit diesem Plan erhalten Sie Premium-Support, was bedeutet, dass Sie innerhalb von 24 Stunden eine Antwort erwarten können. Der nächste Plan ist Advanced und umfasst eine Lizenz für 3 Sites zum Preis von 99 US-Dollar mit derselben Art von Support.

Der wahrscheinlich beliebteste ist Expert für 199 US-Dollar für 25 Websites. Darüber hinaus erhalten Sie ein Elementor-Expertenprofil, in dem Sie Ihre abgeschlossenen Projekte in Elementor veröffentlichen und einige neue Kunden gewinnen können.

Einer vor der Spitze ist Studio für 100 Sites zum Preis von 499 $ und dort haben Sie einen zusätzlichen Vorteil des VIP-Supports, was bedeutet, dass Sie Priorität haben und Ihre Tickets in 30 Minuten beantwortet werden. Das gleiche kommt mit der teuersten Plan-Agentur für 1000 Sites zum Preis von 1000 US-Dollar.

Alle Pläne sind jährlich und wenn Sie sich fragen, was mit Sites passiert, wenn Ihr Abonnement abläuft, lautet die Antwort: Sites sehen genauso aus wie zuvor, Sie können jedoch keine Elemente und Vorlagen von Elementro Pro bearbeiten oder verwenden.

System-/Hosting-Anforderungen von Elementor

Laut der Systemanforderungsseite von Elementor sollte es sogar mit 128 MB PHP, MySQL 5.6 oder höher oder MariaDB 10.0 oder höher funktionieren. Außerdem sollte es mit jedem PHP 7+ funktionieren. Zu Testzwecken habe ich VultrHF mit 2 GB PHP-Speicher verwendet.

Natürlich benötigen Sie die neueste WordPress-Version und alle anderen Plugins auf dem neuesten Stand.

Installieren und konfigurieren Sie den Elementor Page Builder

Die Installation der kostenlosen Version von Elementor ist die gleiche wie für jedes andere Plugin im WordPress-Plugin-Repository. Gehen Sie zu Ihrem WordPress-Dashboard → Plugins → Neu hinzufügen, suchen Sie nach Elementor, installieren und aktivieren Sie das Plugin.

Für die Pro-Version müssen Sie den Plan kaufen, der automatisch ein Konto bei Elementor erstellt. Wenn Sie sich dort anmelden, sehen Sie den Download-Button, um die neueste Pro-Version herunterzuladen.

Während Sie noch beim Elementor-Dashboard angemeldet sind, melden Sie sich bei Ihrem WordPress-Dashboard → Plugins → Neu hinzufügen an und wählen Sie Hochladen, durchsuchen Sie die heruntergeladene Datei von Elementor Pro von Ihrem Computer, installieren und aktivieren Sie sie.

Wenn Sie in der linken Seitenleiste Ihres WordPress-Dashboards fertig sind, gehen Sie zu Elementor → klicken Sie auf Lizenz → klicken Sie auf die Schaltfläche Verbinden & Aktivieren.

Wenn Sie darauf klicken, werden Sie automatisch zu Ihrem Dashboard auf Elementor weitergeleitet, um es zu aktivieren. Klicken Sie auf die grüne Schaltfläche Aktivieren und fertig. Ihr Elementor Pro ist verbunden und aktiviert.

Nach der Aktivierung sehen Sie die Bestätigung, dass Ihr Elementor aktiv ist. Wenn Sie die Site jedoch auf einer Staging-Domain erstellt haben und keine weitere Lizenz für Live kaufen möchten, können Sie das Konto beim Staging einfach trennen und in der Live-Domain aktivieren.

Es ist an der Zeit, Elementor zu verwenden und Ihre Website zu erstellen. Mein Vorschlag ist, das Hello Theme von Elementor zu verwenden, das speziell für Elementor entwickelt wurde.

Beginnen wir dazu mit der Erstellung einer Seite „Homepage“ und bearbeiten Sie sie mit Elementor. Gehen Sie zu Seiten → Neu hinzufügen, nennen Sie es Homepage und veröffentlichen Sie es und klicken Sie dann auf die Schaltfläche Mit Elementor bearbeiten.

Auf der Seite Bearbeiten werden Elemente angezeigt, die Sie nicht bearbeiten können, da das Layout auf Standard eingestellt ist. Um Elementor auf einem leeren Canvas zu verwenden, wählen Sie Elementor Full Width oder Elementor Canvas, indem Sie auf das Zahnradsymbol in der unteren linken Ecke klicken.

Bevor Sie mit der Erstellung der Site beginnen, klicken Sie auf das Burger-Symbol in der oberen linken Ecke und legen Sie alle globalen Einstellungen fest, die für den Rest des Jobs benötigt werden.

Site-Einstellungen sind dem Einrichten des Themes sehr ähnlich. Hier können Sie die globalen Farben, die verwendeten Schriftarten und die vollständige Site-Typografie für jedes HTML-Tag auswählen.

Darüber hinaus können Sie bei Bedarf den globalen Schaltflächenstil, die Kopfzeile, die Fußzeile, benutzerdefiniertes CSS und alles, was Sie zum Festlegen benötigen, festlegen und auf der gesamten Website beibehalten, um die Konsistenz zu gewährleisten.

Die zweite Option ist Theme Builder, mit dem Sie die Vorlagenseiten und einzelne Beitrags-/Produktvorlagen erstellen können, die automatisch von der spezifischen dynamisch generierten Seite, dem Beitrag oder dem Produkt verwendet werden. Wie jedes WordPress-Theme über Vorlagendateien verfügen muss, um alle oben genannten Elemente anzuzeigen, können Sie dies mit Elementor tun, ohne auch nur eine einzige Zeile des Codes zu schreiben.

Die letzte Option sind Benutzereinstellungen, in denen Sie Ihre Arbeitsumgebung in Elementor einrichten können, nichts, was die Site selbst betrifft, sondern Ihre Benutzeroberfläche als Administrator.

Zum Auftakt Ihrer Site werden alle verfügbaren Widgets in der linken Sidebar platziert und alles kann visuell und per Drag & Drop bearbeitet werden. Wenn Sie es einfacher haben möchten, können Sie zunächst einen der vorgefertigten Blöcke oder Vorlagen verwenden, indem Sie auf das Ordnersymbol klicken.

Das Ordnersymbol öffnet ein Popup, in dem Sie vorgefertigte Blöcke und Vorlagen sowie die zuvor gespeicherten Blöcke sehen können. Sie können auch einen von Ihnen erstellten Block oder eine ganze Vorlage speichern und auf einer anderen internen Seite wiederverwenden. Es ist durchaus üblich, Ihren gespeicherten Block für Testimonials zu verwenden, einige spezifische Handlungsaufforderungen, die nicht auf jeder Seite angezeigt werden sollten, aber auf einigen.

Es gibt noch eine Sache, die Sie wissen müssen, wenn Sie ohne Vorkenntnisse mit dem Erstellen einer Website beginnen. Sie ist einfach zu bedienen, ziemlich intuitiv und ohne Vorkenntnisse in wenigen Tagen werden Sie mehr als in der Lage sein, selbst eine schöne Website zu erstellen , kann ich sagen, sogar professionell aussehend.

Ihre Website muss jedoch auf allen Gerätegrößen gut aussehen, und genauso wie Sie die Desktop-Version bearbeitet haben, können Sie alle anderen Größen bearbeiten. Bitte beachten Sie, dass die Elemente und Widgets nur der Desktop-Version hinzugefügt werden können und Sie dann den Look auf kleinere Größen austricksen können.

Außerdem können Sie die Sichtbarkeit des Widgets oder des Abschnitts auf verschiedenen Geräten ganz einfach einstellen, sodass Sie unterschiedliche Inhalte in einem ähnlichen Abschnitt haben können, indem Sie einen Abschnitt auf einem Desktop sichtbar lassen, aber auf einem Tablet und Handy ausgeblendet. Ebenso ein anderer, der von einem Desktop ausgeblendet, aber auf Tablets und Mobilgeräten sichtbar ist.

Um Handy- und Tablet-Versionen zu bearbeiten, klicken Sie unten in der linken Seitenleiste auf das Symbol Reaktionsmodus. Ihre Website wird auf dem Handy angezeigt. Und oben können Sie zwischen verschiedenen Bildschirmgrößen wechseln.

Aus Gründen der Übersichtlichkeit habe ich zwei Abschnitte hinzugefügt, von denen einer auf Mobilgeräten und Tablets ausgeblendet ist und der andere Abschnitt auf dem Desktop ausgeblendet ist. Bitte sehen Sie sich das Beispiel unten an.

Das Endergebnis ist auf dem Handy.

Und das Endergebnis auf dem Desktop hat nur einen Abschnitt, aber den anderen.

Leistung von Elementor Page Builder auf Cloudways

Elementor schneidet recht gut ab und erreicht bei GTMetrix 100 Punkte und die anderen Testtools zeigen eine wirklich großartige Leistung. Bitte beachten Sie, dass ich keine Bilder so optimiert habe, dass sie für alle von uns durchgeführten Tests genau die gleiche Seitengröße und Bilder aufweisen.

– Ergebnisse von Elementor auf GTMetrix

– Ergebnisse von Elementor auf Pingdom Tools

– Ergebnisse von Elementor auf WebPageTest

Zusammenfassung

Wenn Sie einen intuitiven und benutzerfreundlichen Seitenersteller benötigen, deckt Elementor möglicherweise alle Aspekte ab, die zum Erstellen einer schönen Website erforderlich sind. Es ist nicht so schwer, pixelgenaue Websites aus dem Design zu erstellen, wenn Sie über CSS-Kenntnisse verfügen.

Mit der riesigen Community und Hunderten von Add-Ons und externen Plugins, die die grundlegenden Elementor-Funktionalitäten erweitern, kann ich keine Art von Website sehen, die nicht mit Elementor erstellt werden kann.

Wir sehen oft, wie Elementor aufgebläht ist, viel unnötiger Code geladen wird, es ist schwer zu optimieren, aber wie Sie aus Tests sehen können, scheint Elementor auf Cloudways recht gut zu funktionieren. Ich habe die Landingpage mit 25 Bildern im Inneren und 7 Abschnitten + Header und Footer getestet, was für die Homepage überdurchschnittlich ist.

Eine weitere tolle Sache an Elementor ist, dass die Lernkurve nicht steil, sondern ziemlich leicht ist und in nur wenigen Minuten mit einigen vorgefertigten Vorlagen oder Blöcken eine wirklich schön gestaltete, modern aussehende Website erstellt werden kann.