Door naar hoofdmenu

Creatie van een dynamisch voordelenraster voor WooCommerce-producten

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 701.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

De manier waarop u uw productpagina ontwerpt, heeft een onmiddellijke impact op het gedrag van uw bezoekers. Een goed gemaakt en gepersonaliseerd productpagina-ontwerp kan het voor bezoekers gemakkelijker maken om te beslissen of ze uw product willen kopen. Als u op zoek bent naar een manier om uw productpagina boeiender te maken, zult u deze tutorial waarschijnlijk leuk vinden. 

We laten u zien hoe u een dynamisch raster voor productvoordelen in uw ontwerp kunt opnemen met behulp van Divi en de plug-in Advanced Custom Fields. We beginnen met het maken van een groep velden voor uitkeringen. We vullen dan de aangepaste velden op onze productpagina in en nemen de dynamische inhoud op in onze productpaginasjabloon. 

Mogelijk resultaat

Laten we, voordat we in de tutorial duiken, het resultaat snel bekijken op verschillende schermformaten.

Mogelijk resultaat divi

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 we de gratis plug-in Advanced Custom Fields gebruiken. Toegang tot uw WordPress-backend> Plug-ins> Nieuwe toevoegen> Zoek ACF-plug-in> Installeren> Activeren .

Installeer een geavanceerde plug-in voor aangepaste velden

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.

Maak ACF-velden

Veldgroepinstellingen

Geef uw nieuwe groep velden een titel en laat deze alleen op productpagina's verschijnen.

  • "Berichttype" is gelijk aan "Product"
Voeg regels toe

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
Voeg een ac-veld toe
Divi-veldaanpassing

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
Configureer ACF-velden

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.

Divi-productcreatie

Vul de velden Productvoordelen in

En vervul de voordelen van het product.

Vul de velden voor divi-voordelen in

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

Divi-themabouwer

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.

Voeg alle woocommerce-producten toe

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.

Divi-lichaam opbouwen

Bewerk sectie # 1

Achtergrond kleur

Eenmaal in de sjablooneditor ziet u een sectie. Open die sectie en verander de achtergrondkleur in zwart.

  • Achtergrondkleur: # 000000
Divi-sectie achtergrondconfiguratie

tussenruimte

Ga verder naar het ontwerptabblad van de sectie en voeg wat aangepaste boven- en ondervulling toe.

  • Bovenvulling: 10px
  • Bodemvulling: 10px
Divi-sectie-afstandsconfiguratie

Voeg een nieuwe regel toe

Kolomstructuur

Laten we doorgaan door een nieuwe regel toe te voegen aan de sectie met de volgende structuur:

Configuratie van de lay-out van de lijnmodule

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%
Instellingen voor regelmodule-afstand

tussenruimte

Verwijder alle interne afstanden boven en onder.

  • Hoge interne marge: 0px
  • Lage interne marge: 0px
Divi line module afstand instellingen

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.

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

  • Product: Dit product
Instellingen woo winkelwagen aankondigingsmodule divi

Kleur achtergrond

Open vervolgens de module-instellingen en gebruik een transparante achtergrond.

  • Achtergrondkleur: rgba (0,0,0,0)
Woo cart module divi-instellingen

Tekstinstellingen

Schakel over naar het tabblad "Design" en verander het lettertype van de tekst.

  • Tekstlettertype: Karla
Lettertype-instellingen van de Divi-module

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
Kleurinstellingen van de mededelingsmodule van de winkelwagen
  • Knoplettertype: Oswald
  • Knop lettertype: Shift
Aanpassing van het kleurontwerp van de Woo Cart-berichtmodule
  • Hoge interne marge: 20px
  • Lage interne marge: 20px
  • Linker interne marge: 50px
  • Interne rechtermarge: 50px
Configuratie ontwerpmodule woo winkelwagen kennisgeving

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%
    • Tablet: 57%
    • Telefoon: 54%
  • Eindpositie:
    • Desktop: 30%
    • Tablet: 57%
    • Telefoon: 54%
Divi line module achterafstelling

tussenruimte

Laten we naar het tabblad Ontwerpen gaan en een hoge interne marge toevoegen.

  • Bovenvulling: 150px
Divi line module afstand configuratie

Voeg een nieuwe regel toe

Kolomstructuur

Ga verder door een nieuwe regel toe te voegen met dezelfde structuur als hieronder weergegeven:

Divi-lijnstijlconfiguratie

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
Dakgoot configuratie divi module

Spacing

We zullen ook de bovenste interne marge verwijderen.

  • Bovenvulling: 0px
Divi module afstand configuratie

Hoofdelement

