Springe zum Hauptinhalt

Erstellung eines dynamischen Leistungsrasters für WooCommerce-Produkte

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 701.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]

Die Art und Weise, wie Sie Ihre Produktseite gestalten, wirkt sich unmittelbar auf das Verhalten Ihrer Besucher aus. Ein gut gestaltetes und personalisiertes Design der Produktseite kann es den Besuchern erleichtern, zu entscheiden, ob sie Ihr Produkt kaufen möchten. Wenn Sie nach einer Möglichkeit suchen, Ihre Produktseite ansprechender zu gestalten, wird Ihnen dieses Tutorial wahrscheinlich gefallen. 

Wir zeigen Ihnen, wie Sie mit Divi und dem Plugin "Erweiterte benutzerdefinierte Felder" ein dynamisches Raster für Produktvorteile in Ihr Design integrieren können. Wir beginnen mit der Erstellung einer Gruppe von Feldern für Vorteile. Wir werden dann die benutzerdefinierten Felder auf unserer Produktseite ausfüllen und den dynamischen Inhalt in unsere Produktseitenvorlage aufnehmen. 

Mögliches Ergebnis

Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Mögliche Ergebnisdivi

1. Installieren Sie das ACF-Plugin und das Plug-In für die Product Benefit Field Group

Installieren Sie das Plugin für erweiterte benutzerdefinierte Felder

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

Installieren Sie das erweiterte benutzerdefinierte Feld-Plugin

Gehen Sie zu benutzerdefinierten Feldern und fügen Sie eine neue Gruppe von Feldern hinzu

Sobald Sie das ACF-Plugin installiert und aktiviert haben, können Sie auf Ihre benutzerdefinierten Felder zugreifen und eine neue Gruppe von Feldern hinzufügen.

Erstellen Sie ACF-Felder

Feldgruppeneinstellungen

Geben Sie Ihrer neuen Gruppe von Feldern einen Titel und lassen Sie ihn nur auf Produktseiten erscheinen.

  • "Nachrichtentyp" entspricht "Produkt"
Regeln hinzufügen

Fügen Sie ein erstes Feld hinzu

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

  • Feldbezeichnung: Titel der Leistung 1
  • Feldtyp: Text
AC-Feld hinzufügen
Divi-Feldanpassung

Wiederholen Sie den Schritt für die restlichen Felder

Machen Sie dasselbe für die anderen Vorteile des Produkts und deren Beschreibungen. Für alle diese Felder ist der ihnen zugewiesene Feldtyp "Text" erforderlich.

  • Titel der Dienstleistung 1
  • Leistungsbeschreibung 1
  • Titel der Dienstleistung 2
  • Leistungsbeschreibung 2
  • Titel der Dienstleistung 3
  • Leistungsbeschreibung 3
  • Titel der Dienstleistung 4
  • Leistungsbeschreibung 4
Konfigurieren Sie ACF-Felder

2. Fügen Sie den Produkten Vorteile hinzu

Öffnen oder fügen Sie ein neues Produkt hinzu

Sobald 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.

Divi Produktentwicklung

Füllen Sie die Felder Produktvorteile aus

Und erfüllen Sie die Vorteile des Produkts.

Füllen Sie die Felder mit den Divi-Vorteilen aus

3. Erstellen Sie eine Produktseitenvorlage in Divi Theme Builder

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

Es ist Zeit, mit Divi zu beginnen! Um eine neue Vorlage zu erstellen, rufen Sie den Divi Theme Builder auf und klicken Sie auf "Neue Vorlage hinzufügen".

Divi Theme Builder

Verwenden Sie für alle Produkte eine Vorlage

Wir verwenden diese Vorlage für alle Produkte, können jedoch stattdessen Produkte mit einer bestimmten Kategorie oder Bezeichnung auswählen.

Fügen Sie alle Woocommerce-Produkte hinzu

Rufen Sie den Modellkörper-Vorlageneditor auf

Geben Sie dann den Hauptteil des Modells ein, indem Sie auf "Benutzerdefinierten Körper hinzufügen" klicken und "Benutzerdefinierten Körper erstellen" auswählen.

Divi Körper bauen

Bearbeiten Sie Abschnitt 1

Hintergrundfarbe

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

  • Hintergrundfarbe: # 000000
Hintergrundkonfiguration des Divi-Abschnitts

Abstand

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

  • Top Polsterung: 10px
  • Bodenpolsterung: 10px
Konfiguration des Abstandsabschnitts

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Lassen Sie uns fortfahren, indem Sie dem Abschnitt mit der folgenden Struktur eine neue Zeile hinzufügen:

Konfiguration des Linienmodullayouts

Abstand

