70+ Divi Modules Ultimate Guide 2024 (officieel / derde partij)

Als u het Divi-thema gebruikt of Divi Builderwerk je regelmatig met Divi-modules. Het zijn de bouwstenen binnen het thema waarmee je pagina-elementen kunt toevoegen, stylen, beheren en gebruiken om prachtige websites te maken.

Het probleem is dat wanneer je bezig bent met ontwerpen of je een weg probeert te banen Divi Builder, is het moeilijk om precies te zien wat er beschikbaar is.

Deze complete gids voor Divi-modules geeft een overzicht van de 46 kernmodules in Divi. Het zal ook enkele gratis en premium-modules van externe ontwikkelaars benadrukken.

Dit alles zodat u het meeste uit Divi kunt halen voor uw websites of die van uw klant.

Inhoud[Zichtbaar]

Dit artikel is een van onze vele Divi beoordelingen dat CollectiveRay heeft gedaan om de verschillende aspecten van het Divi-thema en de bouwer te behandelen. Bekijk ook onze lijst met voorbeelden van het gebruik van het Divi-thema om prachtige websites te maken.

Divi kopen voor een spotprijs? We hebben momenteel een exclusieve korting van Elegant Themes:

Koop Divi alleen in maart 10 met 2024% KORTING

Als je nog meer motivatie nodig had om Divi te kopen en te experimenteren met de vele Divi-modules hier, een recente prestatie-update zal het doen.

Divi heeft onlangs een revolutie teweeggebracht in zijn code, dus het is sneller en lichter dan ooit tevoren.

Als onderdeel van de verbetering heeft Divi CSS met 94% verkleind en dynamische CSS geïntroduceerd die alleen laadt wat nodig is, slimme stijlen geïntroduceerd om duplicaten te verminderen en bestandsgroottes te verkleinen, render-blokkerende CSS verwijderd, JavaScript geoptimaliseerd en een dynamisch PHP-framework toegevoegd om te vergroten de efficiëntie van functies.

Officiële Divi-modules

Er zijn momenteel 46 Divi-modules beschikbaar.

1. Accordeon

Accordeon

De Accordeon voegt een schuifregelaar voor een accordeon toe aan een pagina. Weet je wanneer je een inhoudsvak ziet met een selecteerbaar element en het naar beneden schuift om meer inhoud te onthullen? Dat is een accordeon.

Voor Divi is een accordeonmodule een selecteerbaar element met inhoud. Selecteer de eerste regel en deze wordt uitgevouwen om een ​​korte uitleg of overzicht weer te geven. Selecteer de volgende regel en de eerste regel wordt gesloten en de tweede wordt geopend. Het is een elegante manier om veel inhoud in een kleine ruimte op te nemen.

2. audio

Audio

De audiomodule biedt een audiospeler die u overal op een pagina kunt plaatsen. U kunt de speler koppelen aan een lokaal gehost audiobestand, zodat het wordt afgespeeld wanneer een gebruiker het selecteert.

In Divi is de audiomodule een eenvoudige audiospeler, maar als je een beetje CSS kent, kun je hem zelf stylen.

3. Barbalies

Bar tellers

Bar-tellers zijn de voortgangsbalken die u op websites overal op internet ziet. Als ze goed worden gedaan, zijn ze een onmiddellijk begrijpelijke maatstaf voor iets en kunnen ze heel goed werken in de juiste situatie.

Divi-bartellers kunnen worden gekleurd, aangepast aan bijna elk doel, handmatig worden geconfigureerd voor specifieke niveaus en op een aantal manieren worden gebruikt.

4. blog

Blogs

Met de Divi Blog-module kun je blogposts overal op een pagina plaatsen. U kunt deze berichten niet alleen overal plaatsen, u kunt ze ook aanpassen aan uw thema.

De Divi Blog-module biedt volledige vrijheid over waar en hoe u uw blogberichten weergeeft. U bent niet langer gebonden aan waar WordPress of uw thema denkt dat u ze met deze module zou moeten hebben.

5. Inzet

Flaptekst

De Blurb-module is een inhoudselement compleet met icoon en optionele animaties. Deze zijn handig voor product- of servicebeschrijvingen op pagina's, aangezien het optionele animatie-aspect een pagina een beetje interessanter kan maken.

De Divi Blurb-module heeft een reeks pictogrammen, kleuren en animatie-opties, afhankelijk van hoe u ze gebruikt. Sommige zijn standaard opgenomen in de module, terwijl andere kunnen worden geïmplementeerd met CSS.

6. Knop

knop

De Divi Button-module biedt de mogelijkheid om overal op uw site knoppen toe te voegen, in elke kleur en in een breed scala aan vormen en maten. Het ontwerp kan worden bediend in de thema-aanpasser en koppelingen en effecten kunnen tegelijkertijd worden geconfigureerd.

Ze zijn een eenvoudige maar effectieve uitbreiding op de bestaande knopopties binnen Divi.

7. Oproep tot actie

Oproep tot actie

Oproepen tot actie spelen een cruciale rol bij conversie. Hoe dwingender je ze kunt maken, hoe effectiever ze kunnen zijn. Dat is waar deze module binnenkomt.

De Divi Call to Action-module biedt een gemakkelijke manier om uw eigen call-to-action op te bouwen met een combinatie van CTA-box, kop, inhoud en knop om overal op uw website meer conversies te genereren.

8. Cirkelteller

Cirkel teller

De Circle Counter-module werkt op dezelfde manier als Bar Counters, maar gebruikt in plaats daarvan een volledige cirkelafbeelding. In plaats van een simpele balk, voegt de module een volledige cirkel toe met gedekte gebieden, afhankelijk van het percentage dat u als voltooid markeert.

De Circle Counter werkt met de thema-aanpasser en kan volledig worden aangepast aan elk thema.

9. code

Code

De Divi Code-module is een aangepast code-element dat u aan elke pagina kunt toevoegen. Het accepteert shortcodes, CSS en HTML en kan u helpen een groot aantal dingen binnen een pagina te bereiken.

