Die Art und Weise, wie Sie Ihre Produktseite gestalten, wirkt sich unmittelbar auf das Verhalten Ihrer aus Besucher. Ein gut gestaltetes und personalisiertes Design der Produktseite kann dies ermöglichen Besucher um leichter entscheiden zu können, 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 Advanced Custom Fields-Plugin ein dynamisches Produktvorteilsraster in Ihr Design integrieren. Wir beginnen mit der Erstellung einer Feldgruppe für Leistungen. Wir füllen dann die benutzerdefinierten Felder auf unserer Produktseite aus und fügen die ein Inhalt dynamisch in unserer Produktseitenvorlage.
Mögliches Ergebnis
Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.
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 Plugin kostenlos Erweiterte benutzerdefinierte Felder. Greifen Sie auf Ihre zu WordPress-Backend> Plugins> Neu hinzufügen> ACF-Plugin suchen> Installieren> Aktivieren .
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.
Feldgruppeneinstellungen
Geben Sie Ihrer neuen Gruppe von Feldern einen Titel und lassen Sie ihn nur auf Produktseiten erscheinen.
- "Nachrichtentyp" entspricht "Produkt"
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
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
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.
Füllen Sie die Felder Produktvorteile aus
Und erfüllen Sie die Vorteile des Produkts.
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".
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.
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.
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
Abstand
Wechseln Sie zur Registerkarte "Design" des Abschnitts und fügen Sie benutzerdefinierte obere und untere Polster hinzu.
- Top Polsterung: 10px
- Bodenpolsterung: 10px
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:
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%
Abstand
Entfernen Sie alle oberen und unteren Innenabstände.
- Hohe interne Marge: 0px
- Niedriger interner Spielraum: 0px
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.
- Produkt: Dieses Produkt
Farbiger Hintergrund
Öffnen Sie dann die Moduleinstellungen und verwenden Sie einen transparenten Hintergrund.
- Hintergrundfarbe: rgba (0,0,0,0)
Texteinstellungen
Wechseln Sie zur Registerkarte "Design" und ändern Sie die Textschriftart.
- Textschrift: Karla
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
- Tastenschrift: Oswald
- Schaltflächenstil: Umschalttaste
- Hohe interne Marge: 20px
- Niedriger interner Spielraum: 20px
- Linker interner Rand: 50px
- Interner rechter Rand: 50px
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%
Abstand
Gehen wir zur Registerkarte Design und fügen einen hohen internen Rand hinzu.
- Top Polsterung: 150px
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fahren Sie fort, indem Sie eine neue Zeile mit derselben Struktur wie unten gezeigt hinzufügen:
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
Abstand
Wir werden auch den oberen internen Rand entfernen.
- Top Polsterung: 0px
Hauptelement
Und um das zu zentrieren Inhalt In der Spalte „DeskTop“ verwenden wir zwei Zeilen CSS-Code im Hauptelement der Modulzeile.
Desktop:
Anzeige: flex; Align-Items: center;
Tablet & Telefon:
Bildschirmsperre;
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
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
Fügen Sie das Woo-Titelmodul zu Spalte 2 hinzu
Dynamischer Inhalt
In Spalte 2 benötigen wir als erstes Modul ein Woo-Titelmodul. Stellen Sie sicher, dass im Feld „Dieses Produkt“ ausgewählt ist Inhalt dynamisch.
- Produkt: Dieses Produkt
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
Abstand
Vervollständigen Sie das Woo-Titelmodul, indem Sie den linken und rechten Rand hinzufügen.
- Linker Rand: 5%
- Rechter Rand: 5%
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
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
Sizing
Ändern Sie dann die Breite auf verschiedenen Bildschirmgrößen.
- Breite: 59% (Desktop), 82% (Tablet und Telefon)
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%
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
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.
Bild- / Symboleinstellungen
Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Bild- / Symboleinstellungen wie folgt:
- Bild- / Symbolplatzierung: Oben
- Bild- / Symbolausrichtung: Links
Titeltexteinstellungen
Als nächstes ändern wir die Einstellungen für den Titeltext.
- Titelschrift: Oswald
- Titel Schriftart: Großbuchstaben
- Titeltextgröße: 25px
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
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%
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)
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;
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.
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.
Ä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)
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
Fügen Sie dem ersten Klappentext-Modul auch einen unteren Rand hinzu.
- Breite des unteren Randes: 1px
- Farbe des unteren Randes: # 000000
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
Randeinstellungen für Klappmodul 3
Vervollständigen Sie das Rasterdesign, indem Sie dem dritten Klappentext-Modul einen geraden Rand hinzufügen.
- Breite des rechten Randes: 1px
- Farbe des rechten Randes: # ffd623
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
Feldeinstellungen
Gehen Sie zur nächsten Registerkarte Design und ändern Sie die Feldeinstellungen.
- Hintergrundfarbe der Felder: #ffffff
- Feldtextfarbe: # 000000
- Abgerundete Felder: 0px (alle Ecken)
- Breite des unteren Feldrandes: 1px
- Farbe des unteren Randes der Felder: # 000000
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
- Tastenschrift: Oswald
- Schaltflächenstil: Großbuchstaben
- Obere Polsterung: 20px
- Polsterung unten: 20px
- Linke Auffüllung: 50px
- Rechte Polsterung: 50px
Abstand
Vervollständigen Sie die Modulparameter, indem Sie benutzerdefinierte Randwerte hinzufügen.
- Oberer Rand: 100px
- Linker Rand: 5%
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!
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
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.
