Divi is ontworpen om compatibel te zijn met: WooCommerce. Integreren WooCommerce, moet u de nieuwste versie van WooCommerce.
WooCommerce is de plug-in e-commerce die we aanbevelen, omdat het de beste set functies en interface heeft en de beste coderingspraktijken volgt. Na het activeren van de plug-in, ziet u twee nieuwe secties "WooCommerce" en "Producten" toegevoegd aan uw WordPress-dashboard. U kunt deze gebieden gebruiken om uw e-commerce-instellingen aan te passen en nieuwe producten te publiceren. Je vindt de documentatie voltooien op WooCommerce hier .
Houd er rekening mee dat hoewel de builder verschillende WooCommerce-modules bevat, u WooCommerce ook alleen kunt gebruiken zonder de builder. U kunt standaardpagina's maken voor Afrekenen, Winkelwagen, enz., Zoals weergegeven in hun documentatie. U kunt ook rechtstreeks naar uw woocommerce-categorieën linken of de Kortingscodes WooCommerce in een Divi-tekstmodule. Het geeft je de vrijheid om zo ongeveer alles te doen.
Hoe een winkelmodule aan uw pagina toe te voegen
Voordat u een winkelmodule aan uw pagina kunt toevoegen, moet u eerst in Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw website, ziet u een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Gebruik Visual Builder wanneer u door uw website op de voorgrond bladert en u bent verbonden met uw WordPress-dashboard.
Nadat u Visual Builder heeft geopend, 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 begint, vergeet dan niet om eerst een rij aan uw pagina toe te voegen. We hebben geweldige tutorials over het gebruik van Divi's lijn- en sectie-elementen.
Zoek de winkelmodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "winkel" kunt typen en vervolgens op enter kunt klikken om automatisch te zoeken en de winkelmodule toe te voegen! Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .
Gebruiksvoorbeeld: presentatie van de meest recente producten op een homepage met behulp van de winkelmodule
Voor dit voorbeeld gebruik ik de winkelmodule om de meest recente producten op een homepage weer te geven.
Hier is de pagina met de vier gepresenteerde producten.
Laten we beginnen.
Gebruik de visuele builder om een normale sectie toe te voegen met een rij over de volledige breedte (1 kolom). Wijzig de rijparameter om deze op volledige breedte te maken met een aangepaste rugmarge van 2.
Voeg vervolgens een winkelmodule toe aan de regel.
Werk de module-instellingen als volgt bij:
Inhoud opties
Type: Recente producten
Aantal producten: 4
Ontwerpopties
Pictogram Zwevende kleur: # ea1d63
Titel Politie: Open zonder
Titel Lettergrootte: 24px
Police Award: Open Without
Prijs lettertypegrootte: 20px
Geavanceerde opties (aangepaste CSS)
Titre:
text-align: center;
achtergrond: #fff;
margin-top: -10px! significant;
Prix:
text-align: center;
achtergrond: #fff;
bekleding naar beneden: 15px;
Dat is alles! Hier is het uiteindelijke resultaat.
Winkel content-opties
Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module, vindt u altijd op dit tabblad.
Type
Kies het type producten dat u in uw productfeed wilt weergeven. U kunt kiezen uit recente producten, waarin al uw producten in chronologische volgorde worden weergegeven, uitgelichte producten, uitverkoopproducten, best verkopende producten of best beoordeelde producten.
Aantal producten
Definieer het aantal producten dat u wilt weergeven. U moet producten laten maken om alles in deze module te laten verschijnen.
Categorieën opnemen
Kies de categorieën die u wilt opnemen.
Aantal kolommen
Kies het aantal kolommen dat u in uw winkelmodule wilt weergeven. 4 kolommen moeten worden gebruikt voor een rij van 1 kolom. Er moeten 3 kolommen worden gebruikt voor een kolom die 3/4 van de rijruimte inneemt. Kolom 2 moet worden gebruikt voor een kolom die de helft van de lichtruimte in beslag neemt. Eén kolom moet worden gebruikt voor een kolom 1/2 rijruimte.
Herschikken door
Kies hoe u uw producten wilt bestellen. Kies om standaard te sorteren Sorteren, Populariteit, Beoordeling, Datum, Prijs laag naar hoog, Prijs hoog naar laag, oudste naar nieuwste, nieuwste naar oudste.
Admin-label
Hierdoor wordt het modulelabel in de constructor gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.
Ontwerpopties voor de werkplaats
Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Dit is het tabblad dat u gaat gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om alles te wijzigen.
Overlay pictogram
Wanneer u de muisaanwijzer over een item in de winkelmodule beweegt, verschijnt een overlay-pictogram. U kunt de kleur die voor dit pictogram wordt gebruikt, aanpassen met de kleurkiezer in deze instelling.
Kleur van de overlay
Wanneer u met de muis over een item in de winkelmodule beweegt, verschijnt een overlay-kleur boven aan de afbeelding en onder de titel en het pictogram van de winkel. Standaard wordt een semi-transparante witte kleur gebruikt. Als je een andere kleur wilt gebruiken, kun je de kleur aanpassen met de kleurkiezer in deze instelling
Selector pictogram
Hier kunt u een aangepast pictogram kiezen dat wordt weergegeven wanneer een bezoeker met de muis over de winkelitems in de module zweeft.
Kleur van de verkoopbadge
Wanneer een artikel in de uitverkoop is, verschijnt er een verkoopbadge op de productafbeelding. Met deze instelling kunt u de kleur aanpassen die wordt gebruikt voor de badge-achtergrond.
Titel lettertype
U kunt het lettertype van uw titeltekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi biedt tientallen geweldige lettertypen die worden aangeboden door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor 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 verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Titel tekstkleur
Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de tekstkleur van uw titel wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.
Afstand van titelletters
Letterafstand is van invloed op 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 maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Hoogte van de titelregel
Regelhoogte is van invloed op de ruimte tussen elke regel van uw titeltekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Prijsbeleid
U kunt het lettertype van uw prijstekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor 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 verkleinen of rechtstreeks de gewenste waarde voor de tekstgrootte invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Prijs tekstkleur
Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw prijstekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurenkiezer.
Afstand van prijsbrieven
Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw prijstekst 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 maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Hoogte van de prijslijn
Rijhoogte is van invloed op de ruimte tussen elke rij van uw prijstekst Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Geavanceerde opties van de winkel
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 elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.
CSS ID
Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.
CSS-klasse
Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om een aangepaste CSS-stijl 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-stylesheet die u aan uw pagina of aan uw website toevoegt met behulp van de Divi-thema-opties of de instellingen op de Divi Builder-pagina.
Aangepaste CSS
Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.
zichtbaarheid
Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken, of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DOWNLOAD HET DIVI-THEMA [/ vcex_button] [/ width_column] [»]vc_column » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Andere Divi-zelfstudies
- 5 websites voor restaurant gebruik Divi thema
- Tekst toevoegen aan een Divi WooCommerce-product
- Hoe de menukleur tussen Divi-pagina's te veranderen
- Hoe de rasters van een blog personaliseren met Divi
- Hoe de rol Divi editor op WordPress
- Een Divi-schuifregelaar op volledig scherm maken
- Hoe de kleur van menu's tussen Divi-pagina's te veranderen
- Functies die u waarschijnlijk niet kent over Divi
- Divi Builder gebruiken op WordPress
- Hoe de Divi-scrolmodule video te gebruiken
- Hoe de Divi Builder Flip-module te gebruiken
- Hoe een getuigenismodule op Divi Builder toe te voegen
- Hoe de Divi-tekstmodule te gebruiken
- Hoe maak je een schuifregelaar op Divi
- Hoe u een Divi-gebruikersrol kunt bewerken
- Hoe de Divi Social Media-module te gebruiken
- Hoe de shopmodule te gebruiken met het thema WordPress Divi
- Hoe de Divi zijbalkmodule te gebruiken
- Hoe de Divi Price Table-module te gebruiken
- Hoe de titelmodule van Divi-publicaties te gebruiken
- Hoe een videomodule van Divi toe te voegen
- Hoe de artikelnavigatiemodule te gebruiken
- Hoe de Divi-zoekmodule te gebruiken
- Hoe de Divi wallet-module te gebruiken
- Hoe de persoonsmodule op Divi Builder te gebruiken
- De walletmodule gebruiken met Divi-filter
- De schuifregelaarmodule op de volledige breedte gebruiken
- Hoe de Divi Builder-beeldmodule te gebruiken
- De navigatiemodule op de volledige breedte van Divi Builder gebruiken
- Hoe de afbeeldingengalerij-module te gebruiken
- Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
- Hoe de Divi Full Width Portfolio Module te gebruiken
- Hoe de Divi header-module over de volle breedte te gebruiken
- Hoe de Divi Counter-module te gebruiken
- De schuifregelaar voor artikelen gebruiken in Divi Builder
- Hoe de Divi Email Optin-module te gebruiken
Beste Bair,
Dank u voor uw bijdrage.
Ik heb een vraag over de winkelmodule en zou het leuk vinden als je deze voor mij zou kunnen beantwoorden.
En ik zou graag willen dat individueel geselecteerde producten zichtbaar zijn in mijn winkelmodule. Ik dacht dat dit kon worden bereikt door ‘sterproducten’ te gebruiken. Maar nadat ik deze optie heb geselecteerd, kan ik geen manier vinden om mijn gewenste producten voor de module te selecteren. Mis ik iets? Heb je een toelichting?
Met vriendelijke groeten, Frederik