Springe zum Hauptinhalt

So fügen Sie mit Divi ein Informationsakkordeon zu einem WooCommerce-Produkt hinzu

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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.

Divi Akkordeon Design

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:

  • Wenn Sie dies noch nicht getan haben, installieren und aktivieren Sie das installierte Divi-Design (oder das Divi Builder-Plug-In, wenn Sie das Divi-Design nicht verwenden).
  • Installieren und aktivieren Sie das WooCommerce-Plugin. Wenn Sie WooCommerce zum ersten Mal einrichten, müssen Sie den Assistenten für die Grundeinstellung 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.

Erstellen Sie ein Divi 1 Woocommerce-Produkt

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. Ändern Sie unter Produktdaten 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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Divi-Modell in voller Breite

7. Verwenden Sie dann auf der Registerkarte Variationen unter Produktdatenumschaltung den Dropdown-Eintrag, um Variationen aus allen Attributen zu erstellen.

Erstellen Sie Woocommerce-Variationen
Woocommerce Produktvarianten

8. Wählen Sie "Set Regular Prices" aus dem Dropdown-Menü, um den regulären Preis für die drei Variablen festzulegen.

Definieren Sie regelmäßige Preisschwankungen im Woocommerce

9. Geben Sie im Dialogfeld den Wert "50" ein und wählen Sie OK.

Legen Sie einen Woocommerce-Preis fest

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.

Entfernen Sie das Woocommerce-Modul

Fügen Sie dann ein neues Akkordeon-Modul hinzu, um die Registerkarten zu ersetzen.

Woocommerce Akkordeon

Klicken Sie im Popup-Fenster Akkordeoneinstellungen auf das Zahnradsymbol des ersten Akkordeons, um die einzelnen Akkordeoneinstellungen zu öffnen.

Accordeon- und Divi-Parameter

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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Verwenden Sie dynamische WordPress-Woocommerce-Inhalte

Wählen Sie "Produktbeschreibung" aus der Liste der dynamischen Inhalte.

Produktbeschreibung woocommerce

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
Akkordeons für Konfigurationsschrift-Symbole
  • 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
Woocommerce-Panel-Konfiguration
  • Body-Schriftart: Lato
  • Körpertextgröße: 16px
  • Körpergröße: 1.8em
Woocommerce Akkordeon Body Font Konfiguration
  • Link-Textfarbe: #ff9375

Dies zielt auf alle Links ab, die Sie im dynamischen Inhalt für jedes Akkordeon haben, wie zum Beispiel die Sternebewertung.

Woocommerce Link Farbkonfiguration
  • 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
Akkordeon Rand Konfiguration Divi Woocommerce

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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Produktinformationen Divi Akkordeon

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.

Produktinformationen Divi Akkordeon

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 der meisten WooCommerce-Elemente eines Produkts in Divi wird vom sekundären Farbwert der Anpassungseinstellungen des Designs übernommen. Es könnte einfacher sein, diese Sekundärfarbe zu aktualisieren, sobald die Farben von woo modifiziert wurden.

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.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren