So verwenden Sie dynamischen Inhalt zum Erstellen eines WooCommerce-Produktinfoakkordeons in Divi

Beim Erstellen einer Produktseite in Divi können wir das Akkordeon-Modul verwenden, um Produktinformationen mit dynamischen Inhalten anzuzeigen. Dadurch erhalten Sie Produktseiten ein einzigartiges Design und sparen wertvollen Platz auf der Seite.

In diesem Tutorial zeigen wir Ihnen, wie Sie die dynamische Inhaltsfunktion von Divi verwenden, um ein Produktinfo-Akkordeon zu erstellen, und wie Sie das Akkordeon (und seinen Inhalt) mit dem Divi Visual Builder entwerfen.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das Produktinfo-Akkordeon-Layout KOSTENLOS herunter

Um das Layout-Design aus diesem Tutorial 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

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Denken Sie daran, dass Sie über eine Produkteinrichtung wie in diesem Tutorial beschrieben verfügen müssen, um die gleichen Ergebnisse zu erzielen.

Kommen wir zum Tutorial, sollen wir?

Einstieg

Um zu beginnen, müssen Sie Folgendes tun:

Einrichten des Beispielprodukts

Um das Beispielprodukt für dieses Tutorial einzurichten, navigieren Sie zu Produkte > Neu hinzufügen. Geben Sie dem Produkt den Titel „Massage (Einzelsitzung)“ und klicken Sie, um den Divi Builder zu verwenden.

Aktualisieren Sie als Nächstes die folgenden Produktseiteneinstellungen und Produktinformationen:

1. Wählen Sie unter Divi-Seiteneinstellungen das Layout Keine Seitenleistenseite aus.

2. Produktkategorie hinzufügen/auswählen

3. Fügen Sie das Produktbild hinzu

4. Fügen Sie den folgenden Inhalt der langen Produktbeschreibung hinzu:

<h3>Quality Massage</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 	<li>Vestibulum sagittis orci ac odio dictum tincidunt.</li>
 	<li>Donec ut metus leo.</li>
</ul>

<h3>Our Gaurantee</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

5. Ändern Sie unter Produktdaten den Produkttyp in Variables Produkt.

6. Fügen Sie ein Attribut namens „Type“ mit den folgenden Werten hinzu: Schwedisch | Heißer Stein | Aromatherapie | Tiefe Gewebe. Stellen Sie sicher, dass Sie "Für Variationen verwendet" auswählen.

7. Verwenden Sie dann auf der Registerkarte Variationen unter dem Produktdatenschalter die Dropdown-Eingabe, um Variationen aus allen Attributen zu erstellen.

8. Wählen Sie „Reguläre Preise festlegen“ aus der Dropdown-Liste, um den regulären Preis für alle drei Variablen festzulegen.

9. Geben Sie im Popup-Fenster den Wert „50“ ein und wählen Sie OK.

10. Wenn Sie fertig sind, speichern oder veröffentlichen Sie das Produkt.

Jetzt können Sie mit der Gestaltung Ihres Layouts mit einem benutzerdefinierten Produktinfo-Akkordeon beginnen.

Erstellen des Produktinfo-Akkordeons mit dynamischem Inhalt in Divi

Das Standardproduktlayout zeigt Produktinformationen mit verschiedenen Woo-Modulen an. In diesem Beispiel möchten wir das Akkordeon verwenden, um drei Hauptteile von Produktinformationen anzuzeigen: Produktbeschreibung, zusätzliche Produktinformationen und Produktbewertungen. Alle drei dieser Inhalte werden derzeit im Modul woo tabs angezeigt. Alles, was wir tun müssen, ist das Woo-Tabs-Modul zu löschen und durch ein Akkordeon-Modul mit denselben Informationen zu ersetzen, die über dynamische Inhalte abgerufen werden.

So geht's.

Klicken Sie zunächst auf , um Divi im Frontend zu verwenden, um den Visual Builder bereitzustellen. Löschen Sie dann das Woo Tabs-Modul.

Fügen Sie dann ein neues Akkordeonmodul 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 dann den Mauszeiger über das Eingabefeld für den Hauptinhalt und klicken Sie auf das Symbol für dynamische Inhalte.

Wählen Sie „Produktbeschreibung“ aus der Liste der dynamischen Inhalte aus.

Dadurch wird die lange Produktbeschreibung eingeblendet, die wir für das Produkt im Backend festgelegt haben.

Nachdem Sie den ersten Akkordeoninhalt eingerichtet haben, öffnen Sie die Einstellungen für den zweiten Akkordeon und aktualisieren Sie Folgendes:

