So erstellen Sie eine saubere und mutige Produktseite mit den WooCommerce-Modulen von Divi (kostenloser Download!)

Fettgedruckte Produktseiten haben eine besondere Möglichkeit, die Aufmerksamkeit Ihrer Besucher auf sich zu ziehen. Und mit Divis neuem WooCommerce-Modul-Update können Sie Ihre alte Produktseite schnell in eine saubere und mutige Seite verwandeln, die sowohl Sie als auch Ihre Besucher lieben werden. Im heutigen Tutorial erstellen wir eine fettgedruckte Produktseite von Grund auf neu und Sie können die JSON-Datei auch kostenlos herunterladen! Dieses Tutorial zeigt, wie vielseitig die neuen WooCommerce-Module von Divi sind und wie Sie im Handumdrehen eine hochprofessionelle eCommerce-Website erstellen können.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Laden Sie das saubere und fette Produktseitenlayout KOSTENLOS herunter

Um das kostenlose Hero Clean & Bold-Produktseitenlayout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

1. WooCommerce-Produkt hinzufügen/öffnen

Produktdetails

Öffnen Sie ein vorhandenes Produkt oder erstellen Sie ein neues. Wenn Sie genau das gleiche Ergebnis erzielen möchten, wie in der Vorschau dieses Beitrags gezeigt, stellen Sie sicher, dass Sie die folgenden Produktdetails hinzufügen:

• Titel
• kurze Beschreibung
• Lange Beschreibung
• Kategorie
• Ausgewähltes Bild
• Preis

Divi Builder aktivieren und Produktseiteneinstellungen ändern

Nachdem Sie die Produktdetails ausgefüllt haben, aktivieren Sie Divi und ändern Sie das Seitenlayout auf "Vollbreite".

Wechseln Sie zu Visual Builder

Fahren Sie fort, indem Sie zum Visual Builder wechseln.

Originalproduktabschnitt auf Seite entfernen

Dort sehen Sie die Informationen der ursprünglichen Produktseite in einem einzigen Abschnitt zusammengefasst. Wir werden unser klares und kühnes Design von Grund auf neu erstellen, also zögern Sie nicht, diesen Abschnitt zu löschen.

2. Erstellen Sie eine saubere und fette Produktseite mit dem Visual Builder von Divi

Regelmäßigen Abschnitt 1 hinzufügen

Abstand

Es ist Zeit, mit der Erstellung unserer kühnen Produktseite zu beginnen! Fügen Sie einen neuen regulären Abschnitt hinzu und ändern Sie die Abstandseinstellungen des Abschnitts.

• Obere Polsterung: 200px
• Untere Polsterung: 0px

Überläufe

Um sicherzustellen, dass nichts über den Abschnittscontainer hinausgeht und kein horizontaler Bildlauf auf der Seite stattfindet, blenden Sie die Überläufe des Abschnitts in den Sichtbarkeitseinstellungen aus.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Hintergrundfarbe der Zeile.

• Hintergrundfarbe: #f4f4f4

Größe

Ändern Sie auch die maximale Breite der Zeile.

• Maximale Breite: 1000px

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 150px
• Untere Polsterung: 150px

Grenze

Wir fügen auch den oberen linken und rechten Ecken der Zeile einen Randradius von '50px' hinzu.

Überläufe

Vervollständigen Sie die Einstellungen der Zeile, indem Sie die Überläufe sichtbar machen.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Woo Breadcrumb-Modul zur Spalte hinzufügen

Dynamischer Inhalt

Zeit, Module hinzuzufügen! Das erste Modul, das wir brauchen, ist das Woo Breadcrumb-Modul.

• Produkt: Dieses Produkt

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Crimson Text
• Schriftstärke des Textes: Fett
• Textschriftart: Großbuchstaben
• Textgröße: 20px
• Text Buchstabenabstand: 4px

Linktext-Einstellungen

Nimmt auch einige Änderungen an den Linktexteinstellungen vor.