Ze werken op dezelfde manier als aangepaste CSS-elementen binnen thema's, alleen kunt u ze overal plaatsen en ze bijna alles laten doen, aangezien ze niet worden beperkt door het thema.

10. Reacties

Heb je vragen? Stel ze hier.

Met de Divi Comments-module kunt u overal op de pagina een opmerking van uw blog toevoegen. Een aanbeveling of feedback van een blogreactie kan bijvoorbeeld op een productpagina worden weergegeven.

In plaats van een afbeelding te gebruiken, kunt u het echte werk toevoegen en vervolgens linken naar de hoofdcommentaar, wat alleen maar bijdraagt ​​aan de authenticiteit.

11. Contact formulier

Contactformulier

De Contactformulier-module is handig als u geen plug-in voor contactformulieren van derden wilt gebruiken. U kunt een formulier overal op de pagina implementeren en het opmaken met de thema-aanpasser.

U kunt meerdere formulieren maken, veldvalidatie en voorwaardelijke logica gebruiken om elk formulier te laten werken.

12. Countdown Timer

Countdown Timer

Afteltimers worden vaak gebruikt voor productreleases, aftellen naar speciale aanbiedingen of verkopen of om tijdangst bij lezers te creëren.

De Countdown Timer-module helpt daarbij door u in staat te stellen een timer te stylen, uw eigen countdown toe te voegen en deze ergens op de pagina te plaatsen.

13. Verdeler

verdeler

Verdelers zijn kleine maar belangrijke manieren om webpagina's op te splitsen en het publiek een pauze te geven voor de volgende sectie. De meeste webthema's lijken ze als een bijzaak te bevatten, en dat is waar Divi binnenkomt.

Het Divi-thema heeft verdelers, maar de Divider-module voegt meer toe.

14. E-mailaanmelding

E-mail aanmelden

E-mailaanmeldingsformulieren zijn essentieel voor het maken van e-maillijsten en voor het vergroten van de betrokkenheid. E-mail is nog steeds een ongelooflijk krachtige marketingtool en de e-mailopt-in-module is bedoeld om daarbij te helpen.

U kunt met deze module formulieren, aanmeldingen voor nieuwsbrieven en leadgenererende elementen maken en deze vervolgens aan uw e-mailprogramma koppelen om het efficiënt te beheren.

15. Filterbare portfolio

Filterbare portfolio

De filterbare portfolio-module is ideaal om een ​​aantrekkelijk portfolio-gedeelte op een pagina op te nemen. U kunt het opmaken, uw eigen categorieën en filters configureren en een volledig interactief portfolio maken.

Sommige Divi-thema's worden geleverd met ingebouwde portfolio-elementen en de Divi Builder heeft ze ook, maar deze module voegt nog meer toe.

Gallery

De Divi Gallery-module doet vrijwel hetzelfde voor galerijen. Hiermee kunt u overal op een pagina afbeeldingen en video's laten zien.

De galerij kan volledig worden aangepast en elke afbeelding bevatten die u maar wilt. U kunt de stijl instellen als een raster of schuifregelaar en veel aspecten van het uiterlijk en het gevoel ervan regelen vanuit de aanpasser.

17. Afbeelding

Beeld

De Divi Image-module voegt een reeks opties toe bij het weergeven van afbeeldingen op een pagina. U kunt lightbox-effecten toevoegen, lazy loading implementeren, animaties toevoegen en uw afbeeldingen echt laten opvallen.

Afbeeldingen hebben een krachtig effect op de betrokkenheid en de tijd op de pagina, dus het is volkomen logisch om uw afbeeldingen recht te doen. Deze module kan daarbij helpen.

18. Log in

Inloggen

De Divi Login-module voegt een karakteristiek inlogformulier toe aan pagina's met de vertrouwde stijl van uw thema. De module kan worden gestileerd om bij de pagina te passen om op de achtergrond te zitten of op te vallen en opgemerkt te worden.

De inlogpagina logt de gebruiker automatisch in op de site zonder om te leiden naar de standaard WordPress-inlogpagina.

19. Kaart

Wereldmap

De Divi Map-module neemt het standaard kaartelement en voegt extra aanpassingsopties en naad toeless integratie in een pagina. Aangezien kaarten op sommige sites een integrale rol kunnen spelen, is dit een zeer nuttige add-on om te gebruiken!

Map integreert met Google Maps om locaties te markeren of interactieve elementen toe te voegen. Het kan ook worden opgemaakt om bij uw pagina te passen.

20. Nummerteller

Nummerteller

De Number Counter-module is een ander grafisch apparaat om met uw publiek te communiceren. In plaats van een staaf- of cirkelgrafiek te gebruiken, gebruikt deze module eenvoudige cijfers om te communiceren.

Het werkt ook op dezelfde manier als die anderen. Stijl het in de thema-aanpasser en plaats het ergens op de pagina.

21. persoon

Persoon

De Persoonsmodule voegt persoonlijkheden toe aan uw website. Of je nu auteurs wilt laten zien, inzicht wilt geven in je team of iets anders, de Person-module is hoe je het doet.

U kunt een afbeelding, biografische kopie, links naar sociale media toevoegen en deze overal op uw website plaatsen. Er zijn ook aanpassingsopties als u deze nodig hebt om in een bestaand thema te passen.

22. portefeuille

Portfolio's

De Portfolio-module bouwt voort op de opties die door Gallery worden geboden, doordat u uw werk op een aantal manieren kunt presenteren. Als je een freelancer of een klein bedrijf bent en je wilt pronken met je werk, dan is dit hoe.

De module kan werken met rasters, lay-outs over de volledige breedte, categoriefilters en paginering aanbieden. Er zijn ook enkele aanpassingen die u kunt toepassen als dat nodig is.

23. Berichtnavigatie

Berichtnavigatie

De Post-navigatie neemt de standaard lees volgende of vorige opties en maakt ze aantrekkelijker. Hoewel WordPress en veel thema's deze functies hebben, voegt de Divi-optie nog meer hulpprogramma toe.

