So erstellen Sie eine Website-weite Woo-Produktseitenvorlage mit Divis Theme Builder

Der neue Theme Builder von Divi automatisiert die Art und Weise, wie wir unsere Divi-Websites erstellen. Bei der Gestaltung von Produktseiten müssen wir beispielsweise nur einmal den Erstellungsprozess durchlaufen und können von dort aus das Design allen unseren Produktseiten zuordnen. Genau das zeigen wir Ihnen im heutigen Use-Case-Tutorial. Wir führen Sie durch die Einrichtung einer Website-weiten Vorlage für Woo-Produktseiten mit Divi. Wir beginnen damit, die Standard-Woo-Produktseite eines bestimmten Produkts so zu gestalten, dass sie mit dem Siebdruck-Layout-Paket übereinstimmt. Wir fahren fort, indem wir das Layout in unserer Divi-Bibliothek speichern und es dann als globalen Körper in einer neuen Vorlage verwenden, die wir erstellen.

Lasst uns anfangen!

Vorschau

Laden Sie die Beispiel-Produktseitenvorlage KOSTENLOS herunter

Um die kostenlose Beispiel-Produktseitenvorlage in die Hände zu bekommen, müssen Sie sie 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!

1. Aktivieren Sie Divi Builder auf einem vorhandenen Produkt

Divi aktivieren & Seiteneinstellungen ändern

Es gibt zwei Möglichkeiten, eine Produktseitenvorlage zu erstellen. Sie können mit der Bearbeitung des globalen Hauptteils in Ihrer Produktseitenvorlage beginnen oder das Design zuerst auf einer einzelnen Produktseite erstellen. Ich persönlich bevorzuge es, das Design zuerst auf einer einzelnen Produktseite zu erstellen. Es ermöglicht Ihnen, das Design zu veröffentlichen und das Live-Ergebnis zu sehen, bevor Sie es auf alle Ihre Produktseiten gleichzeitig anwenden. Das ist der Ansatz, den wir heute verfolgen werden. Öffnen Sie also eine Ihrer vorhandenen Seiten und ändern Sie das Seitenlayout auf volle Breite.

Wechseln Sie zu Visual Builder

Nachdem Sie das Seitenlayout in den Seiteneinstellungen geändert haben, können Sie mit der Erstellung des Frontends beginnen.

2. Passen Sie das Layout an den Stil der Website/des Layout-Pakets an

Hintergrundfarben

Im Visual Builder können Sie alle benötigten Woo-Elemente erkennen. Wir werden einige Einstellungen dieser Module so ändern, dass sie mit dem Siebdruck-Layout-Paket übereinstimmen. Die Änderungen, die wir vornehmen, sind minimal und helfen Ihnen nur dabei, Ihrer Produktseite einen bestimmten Designstil zu verleihen. Wenn Sie an einem persönlichen Projekt arbeiten, können Sie mit der Anpassung so weit gehen, wie Sie möchten, aber für dieses Tutorial versuchen wir, es einfach zu halten. Wir beginnen mit der Änderung einiger Hintergrundfarben.

• Woo Cart Notice Module: Hintergrundfarbe

Öffnen Sie das Woo Cart Notice Module und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #29314f

• Woo Tabs Modul: Tabs Text/Hintergrundfarben

Fahren Sie fort, indem Sie das Woo Tabs-Modul öffnen und als nächstes den Tab-Text und die Hintergrundfarben ändern.

• Hintergrundfarbe der aktiven Registerkarte: #ffffff
• Hintergrundfarbe der inaktiven Registerkarte: #29314f
• Textfarbe der aktiven Registerkarte: #000000
• Textfarbe der Registerkarte: #ffffff

Textkörpereinstellungen

Wir wollen auch einige Änderungen am Fließtext der folgenden Module vornehmen:

• Woo Breadcrumb-Modul: Texteinstellungen
• Woo Add To Cart Modul: Texteinstellungen
• Woo Beschreibungsmodul: Texteinstellungen
• Woo Meta-Modul: Texteinstellungen
• Woo Tabs-Modul: Texteinstellungen
• Woo Tabs Modul: Tabs Texteinstellungen

Öffnen Sie jedes der oben aufgeführten Module und ändern Sie die Textgröße und Textzeilenhöhe wie folgt:

• Textgröße: 16px (Desktop & Tablet), 14px (Telefon)
• Textzeilenhöhe: 2 m (Desktop & Tablet), 1,7 m (Telefon)

Einstellungen für Titeltext

Wir ändern auch den Stil unserer Titel. Wir werden die Änderungen auf jedes dieser Module anwenden:

• Woo Titelmodul: Titeltexteinstellungen
• Woo Related Products Module: Titeltexteinstellungen
• Woo Related Products Module: Texteinstellungen für Produkttitel

Die einzigen zwei Dinge, die wir ändern, sind die Titelschrift und die Schriftstärke des Titels.

• Titelschriftart: Roboto
• Schriftstärke des Titels: Fett

Link-Farben

Als nächstes möchten wir sicherstellen, dass die anklickbaren Elemente hervorgehoben sind. Wir ändern die Linktextfarbe der folgenden beiden Module:

• Woo Breadcrumb-Modul: Linktextfarbe
• Woo Meta-Modul: Linktextfarbe

