De manier waarop u uw productpagina ontwerpt, heeft een directe invloed op het gedrag van uw bezoekers. Een goed ontworpen en gepersonaliseerd ontwerp van de productpagina kan dit mogelijk maken bezoekers gemakkelijker om te beslissen of ze uw product willen kopen. Als u op zoek bent naar een manier om uw productpagina aantrekkelijker te maken, zult u deze tutorial waarschijnlijk leuk vinden.
We laten u zien hoe u een dynamisch productvoordelenraster in uw ontwerp kunt opnemen met behulp van Divi en de plug-in Geavanceerde aangepaste velden. We beginnen met het maken van een veldgroep voor uitkeringen. Vervolgens vullen we de aangepaste velden op onze productpagina in en voegen we de inhoud dynamisch in onze productpaginasjabloon.
Mogelijk resultaat
Laten we, voordat we in de tutorial duiken, het resultaat snel bekijken op verschillende schermformaten.
1. Installeer de plug-in ACF Plugin en Product Benefit Field Group
Installeer de Advanced Custom Fields plug-in
Om de verschillende productvoordelen in de backend van onze producten weer te geven, zullen wij de plugin gebruiken en is gratis Geavanceerde aangepaste velden. Toegang tot uw WordPress-backend> Plug-ins> Nieuwe toevoegen> Zoek ACF-plug-in> Installeren> Activeren .
Ga naar aangepaste velden en voeg een nieuwe groep velden toe
Nadat u de ACF-plug-in hebt geïnstalleerd en geactiveerd, heeft u toegang tot uw aangepaste velden en kunt u een nieuwe groep velden toevoegen.
Veldgroepinstellingen
Geef uw nieuwe groep velden een titel en laat deze alleen op productpagina's verschijnen.
- "Berichttype" is gelijk aan "Product"
Voeg een eerste veld toe
Ga door met het toevoegen van een nieuw veld voor de titel van uw eerste productvoordeel.
- Veldlabel: titel van voordeel 1
- Veldtype: tekst
Herhaal de stap voor de overige velden
Doe hetzelfde voor de andere voordelen van het product en hun beschrijvingen. Al deze velden vereisen het veldtype "Tekst" dat eraan is toegewezen.
- Titel van de dienst 1
- Beschrijving van de voordelen 1
- Titel van de dienst 2
- Beschrijving van de voordelen 2
- Titel van de dienst 3
- Beschrijving van de voordelen 3
- Titel van de dienst 4
- Beschrijving van de voordelen 4
2. Voeg voordelen toe aan producten
Open of voeg een nieuw product toe
Zodra uw veldgroep en velden zijn aangemaakt, kunt u de productvoordelen op individueel niveau aan uw producten toevoegen. Open een product naar keuze of maak een nieuw product.
Vul de velden Productvoordelen in
En vervul de voordelen van het product.
3. Maak een productpaginasjabloon in Divi Theme Builder
Ga naar Divi Theme Builder en voeg een nieuwe sjabloon toe
Het is tijd om met Divi te beginnen! Om een nieuwe sjabloon aan te maken, gaat u naar de Divi Theme Builder en klikt u op "Een nieuwe sjabloon toevoegen".
Gebruik een sjabloon op alle producten
We gebruiken dit sjabloon op alle producten, maar voel je vrij om producten te selecteren met een specifieke categorie of label.
Open de sjabloon-editor voor het modellichaam
Voer vervolgens de hoofdtekst van het model in door op "Een aangepaste hoofdtekst toevoegen" te klikken en "Een aangepaste hoofdtekst maken" te selecteren.
Bewerk sectie # 1
Achtergrond kleur
Eenmaal in de sjablooneditor ziet u een sectie. Open die sectie en verander de achtergrondkleur in zwart.
- Achtergrondkleur: # 000000
tussenruimte
Ga verder naar het ontwerptabblad van de sectie en voeg wat aangepaste boven- en ondervulling toe.
- Bovenvulling: 10px
- Bodemvulling: 10px
Voeg een nieuwe regel toe
Kolomstructuur
Laten we doorgaan door een nieuwe regel toe te voegen aan de sectie met de volgende structuur:
tussenruimte
Laten we, zonder mods toe te voegen, de rij-instellingen openen en wat afstandsaanpassingen doen.
- Gebruik gepersonaliseerde rugmarge: Ja
- Rugmarge breedte: 1
- Breedte: 90%
- Maximale breedte: 100%
tussenruimte
Verwijder alle interne afstanden boven en onder.
- Hoge interne marge: 0px
- Lage interne marge: 0px
Voeg de Woo Cart Notice-module toe aan de kolom
Dynamische inhoud
De enige module die we op deze regel en sectie nodig hebben, is de Woo Cart Notice-module. Zorg ervoor dat "Dit product" is geselecteerd in de dynamische sectie.
- Product: Dit product
Kleur achtergrond
Open vervolgens de module-instellingen en gebruik een transparante achtergrond.
- Achtergrondkleur: rgba (0,0,0,0)
Tekstinstellingen
Schakel over naar het tabblad "Design" en verander het lettertype van de tekst.
- Tekstlettertype: Karla
Knop instelling
Voltooi de plugin-instellingen door de stijlinstellingen te definiëren:
- Gebruik aangepaste stijlen voor knop: Ja
- Button Text Size: 20px
- Knop tekstkleur: # 000000
- Knopachtergrond: # ffd623
- Breedte van knoprand: 0px
- Afgeronde randknop: 0px
- Knoplettertype: Oswald
- Knop lettertype: Shift
- Hoge interne marge: 20px
- Lage interne marge: 20px
- Linker interne marge: 50px
- Interne rechtermarge: 50px
Voeg sectie # 2 toe
Achtergrond met kleurovergang
Voeg nog een reguliere sectie toe onder de vorige. Open vervolgens de instellingen en gebruik een verloopachtergrond als volgt:
- Kleur 1: # 000000
- Kleur 2: #ffffff
- Begin positie:
- Desktop: 30%
- Tabletten: 57%
- Telefoon: 54%
- Eindpositie:
- Desktop: 30%
- Tabletten: 57%
- Telefoon: 54%
tussenruimte
Laten we naar het tabblad Ontwerpen gaan en een hoge interne marge toevoegen.
- Bovenvulling: 150px
Voeg een nieuwe regel toe
Kolomstructuur
Ga verder door een nieuwe regel toe te voegen met dezelfde structuur als hieronder weergegeven:
sizing
Zonder nog mods toe te voegen, openen we de instellingen en wijzigen we de afstand als volgt:
- Gebruik aangepaste dakgoten: Ja
- Rugmarge: 1
- Breedte: 95%
- Maximale breedte: 2560 px
- Lijnuitlijning: midden
Spacing
We zullen ook de bovenste interne marge verwijderen.
- Bovenvulling: 0px
Hoofdelement
En om de inhoud kolom op DeskTop gebruiken we twee regels CSS-code in het hoofdelement van de moduleregel.
Desktop:
display: flex; align-items: center;
Tablet en telefoon:
display: block;
Voeg de Woo Image-module toe aan kolom 1
Dynamische inhoud
Het is tijd om modules toe te voegen, we beginnen met de Woo Images module in kolom 1. Zorg ervoor dat “Dit product” is geselecteerd.
- Product: Dit product
Verticaal scrollend animatie-effect
We voegen subtiele beweging toe aan het beeld met behulp van het horizontale scroleffect op het tabblad Geavanceerd.
- Activeer verticale beweging: Ja
- Offset starten:
- Kantoor: -4
- Tablet en telefoon: 0
- Gemiddelde offset: 0
- Eindoffset: 0
- Trigger motion effect: midden van element
Voeg de Woo-titelmodule toe aan kolom 2
Dynamische inhoud
In kolom 2 is de eerste module die we nodig hebben een Woo-titelmodule. Zorg ervoor dat “Dit product” is geselecteerd in het vak inhoud dynamisch.
- Product: Dit product
Instellingen voor titeltekst
Ga vervolgens naar het ontwerptabblad en geef de titeltekst als volgt vorm:
- Titellettertype: Oswald
- Titellettertype titel: hoofdletters
- Titeltekstkleur: # ffd623
- Titeltekstgrootte: 80px
tussenruimte
Voltooi de Woo-titelmodule door linker- en rechtermarges toe te voegen.
- Linkermarge: 5%
- Rechtermarge: 5%
Voeg de Woo-beschrijvingsmodule toe aan kolom 2
Dynamische inhoud
Laten we verder gaan met de volgende module, een Woo-beschrijvingsmodule. Hiervoor gebruiken we de volgende dynamische content:
- Product: Dit product
- Beschrijvingstype: korte beschrijving
Tekst instellingen
Schakel over naar het tabblad moduleontwerp en wijzig de tekstinstellingen dienovereenkomstig:
- Tekstlettertype: Karla
- Tekstkleur: #dbdbdb
- Tekstgrootte: 17 px (desktop en tablet), 15 px (telefoon)
- Tekstregelhoogte: 1,9 em
sizing
Verander vervolgens de breedte op verschillende schermformaten.
- Breedte: 59% (desktop), 82% (tablet en telefoon)
tussenruimte
Voltooi de Woo-beschrijvingsmodule door aangepaste margewaarden toe te voegen in de afstandsinstellingen.
- Bovenmarge: 50px
- Ondermarge: 100px
- Linkermarge: 5%
- Rechtermarge: 5%
Voeg de Blurb-module toe aan de 2-kolom
Dynamische inhoud
Om de productvoordelen weer te geven die we in het eerste deel van deze tutorial hebben toegevoegd, zullen we de Blurb-modules gebruiken. Voeg een eerste Blurb-module toe en gebruik de dynamische inhoud van het eerste geproduceerde voordeel voor de titel en de body.
- Titel: voordeel Titel 1
- Lichaam: Beschrijving van voordeel 1
Afbeelding uploaden
Upload een afbeelding of gebruik vervolgens een pictogram naar keuze. Je kunt degenen die we in deze tutorial hebben gebruikt vinden in de downloadmap die je aan het begin van deze tutorial kon downloaden.
Beeld- / pictograminstellingen
Ga verder naar het ontwerptabblad van de module en wijzig de afbeelding / pictograminstellingen als volgt:
- Plaatsing afbeelding / pictogram: boven
- Uitlijning afbeelding / pictogram: links
Titel tekstinstellingen
We zijn de instellingen voor de titeltekst aan het wijzigen.
- Titellettertype: Oswald
- Titel lettertypestijl: hoofdletters
- Titeltekstgrootte: 25 px
Instellingen voor hoofdtekst
Samen met de instellingen voor de hoofdtekst.
- Lichaamslettertype: Karla
- Tekstgrootte: 17 px (desktop en tablet), 15 px (telefoon)
- Lichaamslijnhoogte: 1,9 em
sizing
Ga dan naar de maatinstellingen en verander de breedtes. Het is belangrijk om een hoofdbreedte van minder dan 50% te gebruiken, zodat we in de volgende stappen twee Blurb-modules naast elkaar kunnen tonen.
- Afbeeldingsbreedte: 25%
- Breedte: 49%
tussenruimte
We zullen ook spaties toevoegen rond de Blurb-module met behulp van aangepaste opvulwaarden op verschillende schermformaten.
- Bovenste padding: 8%
- Onderste vulling: 8%
- Linker opvulling: 8% (desktop en tablet), 2% (telefoon)
- Rechter opvulling: 8% (desktop en tablet) 2% (telefoon)
Hoofdelement
Nu gaan we ervoor zorgen dat de Summary-module de tekst naast elkaar weergeeft, in twee stappen. Ten eerste zorgen we ervoor dat de modulebreedte kleiner is dan 50% (zoals we deden in de vorige stap). Vervolgens gebruiken we de eigenschap in de rij. We zullen deze CSS-eigenschap toevoegen aan het hoofdelement in de geavanceerde sectie.
weergave: inline-block;
Kloon de overzichtsmodule 3 keer
Als je de eerste Blurb-mod hebt voltooid, kun je deze drie keer klonen. U zult automatisch opmerken dat de Blurb-modules in een raster verschijnen.
Bewerk de afbeeldingen van de Blurb-module
Bewerk de afbeelding in elke dubbele Blurb-pod. U vindt ze in de downloadmap die u mogelijk aan het begin van dit artikel heeft gedownload.
Pas de dynamische inhoud van de Blurb-module aan
Wijzig ook de dynamische inhoud van elke dubbele Blurb-module.
- Titel: Titel van de dienst (2,3 of 4)
- Body: beschrijving van de voordelen (2,3 of 4)
Voeg randen toe aan Blurb-modules afzonderlijk
Blurb module 1 randinstellingen
Om het ontwerp van ons raster te voltooien, gaan we op individueel niveau randen toevoegen aan de Blurb-modules. Open de eerste Blurb-mod en gebruik een rechte rand.
- Breedte rechterrand: 1px
- Kleur rechterrand: # ffd623
Voeg ook een onderrand toe aan de eerste Blurb-module.
- Breedte onderrand: 1 px
- Kleur onderrand: # 000000
Blurb module 2 randinstellingen
Open vervolgens de tweede Blurb-module en gebruik een onderrand.
- Breedte onderrand: 1 px
- Kleur onderrand: # 000000
Blurb module 3 randinstellingen
Voltooi het rasterontwerp door een rechte rand toe te voegen aan de derde Blurb-module.
- Breedte rechterrand: 1px
- Kleur rechterrand: # ffd623
Woo toevoegen aan winkelmandje Module in kolom 2
Dynamische inhoud
De laatste module die we nodig hebben in ons ontwerp is een Woo Add to Cart-module. Zorg ervoor dat "Dit product" is geselecteerd in het dynamische inhoudsgebied.
- Product: Dit product
Lokale instellingen
Ga naar het volgende ontwerptabblad en wijzig de lokale instellingen.
- Achtergrondkleur velden: #ffffff
- Tekstkleur veld: # 000000
- Afgeronde velden: 0px (alle hoeken)
- Breedte van de onderste rand van velden: 1 px
- Kleur van de onderrand van velden: # 000000
Knop instellingen
Stijl vervolgens de knop dienovereenkomstig:
- Gebruik aangepaste stijlen voor de knop: Ja
- Knoptekstgrootte: 20 pixels
- Tekstkleur knop: # 000000
- Achtergrondkleur knop: # ffd623
- Knoprandbreedte: 0 px
- Knoprandradius: 0 px
- Knoplettertype: Oswald
- Knopletterstijl: hoofdletters
- Bovenste vulling: 20 px
- Vulling onderkant: 20px
- Linker opvulling: 50px
- Vulling rechts: 50 px
tussenruimte
En voltooi de moduleparameters door aangepaste margewaarden toe te voegen.
- Bovenmarge: 100px
- Linkermarge: 5%
3. Sla de wijzigingen van de thema-generator op en bekijk het resultaat
Als u klaar bent met het ontwerpen van de productpaginasjabloon, kunt u al uw Theme Builder-wijzigingen opslaan en de resultaten op uw producten weergeven!
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.
Final gedachten
In dit artikel hebben we u laten zien hoe u creatief kunt worden met uw volgende Divi-productpaginasjabloon. We hebben u specifiek laten zien hoe u een dynamisch raster voor productvoordelen kunt opnemen om extra voordelen aan uw productpagina toe te voegen. We hebben deze tutorial gemaakt met Divi in combinatie met de plug-in Advanced Custom Fields. U kunt het JSON-bestand ook gratis downloaden! Als u vragen of suggesties heeft, kunt u een reactie achterlaten in de opmerkingen hieronder.