Met de module kun je aantrekkelijke vorige en volgende knoppen onder aan berichten plaatsen, zodat lezers zich een weg kunnen banen door je blog.

24. Post-schuifregelaar

Bericht Slider

De Post Slider-module is een geweldige manier om uw blogposts onder de aandacht te brengen. Het maakt gebruik van een schuifregelaar om door een gedefinieerde reeks blogposts te bladeren om uw werk te laten zien en klikken aan te trekken.

Hoewel veel andere plug-ins aanbieden om blogposts weer te geven of weer te geven, kan een schuifregelaar een kleurrijke afbeelding en een fragment bevatten dat zeker zal aanspreken. Kleine aanpassingen zijn ook mogelijk met deze module.

25. Titel van bericht

Bericht Titel

De module Posttitel is een kleine maar nuttige toevoeging die Divi-stijl gebruikt voor posttitels. Het geeft de titel weer en heeft ook de mogelijkheid om een ​​uitgelichte afbeelding toe te voegen en eventuele metagegevens die u mogelijk ook wilt weergeven.

De module heeft een paar aanpassingsopties die u kunt gebruiken om deze in een thema te passen, maar de standaardinstellingen werken goed genoeg voor de meeste toepassingen.

26. Prijstabellen

prijsstelling Tables

Prijstabellen zijn een van die elementen die maar heel weinig WordPress-thema's goed lijken te doen. Divi is er niet een van. De standaard thematabellen werken goed genoeg, maar je kunt dat een boost geven met de Pricing Tables-module.

Deze module voegt een aanpasbare tabel toe die op elke pagina past. U kunt de kleuren, valuta, het aantal functies en effecten naar wens wijzigen.

Zoeken

Zoeken is een van die functies die meestal is less dan ideaal. De standaard WordPress-zoekfunctie kan traag zijn en het voor de hand liggende missen. Sommige thema's bevatten zoeken die vaak teleurstellen. De Divi Search-module brengt daar verandering in.

Dit is een eenvoudig zoekvak dat u overal en in stijl kunt plaatsen die bij uw thema past. Simpel, snel en zeer effectief.

28. winkel

Shop

De Divi Shop-module is een uitstekende uitbreiding op WooCommerce. Als u al een winkel heeft, kunt u met deze module producten overal op uw site in een op zichzelf staand element presenteren. Het is een uitstekende gelegenheid om te cross- of upsellen.

Met de module kunt u producten sorteren, het element stylen en ook enkele aanpassingen aan het display uitvoeren.

29. sidebar

sidebar

De zijbalkmodule is een van de handigste modules in deze lijst. Het heeft een standaardzijbalk nodig en geeft u volledige controle over hoe het eruit ziet, wat het bevat en hoe het werkt.

Met de module kunt u aangepaste zijbalken maken met behulp van de thema-aanpasser en deze op alle pagina's, sommige pagina's of specifieke pagina's plaatsen.

30. schuif

Slider

Schuifregelaars kunnen omstreden onderwerpen zijn, maar het lijdt geen twijfel dat ze effectief kunnen zijn als ze goed worden gestyled. De Divi Slider-module doet precies dat.

Het is een eenvoudige schuifregelaar die u overal op de pagina kunt plaatsen en aanpassen aan het ontwerp. U kunt ook video, afbeeldingen gebruiken, het diatype regelen en nog veel meer.

31. Sociale media volgen

Sociale media volgen

Volgknoppen zijn een andere paginafunctie die maar weinig thema's goed weten te krijgen. Ze zijn zo eenvoudig, maar zien er vaak onhandig uit, werken niet goed of zien eruit alsof ze zijn toegevoegd met een plug-in.

De Social Media Follow-module is anders. Het voegt een aantal aantrekkelijke pictogrammen met links toe en stelt u in staat deze aan uw behoeften aan te passen.

32. tabs

Tabs

Als de Accordeon-module niet is wat u zoekt, is de Tabs-module dat misschien wel. Dit is een andere manier om veel tekst weer te geven zonder de pagina te overbelasten.

Met deze add-on kunt u een inhoudselement maken met een aantal horizontale tabbladen die tekst, afbeeldingen of video kunnen bevatten.

33. Getuigenis

Testimonial

De Testimonial-module voegt sociaal bewijs toe aan een pagina. We weten allemaal hoe belangrijk social proof is en met deze module kun je het overal toevoegen.

U heeft verschillende opmaakopties om de module in de pagina te passen, u kunt een afbeelding, enkele tekst en links weergeven, afhankelijk van uw behoeften.

34. Tekst

Tekst

Met de tekstmodule hebt u toegang tot de WordPress-teksteditor om aangepaste tekst toe te voegen waar u maar wilt. Het is een andere kleine maar nuttige add-on die veel meer vrijheid biedt in termen van tekstplaatsing op een pagina.

35. Wisselen

Toggle

De Divi Toggle-module werkt op dezelfde manier als Accordion doordat het inhoudvakken schakelt om open en dicht te schuiven. Waar Accordion een enkele box met meerdere dia's gebruikt, gebruikt Toggle individuele boxen die elke dia afzonderlijk zijn.

Het is een handig alternatief voor Accordion, waarbij u misschien maar een paar elementen wilt gebruiken of alle elementen tegelijk wilt openen.

36. video

Video

U kunt al video insluiten in WordPress, maar u moet de volledige iFrame-URL gebruiken in de codeweergave. De Divi Video-module slaat dat allemaal op.

Met de module kunt u een geüploade of gekoppelde video overal op een pagina insluiten. U kunt ook een aangepaste afbeelding instellen in plaats van het eerste frame en de afspeelknop aanpassen.

37. Videoschuifregelaar

Video schuifregelaar

De Video Slider-module neemt video en voegt een schuifregelaar toe. Je kunt een hoofdvideo instellen en een aantal anderen eronder laten zien en de schuifregelaar tussen de twee laten schakelen.

Met de module kun je de eerste afbeelding en afspeelknop aanpassen, geüploade of gekoppelde video's gebruiken en deze overal op een pagina plaatsen.

