Erstellen eines dynamischen Produktnutzenrasters für Ihre Produktseitenvorlage mit Divi & ACF

Die Art und Weise, wie Sie Ihre Produktseite gestalten, hat einen unmittelbaren Einfluss auf das Verhalten Ihrer Besucher. Ein gut gestaltetes und angepasstes Design der Produktseite kann Besuchern die Entscheidung erleichtern, ob sie Ihr Produkt kaufen möchten. Wenn Sie nach einer Möglichkeit suchen, Ihre Produktseite ansprechender zu gestalten, werden Sie diesen Beitrag lieben. Wir zeigen Ihnen, wie Sie mit Divi und dem Advanced Custom Fields-Plugin ein dynamisches Produktvorteilsraster in Ihr Design integrieren. Wir beginnen damit, eine Feldgruppe für die Vorteile zu erstellen. Wir werden dann die benutzerdefinierten Felder auf unserer Produktseite ausfüllen und den dynamischen Inhalt in unsere Produktseitenvorlage aufnehmen. Sie können die Produktseitenvorlage auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

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

Desktop

Handy, Mobiltelefon

Laden Sie die Produktseitenvorlage KOSTENLOS herunter

Um die kostenlose 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. Installieren Sie das ACF-Plugin und fügen Sie die Feldgruppe Produktvorteile hinzu

Plugin für erweiterte benutzerdefinierte Felder installieren

Um die verschiedenen Produktvorteile im Backend unserer Produkte anzuzeigen, verwenden wir das kostenlose Advanced Custom Fields Plugin. Gehen Sie zu Ihrem WordPress-Backend> Plugins> Neu hinzufügen> Nach dem ACF-Plugin suchen> Installieren> Aktivieren .

Gehen Sie zu Benutzerdefinierte Felder und fügen Sie eine neue Feldgruppe hinzu

Nachdem Sie das ACF-Plugin installiert und aktiviert haben, können Sie zu Ihren benutzerdefinierten Feldern navigieren und eine neue Feldgruppe hinzufügen.

Feldgruppeneinstellungen

Geben Sie Ihrer neuen Feldgruppe einen Titel und lassen Sie sie nur auf Produktseiten erscheinen.

• 'Beitragstyp' ist gleich 'Produkt'

Erstes Feld hinzufügen

Fahren Sie fort, indem Sie ein neues Feld für den Titel Ihres ersten Produktvorteils hinzufügen.

• Feldbeschriftung: Leistungstitel 1
• Feldtyp: Text

Wiederholen Sie den Schritt für die verbleibenden Felder

Machen Sie dasselbe für die verbleibenden Produktvorteile und deren Beschreibungen. Allen diesen Feldern muss der Feldtyp 'Text' zugewiesen werden.

• Vorteilstitel 1
• Vorteil Beschreibung 1
• Vorteilstitel 2
• Vorteil Beschreibung 2
• Vorteilstitel 3
• Vorteil Beschreibung 3
• Vorteilstitel 4
• Vorteilsbeschreibung 4

2. Produktvorteile zu Produkten hinzufügen

Neues Produkt öffnen oder hinzufügen

Nachdem Ihre Feldgruppe und Felder erstellt wurden, können Sie die Produktvorteile auf individueller Ebene zu Ihren Produkten hinzufügen. Öffnen Sie ein Produkt Ihrer Wahl oder erstellen Sie ein neues.

Füllen Sie die Felder für Produktvorteile aus

Und füllen Sie die Produktvorteile aus.

3. Erstellen Sie eine Produktseitenvorlage im Divi Theme Builder

Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Zeit, mit Divi anzufangen! Um eine neue Vorlage zu erstellen, navigieren Sie zum Divi Theme Builder und klicken Sie auf „Neue Vorlage hinzufügen“.

Vorlage für alle Produkte verwenden

Wir verwenden diese Vorlage für alle Produkte, können aber stattdessen auch Produkte mit einer bestimmten Kategorie oder einem bestimmten Tag auswählen.