• Link-Schriftstärke: Leicht
• Linktextfarbe: #e02b20

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Randwerte für verschiedene Bildschirmgrößen hinzu.

• Unterer Rand: 80px
• Linker Rand: 50 Pixel (Desktop und Tablet), 20 Pixel (Telefon)
• Rechter Rand: 50px (Desktop & Tablet), 20px (Telefon)

Woo-Titelmodul zur Spalte hinzufügen

Dynamischer Inhalt

Das nächste und letzte Modul, das wir in dieser Spalte benötigen, ist das Woo Title-Modul.

• Produkt: Dieses Produkt

Einstellungen für Titeltext

Ändern Sie die Titeltexteinstellungen des Moduls wie folgt:

• Titelschriftart: Montserrat
• Gewicht der Titelschrift: Schwer
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #000000
• Titeltextgröße: 250px (Desktop), 150px (Tablet), 80px (Telefon)
• Höhe der Titelzeile: 0,9em

Abstand

Erhöhen Sie die Breite des Moduls, indem Sie einen negativen linken und rechten Rand hinzufügen.

• Linker Rand: -150px (Desktop), -100px (Tablet), -50px (Telefon)
• Rechter Rand: -150px (Desktop), -100px (Tablet), -50px (Telefon)

Regelmäßigen Abschnitt 2 hinzufügen

Abstand

Fügen Sie einen weiteren Abschnitt direkt unter dem vorherigen hinzu. Ändern Sie die Padding-Werte des Abschnitts wie folgt:

• Obere Polsterung: 0px
• Untere Polsterung: 200px

Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Hintergrundfarbe der Zeile.

• Hintergrundfarbe: #f4f4f4

Größe

Erhöhen Sie als nächstes die maximale Breite der Zeile.

• Maximale Breite: 1000px

Abstand

Fügen Sie auch eine benutzerdefinierte untere Polsterung hinzu.

• Untere Polsterung: 150px

Grenze

Gehen Sie dann zu den Randeinstellungen und wenden Sie den Randradius '50px' auf die untere linke und rechte Ecke an.

Überläufe

Vervollständigen Sie die Zeileneinstellungen, indem Sie sicherstellen, dass die Überläufe sichtbar sind.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Spalte 1 Einstellungen

Dynamisches Hintergrundbild

Nachdem Sie die allgemeinen Zeileneinstellungen abgeschlossen haben, öffnen Sie die Einstellungen von Spalte 1 und fügen Sie das empfohlene Bild des Produkts mithilfe dynamischer Inhalte zum Hintergrund hinzu.

• Hintergrundbild: Ausgewähltes Bild

Abstand

Fügen Sie der Spalte als nächstes etwas unteres Auffüllen hinzu. Dadurch kann das Hintergrundbild durchscheinen.

• Untere Polsterung: 370 Pixel (Desktop), 690 Pixel (Tablet), 380 Pixel (Telefon)

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! In Spalte 1 benötigen wir als einziges Modul ein Textmodul. Fügen Sie Inhalte Ihrer Wahl hinzu.

Hintergrundfarbe

Ändern Sie als nächstes die Hintergrundfarbe des Moduls.

• Hintergrundfarbe: #E02B20

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen.

• Textschriftart: Montserrat
• Schriftstärke des Textes: Ultra Bold
• Textausrichtung: Mitte
• Textfarbe: #FFFFFF
• Textgröße: 30px
• Textzeilenhöhe: 1em

Größe

Verkleinern Sie als nächstes die Größe des Moduls in den Größeneinstellungen.

• Breite: 280px

Abstand

Und verwandeln Sie das Modul in ein Quadrat, indem Sie einige benutzerdefinierte Padding-Werte hinzufügen. Wir erstellen auch eine obere und linke Überlappung mit negativem Rand.

• Oberer Rand: -120px
• Linker Rand: -120px
• Obere Polsterung: 110px
• Untere Polsterung: 110px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Grenze