38. Volledige breedte code

Volledige breedte code

De Fullwidth Code-module werkt met Divi-thema's over de volledige breedte en laat je code insluiten op een pagina met behoud van opmaak. Het is een eenvoudige maar effectieve module die handig kan zijn voor how-to-websites, websites van ontwikkelaars of iets anders.

39. Header over de volledige breedte

Header over de volledige breedte

Met de Fullwidth Header-module kunt u een koptekst maken over de volledige breedte van de pagina. Simpel maar zeer effectief. U kunt een kop, een subkop en een kopie samen met maximaal twee knoppen gebruiken.

40. Afbeelding op volledige breedte

Afbeelding op volledige breedte

Fullwidth Image is de volledige breedteversie van Image maar werkt naadlooslessly in volledige breedte ontwerpen. Het heeft ook allemaal dezelfde weergave- en aanpassingsopties.

41. Kaart over de volledige breedte

Kaart met volledige breedte

De Fullwidth Map-module werkt net als Maps, maar dan voor pagina's over de volledige breedte. Je krijgt ook dezelfde Google Map-compatibiliteit, aanpassingsopties en gebruiksgemak als die module.

42. Menu met volledige breedte

Menu met volledige breedte

Menu met volledige breedte biedt een aangepast menu dat zich over een pagina uitstrekt. Het neemt het standaard WordPress-menu en bevat het in een aangepast element. U kunt het menu vervolgens op de gebruikelijke manier aanpassen.

43. Portfolio op volledige breedte

Portfolio op volledige breedte

Deze module neemt de standaard Portfolio-module en laat deze werken met pagina's over de volledige breedte. Het heeft dezelfde aanpassingen en functies, maar werkt met deze lay-out.

44. Schuifregelaar voor volledige breedte

Schuifregelaar voor volledige breedte

De Fullwidth Post Slider neemt de Post Slider-module en zorgt ervoor dat deze over de volledige breedte van een pagina werkt. Het heeft hetzelfde hulpprogramma en dezelfde aanpassingsopties als die module en biedt volledige controle over hoe het er voor de gebruiker uitziet.

45. Titel van bericht op volledige breedte

Titel van bericht op volledige breedte

De titel van het bericht op volledige breedte is hetzelfde als de titel van het bericht, maar werkt op de volledige breedte. Het is iets waarvan we denken dat je het spaarzaam op een pagina zou gebruiken, maar deze Divi-module zorgt ervoor dat je titels over de volledige breedte kunt weergeven zonder enige codering.

46. ​​Schuifregelaar voor volledige breedte

Schuifregelaar voor volledige breedte

De Fullwidth Slider neemt de Slider-module en doet hetzelfde. Maakt het werk foutlessmet een ontwerp over de volle breedte. Dit is een nuttigere module met volledige controle over hoe de dia's eruitzien en aanvoelen.

WooCommerce Divi-modules

WooCommerce wordt zeer goed bediend door Divi. Sommige breiden bestaande functies uit binnen WooCommerce-pagina's, terwijl andere je in staat stellen om bepaalde winkelelementen op niet-winkelpagina's te plaatsen.

Elk is de moeite waard om te bekijken als u op zoek bent naar meer flexibiliteit bij het ontwerpen van uw winkel.

1. Woo Breadcrumb-module

Woo Breadcrumb-module

Broodkruimels worden vaak op websites gebruikt om te helpen bij het navigeren. De Woo Breadcrumb-module voor Divi doet hetzelfde voor uw winkel. De opties zijn eenvoudig en omvatten een cursuspagina, huidige pagina en optionele link en scheidingsteken.

Het is een eenvoudige maar effectieve module waarmee u beschrijvende broodkruimels bovenaan de pagina kunt plaatsen om uw gebruikers te helpen navigeren.

2. Woo-titelmodule

Woo-titelmodule

Met deze module heeft u volledige controle over producttitels. U kunt de titel wijzigen, deze opmaken en links en achtergronden toevoegen en desgewenst configureren. Het bouwt voort op de standaard titeloptie door meer ontwerptools en een aantal geavanceerde spaties toe te voegen.

Wat meer is, wanneer u een titel bijwerkt met deze module, kunt u deze zo instellen dat deze automatisch overal op uw site wordt bijgewerkt.

3. Woo-afbeeldingsmodule

Woo-afbeeldingsmodule

De Woo Image Module biedt volledige controle over productafbeeldingen in uw winkel. De standaardopties zijn goed, maar dit gaat verder. U kunt een aantal afbeeldingen toevoegen, een miniatuurschuifregelaar gebruiken en badges of grafische lagen toevoegen voor aanbiedingen of iets anders.

De module heeft een paar aanpassingsopties die u kunt gebruiken om de afbeelding op te maken en u deze vervolgens overal op elke pagina kunt plaatsen.

Woo Gallery-module

De Woo Gallery-module bouwt voort op de afbeeldingsmodule door afbeeldingen op te nemen in een productgalerij. Het biedt vergelijkbare opties als de Divi Gallery-module die we eerder noemden en biedt de mogelijkheid om de galerij te stylen en overal en op elke pagina te plaatsen.

Afbeeldingen verkopen producten, dus dit is een uitstekende optie als de standaard afbeeldingscapaciteit van WooCommerce niet levert wat je nodig hebt.

5. Woo-prijsmodule

Woo-prijsmodule

De Woo-prijsmodule breidt de prijzen uit en stelt u in staat producten en prijzen op elke pagina weer te geven, niet alleen op winkelpagina's. Het is een aanpasbaar element dat de huidige prijs, oude prijs, verkoopprijs weergeeft en die prijzen ontwerpt die bij uw thema passen.

Hoewel de standaard WooCommerce-plug-in veel ingebouwde prijsopties heeft, gaat deze module nog een stap verder en biedt hij de mogelijkheid om reclame te maken op niet-productpagina's.

6. Woo Toevoegen aan winkelwagen Module

Woo Toevoegen aan winkelwagen Module