Geben Sie den Body-Template-Editor der Vorlage ein

Geben Sie dann den Körper der Vorlage ein, indem Sie auf „Benutzerdefinierten Körper hinzufügen“ klicken und „Benutzerdefinierten Körper erstellen“ auswählen.

Abschnitt 1 ändern

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und ändern Sie die Hintergrundfarbe in Schwarz.

• Hintergrundfarbe: #000000

Abstand

Wechseln Sie zur Registerkarte "Design" des Abschnitts und fügen Sie benutzerdefinierte obere und untere Abstände hinzu.

• Obere Polsterung: 10px
• Untere Polsterung: 10px

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und nehmen Sie einige Änderungen an den Größeneinstellungen vor.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 90%
• Maximale Breite: 100%

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

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

Woo-Warenkorb-Hinweismodul zur Spalte hinzufügen

Dynamischer Inhalt

Das einzige Modul, das wir in dieser Zeile und diesem Abschnitt benötigen, ist ein Woo Cart Notice-Modul. Stellen Sie sicher, dass im dynamischen Inhaltsbereich "Dieses Produkt" ausgewählt ist.

• Produkt: Dieses Produkt

Hintergrundfarbe

Öffnen Sie dann die Einstellungen des Moduls und verwenden Sie eine vollständig transparente Hintergrundfarbe.

• Hintergrundfarbe: rgba(0,0,0,0)

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie als nächstes die Textschrift in den Texteinstellungen.

• Textschriftart: Karla

Tasteneinstellungen

Vervollständigen Sie die Moduleinstellungen, indem Sie die Schaltfläche entsprechend gestalten:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 20px
• Schaltflächentextfarbe: #000000
• Schaltflächenhintergrundfarbe: #ffd623
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px

• Button-Schriftart: Oswald
• Schaltflächenschriftart: Großbuchstaben

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

Abschnitt 2 hinzufügen

Hintergrund mit Farbverlauf

Fügen Sie einen weiteren regulären Abschnitt direkt unter dem vorherigen hinzu, öffnen Sie die Abschnittseinstellungen und verwenden Sie einen ansprechenden Verlaufshintergrund.

• Farbe 1: #000000
• Farbe 2: #ffffff
• Startposition:
  • Desktop: 30%
  • Tablette: 57%
  • Telefon: 54%
• Endposition:
  • Desktop: 30%
  • Tablette: 57%
  • Telefon: 54%

Abstand

Wechseln Sie zum Design-Tab des Abschnitts und fügen Sie einige obere Polsterung hinzu.

• Obere Polsterung: 150px

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 95%
• Maximale Breite: 2560px
• Zeilenausrichtung: Mitte

Abstand

Wir entfernen auch die standardmäßige obere Auffüllung der Zeile.

• Obere Polsterung: 0px

Hauptelement

Und um den Spalteninhalt auf dem Desktop zu zentrieren, verwenden wir zwei Zeilen CSS-Code im Hauptelement der Zeile.

Desktop:

display: flex;
align-items: center;

Tablet & Telefon:

display: block;

Woo Images-Modul zu Spalte 1 hinzufügen

Dynamischer Inhalt

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Woo Images-Modul in Spalte 1. Stellen Sie sicher, dass „Dieses Produkt“ im dynamischen Inhaltsbereich ausgewählt ist.

• Produkt: Dieses Produkt

Scroll-Effekt mit vertikaler Bewegung

Wir fügen dem Bild eine subtile Bewegung hinzu, indem wir den horizontalen Bewegungs-Scroll-Effekt auf der Registerkarte "Erweitert" verwenden.

• Vertikale Bewegung aktivieren: Ja
• Startversatz:
  • Desktop: -4
  • Tablet & Telefon: 0
• Mittenversatz: 0
• End-Offset: 0
• Bewegungseffekt-Trigger: Mitte des Elements

Woo-Titelmodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

