Verwenden des Fashion Layout Packs von Divi zum Erstellen eines Online-Shops mit WooCommerce

Das neue Fashion Layout Pack von Divi bietet ein großartiges Setup für jeden Online-Shop. Die Integration des Shop-Moduls und die Organisation der Seitenlayouts verschaffen Ihnen einen deutlichen Vorsprung. Aber um dieses Layout als funktionsfähigen Online-Shop zum Laufen zu bringen, benötigen wir das WooCommerce-Plugin. Und Sie werden vielleicht überrascht sein, wie gut Divi und WooCommerce zusammenarbeiten.

In diesem Tutorial zeige ich Ihnen, wie Sie mit Woocommerce einen Online-Shop mit Divis Fashion-Layout-Paket erstellen. Ich werde Sie durch die richtige Einrichtung Ihrer Layouts zur Anpassung führen, wie Sie die Shop-Seite mit der Woocommerce-Integration zum Leben erwecken und einige Tipps zur Verwendung von Elementen Ihres Layouts und des Theme-Anpassers zum Gestalten von Woocommerce-Seiten.

Die Einrichtung

Aus Zeitgründen werde ich dieses Tutorial mit einigen bereits abgeschlossenen Schritten beginnen.

1. Installieren und aktivieren Sie das Divi-Theme
2. Installieren und aktivieren Sie WooCommerce
3. Laden Sie das Fashion Layout Pack herunter und importieren Sie die Datei Fashion_All.json in Ihre Divi-Themenbibliothek.
4. Erstellen Sie für jedes Layout neue Seiten.
5. Erstellen Sie Ihr Hauptmenü.

Wenn Sie von der oben aufgeführten Einrichtung verwirrt sind, finden Sie detailliertere Anweisungen zum richtigen Einrichten Ihres Layouts, indem Sie sich diese 10 Schritte zur Verwendung eines Layoutpakets für Ihr neues Projekt ansehen.

Sobald Sie die oben genannten 5 Schritte abgeschlossen haben, können Sie beginnen.

Der Sneak Peek

Hier ist ein Blick auf einige der WooCommerce-Seiten, die Sie erstellen werden.

Verwenden des Fashion Layout Packs von Divi zum Erstellen eines Online-Shops mit WooCommerce

Abonnieren Sie unseren Youtube-Kanal

Ändern Sie Ihre globale Akzentfarbe

Zu Beginn werden wir die globale Akzentfarbe für das Divi-Thema ändern. Es ist immer eine gute Idee, die globale Akzentfarbe an Ihr Layout anzupassen, aber es ist auch der einfachste Weg, Ihre WooCommerce-Seiten an Ihr Farbschema anzupassen, ohne benutzerdefiniertes CSS verwenden zu müssen. Sie werden feststellen, dass diese Akzentfarbe verwendet wird, um Elemente auf jeder Ihrer WooCommerce-Seiten wie der einzelnen Produktseite, der Warenkorbseite usw. zu gestalten.

Um die globale Akzentfarbe zu ändern, gehen Sie zum Theme Customizer und navigieren Sie zu Allgemeine Einstellungen > Layouteinstellungen und suchen Sie unten die Option Theme Accent Color.

Ich verwende diese rosa Farbe aus dem Layout: #fc7086

Speichern und veröffentlichen Sie dann Ihre Einstellungen, sobald Sie sie geändert haben, und aktualisieren Sie Ihre Seite, damit die Akzentfarbe andere Einstellungen im Customizer aktualisieren kann.

Aktualisieren Sie die Typografieeinstellungen im Theme Customizer

Da WooCommerce Ihre Standardeinstellungen für den Theme-Anpasser verwendet, um den Text für jede seiner Seiten zu gestalten, sollten Sie sicherstellen, dass Sie die in Ihren Layouts verwendete Typografie mit den Typografie-Einstellungen im Theme-Anpasser abgleichen.