De Woo Add to Cart-module biedt volledige controle over de daadwerkelijke aankoop. Hiermee kunt u de knop Nu kopen op elke gewenste manier stylen. Van wat het zegt tot hoe het eruit ziet en scheid de knop van de standaard WooCommerce-lay-out.

Als, om wat voor reden dan ook, de standaardprijs en knoplay-out niet werken voor uw thema, helpt deze module daarbij. U kunt het overal plaatsen, stylen, een optie voor een hoeveelheid weergeven en zelfs een weergave van de resterende voorraad.

7. Woo-beoordelingsmodule

Woo-beoordelingsmodule

Beoordelingen zijn alles in de detailhandel. Hoog gewaardeerde producten verkopen niet-beoordeelde producten met een aanzienlijke marge. De opkomst van recensies en sociaal bewijs kan aan jou zijn om te bevelen met de Woo Rating Module.

Hiermee kunt u een beoordeling op een pagina plaatsen, beoordelingen weergeven, het aantal en de gemiddelde beoordeling van die beoordelingen en links ernaar weergeven. Elke winkel zou beoordelingen moeten gebruiken en dit is hoe het moet.

8. Woo-voorraadmodule

Woo voorraadmodule

De Woo Stock Module doet precies wat er op de verpakking staat. Hiermee kunt u een nauwkeurig voorraadnummer weergeven op uw productdisplay. Dit kan de urgentie helpen vergroten, wat op zijn beurt de conversie verhoogt.

U kunt elk display opmaken om met die urgentie te helpen door een lage voorraad rood of een hoge voorraad groen te markeren, de tekst 'Niet op voorraad' toe te voegen en deze ergens op de pagina te plaatsen.

9. Woo Meta-module

Woo Meta-module

De Woo Meta Module zorgt voor kleine details, zoals het weergeven van SKU, tags, categorieën en aanvullende gegevens op een pagina. Als u zoveel mogelijk gegevens op pagina's wilt opnemen, helpt deze module u.

Het is geen freeform-module, maar kan interne meta gebruiken en ze voor iedereen zichtbaar maken. Je kunt het ontwerp echter wel stylen.

10. Woo Beschrijving Module

Woo Beschrijving Module

Met de Woo-beschrijvingsmodule kunt u een productbeschrijving voor een specifiek product overal binnen een Divi-thema weergeven.

Het is een eenvoudige maar bruikbare module waarmee u producten op blogpagina's of servicepagina's kunt promoten en de look en feel van die beschrijving volledig kunt stylen.

11. Woo Tabbladen Module

Woo Tabs-module

De Woo Tabs-module werkt op dezelfde manier als de Divi Tabs-module. Het installeert een inhoudselement met tabbladen op een pagina die u kunt vullen met elke gewenste inhoud.

Tabbladen kunnen handig zijn om meerdere informatiebronnen op één pagina te combineren. Bijvoorbeeld productdetails, productspecificaties, bezorgopties en beoordelingen in één doos met voor elk een tabblad.

12. Woo aanvullende informatiemodule

Woo aanvullende informatiemodule

De Woo-module met aanvullende informatie is voor degenen die meer willen. Heeft u producten met extra opties? Dit is de module die u moet gebruiken. Hier worden bijvoorbeeld maten of verschillende kleuren weergegeven.

U kunt het op uw eigen manier opmaken en op een pagina plaatsen met behulp van de standaard customizer. Nog een simpele maar waardevolle toevoeging.

Woo-module voor gerelateerde producten

De Woo Aanvullende Informatie Module behoeft weinig introductie. Winkels thrive over cross-selling en upselling en deze module is hoe je het doet. U kunt een toevoegen Gerelateerde Producten sectie naar een pagina en voeg desgewenst ondersteunende informatie toe.

Elke winkel zou cross-selling moeten gebruiken en als de standaard WooCommerce-opties niet genoeg zijn, werkt deze module naadlooslesssamen met Divi.

14. Woo Upsell-module

Woo Upsell-module

De Woo Upsell-module doet vrijwel hetzelfde. U kunt dit toevoegen aan productpagina's of aan elke pagina op uw site om producten te upsellen.

De producten in deze module zijn de producten die u hebt ingesteld als upsell-opties in WooCommerce. Met deze module kun je ze gewoon overal op een pagina plaatsen.

15. Woo Cart Kennisgevingsmodule

Woo Cart-mededelingsmodule

De Woo Cart Notice Module is een toegevoegde waarde optie die een eenvoudige melding toevoegt aan een productpagina om de gebruiker te informeren dat ze een product aan de winkelwagen hebben toegevoegd. Het is een eenvoudig maar nuttig stukje interactie dat een geweldige winkel kan onderscheiden van alleen een goede.

Meldingen kunnen stijlen en met kleuren en lettertypen zijn. De standaardinstelling gebruikt uw themakleur, maar u kunt deze gemakkelijk overschrijven als u dat wilt.

16. Module voor Woo-beoordelingen

Woo Recensies Module

Met de Woo Reviews-module kunt u productrecensies voor uw artikelen op elke pagina van uw site plaatsen. Het is handig voor promotiepagina's of blogposts om dat essentiële sociale bewijs toe te voegen om een ​​koopbeslissing te helpen beïnvloeden.

Met de module kunt u specifieke velden instellen, het aantal opmerkingen weergeven en de kleur en stijl beïnvloeden. Het is een handige module als u reclame maakt op andere plaatsen dan uw productpagina's.

10 van de beste gratis Divi-modules

Er is een breed scala aan gratis Divi-modules die er zijn en ze zijn niet allemaal gelijk gemaakt. We denken dat deze 10 gratis Divi-modules het proberen waard zijn.

1. Divi Tweaker

Divi Tweaker

Divi Tweaker is een zeer slimme module die helpt bij het versnellen van de Divi Builder en WooCommerce, verwijdert Query Strings die het laden van pagina's kunnen vertragen en lokale themabestanden kunnen vervangen door bestanden die worden aangeboden vanaf een CDN.

