De Divi Shop Module

Divi is ontworpen om compatibel te zijn met WooCommerce. Om WooCommerce te integreren, moet u de nieuwste versie van WooCommerce installeren.

WooCommerce is de plug-in die we aanbevelen, omdat deze de leukste functieset, interface heeft en de beste coderingsmethoden volgt. Nadat u de plug-in hebt ingeschakeld, ziet u een nieuwe sectie “WooCommerce” en “Producten” is toegevoegd aan uw WordPress-dashboard. U kunt deze gebieden gebruiken om uw e-commerce-instellingen aan te passen en nieuwe producten te publiceren. U kunt hier de volledige documentatie over WooCommerce vinden .

Hoewel de bouwer verschillende WooCommerce-modules bevat, kunt u WooCommerce ook zelf gebruiken zonder dat de bouwer prima werkt. U kunt standaardpagina’s maken voor Afrekenen, Winkelwagen, enz., Zoals beschreven in hun documentatie. U kunt ook rechtstreeks naar uw woocommerce-categorieën linken of de WooCommerce Shortcodes gebruiken in een Divi-tekstmodule. Dit geeft u de vrijheid om vrijwel alles te doen.

Een winkelmodule aan uw pagina toevoegen

Voordat u een winkelmodule aan uw pagina kunt toevoegen, moet u eerst in Divi Builder springen. Nadat het Divi-thema op uw website is geïnstalleerd, ziet u elke keer dat u een nieuwe pagina bouwt een knop Divi Builder gebruiken boven de berichteditor. Als u op deze knop klikt, wordt Divi Builder ingeschakeld en hebt u toegang tot alle modules van Divi Builder. Klik vervolgens op de knop Visual Builder gebruiken om de builder in Visual Mode te starten. U kunt ook klikken op de knop Visual Builder gebruiken tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

winkelmodule

Nadat u Visual Builder hebt ingevoerd, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen Rijen worden toegevoegd. Als u een nieuwe pagina start, vergeet dan niet eerst een rij aan uw pagina toe te voegen. We hebben een aantal geweldige tutorials over het gebruik van Divi’s rij- en sectie- elementen.

winkelmodule

Zoek de winkelmodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De modulelijst is doorzoekbaar, wat betekent dat u ook het woord “shop” kunt typen en vervolgens op enter kunt klikken om de winkelmodule automatisch te zoeken en toe te voegen! Nadat de module is toegevoegd, wordt u begroet met de lijst met opties van de module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerp en Geavanceerd .

Gebruiksvoorbeeld: gebruik de meest recente producten op een startpagina met behulp van de winkelmodule

Voor dit voorbeeld ga ik de winkelmodule gebruiken om de meest recente producten op een startpagina weer te geven.

Hier is de pagina met de vier aanbevolen producten.

winkelmodule

Laten we beginnen.

Gebruik de visuele builder om een ​​normale sectie met een rij met volledige breedte (1 kolom) toe te voegen. Wijzig de rijinstelling om deze over de volledige breedte te maken met een aangepaste gootbreedte van 2.

winkelmodule

Voeg vervolgens een audiomodule toe aan de rij.

winkelmodule

Werk de module-instellingen als volgt bij:

Inhoud opties

Type: Recente producten
Aantal producten : 4

Ontwerpopties

Icoon Hover Kleur: # ea1d63
Titel lettertype: Open Sans
Titel lettergrootte: 24px
Prijs Lettertype: Open Sans
Prijs Lettergrootte: 20px

Geavanceerde opties (aangepaste CSS)

Titel:

text-align: center;
achtergrond: #fff;
margin-top: -10px! belangrijk;

Prijs:

text-align: center;
achtergrond: #fff;
vulling bodem: 15 px;

Dat is het! Hier is het eindresultaat.

winkelmodule

Opties voor winkelinhoud

Op het tabblad inhoud vindt u alle inhoudselementen van de module, zoals tekst, afbeeldingen en pictogrammen. Alles wat bepaalt wat er in uw module verschijnt, vindt u altijd op dit tabblad.

winkelmodule

Type

Kies welk type producten u wilt weergeven in uw productfeed. U kunt kiezen uit recente producten die al uw producten in chronologische volgorde weergeven, aanbevolen producten, verkoopproducten, best verkopende producten of best beoordeelde producten.

Product aantal

Definieer het aantal producten dat u wilt weergeven. U moet producten hebben die voor alles in deze module kunnen worden weergegeven. Zie hoe toevoegen en beheren produceert hier .