Um Ihre Typografie zu aktualisieren, gehen Sie zu Divi > Theme Customizer > Allgemeine Einstellungen > Typografie und aktualisieren Sie Folgendes:

Körpertextgröße: 16px
Körperlinienhöhe: 1,9
Kopfzeilentextgröße: 42
Kopfzeilen-Schriftart: B
Header-Schriftart: Playfair Display
Körperschriftart: Poppins
Body Link Color: [Wenn Sie Ihre globale Akzentfarbe aktualisiert haben, sollte diese Farbe hier angezeigt werden]

WooCommerce Shop-Seite einrichten

Mit WooCommerce können Sie festlegen, welche Seite Ihre Basis-Shop-Seite sein soll. Diese Seite sollte alle Produktkategorien enthalten, damit die Benutzer alles wissen, was Ihr Shop zu bieten hat. Da unser Layout eine Shop-Seite hat, machen wir diese zu unserer Basis-Shop-Seite.

Gehen Sie in Ihrem WordPress-Dashboard zu WooCommerce > Einstellungen und klicken Sie oben auf der Seite auf die Registerkarte Produkte. Wählen Sie im Menü direkt unter der Registerkarte Anzeige . Wählen Sie dann die Shop-Seite zu der Seite „Shop“, die Sie mit dem neuen Shop-Seiten-Layout aus dem Mode-Layout-Paket erstellt haben.

Speichern Sie dann die Änderungen.

Produkte zu Ihrem Shop hinzufügen

Sie haben vielleicht bemerkt, dass Ihre Shop-Seite trotz zweier Shop-Module keine Produkte anzeigt. Natürlich müssen Sie zuerst Produkte hinzufügen. Um Ihrem Shop ein neues Produkt hinzuzufügen, gehen Sie zu Ihrem WordPress-Dashboard und folgen Sie diesen Schritten:

1. Navigieren Sie zu Produkte > Neu hinzufügen
2. Produktname eingeben
3. Geben Sie eine Beschreibung für das Produkt ein
4. Geben Sie den Produktpreis ein
5. Geben Sie eine Kurzbeschreibung für das Produkt ein
6. Fügen Sie drei neue Kategorien hinzu (Sommer, Featured und On Sale)
7. Wählen Sie die Kategorie für Ihr Produkt (in diesem Fall Sommer)
8. Produktbild hinzufügen
9. Produkt veröffentlichen/aktualisieren

Weisen Sie Ihren Produkten Kategorien zu

Wenn Sie die obigen Schritte wiederholen, um weitere neue Produkte zu erstellen, weisen Sie jedem eine Kategorie zu (Nr. 7 in den oben aufgeführten Schritten). Für dieses Tutorial habe ich 6 Produkte in der Kategorie „Sommer“, 6 Produkte in der Kategorie „Featured“ und 1 Produkt in der Kategorie „On Sale“ hinzugefügt.

Shop-Module auf der Shop-Seite aktualisieren

Nachdem Sie Ihre Produkte erstellt haben, können Sie diese Produkte zu Ihrer Shop-Seite hinzufügen. Wie bereits erwähnt, sind im Layout der Shop-Seite bereits Shop-Module integriert. Es gibt einen unter dem Sommer-Abschnitt und einen unter dem Featured-Abschnitt.

Gehen Sie zur Shop-Seite und stellen Sie den Visual Builder bereit. Bewegen Sie dann den Mauszeiger über das Shop-Modul (derzeit werden keine Produkte angezeigt) unter der Zeile mit der Sommermode-Überschrift und klicken Sie auf Moduleinstellungen.

Aktualisieren Sie die Einstellungen, um nur die Kategorie „Sommer“ einzuschließen.

Jetzt sollten Sie alle Produkte sehen, die mit der Kategorie Sommer hinzugefügt wurden.

Suchen Sie als Nächstes das Shop-Modul unter der Überschrift „Featured Products“ und aktualisieren Sie die Einstellungen, sodass nur die Kategorie „Featured“ enthalten ist.