Um das Quadrat in einen Kreis zu verwandeln, fügen wir an jeder Ecke des Moduls den Randradius '500px' hinzu.

Transformieren Drehen

Wir werden auch das Modul drehen.

• Links: 330 Grad

Textmodul zu Spalte 2 hinzufügen

H2-Inhalt hinzufügen

Auf zur zweiten Spalte! Dort benötigen wir als erstes Modul ein normales Textmodul. Geben Sie einen H2-Inhalt Ihrer Wahl ein.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen wie folgt:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Textgröße: 35px

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Randwerte hinzu.

• Oberer Rand: -70px (Desktop), 100px (Tablet & Telefon)
• Linker Rand: 100px (Desktop), 20px (Tablet & Telefon)
• Rechter Rand: 20px (Tablet & Telefon)

Woo-Beschreibungsmodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Das zweite Modul, das wir in Spalte 2 benötigen, ist das Woo Description Module.

• Produkt: Dieses Produkt
• Beschreibungstyp: Kurzbeschreibung

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls entsprechend:

• Textschriftart: Crimson Text
• Textgröße: 19px
• Textzeilenhöhe: 1.8em
• Textausrichtung: Ausrichten

Abstand

Ändern Sie als nächstes die Abstandswerte des Moduls.

• Unterer Rand: 50px
• Linker Rand: 100px (Desktop), 20px (Tablet & Telefon)
• Rechter Rand: -100px (Desktop), 20px (Tablet & Telefon)

Woo-Preismodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Weiter zum nächsten Modul, dem Woo Price Module.

• Produkt: Dieses Produkt

Preistexteinstellungen

Ändern Sie die Preistexteinstellungen wie folgt:

• Preis Schriftart: Montserrat
• Preis Schriftgewicht: Schwer
• Preistextfarbe: #000000
• Preis Textgröße: 50px

Abstand

Ändern Sie als nächstes die Abstandseinstellungen.

• Unterer Rand: 50px
• Linker Rand: 100px (Desktop), 20px (Tablet & Telefon)
• Rechter Rand: 20px (Tablet & Telefon)

Woo Add to Cart Modul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Das nächste und letzte Modul, das wir benötigen, um dieses Design zu vervollständigen, ist das Woo Add To Cart-Modul.

• Produkt: Dieses Produkt

Texteinstellungen

Ändern Sie die Textschriftart in den Texteinstellungen.

• Textschriftart: Montserrat

Feldeinstellungen

Ändern Sie als nächstes die Feldeinstellungen.

• Feldhintergrundfarbe: #ffffff
• Feldtextfarbe: #000000
• Obere Polsterung: 66px
• Untere Polsterung: 66px
• Felder Schriftart: Montserrat
• Felder Schriftstärke: Heavy

• Alle Ecken: 5px
• Breite des unteren Feldrands: 3px
• Rahmenfarbe der Felder: #e02b20

Tasteneinstellungen

Fahren Sie fort, indem Sie die Schaltfläche gestalten.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #E02B20
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 5px
• Button-Schriftart: Montserrat
• Tastenschriftstärke: Ultra Bold
• Schaltflächenschriftart: Großbuchstaben

• Obere Polsterung: 50px
• Untere Polsterung: 50px
• Linke Polsterung: 100px (Desktop), 50px (Tablet), 20px (Telefon)
• Rechte Polsterung: 100px (Desktop), 50px (Tablet), 20px (Telefon)
• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.3)

Abstand

Vervollständigen Sie das Design des Moduls, indem Sie bei kleineren Bildschirmgrößen einige Werte für den linken und rechten Rand hinzufügen und fertig!

• Linker Rand: 20px (Tablet & Telefon)
• Rechter Rand: 20px (Tablet & Telefon)

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den neuen WooCommerce-Modulen von Divi eine atemberaubende Produktseite mit einem sauberen Erscheinungsbild erstellen. Fettgedruckte Produktseiten bieten eine einzigartige Möglichkeit, Ihr Produkt ins Rampenlicht zu rücken. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.