Lassen Sie uns ohne Hinzufügen von Mods die Zeileneinstellungen öffnen und einige Abstandsanpassungen vornehmen.

  • Personalisierte Dachrinne verwenden: Ja
  • Dachrinnenbreite: 1
  • Breite: 90%
  • Maximale Breite: 100%
Einstellungen für den Zeilenmodulabstand

Abstand

Entfernen Sie alle oberen und unteren Innenabstände.

  • Hohe interne Marge: 0px
  • Niedriger interner Spielraum: 0px
Abstandseinstellungen des Divi-Linienmoduls

Fügen Sie der Spalte das Woo Cart Notice-Modul hinzu

Dynamischer Inhalt

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

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]

  • Produkt: Dieses Produkt
Einstellungen woo cart Benachrichtigungsmodul divi

Farbiger Hintergrund

Öffnen Sie dann die Moduleinstellungen und verwenden Sie einen transparenten Hintergrund.

  • Hintergrundfarbe: rgba (0,0,0,0)
Woo Cart Modul Divi Einstellungen

Texteinstellungen

Wechseln Sie zur Registerkarte "Design" und ändern Sie die Textschriftart.

  • Textschrift: Karla
Einstellungen für die Divi-Modulschriftart

Tasteneinstellung

Beenden Sie die Plugin-Einstellungen, indem Sie die Stileinstellungen definieren:

  • Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
  • Textgröße der Schaltfläche: 20px
  • Textfarbe der Schaltfläche: # 000000
  • Schaltflächenhintergrund: # ffd623
  • Breite des Schaltflächenrahmens: 0px
  • Abgerundeter Rand Button: 0px
Farbeinstellungen des Woo Cart Notice-Moduls
  • Tastenschrift: Oswald
  • Schaltflächenstil: Umschalttaste
Woo Cart Hinweis Modul Farbdesign Anpassung
  • Hohe interne Marge: 20px
  • Niedriger interner Spielraum: 20px
  • Linker interner Rand: 50px
  • Interner rechter Rand: 50px
Konfigurationsdesign-Modul woo Wagen Hinweis

Abschnitt 2 hinzufügen

Verlaufshintergrund

Fügen Sie einen weiteren regulären Abschnitt unter dem vorherigen hinzu. Öffnen Sie dann die Einstellungen und verwenden Sie einen Verlaufshintergrund wie folgt:

  • Farbe 1: # 000000
  • Farbe 2: #ffffff
  • Startposition:
    • Desktop: 30%
    • Tablette: 57%
    • Telefon: 54%
  • Endposition:
    • Desktop: 30%
    • Tablette: 57%
    • Telefon: 54%
Divi Line Modul hinten einstellen

Abstand

Gehen wir zur Registerkarte Design und fügen einen hohen internen Rand hinzu.

  • Top Polsterung: 150px
Konfiguration des Abstandsmoduls

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit derselben Struktur wie unten gezeigt hinzufügen:

Konfiguration im Divi-Linienstil

Sizing

Ohne Modifikationen hinzuzufügen, öffnen wir die Einstellungen und ändern den Abstand wie folgt:

  • Verwenden Sie benutzerdefinierte Dachrinnen: Ja
  • Dachrinnenraum: 1
  • Breite: 95%
  • Maximale Breite: 2560px
  • Linienausrichtung: Mitte
Dachrinnenkonfiguration Divi-Modul

Abstand

Wir werden auch den oberen internen Rand entfernen.

  • Top Polsterung: 0px
Konfiguration des Divi-Modulabstands

Hauptelement

Um den Inhalt der Spalte auf dem Desktop zu zentrieren, verwenden wir zwei Zeilen CSS-Code im Hauptelement des Zeilenmoduls.

Desktop:

Anzeige: flex; Align-Items: center;

Tablet & Telefon:

Bildschirmsperre;
Einstellungen für den Divi-Line-Modulstil

Fügen Sie das Woo Image-Modul zu Spalte 1 hinzu

Dynamischer Inhalt

Es ist Zeit, Module hinzuzufügen. Wir beginnen mit dem Woo Images-Modul in Spalte 1. Stellen Sie sicher, dass „Dieses Produkt“ ausgewählt ist.

  • Produkt: Dieses Produkt
Einstellungen des Woocommerce-Produktbildmoduls

Vertikaler Bildlauf-Animationseffekt

Mit dem Bildlaufeffekt für horizontale Bewegungen auf der Registerkarte "Erweitert" fügen wir dem Bild eine subtile Bewegung hinzu.

  • Vertikale Bewegung aktivieren: Ja
  • Startoffset:
    • Büro: -4
    • Tablet und Telefon: 0
  • Durchschnittlicher Offset: 0
  • Endversatz: 0
  • Bewegungseffekt auslösen: Mitte des Elements