Fügen Sie ein Shop-Modul hinzu, um Artikel im Angebot auf der Shop-Seite anzuzeigen

Da wir auf der Shop-Seite zwei Kategorien (Featured Products und Summer Fashion) haben, ist es einfach, zusätzliche Kategorien und Produkte mit den bereits im Layout bereitgestellten Modulen zu erstellen.

Lassen Sie uns einen weiteren Abschnitt erstellen, um unsere „On Sale“-Produkte anzuzeigen.

Stellen Sie dazu den Visual Builder bereit und verwenden Sie die Rechtsklick-Optionen, um den gesamten Abschnitt mit den Sommermodeprodukten zu kopieren und direkt unter dem Abschnitt Empfohlene Produkte einzufügen.

Jetzt müssen Sie nur noch ein paar Updates vornehmen.

Klicken Sie in der Zeile mit der Überschrift auf den Text im Textmodul und ändern Sie die Überschrift in „On Sale“ anstelle von „Summer Fashion“.

Ändern Sie dann das Bild in der linken Spalte in ein Bild, das besser zu Ihren Verkaufsprodukten passt.

Aktualisieren Sie abschließend das Shop-Modul so, dass es nur die Kategorie „On Sale“ enthält.

Gestalten Sie Ihre WooCommerce-Seiten mit dem Fashion-Layout

WooCommerce generiert automatisch einen eigenen Satz von WooCommerce-Seiten, wenn Sie das Plugin installieren. Dazu gehören die folgenden:

Shop – Dies ist ein Platzhalter für ein Archiv vom Typ Post für Ihre Produkte.
Warenkorb – der den Shortcode [woocommerce_cart] verwendet, um den Warenkorbinhalt zu generieren
Kasse – die den Shortcode [woocommerce_checkout] verwendet, um die Informationen anzuzeigen.
Mein Konto – das den Shortcode [woocommerce_my_account] verwendet, um spezifische Kundeninformationen zu ihrem Konto anzuzeigen.

Da wir unsere Shop-Seite bereits ausgewählt haben, ist keine weitere Gestaltung erforderlich. Aber für die anderen 3 WooCommerce-Seiten müssen wir sie so gestalten, dass sie zum Design unserer anderen Seitenlayouts passen.

Hinzufügen einer Abschnittsüberschrift zu den Warenkorb- und Checkout-Seiten

Schauen wir uns zuerst die Warenkorb-Seite an. So sieht es aus, bevor wir etwas daran ändern.

Beachten Sie, dass unsere Links und Schaltflächen bereits dem Farbschema entsprechen, da wir unsere globale Akzentfarbe aktualisiert haben. Und da wir unsere Typografieeinstellungen im Theme Customizer aktualisiert haben, passen auch die Kopfzeilen und der Fließtext zu unserem Theme.

Aber wir können mit wenigen Klicks noch ein bisschen besser werden. Gehen Sie zuerst zur Shop-Seite, stellen Sie den Visual Builder bereit und speichern Sie den oberen Abschnitt mit dem Seitenkopf in der Bibliothek. Sie können den Namen „Seitenkopfbereich“ vergeben.

Scrollen Sie dann zum Ende der Seite und suchen Sie den letzten Abschnitt mit dem E-Mail-Optin und den Kontaktdaten und speichern Sie ihn unter dem Namen "Seitenfußbereich" in Ihrer Bibliothek.

Bearbeiten Sie nun Ihre Warenkorbseite. Wählen Sie im Standardseiteneditor die Verwendung des Divi Builder und dann „Visual Builder verwenden“ aus. Der Builder sollte den Shortcode [woocommerce_cart] automatisch in ein Textmodul innerhalb einer einspaltigen Zeile eines regulären Abschnitts eingefügt haben. Wenn nicht, müssen Sie diese selbst erstellen. Klicken Sie als Nächstes auf das blaue Plus-Symbol, um einen neuen Abschnitt unter dem aktuellen hinzuzufügen, und wählen Sie die Registerkarte „Aus Bibliothek hinzufügen“. Wählen Sie dann den soeben erstellten neuen Abschnitt mit dem Namen "Seitenkopfzeilenabschnitt".