De module voegt ook enkele extra ontwerpfuncties toe voor mobiel en desktop, enkele animaties en effecten, paginaovergangen, lay-outopties en nog veel meer.

2. Divi geavanceerde tekstmodule

Divi geavanceerde tekstmodule

Divi Advanced Text Module is een kleine maar zeer nuttige module die de bestaande tekstopties uitbreidt en enkele handige tools toevoegt. Als u veel met tekst werkt, zoals wij, maakt de mogelijkheid om de breedte en hoogte van het tekstelement te wijzigen een enorm verschil wanneer u een pagina-indeling probeert te perfectioneren. Deze module doet dat.

Het voegt ook een tool voor het uploaden van afbeeldingen toe die de ontwerptijden op een kleine maar belangrijke manier verkort.

3. Divi Slimbuilder

Divi Slimbuilder

Divi Slimbuilder is ideaal als u landingspagina's of langere sitepagina's bouwt met de Divi Builder. Het verandert de lay-out van het hoofdvenster zodat de pagina-elementen slanker zijn. Het verandert ook de manier waarop sectietitels worden weergegeven om het hele ontwerpproces veel soepeler te maken.

Het is een kleinigheid, maar het betekent dat je veel meer kunt zien van wat er aan de achterkant van het ontwerp gebeurt zonder steeds op en neer te hoeven scrollen.

4. Uitbreiding artikelkaarten

Uitbreiding artikelkaarten

Artikelkaarten extensie was blijkbaar Elegant Themes' allereerste Divi-module. Het is zo handig dat het nog steeds bestaat en nog steeds populair is. Het is weer een bescheiden module die meer stylingopties toevoegt aan de Divi Blog-module om de manier waarop de blogkaarten worden weergegeven te veranderen.

De veranderingen zijn bescheiden en omvatten schaduweffecten, achtergrondkleuren, de mogelijkheid om het blograster op te maken en de positie van de blogtitel en meta te wijzigen.

5. Divi Icon uitbreidingspakket

Divi Icon uitbreidingspakket

Het Divi Icon Expansion Pack doet precies wat het zegt. Het voegt een reeks handgetekende pictogrammen toe aan de Divi Builder voor u om te gebruiken in uw ontwerp. Er zijn honderden om uit te kiezen en u kunt ze allemaal aanpassen aan uw thema.

Er is een gratis en een premium-versie van deze module. De premium voegt meer pictogrammen en aanpassingsopties toe.

6. Vouw Divi uit

Vouw Divi uit

Expand Divi is een andere voor zichzelf sprekende Divi-module. Het voegt een reeks functies toe aan Divi, waaronder Lightbox, een nieuwe sectie met gerelateerde berichten, nieuwe auteurvakken, een nieuw element met recente berichten, een animator voor het vooraf laden van pagina's, Font Awesome-tools en nog veel meer.

De module is al een tijdje niet bijgewerkt, maar we hebben hem getest op de nieuwste versie van WordPress en Divi en het werkte prima.

7. Battle Suit voor Divi

Battle Suit voor Divi

Battle Suit for Divi heeft niet alleen een erg coole naam, maar heeft ook veel te bieden. Het is een uitbreidingsmodule die meer post-, voettekst-, galerij- en afbeeldingsopties toevoegt, Lightbox voor afbeeldingen en video toevoegt, afbeeldingseffecten, titel- en meta-opties voor berichten en een heleboel andere tools toevoegt.

Aangezien dit een gratis module is, gebeurt er hier veel en maakt de module alles toegankelijk en zeer gemakkelijk te gebruiken.

8. Eenvoudige Divi-shortcode

Eenvoudige Divi-shortcode

Simple Divi Shortcode heeft een zeer krachtige tool in WordPress, shortcodes, en stelt je in staat ze overal in andere modules te plaatsen. Het is een andere heel eenvoudige tool die een enorm verschil kan maken als je veel shortcodes op je pagina's gebruikt.

Er is een gratis en een premium-versie van deze plug-in, maar de gratis optie doet alles wat je waarschijnlijk nodig hebt.

9. Surbma Divi-extra's

Surbma Divi-extra's

Surbma Divi Extras voegt een paar extra functies toe aan Divi die sommigen van jullie misschien handig vinden. Een ding dat het opvalt, is de optie voor het tekstlogo. U hoeft het misschien niet vaak te gebruiken, maar als u dat doet, maakt deze tool alleen deze module het waard om te gebruiken.

De module voegt ook stijl-, lay-out-, menu- en voettekstopties toe en heeft een zeer nette verticale middenoptie voor kopiëren binnen een module. Dit is weer zo'n hulpmiddel dat een echte redder in nood kan zijn!

10. Pop-ups voor Divi

Pop-ups voor Divi

Pop-ups voor Divi is erg handig als u een enkele pop-up wilt maken, maar geen speciale pop-up-plug-in voor WordPress wilt gebruiken. Het voegt een functie toe waarmee u een element binnen de builder kunt maken en het als een pop-up voor marketing kunt gebruiken.

Het is een eenvoudige oplossing voor een serieus probleem en ideaal voor het maken van standaard pop-ups binnen een pagina zonder dat u een pop-upplug-in hoeft te gebruiken of te betalen.

10 premium Divi-modules

Er zijn honderden premium Divi-modules die er zijn. Sommige zijn de investering waard en andere niet zo veel. Deze 10 zijn je geld zeker waard!

Divi-carrouselmodule 2.0

Divi Carousel Module 2.0 helpt u carrousels te bouwen voor bijna alles binnen Divi. Ze kunnen handig zijn voor producten, diensten, getuigenissen en allerlei promotionele functies. Deze plug-in zorgt ervoor dat ze gebeuren.

Hiermee kunt u zoveel carrousels maken als u wilt en deze opslaan als sjablonen die u overal kunt gebruiken. Je hebt volledige controle over hoe ze eruit zien en aanvoelen en al het ontwerpen gebeurt binnen de bouwer. Een uitstekende optie voor displays.

2. Divi E-commerce

Divi E-commerce

