Die Einkaufstrends ändern sich rasant und die Leute kaufen mehr denn je online.
Aus diesem Grund steigt der Bedarf an einem E-Commerce-Shop, um die Online-Einkaufsgewohnheiten zu befriedigen, da die Leute es bequemer finden, online zu kaufen, als einkaufen zu gehen.
Sie können Ihren E-Commerce-Shop auch sofort mit den richtigen Tools und Einstellungen starten. Und Sie werden innerhalb eines Rekordzeitraums einen drastischen Umsatzanstieg feststellen.
Wenn Sie geplant haben, einen E-Commerce-Shop zu eröffnen und nach einem WordPress-Experten suchen, der die Arbeit für Sie erledigt, lassen Sie mich Ihnen sagen, dass Sie keinen benötigen.
Ja! Sie können es selbst tun, weil Sie kein WordPress-Entwickler oder Codierungsexperte sein müssen, und Sie können es tun, ohne Kenntnisse über das Codieren mit den richtigen Tools und Einstellungen zu haben.
Befolgen Sie einfach das Schritt-für-Schritt-Tutorial 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 Page Builder?
- Erstellen Sie Schritt für Schritt eine Elementor WooCommerce-Produktseite
- Mobile optimieren Sie Ihre WooCommerce-Produktseite
- Elementor Pro Preisgestaltung
- Einpacken
Was benötigen Sie zum Erstellen einer Produktseite mit Elementor?
Installieren Sie das WooCommerce plugin in auf Ihrer WordPress-Site aus dem WordPress.org-Repository und darüber hinaus müssen Sie den Elementor Page Builder . Die kostenlose Version kann von WordPress.org heruntergeladen werden, die kostenlose Version bietet jedoch eingeschränkte Anpassungsoptionen. Wenn Sie also unbegrenzte Anpassungsoptionen erhalten möchten, dann entscheiden Sie sich für das Pro-Elementor und laden Sie es von der offiziellen Website Elementor.org herunter.
Wie installiere ich den Elementor Page Builder?
- Für Elementor kostenlose Version:
Gehen Sie zu Plugin > Neu hinzufügen> Elementor Page Builder aufrufen> Klicken Sie auf Installieren und aktivieren.
- Für Elementor Pro:
Kaufen Sie die Pro-Version von Elementor.com, laden Sie die Zip-Datei hoch und klicken Sie 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 Knusprigkeit.
Wenn Sie jedoch die Stimme Ihrer Marke hinzufügen möchten, müssen Sie sie eindeutig 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".
Das Beste daran ist, dass der Elementor einige vorgefertigte Produktseitenvorlagen enthält. Wenn Sie also schnell starten möchten, wählen Sie eine der Optionen aus, die Ihrer gewünschten Option am nächsten kommt.
Es ist viel einfacher, eine Produktseite aus der vorgefertigten Vorlage zu erstellen, als sie von Grund auf neu zu erstellen. Ändern Sie daher alle vorhandenen Vorlagen 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, in dem Sie die Vorlage nach Ihrem Geschmack anpassen können.
Hier sehen Sie verschiedene Blöcke im Menü auf der linken Seite. Ziehen Sie den Block, mit dem Sie arbeiten möchten, per Drag & 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 zwei Spaltengrößen für unsere Produktvorlage ausgewählt.
Fügen Sie nun in der rechten Spalte ein Produkttitel-Widget hinzu und fügen Sie den Titel Ihres Produkts hinzu.
Nachdem Sie den Produkttitel hinzugefügt haben, müssen Sie im nächsten Schritt die darüber liegenden „Woo Breadcrumbs“ hinzufügen.
Fügen Sie nun das Produktbild in die linke Spalte ein und ziehen Sie das Produktbild-Widget aus der linken Spalte.
Sie können die Auffüllung zu beiden Spalten hinzufügen, um sie leicht voneinander zu trennen.
Nachdem Sie das Bild hinzugefügt und die Polsterung an die erforderlichen Abmessungen angepasst haben, fügen Sie das Produktbewertungs-Widget unter dem Produkttitel hinzu.
Fügen Sie unter dem Produktüberprüfungsblock 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, müssen Sie als Nächstes den Preis des Produkts hinzufügen. Dazu müssen Sie das Preis-Widget unter die Beschreibung des Produkts ziehen und dort ablegen.
Nachdem Sie die Registerkarte Preis unter der Produktbeschreibung hinzugefügt haben, können Sie das Preis-Widget anpassen, indem Sie die Optionen aus dem linken Menü auswählen. Sie können das Symbol vergrößern, den Schriftstil und auch die Schriftfarbe von Schwarz auf eine andere Farbe Ihrer Wahl ändern.
Fügen Sie nun das Widget "Zum Warenkorb hinzufügen" hinzu und passen Sie 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 Registerkarten mit Produktdaten hinzu, einschließlich Beschreibung, zusätzlicher Informationen und Bewertungen. Fügen Sie auf der rechten Seite der Spalte den entsprechenden Produktbereich 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 des Add-Up-Selling-Abschnitts hinzu.
Hier sehen Sie, wie Ihr Up-Selling-Bereich nach dem Hinzufügen aussehen wird. 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 Sie Ihr Produkt veröffentlichen möchten. Sie können auf Veröffentlichen klicken oder in den Augenbereich in der untersten Ecke des linken Menüs gehen und auf die Einstellungen klicken, um die Kategorie des Produkts auszuwählen.
Klicken Sie auf das Menü Bedingung hinzufügen, wählen Sie die Kategorie Ihres Produkts aus und klicken Sie auf Veröffentlichen.
Mobile optimieren Sie Ihre WooCommerce-Produktseite
Da viel Verkehr über die Smartphones kommt, müssen Sie Ihr Geschäft für die Anzeige auf dem Smartphone optimieren, da Sie sonst möglicherweise Ihren Umsatz verlieren.
Obwohl WooCommerce bereits für Mobilgeräte optimiert ist, befolgen Sie die Anweisungen, um sicherzustellen, dass Ihre Produktseitenvorlagen auf dem Mobilbildschirm absolut gut aussehen.
In der unteren linken Ecke der Elementor-Oberfläche finden Sie eine Option Reaktionsmodus.
Wenn Sie auf die Option "Mobile Responsive" klicken, können Sie zwischen den Anzeigeoptionen "Mobil", "Desktop" und "Registerkarten" 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.
Elementor Pro Preisgestaltung
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, wo Sie einen WooCommerce-Builder zusammen mit über 90 Pro-Widgets erhalten können.
Die Plus- und Expertenlizenzen eignen sich für erwachsene Unternehmen oder Agenturen mit einer Unterstützung von 3 Standorten bzw. 1000 Standorten.
Einpacken
Der einzige Zweck des Seitenerstellers von Elementor besteht darin, den Benutzern zu ermöglichen, ihrer Kreativität freien Lauf zu lassen, ohne sich auf die Codierung verlassen zu müssen. Elementor wird mit einer Vielzahl von Widgets geliefert, mit denen Sie jede Art von Produktseiten basierend auf attraktiven Layouts erstellen können. Die grundlegenden WooCommerce-Elemente sind mehr als 10, die es den Benutzern ermöglichen, jeden Knick und jede Kurve der Shop-Seite anzupassen. Und wenn Sie Ihr gewünschtes Element nicht im Menü von Elementor finden, machen Sie sich keine Sorgen! Es gibt viele andere 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 nur spezielle Elemente für WooCommerce enthalten.
