WooCommerce-Seiten mit Elementor

Veröffentlicht: 2021-11-23

WordPress erleichtert uns das Leben mit seinen erstaunlichen Funktionen zum Erstellen Ihrer Website, insbesondere von WooCommerce-Webshops. Es gibt nichts Einfacheres, als Ihre WooCommerce-Seiten mit Elementor zu gestalten, da Sie sich überhaupt nicht mit Codes befassen müssen.

Aber Sie fragen sich vielleicht immer noch, warum Elementor? Nun, das liegt daran, dass es das perfekte Tool zum Entwerfen von Online-Shopping-Websites in WooCommerce ist, das selbst eine technisch nicht versierte Person tun könnte. Elementor macht es möglich, indem es Sie durch eine überwältigende Website-Erstellungserfahrung führt.

Sind Sie also bereit, WooCommerce-Seiten mit Elementor zu entwerfen? Lassen Sie sich von uns mit genauen Schritten anleiten, wie einfach Sie dynamische WooCommerce-Seiten mit dem Elementor-Seitenersteller erstellen können.

Lass uns anfangen!

Ist Elementor mit WooCommerce kompatibel? Warum mitgehen?

Für eine erfolgreiche WooCommerce-Website ist das Webdesign sehr wichtig. Es erfordert eine ziemlich attraktive Website-Oberfläche und ordentlich verpackte Funktionen, um die Aufmerksamkeit Ihrer Kunden auf Ihr Unternehmen zu lenken.

WordPress ist bereits eine großartige Plattform, auf der Sie Websites einfach gestalten können. Aber Elementor macht es noch einfacher, großartige Websites innerhalb von Minuten zu erstellen. Das Plugin ist sehr leistungsfähig und mit Widgets ausgestattet, mit denen Sie Ihrer Website Features und Funktionalitäten hinzufügen können.

Aber ist Elementor mit WordPress kompatibel? Ja, so ist es. Tatsächlich ist Elementor sehr kompatibel mit WordPress und allem, was darin enthalten ist. Das Gestalten von WooCommerce-Seiten mit Elementor ist einfach, flexibel und selbst für Anfänger ein Kinderspiel.

Nur weil jeder, unabhängig von Programmierkenntnissen, Websites mit Elementor entwerfen kann, ist es das beste Werkzeug im Schuppen, das Sie verwenden können. Es ist keine Überraschung, dass heute mehr als 5 Millionen Menschen Elementor verwenden, um ihre eigenen Websites zu erstellen.

Also, bereit für die Hauptshow? Lassen Sie mich Ihnen im Folgenden zeigen, wie Sie Ihre WooCommerce-Seiten mit Elementor richtig erstellen und anpassen.

Erstellen Sie WooCommerce-Seiten mit Elementor

Wie wir bereits sagten, ist das Erstellen Ihrer WooCommerce-Seiten mit Elementor keine schwierige Aufgabe. Mit WordPress wird alles leicht gemacht, ebenso wie der gesamte Vorgang dieser Aufgabe. Also, hier ist, wie wir es gemacht haben -

Zunächst müssen Sie Vorbereitungen treffen, z. B. die Installation der erforderlichen Plugins für WordPress-

Ihre WordPress-Website
Elementor Page Builder (kostenlos & Pro)
WooCommerce (kostenlos)
Elementpaket Lite (kostenlos)

Nachdem Sie mit der Ersteinrichtung wie dem Kauf von Domain und Hosting, der Konfiguration von WordPress auf Ihrer Website, der Installation der Plugins Elementor, WooCommerce, Element Pack Lite usw. fertig sind, kann es eine Weile dauern, bis alles konfiguriert ist, was für den Betrieb Ihrer Website erforderlich ist.

Insbesondere das Einrichten von WooCommerce erfordert ein paar Minuten und Sie müssen alle Arten von Informationen eingeben, einschließlich Zahlungsinformationen, Versand, persönliche Kontakte usw.