Divi Ecommerce werkt met zowel Divi als WooCommerce om snel een online winkel te bouwen. Het heeft een aantal ontwerpen om als sjablonen te gebruiken, enkele aangepaste pagina-elementen, demo-inhoud om snel aan de slag te gaan en alles wat je nodig hebt om een ​​basiswinkel te bouwen.

De module wordt zelfs geleverd met zijbalken, sociaal delen, opties voor productlay-out, aftelklokken, trending productmodules en nog veel meer opties. Als je een van de Divi-demo's niet leuk vindt, kan dit de module voor jou zijn.

3. Divi Headers Pack

Divi Headers Pack

De Divi Headers Pack is groot. Het voegt meer dan 750 nieuwe headers toe, sommige functioneel, sommige nieuwe ontwerpen. Het voegt af-canvas menu-opties, responsieve headers, menu-effecten, menu-animaties en een heleboel tools voor het stylen van headers.

Deze module heeft een zeer beperkte focus, maar het is de investering zeker waard als u problemen ondervindt bij het vinden van de perfecte header. Als u het hier niet vindt, vindt u het nergens!

4. Divi SupremePro

Divi SupremePro

Divi Supreme Pro bevat een reeks modules om uw creativiteit te vergroten tijdens het gebruik van Divi. Modules zijn onder meer Gradient Text, Flipbox, Text Divider, Divi Typing, Supreme Button, Facebook Feed en een aantal andere.

Er zit veel in deze module, meer dan 40 verschillende modules en 7 premium uitbreidingen. Gezien de prijs is Divi Supreme Pro een koopje!

5. Divi Evenementenkalender

Divi Evenementenkalender

Divi Events Calendar kan gebruikt worden om een ​​complete event management website te bouwen of om events toe te voegen aan een standaard site. Het gebruikt de standaard Divi Builder om evenementen te helpen creëren en heeft alles wat je nodig hebt om ze te stylen en weer te geven.

Deze module bevat een kalender, carrousel, evenementfeed en paginamodule om u te helpen bij het maken van een volledig functionele evenementenwebsite of evenementgedeelte en is zeker de moeite van het bekijken waard.

6. Table Maker

Table Maker

Sommige mensen vinden tafels gemakkelijk, terwijl anderen ze een frustrerende puinhoop vinden. Als je in het laatste kamp zit, is de Table Maker module is voor jou. Hiermee kunt u snel een tabel in een pagina insluiten en alles erover opmaken.

U kunt afbeeldingen, pictogrammen, teksten, knoppen toevoegen en zelfs rijen samenvouwen voor mobiel. Het is een zeer krachtige plug-in die korte metten maakt met het toevoegen en stylen van tabellen aan elke pagina en daarom is het de moeite waard om te kopen.

7. Divi Modal Pop-up

Divi Modal Pop-up

Als u pop-ups wilt gebruiken en pop-ups voor Divi is niet genoeg, Divi Modal Popup is dat wel. Het is een functierijke module die korte metten maakt met het maken van pop-ups van het laden van pagina's, tijdvertraging en een reeks andere triggers.

Wat nog belangrijker is, u kunt het volledige scala aan pagina-elementen opnemen, uw pop-up overal plaatsen, deze laten activeren door alles op de pagina en animaties aan de pop-up zelf toevoegen. Als u de betrokkenheid met pop-ups wilt vergroten, is dit wat u gebruikt.

8. Divi Responsieve Helper

Divi Responsieve Helper

De Divi Responsive Helper is een hulpmiddel om u te helpen precies te zien hoe uw pagina op mobiel wordt geladen vanuit de Builder. U kunt ook wijzigen hoe deze eruitziet, hoe deze wordt geladen, de volgorde van elementen wijzigen en volledig bepalen hoe uw site eruitziet op mobiele apparaten.

De module bevat ook een zeer slimme automatische hersteltool die zinnen of alinea's in evenwicht kan brengen zodat ze er beter uitzien. Dat alleen al maakt het de aankoop waard!

Divi Metselwerk Galerij

Divi Masonry Gallery is ideaal als u meer wilt van een portfolio of blogpagina. Het neemt de standaard metselwerklay-out en voegt de mogelijkheid toe om verschillende vormen te maken, kolommen te wijzigen, ruimte toe te voegen of te verwijderen, modale pop-ups toe te voegen en een specifieke galerij voor mobiel te configureren.

Als u een website met veel afbeeldingen ontwerpt en meer met metselwerk wilt doen, kunt u met deze module alles doen vanuit de vertrouwde Builder-interface.

10. Divi MadMenu

Divi MadMenu

Divi MadMenu voegt meer opties toe aan het menugedeelte van Divi Builder. Als de standaardinstellingen niet voldoende zijn, voegt deze module meer toe. Het splitst ook een koptekst op in afzonderlijke secties voor eenvoudige aanpassing.

Met de module kun je bepalen hoe het menu werkt op verschillende schermformaten, verschillende lay-outs instellen voor verschillende apparaten, Ajax-elementen voor producten toevoegen, oproepen naar acties en ook andere elementen toevoegen. Het is een krachtige manier om kopteksten onder de knie te krijgen.

Als u op zoek bent naar extra functionaliteit, bekijk dan ons artikel over Divi-plug-ins of uitchecken onze recensie van DiviFlash.

Hoe u uw eigen aangepaste Divi-module kunt ontwikkelen

Wilt u uw eigen Divi-module ontwikkelen? Heeft u een probleem dat niet wordt gedekt door een bestaande module?

Dit deel van het artikel is hier om te helpen.

We gaan de basis schetsen van het ontwikkelen van uw eigen aangepaste Divi-module. Je hebt basiskennis van PHP nodig om deze sectie te voltooien als: Divi Builder definieert modules als PHP-klassen.

Eerst moet u een Divi-extensie maken. U moet dit eerst doen omdat uw aangepaste Divi-module is geïmplementeerd binnen een extensie, thema of child-thema en de extensie het gemakkelijkst te maken is.

Lees deze handleiding om uw extensie te maken​ Als u klaar bent, komt u hier terug om uw module te maken.