En om de inhoud van de kolom op Desktop te centreren, gebruiken we twee regels CSS-code in het hoofdelement van de rijmodule.

Desktop:

display: flex; align-items: center;

Tablet en telefoon:

display: block;
Divi line module stijl instellingen

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
Woocommerce productafbeelding module-instellingen

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
Divi beeldmodule aanpassing

Voeg de Woo-titelmodule toe aan kolom 2

Dynamische inhoud

In kolom 2 is de eerste mod die we nodig hebben een Woo-titelmod. Zorg ervoor dat "Dit product" is geselecteerd in het dynamische inhoudsgebied.

  • Product: Dit product
product voordelen rooster

Instellingen voor titeltekst

Ga vervolgens naar het ontwerptabblad en geef de titeltekst als volgt vorm:

  • Titellettertype: Oswald
  • Titellettertype titel: hoofdletters
  • Titeltekstkleur: # ffd623
  • Titeltekstgrootte: 80px
Aanpassing van het ontwerp van de Divi-titelmodule

tussenruimte

Voltooi de Woo-titelmodule door linker- en rechtermarges toe te voegen.

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

  • Linkermarge: 5%
  • Rechtermarge: 5%
Divi-titelmodule-instelling

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
Productbeschrijving module-instellingen

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
Beschrijving kleurinstelmodule divi

sizing

Verander vervolgens de breedte op verschillende schermformaten.

  • Breedte: 59% (desktop), 82% (tablet en telefoon)
Divi overzicht module breedte aanpassing

tussenruimte

Voltooi de Woo-beschrijvingsmodule door aangepaste margewaarden toe te voegen in de afstandsinstellingen.

  • Bovenmarge: 50px
  • Ondermarge: 100px
  • Linkermarge: 5%
  • Rechtermarge: 5%
Divi productbeschrijving module

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
Divi-overzichtsmodule tekstinstelling

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.

Afbeelding module samenvatting divi configuratie

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
Divi inregelmodule

Titel tekstinstellingen

We zijn de instellingen voor de titeltekst aan het wijzigen.

  • Titellettertype: Oswald
  • Titel lettertypestijl: hoofdletters
  • Titeltekstgrootte: 25 px
Configureer het lettertype van de divi-overzichtsmodule

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
Configureer tekst module samenvatting div i

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%
Configureer de grootte van de divi-overzichtsmodule

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)
Configureer de afstand tussen de modules van het divi-overzicht

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;
Voeg css code divi module toe

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.

Productnaam divi sectie

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.

Divi samenvatting module afbeelding

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)
Divi overzichtsmodule regels

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
Afgeronde rand configuratie divi samenvattingsmodule

Voeg ook een onderrand toe aan de eerste Blurb-module.

  • Breedte onderrand: 1 px
  • Kleur onderrand: # 000000
Configureer de ondermarge van de divi
Blurb module 2 randinstellingen

Open vervolgens de tweede Blurb-module en gebruik een onderrand.

  • Breedte onderrand: 1 px
  • Kleur onderrand: # 000000
Configuratie grens module samenvatting divi
Blurb module 3 randinstellingen

Voltooi het rasterontwerp door een rechte rand toe te voegen aan de derde Blurb-module.

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

  • Breedte rechterrand: 1px
  • Kleur rechterrand: # ffd623
product voordelen rooster

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
Toevoegen aan kaart divi module-instellingen

Lokale instellingen

Ga naar het volgende ontwerptabblad en wijzig de lokale instellingen.

  • Achtergrondkleur velden: #ffffff
  • Tekstkleur veld: # 000000
Configureer kleurstijl toevoegen aan winkelwagen divi-module
  • Afgeronde velden: 0px (alle hoeken)
  • Breedte van de onderste rand van velden: 1 px
  • Kleur van de onderrand van velden: # 000000
Configureer de afstand tussen de secties

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
Configureer het ontwerp van de divi-knop
  • Knoplettertype: Oswald
  • Knopletterstijl: hoofdletters
Configureer de divi-knop
  • Bovenste vulling: 20 px
  • Vulling onderkant: 20px
  • Linker opvulling: 50px
  • Vulling rechts: 50 px
Configureer de dimensionering van de divi-module

tussenruimte

En voltooi de moduleparameters door aangepaste margewaarden toe te voegen.

  • Bovenmarge: 100px
  • Linkermarge: 5%
Configureer de divi-afstand

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!

Sla het divi-ontwerp op
Sla divi-wijzigingen op

overzicht

Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.

Demo resultaat

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.

Dit artikel bevat opmerkingen 0

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
0 aandelen
aandeel
gekwetter
Enregistrer