Sobald Sie zum Dashboard zurückgekehrt sind, ist die Konfiguration abgeschlossen und Sie können WooCommerce-Seiten mit Elementor erstellen.

Beachten Sie, dass Elementor und WooCommerce beide eine gute Anzahl von Widgets haben, um die WooCommerce-Funktionalitäten zu Ihrer Website hinzuzufügen. Diese reichen jedoch noch nicht aus, um vollständig in die eigentlichen Funktionen von WooCommerce oder das Webdesign einzutauchen.

Aus diesem Grund brauchen wir ein helfendes Plugin wie Element Pack Lite, um die Website sowohl durch Design als auch durch Funktionen zu bereichern. Lassen Sie uns nun mit der Designphase fortfahren.

Passen Sie WooCommerce-Seiten mit Elementor ganz einfach an

Da Sie mit Elementor Page Builder fertige Vorlagen importieren können, ist es sehr einfach, mit Vorlagen zu arbeiten, sie dann einfach innerhalb der Seiten aufzurufen und mit der Anpassung zu beginnen. Außerdem hat Elementor bereits mehr als 10 einfache Widgets für WooCommerce, um eine Basis Ihrer Shop-Seite zu erstellen.

Aber sobald Sie sich alle notwendigen Plugins, einschließlich Element Pack Pro, geholt haben, erhalten Sie mehr als genug Widgets, um den gesamten Bereich Ihrer WooCommerce-Website abzudecken. Es gibt also keinen Platz, sich beim Gestalten Ihrer Webseiten unterdrückt zu fühlen.

Stellen Sie jedoch vorher sicher, dass die Plugins auf dem neuesten Stand sind, es sei denn, sie funktionieren nicht so, wie sie sein sollten.

Schritt-1: Lassen Sie uns eine WooCommerce-Seitenvorlage erstellen

Gehen Sie für den Anfang zum Abschnitt zur Erstellung von Vorlagen auf Ihrer WordPress-Website. Gehen Sie einfach zu Dashboard > Vorlagen > Neu hinzufügen

Wenn Sie auf die Schaltfläche „Neu hinzufügen“ tippen, wird ein Popup-Fenster angezeigt, in dem Sie die Vorlage erstellen müssen. Hier stehen mehrere Optionen zur Verfügung, und Sie müssen diejenige auswählen, die als „Einzelprodukt“ bezeichnet wird. Da wir eine WooCommerce-Seite für Produkte erstellen werden, ist dies die Einstellung, die wir anstreben.

Stellen Sie außerdem sicher, dass Sie Elementor Pro installiert haben. Andernfalls sind diese Optionen nicht sichtbar.

Fügen Sie einfach einen Vorlagennamen hinzu, um die Vorlage für die zukünftige Verwendung einfach zu identifizieren.

Klicken Sie dann auf die Schaltfläche „Vorlage erstellen“ und beginnen Sie, Elemente in die Seite einzufügen, um Ihre nächsten WooCommerce-Seiten mit Elementor zu erstellen.

Schritt-2: Einfügen von Seitenvorlagen

Jetzt, wo Sie bereit sind, Ihre WooCommerce-Seitenvorlage zu erstellen, gibt es zwei Möglichkeiten, dies zu tun, entweder von Grund auf neu oder nehmen Sie eine fertige Vorlage und passen Sie sie an.

Es gibt keinen großen Unterschied zwischen den beiden Optionen, nur die erforderliche Zeit zum Ausfüllen der Vorlage. Um die Verwendung zu vereinfachen, fügen wir zuerst eine fertige Vorlage hinzu.

Klicken Sie einfach auf das Symbol Element Pack Template Library, um die Bibliothek im Seiteneditor zu öffnen.

Alles, was Sie tun müssen, ist, in der Vorlagenbibliothek zu navigieren und das passende Seitendesign auszuwählen, das zu Ihrem Shop-Thema passt. Sobald Sie eine gefunden haben, bewegen Sie einfach den Mauszeiger über die Vorlage und klicken Sie auf die Schaltfläche „Einfügen“.

Beachten Sie, dass Sie auch WooCommerce-Seitenvorlagen von Elementor Pro verwenden können. Sobald Sie eine Vorlage angepasst haben, wird es ein einzigartiges Design sein, das der Vorlage selbst nicht ähnlich ist.

Schritt-3: Funktionen hinzufügen und anpassen

Es ist sehr wichtig, die Funktionen zu kennen, die Ihre Kunden genießen würden, bevor Sie damit beginnen, Widgets in die Vorlagenseite einzufügen. Sie können sich jederzeit für neue Inhalte entscheiden oder das aktuelle Layout für weitere Verbesserungen anpassen.

Es gibt eine Reihe von Widgets von Elementor, die Ihrer WooCommerce-Website mehr Würze verleihen. Mit diesen Widgets können Sie Ihre WooCommerce-Seite ganz einfach Teil für Teil gestalten und eine komplette Website erstellen.

Sehen wir uns zuerst die verfügbaren Widgets an.

Produktname
Beschreibung
In den Warenkorb legen
Produktpreis
Bild
Bewertung
Produktmenge
Meta
Semmelbrösel
Verwandte Produkte
Produkte auf Lager und ausverkauft

Hier ist eine benutzerdefinierte WooCommerce-Produktseite, die die Elemente aus der obigen Liste verwendet.

Es ist eine gute Taktik, das Design der Produktseite auf ein Minimum zu beschränken, um Ihre Besucher dazu zu bringen, sich mehr auf die Produkte zu konzentrieren. Auf jeden Fall können Sie jetzt zwischen den Funktionen unterscheiden und wissen, wie Sie Ihre Seite gestalten müssen.

Schritt-4: Warenkorb-Schaltfläche für WooCommerce-Seiten

Genügend aktive CTA-Schaltflächen auf Ihrer WooCommerce-Website zu haben, ist eine gute Möglichkeit, Ihre Besucher anzusprechen und potenzielle Kunden zu gewinnen. CTA zieht nicht nur Kunden an, sondern lässt Ihre Website auch für die Besucher ansprechend aussehen.

Mit Elementor ist es sehr einfach, CTA- oder „Zum Warenkorb hinzufügen“-Schaltflächen auf Ihren WooCommerce-Seiten hinzuzufügen. In Elementor sind jedoch zwei Arten von „Zum Warenkorb hinzufügen“-Schaltflächen verfügbar, eine statische und eine dynamische.

Die Verwendung des statischen ist der schnellste Weg, um CTA zu Ihren Seiten hinzuzufügen, aber es fehlen die Steuerelemente für Stile. Wir empfehlen die Verwendung einer dynamischen CTA-Schaltfläche mit dem Element Pack-Widget für WooCommerce, dem „WC – Add To Cart“.

Hier können Sie den Warenkorb-Button so anpassen, dass er einen schönen Kontrast zu Ihren Produkten bildet. Sie können jederzeit die Farbe, den Hintergrund, den Rahmen, die Polsterung, die Ausrichtung, die Beschriftung, das Symbol, die Größe usw. für die Schaltfläche anpassen.

Alles, was Sie tun müssen, ist, die Tastenhöhe an die Augenhöhe des Benutzers anzupassen. Denken Sie daran, dass die Position der Schaltfläche sehr wichtig ist, da sie die Entscheidung der Benutzer zum Kauf des Produkts beeinflusst.

Schritt-5: Konfigurieren Sie WooCommerce-Produktarchivseiten mit Elementor

Bisher haben Sie einzelne Produktseiten auf WooCommerce fertiggestellt. Jetzt müssen Sie eine Produktarchivseite erstellen, um Ihre Produkte in großen Mengen zu demonstrieren und Ihren Besuchern die einfache Navigation zu erleichtern.

Machen wir uns gleich eins. Gehen Sie wie zuvor zu Ihrem WordPress-Dashboard und gehen Sie in das Menü „ Vorlagen “ und klicken Sie auf „NEU HINZUFÜGEN“.

