Die Einkaufstrends verändern sich rasant, und die Menschen kaufen mehr denn je online ein.
Deshalb steigt der Bedarf an E-Commerce-Shops, um den Online-Einkaufsgewohnheiten gerecht zu werden, da die Menschen es bequemer finden, online einzukaufen, als zum Einkaufen in ein Geschäft zu gehen.
Mit den richtigen Tools und der passenden Einrichtung können Sie Ihren Online-Shop auch sofort starten. Und Sie werden innerhalb kürzester Zeit einen drastischen Umsatzanstieg feststellen.
Falls Sie die Gründung eines E-Commerce-Shops planen und einen WordPress-Experten suchen, der diese Arbeit für Sie erledigt, kann ich Ihnen sagen: Sie brauchen keinen.
Ja! Sie können das selbst machen, denn Sie müssen weder WordPress-Entwickler noch Programmierexperte sein und können es mit den richtigen Werkzeugen und der richtigen Konfiguration auch ohne Programmierkenntnisse schaffen.
Folgen Sie einfach der Schritt-für-Schritt-Anleitung zur Erstellung einer WooCommerce-Shopseite mit dem Elementor Page Builder.
Lasst uns der Sache auf den Grund gehen!
- Was benötigen Sie, um mit Elementor eine Produktseite zu erstellen?
- Wie installiere ich den Elementor Page Builder?
- Schritt für Schritt eine Elementor WooCommerce-Produktseite erstellen
- Optimieren Sie Ihre WooCommerce-Produktseite für Mobilgeräte
- Elementor Pro Preise
- Einpacken
Was benötigen Sie, um mit Elementor eine Produktseite zu erstellen?
Installieren Sie das WooCommerce- plugin auf Ihrer WordPress-Website aus dem WordPress.org-Repository. Zusätzlich benötigen Sie den Elementor Page Builder . Die kostenlose Version kann von WordPress.org heruntergeladen werden, bietet jedoch nur eingeschränkte Anpassungsmöglichkeiten. Wenn Sie uneingeschränkte Anpassungsmöglichkeiten wünschen, wählen Sie die Pro-Version von Elementor und laden Sie sie von der offiziellen Elementor.org-Website herunter.
Wie installiere ich den Elementor Page Builder?
- Für die kostenlose Version von Elementor:
Gehen Sie zu Plugin> Neu hinzufügen > geben Sie Elementor Page Builder ein > klicken Sie auf Installieren und Aktivieren.
- Für Elementor Pro:
Erwerben Sie die Pro-Version auf Elementor.com, laden Sie anschließend die ZIP-Datei hoch und klicken Sie dann auf „Installieren und aktivieren“.
Schritt für Schritt eine Elementor WooCommerce-Produktseite erstellen
Die Standard-WooCommerce-Produktseite sieht aus wie jede andere einfache WooCommerce-Produktseite, ohne jegliche Besonderheiten.
Wenn Sie jedoch Ihrer Marke eine eigene Note verleihen möchten, müssen Sie diese individuell anpassen.
Schritt 1: Gehen Sie im Dashboard-Menü zum Abschnitt „Vorlagen“ und klicken Sie auf „Neu hinzufügen“.
Wählen Sie nun im Dropdown-Menü den Eintrag „Einzelprodukt“ aus
Das Beste daran ist, dass Elementor einige vorgefertigte Produktseitenvorlagen enthält. Wenn Sie also schnell loslegen möchten, wählen Sie einfach diejenige aus, die Ihren Wünschen am ehesten entspricht.
Es ist wesentlich einfacher, eine Produktseite mithilfe einer vorgefertigten Vorlage zu erstellen, als sie von Grund auf neu zu gestalten. Passen Sie daher eine bestehende Vorlage an und sparen Sie Zeit und Mühe.
Wir haben diese Vorlage für unsere Produktseite ausgewählt.
Sobald Sie Ihre bevorzugte Vorlage ausgewählt haben, werden Sie zum Elementor-Editor weitergeleitet, wo Sie die Vorlage nach Ihren Wünschen anpassen können.
Hier sehen Sie im Menü auf der linken Seite verschiedene Blöcke. Ziehen Sie den gewünschten Block per Drag & Drop hierher.
Klicken Sie auf die Schaltfläche „+“ Hinzufügen und wählen Sie die gewünschte Spaltenbreite aus.
Wir haben für unsere Produktvorlage zwei Spaltenbreiten ausgewählt.
Fügen Sie nun in der rechten Spalte ein Widget für den Produkttitel hinzu und tragen Sie dort den Titel Ihres Produkts ein.
Sobald Sie den Produkttitel hinzugefügt haben, besteht der nächste Schritt darin, die „Woo-Breadcrumbs“ darüber einzufügen.
Fügen Sie nun das Produktbild in die linke Spalte ein und ziehen Sie das Produktbild-Widget aus der linken Spalte per Drag & Drop dorthin.
Sie können beiden Spalten einen Abstand hinzufügen, um sie etwas voneinander zu trennen.
Nachdem Sie das Bild hinzugefügt und den Abstand entsprechend den erforderlichen Abmessungen angepasst haben, fügen Sie das Produktbewertungs-Widget unter dem Produkttitel ein.
Fügen Sie unterhalb des Produktbewertungsblocks eine kurze Produktbeschreibung ein. Sie können auch den Abstand zwischen den beiden Blöcken anpassen.
Sobald Sie die Produktbeschreibung und alle Details fertiggestellt haben, besteht der nächste Schritt darin, den Preis des Produkts hinzuzufügen. Dazu müssen Sie das Preis-Widget per Drag & Drop unter die Produktbeschreibung ziehen.
Nachdem Sie den Preisreiter unterhalb der Produktbeschreibung hinzugefügt haben, können Sie das Preis-Widget über das Menü auf der linken Seite anpassen. Sie können das Symbol vergrößern, die Schriftart und die Schriftfarbe von Schwarz in eine beliebige andere Farbe ändern.
Fügen Sie nun das Widget „In den Warenkorb“ hinzu und passen Sie bei Bedarf über das Menü Farbe, Schriftart oder Stil an.
Fügen Sie nun unter dem Preis-Widget Produktmetadaten hinzu, die die Produktkategorie und die Seriennummer des Produkts anzeigen.
Schritt 2: Fügen Sie im nächsten Abschnitt weitere Informationen zum Produkt hinzu.
Erstellen Sie einen neuen zweispaltigen Abschnitt und fügen Sie dann Registerkarten für Produktdaten hinzu, einschließlich Beschreibung, Zusatzinformationen und Bewertungen. Fügen Sie rechts neben der Spalte einen Abschnitt für ähnliche Produkte hinzu.
Um das Format jeder 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 mit dem Titel „Upselling-Abschnitt“ hinzu
So sieht Ihr Upselling-Bereich nach dem Hinzufügen aus. Fügen Sie etwas Abstand hinzu, um den Bereich auszurichten.
Und nun ist die Gestaltung Ihrer Produktseite abgeschlossen. Im letzten Schritt müssen Sie entscheiden, wo Sie Ihr Produkt veröffentlichen möchten. Klicken Sie dazu auf „Veröffentlichen“ oder gehen Sie im linken Menü unten auf das Augensymbol und wählen Sie unter „Einstellungen“ die Produktkategorie aus.
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 ein Großteil des Datenverkehrs über Smartphones erfolgen wird, müssen Sie Ihren Shop für die Anzeige auf Smartphones optimieren, sonst könnten Sie Umsätze verlieren.
Obwohl WooCommerce bereits für Mobilgeräte optimiert ist, sollten Sie zur Sicherheit noch einmal die folgenden Schritte befolgen, um sicherzustellen, dass Ihre Produktseitenvorlagen auch auf mobilen Bildschirmen einwandfrei aussehen.
Die Option „Responsiver Modus“ finden Sie unten links in der Elementor-Benutzeroberfläche.
Wenn Sie auf die Option „Mobil responsiv“ klicken, können Sie zwischen den Ansichtsoptionen „Mobil“, „Desktop“ und „Tab“ wechseln.
Klicken Sie auf eine der Optionen, die Ihnen zusagt, um das Design anzuzeigen und gegebenenfalls anzupassen, falls Sie auf Probleme stoßen.
Speichern Sie nun und fahren Sie mit der Veröffentlichung Ihrer Produktseite fort.
Elementor Pro Preise
Basisversion von Elementor ist kostenlos, die Pro-Version hingegen mit drei Lizenzen erhältlich. Für Ihren persönlichen Blog oder eine einzelne Website ist die persönliche Lizenz optimal geeignet. Sie beinhaltet einen WooCommerce-Builder sowie über 90 professionelle Widgets.
Die Plus- und Expert-Lizenzen eignen sich für ausgewachsene Unternehmen oder Agenturen mit einer Unterstützung von 3 bzw. 1000 Standorten.
Einpacken
Elementor Page Builder speziell entwickelt , um Nutzern kreative Freiheit ohne Programmierkenntnisse zu ermöglichen. Elementor bietet eine Vielzahl von Widgets, mit denen Sie Produktseiten in attraktiven Layouts erstellen können. Über zehn grundlegende WooCommerce-Elemente erlauben es Ihnen, jedes Detail Ihrer Shopseite individuell anzupassen. Und falls Sie das gewünschte Element nicht im Elementor-Menü finden, keine Sorge! Zahlreiche erweiterte Einstellungen erweitern Ihre Möglichkeiten und fügen Ihrer Bibliothek weitere Elemente hinzu. Eine dieser Optionen sind die Essential Add-ons , die speziell für WooCommerce entwickelte Elemente enthalten.
