Einkaufstrends ändern sich rasant und die Menschen tendieren dazu, mehr denn je online einzukaufen.
Aus diesem Grund steigt der Bedarf an einem E-Commerce-Shop, um den Online-Einkaufsgewohnheiten gerecht zu werden, da es für die Menschen bequemer ist, online einzukaufen, als einkaufen zu gehen.
Mit den richtigen Tools und der richtigen Einrichtung können Sie Ihren E-Commerce-Shop auch sofort starten. Und Sie werden innerhalb einer Rekordzeit eine drastische Steigerung Ihrer Umsätze feststellen.
Wenn Sie vorhaben, einen E-Commerce-Shop zu eröffnen, und auf der Suche nach einem WordPress-Experten sind, der diese Arbeit für Sie erledigt, kann ich Ihnen sagen, dass Sie keinen brauchen.
Ja! Sie können es selbst tun, da Sie kein WordPress-Entwickler oder Codierungsexperte sein müssen und es auch ohne Codierungskenntnisse mit den richtigen Tools und der richtigen Einrichtung tun können.
Folgen Sie einfach der Schritt-für-Schritt-Anleitung zum Erstellen einer WooCommerce-Shop-Seite mit dem Elementor-Seitenersteller.
Lassen Sie uns tiefer graben, um auf den Punkt zu kommen!
- Was benötigen Sie zum Erstellen einer Produktseite mit Elementor?
- Wie installiere ich den Elementor-Seitenersteller?
- Erstellen Sie Schritt für Schritt eine Elementor WooCommerce-Produktseite
- Optimieren Sie Ihre WooCommerce-Produktseite für Mobilgeräte
- Preisgestaltung für Elementor Pro
- Einpacken
Was benötigen Sie zum Erstellen einer Produktseite mit Elementor?
Installieren Sie das WooCommerce- plugin aus dem WordPress.org-Repository auf Ihrer WordPress-Site. Darüber hinaus müssen Sie den Elementor-Seitenersteller . Die kostenlose Version kann von WordPress.org heruntergeladen werden. Die kostenlose Version verfügt jedoch über eingeschränkte Anpassungsoptionen. Wenn Sie also unbegrenzte Anpassungsmöglichkeiten erhalten möchten, entscheiden Sie sich für das Pro-Elementor und laden Sie es vom offiziellen Elementor.org herunter.
Wie installiere ich den Elementor-Seitenersteller?
- Für die kostenlose Elementor-Version:
Gehen Sie zu Plugin > Neu hinzufügen > geben Sie den Elementor-Seitenersteller ein > klicken Sie auf „Installieren“ und „Aktivieren“.
- Für Elementor Pro:
Kaufen Sie die Pro-Version bei Elementor.com, laden Sie dann die ZIP-Datei hoch und klicken Sie dann auf „Installieren und aktivieren“.
Erstellen Sie Schritt für Schritt eine Elementor WooCommerce-Produktseite
Die Standard-WooCommerce-Produktseite sieht aus wie jede einfache WooCommerce-Produktseite ohne scharfe Details.
Wenn Sie jedoch die Stimme Ihrer Marke hinzufügen möchten, müssen Sie sie individuell anpassen.
Schritt 1: Gehen Sie in Ihrem Dashboard-Menü zum Abschnitt „Vorlage“ und klicken Sie auf „Neu hinzufügen“.
Wählen Sie nun aus dem Dropdown-Menü den Punkt „Einzelprodukt“ aus
Das Beste daran ist, dass Elementor einige vorgefertigte Produktseitenvorlagen enthält. Wenn Sie also schnell beginnen möchten, wählen Sie eine der Optionen aus, die Ihrem Wunsch am nächsten kommt.
Es ist viel einfacher, eine Produktseite anhand einer vorgefertigten Vorlage zu erstellen, als sie von Grund auf neu zu erstellen. Ändern Sie daher jede vorhandene Vorlage und sparen Sie Zeit und Mühe.
Wir haben diese Vorlage für unsere Produktseite ausgewählt.
Sobald Sie Ihre Lieblingsvorlage ausgewählt haben, gelangen Sie zum Elementor-Editor, wo Sie die Vorlage nach Ihrem Geschmack anpassen können.
Hier können Sie im linken Menü verschiedene Blöcke sehen. Ziehen Sie den Block, mit dem Sie arbeiten möchten, per Drag-and-Drop.
Klicken Sie auf die Schaltfläche „+“ Hinzufügen und wählen Sie die Spaltengröße aus, die Sie hinzufügen möchten.
Wir haben für unsere Produktvorlage zwei Spaltengrößen ausgewählt.
Fügen Sie nun in der rechten Spalte ein Produkttitel-Widget hinzu und fügen Sie dort den Titel Ihres Produkts hinzu.
Sobald Sie den Produkttitel hinzugefügt haben, besteht der nächste Schritt darin, die „Woo Breadcrumbs“ darüber hinzuzufügen.
Fügen Sie nun das Produktbild in der linken Spalte hinzu und ziehen Sie das Produktbild-Widget per Drag & Drop aus der linken Spalte.
Sie können die Polsterung zu beiden Spalten hinzufügen, um sie etwas voneinander entfernt zu halten.
Nachdem Sie das Bild hinzugefügt und den Abstand entsprechend den erforderlichen Abmessungen angepasst haben, fügen Sie das Produktbewertungs-Widget unter dem Produkttitel hinzu.
Fügen Sie unterhalb des Produktbewertungsblocks eine kurze Beschreibung des Produkt-Widgets hinzu. Sie können auch den Abstand zwischen den beiden Blöcken anpassen.
Sobald Sie mit der Produktbeschreibung und allen Details fertig sind, besteht unser nächster Schritt darin, den Preis des Produkts hinzuzufügen. Dazu müssen Sie das Preis-Widget per Drag & Drop unter die Beschreibung des Produkts ziehen.
Nachdem Sie die Registerkarte „Preis“ unterhalb der Produktbeschreibung hinzugefügt haben, können Sie das Preis-Widget anpassen, indem Sie die Optionen im linken Menü auswählen. Sie können das Symbol vergrößern, den Schriftstil und auch die Schriftfarbe von Schwarz in eine beliebige andere Farbe Ihrer Wahl ändern.
Fügen Sie nun das Widget „Zum Warenkorb hinzufügen“ hinzu und passen Sie dessen Farbe, Schriftart oder Stil über das Menü an, wenn Sie möchten.
Fügen Sie nun unter dem Preis-Widget ein Produkt-Meta hinzu, das die Produktkategorie und die Produktseriennummer anzeigt.
Schritt 2: Fügen Sie im nächsten Abschnitt zusätzliche Informationen zum Produkt hinzu.
Erstellen Sie einen neuen zweispaltigen Abschnitt und fügen Sie dann Produktdaten-Registerkarten mit Beschreibung, zusätzlichen Informationen und Bewertungen hinzu. Fügen Sie auf der rechten Seite der Spalte den entsprechenden Produktabschnitt hinzu.
Um das gleiche Format für jede Spalte beizubehalten, können Sie auf die linke Ecke jeder Spalte klicken und das Spaltenformat für jede Spalte kopieren und einfügen.
Schritt 3: Fügen Sie einen weiteren Abschnitt oder „Up-Selling-Bereich“ hinzu.
So wird Ihr Up-Selling-Bereich nach der Hinzufügung aussehen. Fügen Sie etwas Polsterung hinzu, um den Abschnitt auszurichten.
Und schließlich sind Sie mit der Gestaltung Ihrer Produktseite fertig. Der letzte Schritt ist nun, wo möchten Sie Ihr Produkt veröffentlichen? Sie können auf „Veröffentlichen“ klicken oder zum Augenbereich in der unteren Ecke des linken Menüs gehen und auf „Einstellungen“ klicken, um die Kategorie des Produkts auszuwählen.
Klicken Sie auf das Menü „Bedingung hinzufügen“, wählen Sie dann die Kategorie Ihres Produkts aus und klicken Sie auf „Veröffentlichen“.
Optimieren Sie Ihre WooCommerce-Produktseite für Mobilgeräte
Da viel Verkehr über das Smartphone fließen wird, müssen Sie Ihren Shop für die Smartphone-Betrachtung optimieren, sonst könnten Sie Ihre Verkäufe verlieren.
Obwohl WooCommerce bereits für Mobilgeräte optimiert ist, befolgen Sie die folgenden Schritte, um sicherzustellen, dass Ihre Produktseitenvorlagen auf dem mobilen Bildschirm absolut gut aussehen.
In der unteren linken Ecke der Elementor-Benutzeroberfläche finden Sie die Option „Responsiver Modus“.
Wenn Sie auf die Option „Mobil reagierend“ klicken, können Sie zwischen den Anzeigeoptionen „Mobil“, „Desktop“ und „Tab“ wechseln.
Klicken Sie auf eine der Optionen, die Sie anzeigen möchten, und optimieren Sie das Design, wenn Sie Komplikationen feststellen.
Speichern Sie nun Ihre Produktseite und veröffentlichen Sie sie weiter.
Preisgestaltung für Elementor Pro
Die Basisversion von Elementor ist kostenlos erhältlich, während die Pro-Version drei Lizenzen enthält. Wenn Sie nach Ihrem persönlichen Blog oder einer einzelnen Website suchen, ist die persönliche Lizenz am besten für Sie geeignet. Dort erhalten Sie einen WooCommerce-Builder zusammen mit über 90 professionellen Widgets.
Während die Plus- und Expert-Lizenzen für große Unternehmen oder Agenturen mit einer Unterstützung von 3 bzw. 1000 Standorten geeignet sind.
Einpacken
Der einzige Zweck des Elementor-Seitenerstellers besteht darin, den Benutzern die Möglichkeit zu geben, ihrer Kreativität freien Lauf zu lassen, ohne sich auf die Codierung verlassen zu müssen. Elementor verfügt über eine Vielzahl von Widgets, mit denen Sie jede Art von Produktseiten basierend auf attraktiven Layouts erstellen können. Es gibt mehr als 10 grundlegende WooCommerce-Elemente, die es den Benutzern ermöglichen, jeden Winkel und jede Kurve der Shop-Seite anzupassen. Und wenn Sie Ihr gewünschtes Element nicht im Elementor-Menü finden, machen Sie sich keine Sorgen! Es gibt viele weitere erweiterte Einstellungen, mit denen Sie Ihr Arsenal aufrüsten und Ihrer Bibliothek mehrere Elemente hinzufügen können. Eines davon sind Essential Add-ons , die spezielle Elemente nur für WooCommerce enthalten.
