WooCommerce + Elementor: Bauen wir coole Sachen

Möchten Sie Ihre WordPress-Website optimieren und gestalten, ohne einen Entwickler einzustellen? Gute Nachrichten: Mit WordPress Page Builder-Plugins ist dies vollständig möglich.

Ein WordPress Page Builder-Plugin verfügt über eine intuitive Drag-and-Drop-Oberfläche zum Erstellen schöner benutzerdefinierter Seiten und Websites. Unabhängig von Ihren Fähigkeiten oder Ihrem technischen Know-how machen Seitenerstellungs-Plugins das Entwerfen Ihrer idealen Website zum Kinderspiel, ohne eine einzige Codezeile schreiben zu müssen.

Wenn Sie sich jetzt fragen, welches WordPress Page Builder-Plugin Sie in Betracht ziehen sollten, sind Sie hier richtig. In diesem Artikel stellen wir eine der beliebtesten Optionen vor: Elementor, das als Goldstandard gilt. Elementor ist mit 2 Millionen aktiven Installationen das am zweithäufigsten installierte WordPress-Plugin – wird von rund 15,9 % der WordPress-Websites verwendet.

Wir beginnen mit der kurzen Übersicht von Elementor und gehen weiter auf die Benutzeroberfläche, die Funktionen und die Preise des Plugins ein, um Ihnen bei der Entscheidung zu helfen, ob es die richtige Wahl für Ihre Website ist. Lass uns gehen!

Elementor-Plugin: Ein kurzer Überblick

Elementor ist ein visuelles Drag-and-Drop-Plug-in zum Erstellen von WordPress-Seiten, mit dem Sie im Vergleich zu den Standardseitenvorlagen, die mit Ihren WooCommerce- oder WordPress-Designs geliefert werden, einzigartige Webseiten und Beiträge erstellen können.

Es erfordert keine Programmierung und ermöglicht es Ihnen, Einstellungen einfach zu konfigurieren und den Inhalt und die Elemente Ihrer Seite mit Drag-and-Drop-Tools zu organisieren.

Beginnen wir mit der Plugin-Überprüfung, indem wir uns ansehen, wie die Elementor-Oberfläche funktioniert.

Die Elementor-Plug-in-Schnittstelle verstehen

Im Vergleich zu vielen anderen Seitenerstellungs-Plugins hat Elementor eine der einfachsten und nahtlossten Schnittstellen. Wenn Sie das Plugin zum ersten Mal starten, landen Sie auf einer Seite wie dieser:

Der gepunktete graue Bereich ist Ihr Inhaltsbereich. Außerhalb dieses Bereichs erscheint Ihr reguläres Thema, während Sie innerhalb des gepunkteten Bereichs Widgets hinzufügen und Ihr eigenes Design erstellen können.

Auf der linken Seite sehen Sie Widgets, die als Bausteine ​​dienen, die Sie zur Gestaltung Ihrer Seite zusammenstellen können. Unterhalb dieser Widgets finden Sie allgemeine Einstellungen, um eine Vorschau Ihrer Designs anzuzeigen, Änderungen rückgängig zu machen oder den Responsive-Modus einzuschalten, wie im Bild gezeigt.

So einfach ist es, die gewünschten Elemente per Drag & Drop auf die Seite zu ziehen:

Wenn Sie ein Element auf Ihrer Seite ablegen, teilt Elementor die Elemente in zwei Layoutstrukturen, wodurch zwei verschiedene Strukturelemente entstehen, wie unten gezeigt.

Zu diesen Strukturelementen gehören:

• Abschnitt: mit blauer Farbe markiert.
• Spalte: sitzt innerhalb des schwarz markierten Abschnitts. Sie können innerhalb des Abschnitts beliebig viele Spalten hinzufügen.

Sobald Sie das Element abgelegt haben, können Sie sein Layout ganz einfach anpassen, indem Sie die Breite anpassen und den Spaltenabstand und die Höhe ändern.

Darüber hinaus können Sie auch eine geeignete Abschnittsstruktur für Ihre spezifischen Anforderungen auswählen und andere Elemente wie ein Bild, ein Video oder ein Symbol innerhalb der Spalten hinzufügen.