In Spalte 2 benötigen wir als erstes Modul ein Woo Title Module. Stellen Sie sicher, dass im dynamischen Inhaltsbereich "Dieses Produkt" ausgewählt ist.

• Produkt: Dieses Produkt

Einstellungen für Titeltext

Gehen Sie dann zur Registerkarte Design und formatieren Sie den Titeltext wie folgt:

• Titelschriftart: Oswald
• Titelschriftart: Großbuchstaben
• Titeltextfarbe: #ffd623
• Titeltextgröße: 80px

Abstand

Vervollständigen Sie das Woo-Titelmodul, indem Sie einen linken und rechten Rand hinzufügen.

• Linker Rand: 5%
• Rechte Marge: 5%

Woo-Beschreibungsmodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Weiter zum nächsten Modul, das ein Woo-Beschreibungsmodul ist. Wir verwenden dafür den folgenden dynamischen Inhalt:

• Produkt: Dieses Produkt
• Beschreibungstyp: Kurzbeschreibung

Texteinstellungen

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

• Textschriftart: Karla
• Textfarbe: #dbdbdb
• Textgröße: 17px (Desktop & Tablet), 15px (Telefon)
• Textzeilenhöhe: 1.9em

Größe

Ändern Sie dann die Breite über verschiedene Bildschirmgrößen.

• Breite: 59 % (Desktop), 82 % (Tablet & Telefon)

Abstand

Vervollständigen Sie das Woo-Beschreibungsmodul, indem Sie einige benutzerdefinierte Randwerte in den Abstandseinstellungen hinzufügen.

• Oberer Rand: 50px
• Unterer Rand: 100px
• Linker Rand: 5%
• Rechte Marge: 5%

Blurb-Modul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Um die Produktvorteile anzuzeigen, die wir im ersten Teil dieses Tutorials hinzugefügt haben, verwenden wir Blurb-Module. Fügen Sie ein erstes Blurb-Modul hinzu und verwenden Sie den dynamischen Inhalt des ersten Produktvorteils für Titel und Text.

• Titel: Vorteilstitel 1
• Körper: Vorteilsbeschreibung 1

Bild hochladen

Laden Sie ein Bild hoch oder verwenden Sie als nächstes ein Symbol Ihrer Wahl. Sie finden diejenigen, die wir in diesem Tutorial verwendet haben, im Download-Ordner, den Sie zu Beginn dieses Tutorials herunterladen konnten.

Bild-/Symboleinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Bild-/Symboleinstellungen wie folgt:

• Bild-/Symbolplatzierung: Oben
• Bild-/Symbolausrichtung: Links

Einstellungen für Titeltext

Als Nächstes ändern wir die Einstellungen für den Titeltext.

• Titelschriftart: Oswald
• Titelschriftart: Großbuchstaben
• Titeltextgröße: 25px

Textkörpereinstellungen

Zusammen mit den Textkörpereinstellungen.

• Körperschriftart: Karla
• Textgröße: 17 Pixel (Desktop und Tablet), 15 Pixel (Telefon)
• Körperlinienhöhe: 1.9em

Größe

Gehen Sie dann zu den Größeneinstellungen und ändern Sie die Breiten. Es ist wichtig, eine Hauptbreite von weniger als 50% zu verwenden, damit wir in den nächsten Schritten zwei Blurb-Module nebeneinander anzeigen können.

• Bildbreite: 25%
• Breite: 49%

Abstand

Wir fügen außerdem um das Blurb-Modul herum etwas Leerraum hinzu, indem wir benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen verwenden.

• Obere Polsterung: 8%
• Untere Polsterung: 8%
• Linke Polsterung: 8 % (Desktop & Tablet), 2 % (Telefon)
• Rechte Polsterung: 8% (Desktop & Tablet) 2% (Telefon)

Hauptelement