• Titel: Spezifikationen

Fügen Sie dann dem Textkörper den dynamischen Inhalt „Produktzusätzliche Informationen“ hinzu.

Nachdem der zweite Akkordeoninhalt fertig ist, fügen Sie ein neues Akkordeonelement hinzu und aktualisieren Sie die Einstellungen für dieses Akkordeon wie folgt:

• Titel: Rezensionen

Fügen Sie dann den dynamischen Inhalt "Produktbewertungen" zum Textkörper hinzu, um das Produktbewertungselement/-inhalt einzufügen.

HINWEIS: Stellen Sie sicher, dass Sie dem Produkt mindestens eine Bewertung hinzugefügt haben, um den Inhalt auf der Live-Seite anzuzeigen.

Entwerfen des Produktinfo-Akkordeons und des Inhalts mit Divi

Da unser Produktinfo-Akkordeon nun über den dynamischen Inhalt verfügt, der zum Anzeigen der Produktinformationen erforderlich ist, können wir das Akkordeon mithilfe der integrierten Akkordeon-Moduleinstellungen gestalten.

Öffnen Sie die Einstellungen des Akkordeonmoduls und aktualisieren Sie Folgendes:

• Symbolfarbe: #ff9375
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 26px

• Hintergrundfarbe geschlossen: #ffffff
• Textfarbe des Titels öffnen: #ff9375
• Titeltextfarbe: #222222
• Titelschriftart: Lato
• Schriftstärke des Titels: Fett
• Titelschriftart: TT
• Titeltextgröße: 20px
• Titel-Buchstaben-Abstand: 0.2em
• Höhe der Titelzeile: 2em

• Körperschriftart: Lato
• Körpertextgröße: 16px
• Körperlinienhöhe: 1.8em

• Linktextfarbe: #ff9375

Dies zielt auf alle Links ab, die Sie innerhalb des dynamischen Inhalts für jedes Akkordeon haben, einschließlich Dinge wie die Bewertungssterne.

• Textfarbe der ungeordneten Liste: #ff9375
• Ungeordneter Listenstiltyp: Kreis
• Einzug der ungeordneten Listenelemente: 5%

• Rahmenbreite: 0px
• Breite des oberen Rands: 1px
• Farbe des oberen Rands: #222222

Und als letzten Schritt fügen wir einen kleinen CSS-Schnipsel hinzu, um den Standardabstand zwischen den Akkordeon-Schaltern zu entfernen.

Fügen Sie auf der Registerkarte "Erweitert" das folgende CSS zum Toggle-Element hinzu:

margin-bottom: 0px;

Schauen wir uns nun das endgültige Design des Produktinfo-Akkordeons an.

Letzte Anpassungen am Layout

Es gibt einige Anpassungen, die wir am Layout vornehmen können, um dem Design des Akkordeons zu entsprechen. Wir können beispielsweise die Schriftart für jedes der Module an Lato anpassen, einen benutzerdefinierten Rahmen und einen benutzerdefinierten Rahmenradius um das variable Dropdown-Menü hinzufügen und die Schaltfläche zum Hinzufügen zum Warenkorb mit einer passenden Hintergrundfarbe aktualisieren.

Wenn Sie fertig sind, ist hier das Endergebnis.

Ich habe dieses Layout-Design oben als kostenlosen Download eingefügt. Überzeugen Sie sich selbst davon. Denken Sie daran, dass Sie das Produkt wie in diesem Tutorial beschrieben eingerichtet haben müssen, um die gleichen Ergebnisse zu erzielen.

HINWEIS: Die Standardfarbe für viele der WooCommerce-Elemente für ein Produkt in Divi wird vom sekundären Farbwert aus den Theme Customizer-Einstellungen geerbt. Es ist möglicherweise einfacher, diese Sekundärfarbe einmal zu aktualisieren, anstatt die Farben pro Woo-Modul zu aktualisieren.

Abschließende Gedanken

Wie wir erfahren haben, sind Woo-Module nicht die einzigen Elemente, mit denen dynamische Produktinformationen abgerufen werden können. Das Produktinfo-Akkordeon ist ein großartiges Beispiel dafür, wie Sie jedes Divi-Modul verwenden können, um Produktinformationen auf einzigartige und prägnante Weise anzuzeigen. Fühlen Sie sich frei, neue und aufregende Akkordeon-Designs für Ihre Produktseiten zu entdecken. Und natürlich können Sie anstelle eines Akkordeons mehrere Toggle-Module verwenden, um ähnliche Ergebnisse zu erzielen.

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

Danke schön!