Zum Beispiel habe ich ein Bild hinzugefügt und eines aus der standardmäßigen Elementor-Bildbibliothek ausgewählt, wie unten im Bild gezeigt. Sie können die Größe und Ausrichtung des Bildes ändern, eine Bildunterschrift hinzufügen und eine geeignete URL verlinken.

Für die weitere Gestaltung der Elemente, Strukturen oder Spalten können Sie die Registerkarten „ Stil “ und „ Erweitert “ in der Seitenleiste verwenden. Klicken Sie einfach auf den Inhalt, den Sie gestalten möchten, und klicken Sie auf die Registerkarten der Seitenleiste, um die Änderungen vorzunehmen.

Sie können auch von den Registerkarten zur Elemente-Seitenleiste navigieren, indem Sie einfach auf das quadratische Symbol klicken, das in der rechten Ecke der Seitenleiste angezeigt wird.

Daher ist Elementor recht einfach zu bedienen und mit einfachem Drag-and-Drop und einfachen Anpassungsoptionen können Sie Ihre Traumwebsite im Handumdrehen erstellen.

Lassen Sie uns jetzt, ohne viel Zeit in Anspruch zu nehmen, direkt in die Funktionen des Elementor-Seitenerstellers einsteigen.

Die wichtigsten Elementor-Funktionen, die es zu einem hervorragenden Page Builder für WooCommerce machen

Hier sind einige hervorragende Vorteile von Elementor, die es zu einem der beliebtesten Seitenersteller unter WordPress- und WooCommerce-Websites machen.

1. Umfangreiche vorgefertigte Vorlagenbibliothek

Elementor bietet eine umfangreiche Auswahl an Vorlagen. Klicken Sie unten auf das Symbol Vorlagen hinzufügen, um eine Vorlage hinzuzufügen.

Wählen Sie aus über 300 Vorlagen aus der Elementor-Vorlagenbibliothek und fügen Sie sie mit einem einzigen Klick zu Ihrer Seite hinzu.

Seit der Veröffentlichung von Elementor 2.0 gibt es diese Vorlagen in zwei Formaten:

• Blöcke: Stellen Sie Designs für bestimmte Abschnitte statt für eine ganze Seite bereit. Beispielsweise können Sie mithilfe von Blöcken einen Abschnitt „ Über das Unternehmen “ oder einen vorgefertigten Kontaktabschnitt zu einem vorhandenen Seitenlayout hinzufügen.

• Seiten – Bieten Sie ganzseitige Designs an, die Sie mit einem einzigen Klick importieren und nach Bedarf optimieren können.

Sie können einige Ihrer Designs auch als Blöcke und Vorlagen speichern, um sie später auf anderen Seiten oder Websites wiederzuverwenden – was es sehr bequem macht, ein gemeinsames Vorlagendesign auf Ihrer gesamten Website beizubehalten.

Es beseitigt auch den Aufwand, jedes Mal ein neues Seitendesign von Grund auf neu zu erstellen.

2. Responsive Design-Steuerelemente und mobile Vorschauen

Die mobile Nutzung nimmt jeden Monat stetig zu und etwa 73,1 % der Webdesigner glauben, dass ein nicht responsives Seitendesign einer der Hauptgründe für das Verlassen einer Website ist.

Alle Designs und Seiten, die Sie auf Elementor erstellen, reagieren automatisch und sehen auf mobilen Geräten großartig aus. Darüber hinaus können Sie schnell eine Vorschau anzeigen, wie Ihre Website auf anderen Geräten aussehen wird, ohne die Benutzeroberfläche zu verlassen.

Klicken Sie unten in der Seitenleiste auf die Schaltfläche Reaktionsmodus und sehen Sie sich die Desktop-, Mobil- und Tablet-Versionen Ihrer Website an, indem Sie auf die in den Abbildungen unten hervorgehobenen Schaltflächen klicken.