Um sicherzustellen, dass zwei Blurb-Module nebeneinander angezeigt werden, sind zwei wichtige Schritte erforderlich. Die erste besteht darin, sicherzustellen, dass die Breite des Moduls weniger als 50% beträgt (wie wir es in einem der vorherigen Schritte getan haben). Die zweite verwendet eine Inline-Anzeigeeigenschaft. Wir fügen diese CSS-Eigenschaft dem Hauptelement des Blurb-Moduls auf der Registerkarte "Erweitert" hinzu.

display: inline-block;

Blurb-Modul dreimal klonen

Sobald Sie das erste Blurb-Modul abgeschlossen haben, können Sie es dreimal klonen. Sie werden automatisch feststellen, dass die Blurb-Module in einem Raster angezeigt werden.

Bilder des Blurb-Moduls ändern

Ändern Sie das Bild in jedem duplizierten Blurb-Modul. Diese finden Sie in dem Download-Ordner, den Sie am Anfang dieses Beitrags herunterladen konnten.

Dynamischen Inhalt des Blurb-Moduls ändern

Ändern Sie auch den dynamischen Inhalt für jedes duplizierte Blurb-Modul.

• Titel: Leistungstitel (2,3 oder 4)
• Körper: Leistungsbeschreibung (2,3 oder 4)

Rahmen einzeln zu Blurb-Modulen hinzufügen

Randeinstellungen für Blurb-Modul 1

Um unser Grid-Design zu vervollständigen, fügen wir den Blurb-Modulen auf individueller Ebene einige Rahmen hinzu. Öffnen Sie das erste Blurb-Modul und verwenden Sie einen rechten Rand.

• Breite des rechten Rands: 1px
• Farbe des rechten Rands: #ffd623

Fügen Sie auch dem ersten Blurb-Modul einen unteren Rand hinzu.

• Breite des unteren Rands: 1px
• Farbe des unteren Rands: #000000

Randeinstellungen für Blurb-Modul 2

Öffnen Sie dann das zweite Blurb-Modul und verwenden Sie einen unteren Rand.

• Breite des unteren Rands: 1px
• Farbe des unteren Rands: #000000

Randeinstellungen des Blurb-Moduls 3

Vervollständigen Sie das Rasterdesign, indem Sie dem dritten Blurb-Modul einen rechten Rand hinzufügen.

• Breite des rechten Rands: 1px
• Farbe des rechten Rands: #ffd623

Woo Add to Cart Modul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Das letzte Modul, das wir in unserem Design benötigen, ist ein Woo Add to Cart-Modul. Stellen Sie sicher, dass im dynamischen Inhaltsbereich "Dieses Produkt" ausgewählt ist.

• Produkt: Dieses Produkt

Feldeinstellungen

Wechseln Sie als nächstes zum Design-Tab und ändern Sie die Feldeinstellungen.

• Feldhintergrundfarbe: #ffffff
• Feldtextfarbe: #000000

• Felder abgerundete Ecken: 0px (alle Ecken)
• Breite des unteren Rands der Felder: 1px
• Farbe des unteren Rands der Felder: #000000

Tasteneinstellungen

Stylen Sie dann die Schaltfläche entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 20px
• Schaltflächentextfarbe: #000000
• Schaltflächenhintergrundfarbe: #ffd623
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px

• Button-Schriftart: Oswald
• Schaltflächenschriftart: Großbuchstaben

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

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie benutzerdefinierte Randwerte hinzufügen.

• Oberer Rand: 100px
• Linker Rand: 5%

3. Speichern Sie die Änderungen im Theme Builder und sehen Sie sich das Ergebnis an

Sobald Sie das Design der Produktseitenvorlage abgeschlossen haben, können Sie alle Ihre Theme Builder-Änderungen speichern und das Ergebnis für Ihre Produkte anzeigen!

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Ihrer nächsten Divi-Produktseitenvorlage kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie ein dynamisches Produktvorteilsraster einfügen, um Ihrer Produktseite zusätzliche Anreize zu verleihen. Wir haben dieses Tutorial mit Divi in ​​Kombination mit dem Advanced Custom Fields-Plugin erstellt. 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.