Ziehen Sie dann diesen Abschnitt an den Anfang Ihrer Seite und ändern Sie den Titeltext in "Ihr Warenkorb". Das ist es!

Sie können diesen Vorgang auch für die Checkout-Seite wiederholen.

Entwerfen der Mein Konto-Seite mit dem Divi Builder

Nachdem Sie nun wissen, wie Sie diesen WooCommerce-Seiten einen Header hinzufügen, machen Sie dasselbe für die Seite Mein Konto. Diesmal können Sie den Fußzeilenabschnitt, den Sie in der Bibliothek gespeichert haben, am Ende dieser Seite hinzufügen.

Vielleicht möchten Sie dieser Seite ein eigenes Design geben, um deutlicher zu machen, dass es sich um eine Seite handelt, die Ihr Konto verwaltet. Wechseln Sie also anstelle des rosa Farbverlaufshintergrunds für die Kopf- und Fußzeilenabschnitte zu den jeweiligen Abschnittseinstellungen und ändern Sie die Hintergrundfarbverlaufsfarben in #9599e2 und #8bc6ec.

Verwenden Sie die Textmoduleinstellungen, um WooCommerce-Shortcode-Inhalte zu gestalten

Da sich der WooCommerce-Shortcode jetzt in einem Textmodul befindet, können Sie dies zu Ihrem Vorteil nutzen, um einige dieser Elemente in den Moduleinstellungen zu gestalten.

Lassen Sie uns dies für unsere Mein Konto-Seite tun. Aktualisieren Sie im Visual Builder die Einstellungen des Textmoduls, das den Shortcode-Inhalt enthält, wie folgt:

Unter der Registerkarte Design…

Text Textgröße: 20px
Textzeilenhöhe: 1,6em

Klicken Sie nun auf die Registerkarte Link unter dem Abschnitt Text, um die Links wie folgt zu formatieren:

Link-Schriftart: Poppins
Link-Schriftstärke: Halbfett
Linktextgröße: 27px
Verbindungsleitungshöhe: 1.5em

Einstellungen speichern

Sehen Sie sich nun Ihre Mein Konto-Seite an.

Verwenden von benutzerdefiniertem CSS zum Stylen von WooCommerce-Archivseiten?

Einige der von WooCommerce verwendeten Archivseiten werden nicht wie die anderen Seiten mit einem Shortcode generiert, daher können sie nicht mit dem Divi Builder optimiert werden. Für diese Seiten müssten Sie also ein benutzerdefiniertes CSS erstellen.

Sehen wir uns als Beispiel die Seite "Ausgewählte Kategorie" an.

Öffnen wir nun den Theme Customizer und klicken auf Additional CSS und fügen Folgendes hinzu:

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

Dadurch werden das Sortier-Dropdown-Feld, die Breadcrumbs und die Preisschriftart formatiert. Der Rest des Textes kann mit den Typografie-Einstellungen aus dem Theme-Anpasser geändert werden.

Abschließende Gedanken

Das Erstellen eines Online-Shops für Ihre Website wird mit Hilfe dieses erstaunlichen Layout-Pakets, WooCommerce und des Divi Builder viel einfacher. Offensichtlich gibt es noch einige Notwendigkeiten, die noch erledigt werden müssen, die den Rahmen dieses Artikels sprengen würden. Sie müssen beispielsweise noch entscheiden, welches Zahlungsgateway Sie verwenden möchten, wie Sie den Versand handhaben möchten und andere unternehmensspezifischere Aktionselemente. Aber WooCommerce sollte in der Lage sein, das meiste von dem zu verarbeiten, was Sie brauchen.

Wenn überhaupt, hoffe ich, dass dieser Beitrag Sie dazu inspiriert hat, selbst etwas Erstaunliches zu schaffen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!