Sie können Ihre Seitendesigns basierend auf dem Gerätetyp anpassen und bestimmte Widgets auf bestimmten Geräten anzeigen oder ausblenden. Wenn beispielsweise die Desktop-Version Ihrer Website ein riesiges Hero-Image enthält, vermeiden Sie es möglicherweise, dieses Bild auf der mobilen Version Ihrer Website anzuzeigen. Sie können dieses Bild oder einen beliebigen Abschnitt, den Sie ausblenden möchten, auswählen und auf Mobilgeräten mithilfe der reaktionsschnellen Design-Steuerelemente von Elementor mit einem einzigen Umschaltklick ausblenden.

Daher wird sichergestellt, dass Ihre Website zu 100 % reaktionsschnell ist – sodass sie auf allen Geräten, einschließlich Desktops, Tablets und Mobilgeräten, gut aussieht.

3. Unbegrenzte Anpassungsmöglichkeiten

Die Anpassung ist mit Elementor grenzenlos, und es gibt keine Grenzen, wie Sie Ihre Website und ihre Elemente gestalten können.

Die Menüs „ Stil“ und „ Erweitert “ im Elementor-Editor bieten zahlreiche Optionen zur Anpassung des Stils. Sie können den Inhalt anhand mehrerer Attribute gestalten, einschließlich Farbe, Breite, Größe, CSS-Filter und Rahmen.

Gleichzeitig ermöglicht Ihnen das Erweitert-Menü die Verwaltung des Layouts, der Bewegungseffekte, des Hintergrunds, des Rahmens, der Attribute und anderer Faktoren, wie unten gezeigt.

4. Detaillierte Layoutsteuerung

Wenn Sie tiefer in die Anpassungsoptionen eintauchen, gibt Ihnen Elementor eine detaillierte Kontrolle über Ihr Layoutdesign , sodass Sie keine Kompromisse bei Ihrer Designflexibilität eingehen müssen, weil Sie keinen benutzerdefinierten Code schreiben können.

Elementor macht es einfach, Ihre Abschnitte, Widgets und Spalten mit vielen intuitiven Steuerungsoptionen genau dort zu positionieren, wo Sie möchten.

Mit den Layout-Steuerelementen im Menü „Erweitert“ können Sie:

• Legen Sie den Rand und die Auffüllung für Abschnitte, Widgets und Spalten manuell fest.
• Wählen Sie die Breite des Abschnitts – Standard, volle Breite, Inline und Benutzerdefiniert.
• Passen Sie die Position des Widgets innerhalb der Spalte an – Standard, fest und absolut.
• Passen Sie den Abstand zwischen den Spalten an und schaffen Sie einen leeren Bereich für ein sauberes Layout.

So können Sie ohne Programmierkenntnisse die Platzierung Ihrer Widgets leicht anpassen und Spalten und Abschnitte nach Bedarf anpassen.

5. Vollständiger Revisionsverlauf des Fortschritts mit Rückgängigmachen/Wiederherstellen von Änderungen

Eine der besten Funktionen von Elementor ist, dass Sie eine Vorschau des gesamten Verlaufs aller von Ihnen vorgenommenen Änderungen anzeigen und so jede Aktion im Verlauf protokollieren können.

Darüber hinaus können Sie Änderungen einfach rückgängig machen und bei Bedarf zur vorherigen Version zurückkehren. Außerdem können Sie jedes Mal, wenn Sie ein neues Design speichern, bei Bedarf einfach zu einer völlig neuen Revision zurückkehren.

6. Hinterlässt einen sauberen Code

Wenn Sie Elementor in Zukunft aus irgendeinem Grund deaktivieren möchten, müssen Sie sich keine Sorgen machen, dass Unmengen von Shortcodes wie der Divi Builder zurückbleiben.

Elementor hinterlässt sauberen Code und sorgt so für optimale Leistung und Seitengeschwindigkeit.

Weitere Elementor-Funktionen

Hier sind einige weitere Funktionen des Elementor Page Builder-Plugins:

