Beim Erstellen einer Produktseite in Divi können wir das Akkordeonmodul verwenden, um Produktinformationen mit dynamischem Inhalt anzuzeigen. Dadurch erhalten Sie ein einzigartiges Design für die Produktseiten, während wertvoller Platz auf der Seite erhalten bleibt.
In diesem Tutorial zeigen wir Ihnen, wie Sie die dynamische Inhaltsfunktion von Divi verwenden, um ein Produktinformationsakkordeon zu erstellen, und wie Sie das Akkordeon (und seinen Inhalt) mit dem Divi Visual Builder entwerfen.
Lassen Sie uns beginnen.
Übersicht
Hier ist eine Vorschau des Designs, das wir in diesem Tutorial erstellen werden.
Beachten Sie, dass Sie ein Produkt-Setup wie in diesem Tutorial beschrieben haben müssen, um die gleichen Ergebnisse zu erzielen.
Starten
Um zu beginnen, müssen Sie Folgendes tun:
- Falls noch nicht geschehen, installieren und aktivieren Sie die Divi-Thema installiert (oder das Divi Builder-Plug-in, wenn Sie das nicht verwenden Divi-Thema).
- Installieren und aktivieren Sie das Plugin WooCommerce. Wenn Sie konfigurieren WooCommerce Zum ersten Mal müssen Sie den grundlegenden Einrichtungsassistenten ausführen, um Ihren Shop vorzubereiten. Sobald Sie fertig sind, können Sie Ihre neuen Produkte hinzufügen.
- Erstellen Sie ein neues Produkt wie unten gezeigt.
Einrichten des Beispielprodukts
Um das Beispielprodukt für dieses Lernprogramm zu konfigurieren, gehen Sie zu Produkte> Neu hinzufügen. Geben Sie dem Produkt den Titel "Massage (Einzelsitzung)" und klicken Sie, um Divi Builder zu verwenden.
Aktualisieren Sie anschließend die folgenden Einstellungen und Produktinformationen für die Produktseite:
1. Wählen Sie unter Divi Page Settings das Layout No Sidebar aus.
2. Produktkategorie hinzufügen / auswählen
3. Produktbild hinzufügen
4. Fügen Sie den Inhalt der Beschreibung hinzu.
5. Sous Daten des Produkts ändern Sie den Produkttyp in Variables Produkt.
6. Fügen Sie ein Attribut mit dem Namen "Typ" mit den folgenden Werten hinzu: Schwedisch | Heißer Stein | Aromatherapie | Tiefe Gewebe. Stellen Sie sicher, dass Sie "Für Variationen verwendet" auswählen.
7. Dann auf der Registerkarte Variationen unter dem Schalter von Daten des Produkts verwenden Sie den Dropdown-Eintrag, um Variationen aus allen Attributen zu erstellen.
8. Wählen Sie "Set Regular Prices" aus dem Dropdown-Menü, um den regulären Preis für die drei Variablen festzulegen.
9. Geben Sie im Dialogfeld den Wert "50" ein und wählen Sie OK.
10. ein Wenn Sie fertig sind, speichern oder veröffentlichen Sie das Produkt.
Sie können jetzt mit der Gestaltung Ihres Layouts mit einem benutzerdefinierten Produktakkordeon beginnen.
Erstellung des Produktinfo-Akkordeons mit dynamischem Inhalt in Divi
Das Standardproduktlayout zeigt Produktinformationen mithilfe verschiedener Woo-Module an. In diesem Beispiel möchten wir das Akkordeon verwenden, um drei Hauptinformationen zum Produkt anzuzeigen: Produktbeschreibung, zusätzliche Produktinformationen und Produktbewertungen. Diese drei Inhalte werden derzeit im Modul "Woo-Registerkarten" angezeigt. Alles, was wir tun müssen, ist das Woo-Tabs-Modul zu entfernen und es durch ein Akkordeon-Modul mit denselben Informationen zu ersetzen, die über dynamische Inhalte eingegeben wurden.
Hier ist, wie es geht.
Klicken Sie zunächst auf Divi im Front-End-System, um den visuellen Generator bereitzustellen. Entfernen Sie dann das Woo Tabs-Modul.
Fügen Sie dann ein neues Akkordeon-Modul hinzu, um die Registerkarten zu ersetzen.
Klicken Sie im Popup-Fenster Akkordeoneinstellungen auf das Zahnradsymbol des ersten Akkordeons, um die einzelnen Akkordeoneinstellungen zu öffnen.
Geben Sie den Titel "Über das Produkt" ein.
Bewegen Sie den Mauszeiger über das Eingabefeld für den Hauptinhalt und klicken Sie auf das Symbol für den dynamischen Inhalt.
Wählen Sie "Produktbeschreibung" aus der Liste der dynamischen Inhalte.
Dadurch wird die lange Beschreibung des Produkts angezeigt, die wir für das Produkt im Backend definiert haben.
Sobald der Inhalt des ersten Akkordeons vorhanden ist, öffnen Sie die Einstellungen für das zweite Akkordeon und aktualisieren Sie Folgendes:
- Titel: Technische Daten
Fügen Sie dann den dynamischen Inhalt "Additional Product Information" zum Body hinzu.
Wenn der Inhalt des zweiten Akkordeons fertig ist, fügen Sie ein neues Akkordeonelement hinzu und aktualisieren Sie die Akkordeoneinstellungen wie folgt:
- Titel: Zusätzliche Informationen
Fügen Sie dann den dynamischen Inhalt "Produktbewertungen" zum Text hinzu, um den Artikel / Inhalt der Produktbewertung einzubetten.
HINWEIS: Stellen Sie sicher, dass Sie mindestens eine Produktbewertung hinzugefügt haben, um den Inhalt auf der Live-Seite anzuzeigen.
Gestaltung der Produkt- und Inhaltsvereinbarung mit Divi
Nachdem unser Akkordeon mit Produktinformationen über den dynamischen Inhalt zum Anzeigen von Produktinformationen verfügt, können wir ihn mithilfe der Einstellungen des integrierten Akkordeonmoduls anpassen.
Öffnen Sie die Einstellungen des Akkordeonmoduls und aktualisieren Sie Folgendes:
- Symbolfarbe: # ff9375
- Verwenden Sie die Schriftgröße des Symbols: JA
- Icon Schriftgröße: 26px
- Hintergrundfarbe umschalten: #ffffff
- Offener Texttitel Farbe: #ff9375
- Texttitel: #222222
- Titelschrift: Lato
- Titelschrift: Fett
- Titelschriftart: TT
- Texttitelgröße: 20px
- Leerzeichen der Buchstaben des Titels: 0.2em
- Höhe der Titelzeile: 2em
- Body-Schriftart: Lato
- Körpertextgröße: 16px
- Körpergröße: 1.8em
- Link-Textfarbe: #ff9375
Dies zielt auf alle Links ab, die Sie im dynamischen Inhalt für jedes Akkordeon haben, wie zum Beispiel die Sternebewertung.
- Textfarbe der ungeordneten Liste: # ff9375
- Art der ungeordneten Liste: Kreis
- Unbestellte Einrückung von Listenelementen: 5%
- Breite des Rahmens: 0px
- Breite des oberen Randes: 1px
- Farbe des oberen Randes: #222222
Und als letzten Schritt fügen wir einen kleinen CSS-Extrakt hinzu, um den Standardabstand zwischen den Akkordeonskalen zu extrahieren.
Fügen Sie auf der Registerkarte Erweitert dem Element Umschalten das folgende CSS hinzu:
margin-bottom: 0px;
Nun sehen wir uns das endgültige Design des Produktinfo-Akkordeons an.
Letzte Anpassungen am Layout
Am Layout können einige Anpassungen vorgenommen werden, um dem Design des Akkordeons zu entsprechen. Beispielsweise können wir die Schriftart jedes Moduls an Lato anpassen, einen benutzerdefinierten Rahmen und einen Rahmenradius um die Dropdown-Liste der Variablen hinzufügen und die Schaltfläche In den Warenkorb mit einer festen Hintergrundfarbe aktualisieren passt ihm.
Sobald dies erledigt ist, ist hier das Endergebnis.
Ich habe dieses Design oben als kostenlosen Download aufgenommen. Bitte probieren Sie es selbst aus. Beachten Sie, dass Sie über die in diesem Lernprogramm beschriebene Produktkonfiguration verfügen müssen, um dieselben Ergebnisse zu erzielen.
HINWEIS: Die Standardfarbe für die meisten Artikel WooCommerce eines Produkts in Divi wird vom sekundären Farbwert der Theme-Anpassungseinstellungen geerbt. Es könnte einfacher sein, diese Sekundärfarbe zu aktualisieren, sobald das Farbmodul von woo aktiviert ist.
Abschließende Gedanken
Wie wir erfahren haben, können nicht nur Woo Mods zum Extrahieren dynamischer Produktinformationen verwendet werden. Das Produktinformationsakkordeon ist ein hervorragendes Beispiel dafür, wie Sie mit jedem Divi-Modul Produktinformationen auf einzigartige und übersichtliche Weise anzeigen können. Entdecken Sie neue, aufregende Akkordeon-Designs für Ihre Produktseiten. Und natürlich können Sie anstelle eines Akkordeons mehrere Wippmodule verwenden, um ähnliche Ergebnisse zu erzielen.