Categorieën opnemen

Kies welke categorieën u wilt opnemen.

Kolommen nummer

Kies hoeveel kolommen u in uw winkelmodule wilt weergeven. Voor een rij van 1 kolom moeten 4 kolommen worden gebruikt. Er moeten 3 kolommen worden gebruikt voor een kolom met 3/4 rijen. Kolom 2 moet worden gebruikt voor een kolom met 1/2 rij. Voor een kolom met 1/4 rij moet 1 kolom worden gebruikt.

Bestel bij

Kies hoe u uw producten wilt bestellen. Kies om te bestellen op standaardsortering, populariteit, waardering, datum, geprijsd van laag naar hoog, geprijsd van hoog naar laag, oudst naar nieuwste, nieuwste naar oudst.

Beheerderslabel

Dit zal het label van de module in de bouwer veranderen voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok in de Divi Builder-interface.

Winkelontwerpopties

Op het ontwerptabblad vindt u alle stijlopties van de module, zoals lettertypen, kleuren, grootte en afstand. Dit is het tabblad dat u zult gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles te wijzigen.

winkelmodule

Pictogram zweeft kleur

Wanneer u over een item in de winkelmodule zweeft, verschijnt een overlaypictogram. U kunt de kleur die wordt gebruikt voor dit pictogram aanpassen met de kleurenkiezer in deze instelling.

Beweeg Overlay-kleur

Wanneer u over een item in de winkelmodule zweeft, vervaagt een overlay-kleur boven aan de afbeelding en onder de titeltekst en het pictogram van de winkel. Standaard wordt een semi-transparante witte kleur gebruikt. Als u een andere kleur wilt gebruiken, kunt u de kleur aanpassen met de kleurenkiezer in deze instelling

Hover Icon Picker

Hier kunt u een aangepast pictogram kiezen dat moet worden weergegeven wanneer een bezoeker boven winkelitems binnen de module zweeft.

Kleur verkoopbadge

Wanneer een artikel in de uitverkoop is, verschijnt er een verkoopbadge over de productafbeelding. Met deze instelling kunt u de kleur aanpassen die wordt gebruikt voor de achtergrond van de badge.

Titel lettertype

U kunt het lettertype van uw titeltekst wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Titel lettergrootte

Hier kunt u de grootte van uw titeltekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Titel tekstkleur

Standaard worden alle tekstkleuren in Divi wit of donkergrijs weergegeven. Als u de kleur van uw titeltekst wilt wijzigen, kiest u met deze optie de gewenste kleur in de kleurenkiezer.

Titel Letter Spacing

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw titeltekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Hoogte van titelregel

Lijnhoogte heeft invloed op de ruimte tussen elke regel van uw titeltekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor bereik om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Prijs lettertype

U kunt het lettertype van uw prijstekst wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Prijs lettergrootte

Hier kunt u de grootte van uw prijstekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Prijs Tekstkleur

Standaard worden alle tekstkleuren in Divi wit of donkergrijs weergegeven. Als u de kleur van uw prijstekst wilt wijzigen, kiest u met deze optie de gewenste kleur in de kleurenkiezer.

Prijsletterafstand

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw prijstekst wilt vergroten, gebruikt u de schuifregelaar voor bereik om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Hoogte prijsregel

Lijnhoogte beïnvloedt de ruimte tussen elke regel van uw prijstekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor bereik om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Koop geavanceerde opties

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID’s toepassen op de module, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw kindthema.

winkelmodule

CSS ID

Voer een optionele CSS-ID in die voor deze module moet worden gebruikt. Een ID kan worden gebruikt om aangepaste CSS-stijlen te maken of om koppelingen naar bepaalde delen van uw pagina te maken.

CSS-klasse

Voer optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi Child-thema of in de aangepaste CSS die u toevoegt aan uw pagina of uw website met behulp van de Divi Theme Options of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS rechtstreeks aan elk element kunt toevoegen. CSS-invoer in deze instellingen is al ingepakt in stijltags, dus u hoeft alleen CSS-regels in te voeren gescheiden door puntkomma’s.

Zichtbaarheid

Met deze optie kunt u bepalen op welke apparaten uw module wordt weergegeven. U kunt ervoor kiezen om uw module afzonderlijk uit te schakelen op tablets, smartphones of desktopcomputers. Dit is handig als u verschillende modules op verschillende apparaten wilt gebruiken of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.