Einstellung des Divi-Bildmoduls

Fügen Sie das Woo-Titelmodul zu Spalte 2 hinzu

Dynamischer Inhalt

In Spalte 2 ist der erste Mod, den wir brauchen, ein Woo-Titel-Mod. Stellen Sie sicher, dass im Bereich für dynamische Inhalte "Dieses Produkt" ausgewählt ist.

  • Produkt: Dieses Produkt
Produktnutzen-Raster

Einstellungen für den Titeltext

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

  • Titelschrift: Oswald
  • Titelschriftart: Großbuchstaben
  • Titeltextfarbe: # ffd623
  • Titeltextgröße: 80px
Designanpassung des Divi-Titelmoduls

Abstand

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

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]

  • Linker Rand: 5%
  • Rechter Rand: 5%
Einstellung des Divi-Titelmoduls

Fügen Sie das Woo-Beschreibungsmodul zu Spalte 2 hinzu

Dynamischer Inhalt

Fahren wir mit dem nächsten Modul fort, bei dem es sich um ein Woo-Beschreibungsmodul handelt. Wir verwenden hierfür folgenden dynamischen Inhalt:

  • Produkt: Dieses Produkt
  • Beschreibungstyp: Kurzbeschreibung
Einstellungen des Produktbeschreibungsmoduls

Texteinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Texteinstellungen entsprechend:

  • Textschrift: Karla
  • Textfarbe: #dbdbdb
  • Textgröße: 17 px (Desktop und Tablet), 15 px (Telefon)
  • Textzeilenhöhe: 1,9 em
Beschreibung des Farbanpassungsmoduls divi

Sizing

Ändern Sie dann die Breite auf verschiedenen Bildschirmgrößen.

  • Breite: 59% (Desktop), 82% (Tablet und Telefon)
Divi Zusammenfassung Modul Breiteneinstellung

Abstand

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

  • Oberer Rand: 50px
  • Unterer Rand: 100px
  • Linker Rand: 5%
  • Rechter Rand: 5%
Divi Produktbeschreibungsmodul

Fügen Sie das Blurb-Modul zur 2-Spalte hinzu

Dynamischer Inhalt

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

  • Titel: Leistungstitel 1
  • Körper: Leistungsbeschreibung 1
Texteinstellung des Divi-Zusammenfassungsmoduls

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, in dem Download-Ordner, den Sie zu Beginn dieses Tutorials herunterladen konnten.

Bildmodul Zusammenfassung Divi Konfiguration

Bild- / Symboleinstellungen

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

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

Titeltexteinstellungen

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

  • Titelschrift: Oswald
  • Titel Schriftart: Großbuchstaben
  • Titeltextgröße: 25px
Konfigurieren Sie die Schriftart des Divi-Zusammenfassungsmoduls

Body-Text-Einstellungen

Zusammen mit den Körpertexteinstellungen.

  • Körperschrift: Karla
  • Textgröße: 17 px (Desktop und Tablet), 15 px (Telefon)
  • Körperlinienhöhe: 1,9 em
Konfigurieren Sie die Textmodul-Zusammenfassung div i

Sizing

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

  • Bildbreite: 25%
  • Breite: 49%
Konfigurieren Sie die Größe des Divi-Zusammenfassungsmoduls

Abstand

Wir werden auch Leerzeichen um das Blurb-Modul hinzufügen, indem wir benutzerdefinierte Füllwerte auf verschiedenen Bildschirmgrößen verwenden.

  • Obere Polsterung: 8%
  • Untere Polsterung: 8%
  • Linke Polsterung: 8% (Desktop und Tablet), 2% (Telefon)
  • Rechte Polsterung: 8% (Desktop und Tablet) 2% (Telefon)
Konfigurieren Sie den Abstand des Divi Summary-Moduls

Hauptelement

Jetzt stellen wir sicher, dass das Zusammenfassungsmodul den Text in zwei Schritten nebeneinander anzeigt. Zunächst stellen wir sicher, dass die Modulbreite weniger als 50% beträgt (wie im vorherigen Schritt). Als nächstes verwenden wir die Eigenschaft in der Zeile. Wir werden diese CSS-Eigenschaft dem Hauptelement im erweiterten Abschnitt hinzufügen.

display: inline-block;
Fügen Sie das CSS-Code-Divi-Modul hinzu

Klonen Sie das Zusammenfassungsmodul dreimal

Sobald du den ersten Blurb-Mod abgeschlossen hast, kannst du ihn dreimal klonen. Sie werden automatisch feststellen, dass die Blurb-Module in einem Raster angezeigt werden.

Produktname divi Abschnitt