• Kopf- und Fußzeilen-Editor: Sie können die Kopf- und Fußzeilen Ihrer Website mit Elementor ganz einfach ohne Programmierkenntnisse bearbeiten.
• Inline-Textbearbeitung: Mit dieser Funktion können Sie Text live auf dem Bildschirm bearbeiten – so können Sie ganz einfach vorhandene Textinhalte bearbeiten oder Blogbeiträge schreiben.
• Bereit für RTL und Übersetzung: Elementor ist in 23 übersetzten Sprachen erhältlich, und Sie können es aufgrund seiner vollständigen RTL-Sprachunterstützung problemlos in weitere Sprachen übersetzen.
• WooCommerce-Widgets: Es bietet vorgefertigte WooCommerce-Widgets wie Preislisten und Preistabellen, um das Erstellen von E-Commerce-Websites zum Kinderspiel zu machen.
• Integrationen von Drittanbietern: Elementor unterstützt Integrationen von Drittanbietern, einschließlich ActiveCampaign und MailChimp.
• Globale Farb- und Typografieoptionen: Mit Elementor können Sie globale Typografie und Farben festlegen, um umfassende Designs auf allen Seiten zu erstellen. Außerdem können Sie für Ihr Website-Design aus über 800 Google-Schriftarten auswählen.
• Wartungsmodus: Sie können die Wartungsmodusvorlagen von Elementor nutzen, um Ihre Website in den Wartungsmodus zu versetzen.

Elementor Pro-Rezension

Während der Elementor-Kernseitenersteller Open Source und kostenlos ist, können Sie auf die Elementor Pro-Version upgraden – die zusätzliche nützliche Funktionen bietet.

Hier ist ein kurzer Blick auf einige Funktionen des neuen Elementor Pro-Plugins:

• Damit können Sie ein komplettes WordPress-Theme erstellen.
• Es verfügt über aufregendere Widgets, darunter Schieberegler, Schaltflächen zum Teilen in sozialen Netzwerken, Formulare, Countdown-Timer und Anmeldeformulare.
• Es bietet unzählige hochwertige Premium-Elementor Pro-Vorlagen.

Wenn Sie also mehr Funktionen, Premium-Vorlagen und globale Widgets wünschen, können Sie sich für das Elementor Pro-Plugin entscheiden, das ab nur 49 US-Dollar beginnt.

Überprüfung der Elementor-Preise

Wenn Sie einfache und einfach gestaltete Websites erstellen möchten, sollte die kostenlose Version des Plugins Ihren Anforderungen genügen – wenn man bedenkt, dass es sich um den funktionsreichsten kostenlosen Seitenersteller handelt.

Um jedoch professionellere Websites zu erstellen, bietet Elementor vier Premium-Pläne mit Premium-Funktionen wie VIP-Support und Elementor-Expertenprofil an.

Der Essential-, Expert-, Studio- und Agency-Plan des Elementor-Plug-ins kostet 49, 199, 499 und 999 US-Dollar pro Jahr. Daher ist Elementor für jeden geeignet, und ob Sie Webdesigner, Entwickler oder Agenturinhaber sind – Elementor bietet Funktionen für jeden Bedarf und jede Anforderung.

Fazit: Endgültiges Urteil

Nach dieser umfassenden Überprüfung kann man mit Sicherheit sagen, dass Elementor alle wesentlichen Funktionen bietet, die zum Erstellen einer WordPress- oder WooCommerce-Website erforderlich sind.

Es verfügt über eine leichte, einfache, leicht verständliche und nicht aufgeblähte Benutzeroberfläche, die es Website-Designern ohne Programmiererfahrung ermöglicht, schöne Websites zu erstellen. Und das Beste daran ist, dass es Preispläne für alle Bedürfnisse gibt. Darüber hinaus veröffentlichen und implementieren Elementor-Entwickler weiterhin neue Funktionen und Verbesserungen.

Nachdem wir die Benutzerfreundlichkeit, die allgemeinen Funktionen, die Leistung, den Support, die Benutzeroberfläche und die Preise des Plugins überprüft haben, stufen wir Elementor an der Spitze der WordPress-Seitenerstellungs-Plugins ein. Probieren Sie das Elementor-Plugin also selbst aus und probieren Sie es aus und wählen Sie den Plan, der Ihren spezifischen Geschäftsanforderungen entspricht.