Open uw extensie en zoek include / modules

Maak een map met de naam SimpleHeader

Maak een bestand in SimpleHeader en noem het SimpleHeader.php

Plak het volgende in het bestand en sla het op


class SIMP_SimpleHeader breidt ET_Builder_Module {uit
          public $ slug = 'simp_simple_header';
          public $ vb_support = 'aan';
          openbare functie init () {
                   $ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
          }
          openbare functie get_fields () {
                   retour array (
                             'heading' => array (
                                      'label' => esc_html __ ('Heading', 'simp-simple-extension'),
                                      'type' => 'tekst',
                                      'option_category' => 'basisoptie',
                                      'description' => esc_html __ ('Voer hier uw gewenste kop in.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                             'content' => array (
                                      'label' => esc_html __ ('Inhoud', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basisoptie',
                                      'description' => esc_html __ ('Inhoud die hier wordt ingevoerd, verschijnt onder de koptekst.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                   );
          }
          openbare functie render ($ unprocessed_props, $ content = null, $ render_slug) {
          }
}
nieuwe SIMP_SimpleHeader;

Als u uw PHP kent, ziet u een basisheader die kan worden gebruikt door: Divi Builder. U ziet een koptekst, wat inhoud en achtergrond.

Voeg nu wat HTML toe aan het bestand, zodat het kan worden weergegeven.

Voeg het volgende toe na 'public function render ($ unprocessed_props, $ content = null, $ render_slug) {'

                   terug sprintf (

                             ​ % 1 $ s

                             % 2 $ s ​

                             esc_html ($ this-> rekwisieten ['rubriek']),

                             $ this-> rekwisieten ['inhoud']

                   );

          }

}

nieuwe SIMP_SimpleHeader;

Uw volledige bestand zou er als volgt uit moeten zien:


class SIMP_SimpleHeader breidt ET_Builder_Module {uit
          public $ slug = 'simp_simple_header';
          public $ vb_support = 'aan';
          openbare functie init () {
                   $ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
          }
          openbare functie get_fields () {
                   retour array (
                             'heading' => array (
                                      'label' => esc_html __ ('Heading', 'simp-simple-extension'),
                                      'type' => 'tekst',
                                      'option_category' => 'basisoptie',
                                      'description' => esc_html __ ('Voer hier uw gewenste kop in.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                             'content' => array (
                                      'label' => esc_html __ ('Inhoud', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basisoptie',
                                      'description' => esc_html __ ('Inhoud die hier wordt ingevoerd, verschijnt onder de koptekst.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                   );
          }
          openbare functie render ($ unprocessed_props, $ content = null, $ render_slug) {
                   terug sprintf (
                             ​ % 1 $ s
                             % 2 $ s ​
                             esc_html ($ this-> rekwisieten ['rubriek']),
                             $ this-> rekwisieten ['inhoud']
                   );
          }
}
nieuwe SIMP_SimpleHeader;

Als dat zo is, is het nu tijd om de React Component klasse die laat Divi Builder de module renderen.

Maak een bestand en noem het SimpleHeader.jsx

Plak het volgende en sla het op

// Externe afhankelijkheden
importeren React, { Component, Fragment } van 'react';
// Interne afhankelijkheden
importeer './style.css';
class SimpleHeader breidt Component {
  static slug = 'simp_simple_header';
  renderen () {
    terugkeer (
      
        {this.props.content ()}
      
    );
  }
}
export standaard SimpleHeader;

Navigeer naar include / modules / index.js in uw extensiebestand

Voeg het volgende toe en sla het op

// Interne afhankelijkheden
importeer SimpleHeader van './SimpleHeader/SimpleHeader';
export standaard [
  eenvoudige kop,
];

Voeg daarna het volgende toe aan SimpleHeader.jsx   

renderen () {
    terugkeer (
En sla het op.
  
        {this.props.heading}
        

Het volledige bestand zou er nu als volgt uit moeten zien:

// Externe afhankelijkheden
importeren React, { Component, Fragment } van 'react';
// Interne afhankelijkheden
importeer './style.css';
class SimpleHeader breidt Component {
  static slug = 'simp_simple_header';
  renderen () {
    terugkeer (
      
        {this.props.heading}
        
          {this.props.content ()}
        
      
    );
  }
}
export standaard SimpleHeader;

Open style.css van uw module en voeg

.simp-eenvoudige-koptekst {
          margin-bottom: 20px;
}

Dat is het voor het ontwikkelen van uw Divi-module. Het enige dat u nu hoeft te doen, is het testen!

Open de Divi Builder, zoek uw Simple Header-module en probeer deze op een pagina te gebruiken. Als je de code goed hebt, zie je een eenvoudige header-optie.

Verzameling van Divi-modules

We hebben meer dan 70 gratis en premium divi-modules toegevoegd die alles omvatten, van het maken van pop-ups tot het toevoegen van extra ontwerpfuncties aan Divi Builder. Sommige zijn nichemodules die u niet vaak zult gebruiken, maar sommige zijn essentieel voor een soepel en efficiënt gebruik van Divi Builder.

We denken dat ze een dwarsdoorsnede zijn van wat er beschikbaar is, wat werkt en wat redelijk geprijsd is. Wat denk je?

Gebruik je een van deze Divi-modules? Heeft u modules om voor te stellen?

Over de auteur
David Attard
David heeft de afgelopen 21 jaar in of rond de online en digitale industrie gewerkt. Hij heeft ruime ervaring in de software- en webontwerpindustrie met behulp van WordPress, Joomla en de niches eromheen. Hij heeft gewerkt met softwareontwikkelingsbureaus, internationale softwarebedrijven, lokale marketingbureaus en is nu hoofd Marketing Operations bij Aphex Media - een SEO-bureau. Als digitale consultant ligt zijn focus op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door gebruik te maken van een combinatie van hun website en digitale platforms die vandaag de dag beschikbaar zijn. Zijn mix van technologische expertise gecombineerd met een sterk zakelijk inzicht geeft zijn geschriften een concurrentievoordeel.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!

Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...