Scrollen Sie diesmal nach unten und wählen Sie die Option Produktarchiv für die Vorlage mit einem Namen, um sie später zu identifizieren.

Beenden Sie es jetzt, indem Sie auf die Schaltfläche Vorlage erstellen klicken . Warten Sie, bis die Seite des Elementor-Editors angezeigt wird.

Wenn Sie die leere Seite sehen, können Sie mit einer anderen fertigen Vorlage für die Archivseite arbeiten oder Ihre eigene von Grund auf neu erstellen. Elementor hat eine ziemlich große Anzahl von Widgets, um die Teile der Archivseite zu bilden.

Sie können den Brainstorming-Prozess jedoch überspringen und mit den Widgets aus dem Element Pack Pro-Plugin fortfahren. Es verfügt über einige WooCommerce-Funktionen, die mehrere Teile der Benutzeroberfläche zu einem vollständigen Bild kombinieren.

Werfen Sie einen Blick auf die Liste unten-

Portfolio-Karussell
Geräte-Schieberegler
Benutzerdefiniertes Karussell
WooCommerce-Schieberegler
WooCommerce-Produkte
WooCommerce-Karussell
WooCommerce-Kategorien

Mit diesen Widgets können Sie mit Elementor beeindruckende WooCommerce-Seiten für das Produktarchiv entwickeln.

Dies ist nur ein kleines Beispiel. Es gibt noch mehr Dinge, die Sie tun können, und nur der Himmel ist die Grenze.

Schritt-6: Passen Sie das Seitendesign mit Element Pack Pro an

Bisher haben Sie WooCommerce-Seiten mit Elementor erstellt, außer dass Sie keine wesentlichen Änderungen am Design vorgenommen haben. Elementor ist selbst ein großartiges Tool zum Anpassen der Benutzeroberfläche, es fehlen jedoch noch ausgefeilte Designsteuerungen.

Aber ärgern Sie sich nicht darüber, Sie haben Element Pack Pro, um die unvollendete Arbeit für Sie zu erledigen. Dieses Tool ist sehr berühmt für die Anpassungssteuerungen für jede einzelne Funktion, die es hat (mehr als 200 Funktionen). So können Sie an einem Ort animierte Überschriften, animierte Galerien, Produktkarussells, Raster, Schieberegler, Abschnittsunschärfe, Wrapper-Link und weitere erstaunliche Funktionen haben.

Lassen Sie uns beispielsweise zeigen, wie unser WooCommerce-Karussell an Ihren Geschmack angepasst werden kann.

Schritt-7: Veröffentlichen von WooCommerce-Seiten mit Elementor

Jetzt, da alles fertig ist, wir die einzelne Produktseite und die Archivseite erstellt und die Seitendesigns fertig vorbereitet haben, ist es an der Zeit, die Seiten in die Live-Website zu integrieren.

Nachdem Sie die Vorlagen gespeichert haben, können Sie einfach auf das Dashboard gehen, auf die Seite, auf der Sie die Produkte ablegen oder archivieren möchten, und die Vorlagen dort aufrufen. Simpel und einfach. Sie müssen die Seite nicht einmal duplizieren, da Sie gespeicherte Vorlagen jederzeit verwenden können.

So arbeiten Sie mit Vorlagen, um mit Elementor beeindruckende WooCommerce-Seiten zu erstellen.

Entspannen Sie sich beim Entwerfen komplexer WooCommerce-Seiten in wenigen Minuten

Das Entwerfen von WooCommerce-Seiten mit Elementor ist weniger mühsam und macht mehr Spaß, wenn Sie genau wissen, was Sie tun. Als anfängerfreundliche Software ermöglicht Elementor Ihnen, die Grundlagen schnell zu beherrschen, ohne dass eine dritte Hand erforderlich ist.

Das ist alles!

Nutzen Sie den Kommentarbereich für Fragen zu diesem Artikel oder nutzen Sie die LiveChat-Option, um direkt mit uns zu sprechen. Danke, dass du aufbleibst.

Pass auf dich auf.