Bearbeiten Sie die Bilder des Klappentextmoduls

Bearbeiten Sie das Bild in jedem doppelten Klappentext-Pod. Sie finden sie im Download-Ordner, den Sie möglicherweise am Anfang dieses Artikels heruntergeladen haben.

Bild des Divi-Zusammenfassungsmoduls

Ändern Sie den dynamischen Inhalt des Blurb-Moduls

Ändern Sie auch den dynamischen Inhalt jedes doppelten Blurb-Moduls.

  • Titel: Titel des Dienstes (2,3 oder 4)
  • Körper: Beschreibung der Vorteile (2,3 oder 4)
Regeln für Divi-Zusammenfassungsmodule

Fügen Sie Blurb-Modulen einzeln Rahmen hinzu

Randeinstellungen für Klappmodul 1

Um die Gestaltung unseres Rasters abzuschließen, werden wir den Blurb-Modulen auf individueller Ebene Rahmen hinzufügen. Öffne den ersten Klappentext und benutze einen geraden Rand.

  • Breite des rechten Randes: 1px
  • Farbe des rechten Randes: # ffd623
Divi-Zusammenfassungsmodul für die Konfiguration abgerundeter Ränder

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

  • Breite des unteren Randes: 1px
  • Farbe des unteren Randes: # 000000
Konfigurieren Sie den unteren Teilbereich
Randeinstellungen für Klappmodul 2

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

  • Breite des unteren Randes: 1px
  • Farbe des unteren Randes: # 000000
Konfigurationsrandmodul Zusammenfassung divi
Randeinstellungen für Klappmodul 3

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

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]

  • Breite des rechten Randes: 1px
  • Farbe des rechten Randes: # ffd623
Produktnutzen-Raster

Woo hinzufügen Zum Warenkorb hinzufügen Modul in Spalte 2

Dynamischer Inhalt

Das letzte Modul, das wir in unserem Design benötigen, ist ein Woo Add to Cart-Modul. Stellen Sie sicher, dass im Bereich für dynamische Inhalte "Dieses Produkt" ausgewählt ist.

  • Produkt: Dieses Produkt
Zu den Einstellungen des Kartendivimoduls hinzufügen

Feldeinstellungen

Gehen Sie zur nächsten Registerkarte Design und ändern Sie die Feldeinstellungen.

  • Hintergrundfarbe der Felder: #ffffff
  • Feldtextfarbe: # 000000
Konfigurieren Sie das Stilfarbmodul zum Warenkorb hinzufügen
  • Abgerundete Felder: 0px (alle Ecken)
  • Breite des unteren Feldrandes: 1px
  • Farbe des unteren Randes der Felder: # 000000
Konfigurieren Sie den Abstand der Teilabschnitte

Tasteneinstellungen

Gestalten Sie dann die Schaltfläche entsprechend:

  • Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
  • Textgröße der Schaltfläche: 20 Pixel
  • Textfarbe der Schaltfläche: # 000000
  • Hintergrundfarbe der Schaltfläche: # ffd623
  • Schaltflächenrandbreite: 0px
  • Schaltflächenrandradius: 0px
Konfigurieren Sie das Design der Divi-Schaltflächen
  • Tastenschrift: Oswald
  • Schaltflächenstil: Großbuchstaben
Konfigurieren Sie die Divi-Schaltfläche
  • Obere Polsterung: 20px
  • Polsterung unten: 20px
  • Linke Auffüllung: 50px
  • Rechte Polsterung: 50px
Konfigurieren Sie die Größe des Divi-Moduls

Abstand

Vervollständigen Sie die Modulparameter, indem Sie benutzerdefinierte Randwerte hinzufügen.

  • Oberer Rand: 100px
  • Linker Rand: 5%
Konfigurieren Sie den Divi-Abstand

3. Speichern Sie die Änderungen des Themengenerators und zeigen Sie eine Vorschau des Ergebnisses an

Sobald Sie mit dem Entwerfen der Produktseitenvorlage fertig sind, können Sie alle Änderungen an Theme Builder speichern und die Ergebnisse auf Ihren Produkten anzeigen!

Divi Design speichern
Speichern Sie Divi-Änderungen

Übersicht

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Demo-Ergebnis

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit Ihrer nächsten Divi-Produktseitenvorlage kreativ werden können. Insbesondere haben wir Ihnen gezeigt, wie Sie ein dynamisches Produktnutzenraster einfügen, um Ihrer Produktseite zusätzliche Vorteile hinzuzufügen. Wir haben dieses Tutorial mit Divi in ​​Kombination mit dem Plugin "Erweiterte benutzerdefinierte Felder" erstellt. Sie können die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.

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
0 Aktien
Aktie
tweet
Registrieren