Dies ist der Farbcode, den wir verwenden:

• Linktextfarbe: #ff7145

Preistexteinstellungen

Wir wollen auch den Preistext gestalten, beginnend mit dem Woo Price Module.

• Woo-Preismodul: Preistexteinstellungen

Ändern Sie die Preistexteinstellungen wie folgt:

• Preis Schriftart: Roboto
• Preis Schriftgewicht: Fett
• Preistextfarbe: #ff7145

Öffnen Sie als nächstes das Woo-bezogene Produktmodul.

• Woo-bezogenes Produktmodul: Preistexteinstellungen

Und nehmen Sie einige Änderungen an den Preistexteinstellungen vor:

• Preis Schriftart: Roboto
• Preis Schriftgewicht: Fett
• Preistextfarbe: #ff7145
• Preis Textgröße: 16px

Tasteneinstellungen

Wir haben auch zwei Schaltflächen auf unserer Produktseite, von denen jeder einen Stil haben muss.

• Woo Warenkorb-Hinweismodul: Schaltflächeneinstellungen
• Woo Add To Cart Modul: Schaltflächeneinstellungen

Ändern Sie die Tasteneinstellungen der Module wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 14px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #ff7145
• Breite des Tastenrahmens: 2px
• Farbe des Knopfrahmens: #ff7145

• Schaltflächenrandradius: 100px
• Tastenabstand der Buchstaben: 1px
• Schaltflächenschriftart: Roboto
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: Großbuchstaben

• Obere Polsterung: 20px
• Untere Polsterung: 20px
• Linke Polsterung: 30px
• Rechte Polsterung: 30px

Zusätzliche Details

Es gibt einige zusätzliche Änderungen, die wir auf das Design der Produktseite anwenden möchten, beginnend mit dem Hintergrund von Spalte 2 der zweiten Zeile auf unserer Seite.

• Spalte 2: Hintergrundfarbe

Verwenden Sie den folgenden Farbcode:

• Hintergrundfarbe: #effef

Wir ändern auch den Abstand von Spalte 2.

• Spalte 2: Abstand

Verwenden Sie die folgenden Abstandswerte:

• Obere Polsterung: 50px
• Untere Polsterung: 50px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Zu guter Letzt möchten wir die Feldeinstellungen unseres Woo Add To Cart-Moduls gestalten.

• Woo Add To Cart Modul: Feldeinstellungen

Übernehmen Sie die folgenden Änderungen:

• Hintergrundfarbe der Felder: #effef
• Feldtextfarbe: #7f7f7f
• Felder Schriftart: Roboto
• Felder Schriftstärke: Fett

3. Erstellen Sie eine neue Vorlage für Produkte und importieren Sie das Produktseitenlayout in den Textbereich

Produktseitenlayout in der Divi-Bibliothek speichern

Sobald Sie das Design der Produktseite abgeschlossen haben, können Sie das gesamte Layout in Ihrer Divi-Bibliothek speichern.

Gehe zum Divi Theme Builder

Zeit, das Layout in eine Produktseitenvorlage zu verwandeln! Navigieren Sie dazu in Ihren Divi-Einstellungen zum Theme Builder.

Neue Vorlage hinzufügen

Fahren Sie fort, indem Sie auf „Neue Vorlage hinzufügen“ klicken.

Wählen Sie "Alle Produkte" auf der Registerkarte "Verwenden auf" Ihrer Vorlageneinstellungen aus, damit die Vorlage für alle Ihre Produkte gleichzeitig gilt.

Benutzerdefinierten Text aus der Bibliothek hinzufügen

Klicken Sie dann auf „Globalen Körper hinzufügen“. Anstatt den benutzerdefinierten Körper von Grund auf neu zu erstellen, wählen wir das Layout aus, das wir gerade in unserer Divi-Bibliothek gespeichert haben.

Gehen Sie zum Tab "Ihre gespeicherten Layouts", um Ihr gespeichertes Layout auszuwählen.

4. Theme Builder-Optionen speichern und Vorlage für vorhandene Produkte anzeigen

Nachdem der Hauptteil Ihrer Vorlage erstellt wurde, gibt es nur noch eines zu tun; speichern Sie die Änderungen. Sobald Ihre neue Vorlage gespeichert wurde, können Sie jedes Ihrer Produkte in der Vorschau anzeigen und feststellen, dass dieselbe Körpervorlage darauf angewendet wird!

Vorschau

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie eine Website-weite Produktseitenvorlage erstellen. Wir haben damit begonnen, eine vorhandene Produktseite mit den Woo-Modulen von Divi zu modifizieren. Wir haben einige minimale Änderungen an der Produktseite vorgenommen, um sie mit dem Siebdruck-Layout-Paket abzugleichen. Wir fuhren fort, indem wir das Layout der Produktseite in unserer Divi-Bibliothek gespeichert haben. Wir haben dann eine neue Vorlage erstellt und das Layout in den Hauptteil unserer Produktseitenvorlage hochgeladen, damit es für unsere gesamte Website gilt. Wir hoffen, dass dieses Tutorial Ihnen hilft, mit Divis neuem Theme Builder schöne E-Commerce-Websites zu erstellen! Wenn Sie Fragen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten.

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.