Den ultimata guiden till Divi -moduler (officiell + tredje part)

Om du använder Divi -temat eller Divi Builder, du kommer regelbundet att arbeta med moduler. De är byggstenarna i temat som gör att du kan lägga till sidelement, styla dem, styra dem och använda dem för att skapa vackra webbplatser.

Problemet är när du är mitt i att designa eller försöka navigera dig runt Divi Builder, det är svårt att se exakt vad som finns tillgängligt.

Denna kompletta guide till Divi-moduler beskriver de 46 kärnmoduler som finns i Divi. Det kommer också att markera några gratis- och premiummoduler från tredjepartsutvecklare.

Allt så att du kan få ut det mesta av Divi för din eller din kunds webbplatser.

 

Innehåll[Show]

Den här artikeln är en av våra många Divi recensioner den där CollectiveRay har gjort för att täcka de olika aspekterna av Divi -temat och byggaren.

Behöver du få Divi till ett fyndpris? Vi har för närvarande en exklusiv rabatt från Elegant Themes:

Få Divi för 10% rabatt på September 2021 Endast

Om du behövde mer motivation för att köpa Divi och experimentera med de många Divi -modulerna här, en ny prestandauppdatering kommer att göra det.

Divi har nyligen revolutionerat sin kod så den är snabbare och lättare än någonsin tidigare.

Som en del av förbättringen har Divi krympt CSS med 94% och introducerat dynamisk CSS som bara laddar det som krävs, infört smarta stilar för att minska dubbletter och krympa filstorlekar, tagit bort renderingsblockerande CSS, optimerat JavaScript och lagt till ett dynamiskt PHP-ramverk för att öka funktionernas effektivitet.

Officiella Divi-moduler

Det finns 46 Divi-moduler för närvarande tillgängliga.

1. Dragspel

Dragspel

Dragspel lägger till en dragspelarmodul på en sida. Du vet när du ser en innehållsruta med ett valbart element och den glider ner för att avslöja mer innehåll? Det är ett dragspel.

För Divi är en dragspelsmodul ett valbart element som innehåller innehåll. Välj den första raden och den expanderar för att avslöja en kort förklaring eller översikt. Välj nästa rad och den första raden stängs och den andra raden öppnas. Det är ett elegant sätt att inkludera mycket innehåll i ett litet utrymme.

2. Ljud

Audio

Ljudmodulen har en ljudspelare som du kan placera var som helst på en sida. Du kan länka spelaren till en lokalt hostad ljudfil så att den spelas upp när en användare väljer den.

I Divi är Audio-modulen en enkel ljudspelare men om du känner till lite CSS kan du utforma det själv.

3. Barräknare

Barräknare

Bar Counter är de förloppsindikatorer som du ser på webbplatser över hela internet. Gjort rätt, de är ett omedelbart förståeligt mått på något och kan fungera mycket bra i rätt situation.

Divi Bar Counter kan färgas, anpassas för att passa nästan alla syften, konfigureras manuellt för specifika nivåer och användas på ett antal olika sätt.

4. blog

Blogg

Med Divi Blog-modulen kan du placera blogginlägg var som helst på en sida. Du kan inte bara placera dessa inlägg var som helst, du kan också utforma dem efter ditt tema.

Divi Blog-modulen ger fullständig frihet över var och hur du visar dina blogginlägg. Du är inte längre knuten till var WordPress eller ditt tema tycker att du borde ha dem med den här modulen.

5. Blurb

blurb

Blurb-modulen är ett innehållselement komplett med ikon och valfria animationer. Dessa är användbara för produkt- eller tjänstebeskrivningar på sidor, eftersom den valfria animeringsaspekten kan ge lite intresse för en sida.

Divi Blurb-modulen har en rad ikoner, färger och animeringsalternativ beroende på hur du använder dem. Vissa finns som standardvärden i modulen medan andra kan implementeras med CSS.

6. Knapp

knapp

Divi Button-modulen ger möjlighet att lägga till knappar var som helst på din webbplats, i valfri färg och ett brett utbud av former och storlekar. Designen kan kontrolleras i temainpassaren och länkar och effekter som konfigureras samtidigt.

De är en enkel men effektiv förlängning av de befintliga knappalternativen inom Divi.

7. Uppmaning

Uppmaning till handling

Uppmaningar till handling spelar en viktig roll i omvandlingen. Ju mer övertygande du kan göra dem, desto effektivare kan de bli. Det är där den här modulen kommer in.

Divi Call to Action-modulen ger ett enkelt sätt att bygga dina egna samtal till handling med en blandning av CTA-ruta, rubrik, innehåll och knapp för att öka konverteringarna var som helst på din webbplats.

8. Cirkelräknare

Cirkelräknare

Circle Counter-modulen fungerar på liknande sätt som Bar Counters men använder istället en helcirkelgrafik. Istället för en enkel stapel lägger modulen till en hel cirkel med täckta områden beroende på vilken procentandel du markerar som komplett.

Circle Counter fungerar med temainpassaren och kan anpassas helt för att passa alla teman.

9. kod

Koda

Divi Code-modulen är ett anpassat kodelement som du kan lägga till på vilken sida som helst. Den accepterar kortkoder, CSS och HTML och kan hjälpa dig åstadkomma en mängd saker på en sida.

De fungerar som anpassade CSS-element inom teman, bara du kan placera dem var som helst och få dem att göra nästan vad som helst eftersom de inte begränsas av temat.

10. Kommentarer

Kommentarer

Med Divi Comments-modulen kan du lägga till en kommentar från din blogg var som helst på sidan. Till exempel kan en rekommendation eller feedback från en bloggkommentar visas på en produktsida.

Istället för att använda en bild kan du inkludera den riktiga saken och sedan länka till huvudkommentaren, vilket bara ökar äktheten.

11. Kontaktformulär

Kontaktformulär

Kontaktformulärsmodulen är användbar om du inte vill använda ett plugin-plugin för kontaktformulär från tredje part. Du kan implementera ett formulär var som helst på sidan och utforma det med hjälp av temainpassaren.

Du kan skapa flera formulär, använda fältvalidering och villkorlig logik för att få alla formulär att fungera.

12. Nedräkningstimer

Nedräkning

Nedräkningstimrar används ofta för produktreleaser, nedräkningar till specialerbjudanden eller försäljning eller för att skapa tidsangst hos läsare.

Countdown Timer-modulen hjälper till med det genom att låta dig utforma en timer, lägga till din egen nedräkning och placera den var som helst på sidan.

13. Avdelare

divider

Avdelare är små men viktiga sätt att bryta upp webbsidor och ge publiken lite avbrott innan nästa avsnitt. De flesta webbteman verkar inkludera dem som en eftertanke, det är där Divi kommer in.

Divi-temat har avdelare men Divider-modulen lägger till mer.

14. E-postopt-in

E-post Anmäl dig

E-postopt-in-formulär är viktiga för att skapa e-postlistor och för att öka engagemanget. E-post är fortfarande ett otroligt kraftfullt marknadsföringsverktyg och e-post-in-modulen syftar till att hjälpa till med det.

Du kan skapa formulär, registrera dig för nyhetsbrev och leda genererande element med den här modulen och sedan länka den till ditt e-postprogram för att hantera det effektivt.

15. Filtrerbar portfölj

Filtrerbar portfölj

Den filtrerbara portföljmodulen är perfekt för att inkludera ett attraktivt portföljavsnitt på en sida. Du kan utforma den, konfigurera dina egna kategorier och filter och skapa en helt interaktiv portfölj.

Vissa Divi -teman har portföljelement inbyggda och Divi Builder har dem också men den här modulen lägger till ännu mer.

Galleri

Divi Gallery-modulen gör ungefär samma sak för gallerier. Det gör att du kan visa bilder och videor var som helst på en sida.

Galleriet kan anpassas helt och inkludera vilken bild du vill. Du kan ställa in stilen som ett rutnät eller skjutreglage och styra många aspekter av utseendet och känslan av det från anpassaren.

17. Bild

Bild

Divi Image-modulen lägger till ett antal alternativ när bilder visas på en sida. Du kan lägga till ljusboxeffekter, implementera lat laddning, lägga till animationer och få dina bilder att sticka ut.

Bilder har en kraftfull effekt på engagemang och tid på sidan så att göra dina bilder rättvisa är perfekt. Den här modulen kan hjälpa till med det.

18. Logga in

Logga in

Divi Login-modulen lägger till ett karaktäristiskt inloggningsformulär på sidor med den välbekanta utformningen av ditt tema. Modulen kan utformas så att den antingen sitter i bakgrunden eller sticker ut och märks.

Inloggningssidan loggar automatiskt in användaren på webbplatsen utan att omdirigera till standard WordPress-inloggningssidan.

19. Karta

Karta

Divi Map -modulen tar standardkartelementet och lägger till extra anpassningsalternativ och sömless integration på en sida. Eftersom kartor kan spela en integrerad roll på vissa webbplatser är detta ett mycket användbart tillägg att använda!

Kartan integreras med Google Maps för att markera platser eller lägga till interaktiva element. Det kan utformas för att matcha din sida också.

20. Nummerräknare

Nummerräknare

Number Counter-modulen är en annan grafisk enhet för att kommunicera med din publik. I stället för att använda en stapel eller cirkelgrafik använder denna modul enkla siffror för att kommunicera.

Det fungerar på samma sätt som de andra också. Formatera den i temainpassaren och placera den var som helst på sidan.

21. person

Person

Personmodulen lägger till personligheter på din webbplats. Oavsett om du vill visa upp författare, ge insikt i ditt team eller något annat, så är personmodulen hur du gör det.

Du kan lägga till en bild, en biografikopia, sociala medialänkar och lägga upp den var som helst på din webbplats. Det finns även anpassningsalternativ om du behöver det för att passa in i ett befintligt tema.

22. portfölj

Portfölj

Portföljmodulen bygger på de alternativ som tillhandahålls av Galleri genom att låta dig visa upp ditt arbete på ett antal sätt. Om du är frilansare eller småföretag och vill visa upp ditt arbete så är det här.

Modulen kan fungera med rutnät, layouter i full bredd, erbjuda kategorifilter och paginering. Det finns också några anpassningar du kan använda om du skulle behöva.

23. Postnavigering

Postnavigering

Postnavigering tar standardläsning nästa eller tidigare alternativ och gör dem mer attraktiva. Medan WordPress och många teman har dessa funktioner lägger Divi-alternativet till ännu mer verktyg.

Modulen låter dig inkludera attraktiva föregående och nästa knappar längst ner på inlägg så att läsarna kan arbeta sig igenom din blogg.

24. Inläggsreglage

post Slider

Modulen Post Slider är ett utmärkt sätt att visa upp dina blogginlägg. Den använder en skjutreglage för att rulla igenom en definierad serie blogginlägg för att visa upp ditt arbete och locka klick.

Medan många andra plugins erbjuder att lista eller visa blogginlägg kan en skjutreglage innehålla en färgstark bild och ett utdrag som säkert kommer att engagera. Mindre anpassningar är också möjliga med den här modulen.

25. Inläggstitel

Post titel

Posttitel-modulen är ett litet men användbart tillägg som använder Divi-styling för inläggstitlar. Den visar titeln och har också möjlighet att lägga till en utvald bild och alla metadata som du kanske vill visa också.

Modulen har några anpassningsalternativ som du kan använda för att passa in i ett tema men standardvärdena fungerar tillräckligt bra för de flesta användningsområden.

26. Prissättningstabeller

prissättnings Tabeller

Prissättningstabeller är ett av de element som väldigt få WordPress-teman verkar få rätt. Divi är inte en av dem. Standardtabellerna fungerar tillräckligt bra men du kan ladda det med modulen Pricing Tables.

Denna modul lägger till en anpassningsbar tabell som du kan passa på vilken sida som helst. Du kan ändra färger, valutor, antal funktioner och effekter efter behov.

Sök

Sök är en annan av de funktioner som vanligtvis är less än idealiskt. Standard WordPress -sökfunktion kan vara långsam och sakna det uppenbara. Vissa teman inkluderar sökning som ofta gör besviken. Divi Search -modulen ändrar allt detta.

Detta är en enkel sökruta som du kan placera var som helst och stil som passar ditt tema. Enkelt, snabbt och mycket effektivt.

28. Shop

Shoppa

Divi Shop-modulen är ett utmärkt tillägg till WooCommerce. Om du redan driver en butik låter den här modulen dig presentera produkter i ett fristående element var som helst på din webbplats. Det är ett utmärkt tillfälle att korsförsälja eller sälja.

Modulen låter dig sortera produkter, utforma elementet och utföra några anpassningar till skärmen också.

29. Sidebar

Sidebar

Sidebar-modulen är en av de mest användbara av någon modul i den här listan. Det tar ett vanligt sidofält och ger dig full kontroll över hur det ser ut, vad det har och hur det fungerar.

Modulen låter dig bygga anpassade sidofält med hjälp av temainpassaren och placera dem på alla sidor, vissa sidor eller specifika sidor.

30. Skjutreglaget

Slider

Skjutreglage kan vara omtvistade ämnen men det råder ingen tvekan om att de kan vara effektiva om de är utformade rätt. Divi Slider-modulen gör just det.

Det är en enkel skjutreglage som du kan placera var som helst på sidan och anpassa för att passa designen. Du kan också använda video, bilder, styra bildtypen och mycket mer.

31. Sociala medier Följ

Sociala medier Följ

Följ-knapparna är en annan sidfunktion som få teman lyckas få rätt. De är en så enkel funktion men kan ofta se klumpiga ut, inte fungerar ordentligt eller se ut som om de har lagts till med ett plugin.

Social Media Follow-modulen är annorlunda. Det lägger till några attraktiva ikoner med länkar och låter dig anpassa dem efter dina behov.

32. flikar

Flikar

Om Accordion-modulen inte är vad du letar efter, kanske Tabs-modulen. Detta är ett annat sätt att presentera mycket text utan att överbelasta sidan.

Med det här tillägget kan du skapa ett innehållselement med ett antal horisontella flikar som kan innehålla kopiering, bilder eller video.

33. Vittnesmål

Rekommendation

Modellen Testimonial lägger till socialt bevis på en sida. Vi vet alla hur viktigt socialt bevis är och med den här modulen kan du lägga till det var som helst.

Du har flera stylingsalternativ för att passa modulen på sidan, du kan ha en bild, en del kopia och länkar beroende på dina behov.

34. Text

text

Textmodulen låter dig komma åt WordPress-textredigeraren för att lägga till anpassad text var du vill. Det är ett annat mindre men användbart tillägg som ger mycket mer frihet när det gäller textplacering på en sida.

35. Växla

Växla

Divi Toggle-modulen fungerar på liknande sätt som dragspel genom att den växlar innehållsrutor för att glida öppna och stängda. Där Accordion använder en enda ruta med flera bilder, använder Toggle enskilda rutor som varje bild separat.

Det är ett användbart alternativ till dragspel där du kanske bara har ett par element du vill använda eller vill att alla element ska vara öppna samtidigt.

36. Video

Video

Du kan redan bädda in video i WordPress men du måste använda hela iFrame-URL: en i kodvyn. Divi Video-modulen sparar allt detta.

Modulen låter dig bädda in en uppladdad eller länkad video var som helst på en sida. Du kan också ställa in en anpassad bild istället för den första bilden och anpassa uppspelningsknappen.

37. Video -reglage

Video Slider

Video Slider-modulen tar video och lägger till en skjutreglage. Du kan ställa in en huvudvideo och visa ett antal andra under och låta skjutreglaget växla mellan dem.

Modulen låter dig anpassa den första bilden och spela upp-knappen, använda uppladdade eller länkade videor och placera dem var som helst på en sida.

38. Fullbreddskod

Fullbreddskod

Modulen Fullwidth Code fungerar med Divi-teman i full bredd och låter dig bädda in kod på en sida medan du behåller formateringen. Det är en enkel men effektiv modul som kan vara användbar för instruktionswebbplatser, utvecklarwebbplatser eller något annat.

39. Fullbreddshuvud

Rubrik för fullbredd

Med Fullwidth Header-modulen kan du skapa en rubrik med hela sidans bredd. Enkelt men mycket effektivt. Du kan ha en rubrik, underrubrik och kopiera tillsammans med upp till två knappar.

40. Fullbreddsbild

Fullbreddsbild

Fullbreddsbild är versionen i full bredd av bilden men fungerar sömlessi full bredd. Den har samma visnings- och anpassningsalternativ också.

41. Fullbreddskarta

Fullbreddskarta

Fullwidth Map-modulen fungerar precis som Maps men för sidor med full bredd. Du får också samma Google Map-kompatibilitet, anpassningsalternativ och användarvänlighet som den modulen.

42. Fullbreddsmeny

Fullbreddsmeny

Fullbreddsmenyn ger en anpassad meny som sträcker sig över en sida. Det tar standard WordPress-menyn och innehåller den i ett anpassat element. Du kan sedan anpassa menyn på vanligt sätt.

43. Fullbreddsportfölj

Fullbreddsportfölj

Denna modul tar standardportföljmodulen och får den att fungera med sidor i full bredd. Den har samma anpassningar och funktioner men fungerar med den här layouten.

44. Skjutreglage för fullbredd

Skjutreglage för fullbredd

Fullwidth Post Slider tar Post Slider-modulen och får den att fungera över hela sidans bredd. Den har samma verktyg och anpassningsalternativ som den modulen, vilket ger full kontroll över hur det ser ut för användaren.

45. Inläggstitel i full bredd

Fullbredds inläggstitel

Fullbredds inläggstitel är densamma som inläggstitel men fungerar fullbredd. Det är något vi föreställer oss att du skulle använda sparsamt på en sida men den här Divi-modulen ser till att du kan ha titlar i full bredd utan kodning.

46. ​​Reglage för fullbredd

Reglage för fullbredd

Fullwidth -reglaget tar reglermodulen och gör detsamma. Får det att fungera fellesslyster i full bredd. Detta är en mer användbar modul med full kontroll över hur bilderna ser ut och känns.

WooCommerce Divi-moduler

WooCommerce serveras mycket väl av Divi. Vissa utökar befintliga funktioner inom WooCommerce-sidor medan andra gör att du kan visa vissa butikselement på sidor som inte är butiker.

Var och en är värt att kolla in om du letar efter mer flexibilitet i hur du utformar din butik.

1. Woo Breadcrumb -modul

Woo Breadcrumb-modul

Brödsmulor används ofta på webbplatser för att hjälpa till med navigering. Woo Breadcrumb-modulen för Divi gör samma sak för din butik. Alternativen är enkla och inkluderar en kurssida, aktuell sida och valfri länk och separator.

Det är en enkel men effektiv modul som gör att du kan placera beskrivande brödsmulor högst upp på sidan för att hjälpa dina användare att navigera.

2. Woo titelmodul

Woo titelmodul

Denna modul låter dig ha full kontroll över produkttitlar. Du kan ändra titeln, utforma den och lägga till länkar, bakgrunder och konfigurera efter behov. Det bygger på standardtitelternativet genom att lägga till fler designverktyg och lite avancerat avstånd.

När du uppdaterar en titel med den här modulen kan du dessutom ställa in den så att den uppdateras automatiskt överallt på din webbplats.

3. Woo bildmodul

Woo bildmodul

Woo Image Module erbjuder full kontroll över produktbilder i din butik. Standardalternativen är bra, men det tar det längre. Du kan lägga till ett antal bilder, använda en miniatyrreglage och lägga till märken eller grafiska lager för erbjudanden eller något annat.

Modulen har några anpassningsalternativ som du kan använda för att utforma bilden och låter dig sedan placera den var du vill på vilken sida som helst.

Woo Gallery -modul

Woo Gallery-modulen bygger på bildmodulen genom att integrera bilder i ett produktgalleri. Det erbjuder liknande alternativ till Divi Gallery-modulen som vi nämnde tidigare och ger möjlighet att utforma galleriet och placera det var som helst, på vilken sida som helst.

Bilder säljer produkter, så det här är ett utmärkt alternativ om standardbildkapaciteten för WooCommerce inte levererar det du behöver.

5. Woo-prismodul

Woo-prismodul

Woo-prismodulen förlänger prissättningen och låter dig presentera produkter och priser på vilken sida som helst, inte bara lagra sidor. Det är ett anpassningsbart element som visar aktuellt pris, gammalt pris, försäljningspris och utformar de priser som passar ditt tema.

Medan det vanliga WooCommerce-tillägget har många inbyggda prissättningsalternativ, tar den här modulen ett steg längre och inkluderar möjligheten att marknadsföra på icke-produktsidor.

6. Woo Lägg i varukorgsmodul

Woo Lägg i varukorg Modul

Woo Add to Cart-modulen ger full kontroll över det faktiska köpet. Med den kan du utforma knappen Köp nu på vilket sätt du vill. Från vad det står till hur det ser ut och separera knappen från standard WooCommerce-layout.

Om standardpriset och knapplayouten av någon anledning inte fungerar för ditt tema, hjälper den här modulen med det. Du kan placera den var som helst, utforma den, visa ett kvantitetsalternativ och till och med en återstående lagervisning.

7. Woo Rating Module

Woo Rating Module

Betyg är allt i detaljhandeln. Produkter med högt betyg säljer icke-rankade produkter med en betydande marginal. Ökningen av recensioner och sociala bevis kan vara din att beordra med Woo Rating Module.

Det låter dig placera ett betyg på en sida, visa recensioner, visa antalet och genomsnittliga betyg för dessa recensioner och länkar till dem. Varje butik ska använda betyg och det är så här.

8. Woo lagermodul

Woo lagermodul

Woo Stock Module gör exakt vad den säger på burken. Det gör att du kan visa ett korrekt lagernummer i din produktdisplay. Detta kan hjälpa till att öka brådskandet, vilket i sin tur ökar omvandlingen.

Du kan utforma varje skärm för att hjälpa till med den brådskande situationen genom att markera lågt lager i rött eller högt lager i grönt, lägga till "Tillfälligt slut" -text och placera den var som helst på sidan.

9. Woo Meta-modul

Woo Meta-modul

Woo Meta-modulen tar hand om små detaljer som att visa SKU, taggar, kategorier och kompletterande data på en sida. Om du vill inkludera så mycket data som möjligt på sidor så hjälper den här modulen.

Det är inte en freeform-modul men kan ta intern meta och visa dem för alla att se. Du kan dock utforma designen.

10. Woo-beskrivningsmodul

Woo-beskrivningsmodul

Med Woo Description Module kan du visa en produktbeskrivning för en specifik produkt var som helst inom ett Divi-tema.

Det är en grundläggande men användbar modul som gör att du kan marknadsföra produkter på bloggsidor eller tjänstesidor och helt utforma utseendet och känslan av den beskrivningen.

11. Woo-flikmodul

Woo Tabs -modul

Woo Tabs-modulen fungerar på liknande sätt som Divi Tabs-modulen. Det installerar ett flikinnehållselement till en sida som du kan fylla med vilket innehåll du vill.

Flikar kan vara användbara för att kombinera flera informationskällor på en sida. Till exempel produktinformation, produktspecifikationer, leveransalternativ och recensioner i en enda låda med en flik för varje.

12. Woo tilläggsinformationsmodul

Woo tilläggsinformationsmodul

Woo-tilläggsinformationsmodulen är för dem som vill ha mer. Har du produkter med extra alternativ? Det här är modulen att använda. Till exempel skulle storlekar eller olika färger visas här.

Du kan utforma det hur du vill och placera det på en sida med standardanpassaren. Ett annat enkelt men värdefullt tillskott.

Woo-relaterade produkter-modul

Woo kompletterande informationsmodul bör behöva lite introduktion. Butiker thrive på korsförsäljning och merförsäljning och den här modulen är hur du gör det. Du kan lägga till ett avsnitt om relaterade produkter på en sida och lägga till stödinformation om så önskas.

Varje butik bör använda korsförsäljning och om de vanliga WooCommerce-alternativen inte räcker fungerar denna modul sömlessly med Divi.

14. Woo Upsell-modul

Woo Upsell-modul

Woo Upsell-modulen gör ungefär samma sak. Du kan lägga till detta på produktsidor eller till vilken sida som helst på din webbplats för att sälja produkter.

Produkterna i denna modul kommer att vara de du har ställt in som alternativ för försäljning i WooCommerce. Med den här modulen kan du bara placera dem var som helst på en sida.

15. Woo vagn meddelande modul

Woo vagn meddelande modul

Woo Cart Notice Module är ett tilläggsalternativ som lägger till ett enkelt meddelande på en produktsida som meddelar användaren att de har lagt till en produkt i kundvagnen. Det är en enkel men användbar interaktion som kan markera en bra butik från bara en bra.

Aviseringar kan vara stilar och med färger och teckensnitt. Standardinställningen använder din temafärg men du kan enkelt åsidosätta den om du föredrar.

16. Woo Recensions Module

Woo Recensions Module

Med Woo Reviews-modulen kan du placera produktrecensioner för dina artiklar på vilken sida som helst på din webbplats. Det är användbart för marknadsföringssidor eller blogginlägg för att lägga till det viktiga sociala beviset för att påverka ett köpbeslut.

Modulen låter dig ställa in specifika fält, visa antal kommentarer och påverka färg och stil. Det är en användbar modul om du marknadsför på andra platser än dina produktsidor.

10 av de bästa gratis Divi-modulerna

Det finns ett brett utbud av gratis Divi-moduler där ute och inte alla är skapade lika. Vi tycker att dessa 10 gratis Divi-moduler är väl värda att prova.

1. Divi Tweaker

Divi Tweaker

Divi Tweaker är en mycket smart modul som hjälper till att påskynda Divi Builder och WooCommerce, tar bort Query Strings som kan sakta ner sidladdning och kan ersätta lokala temafiler med filer som serveras från ett CDN.

Modulen lägger också till några extra designfunktioner för mobil och stationär, vissa animationer och effekter, sidövergångar, layoutalternativ och mycket mer.

2. Divi Advanced Text Module

Divi Advanced Text Module

Divi Advanced Text Module är en liten men mycket användbar modul som utvidgar de befintliga textalternativen och lägger till några användbara verktyg. Om du arbetar mycket med text, som vi gör, gör möjligheten att ändra bredden och höjden på textelementet en enorm skillnad när du försöker göra en sidlayout perfekt. Den här modulen gör det.

Det lägger också till ett verktyg för bildöverföring som förkortar designtiderna på ett litet men viktigt sätt.

3. Divi Slimbuilder

Divi Slimbuilder

Divi Slimbuilder är idealisk om du bygger målsidor eller längre sajter med Divi Builder. Det ändrar layouten för huvudfönstret så att sidelementen är smalare. Det ändrar också hur sektionstitlar visas för att göra hela designprocessen mycket smidigare.

Det är en liten sak men betyder att du kan se mycket mer av vad som händer med designens baksida utan att behöva fortsätta rulla upp och ner.

4. Artikelkort förlängning

Artikelkort förlängning

Artikelkort förlängning var tydligen Elegant Themesförsta Divi -modulen någonsin. Det är så användbart att det fortfarande finns och fortfarande är populärt idag. Det är en annan blygsam modul som lägger till fler stylingsalternativ till Divi Blog -modulen för att ändra hur bloggkorten visas.

Ändringarna är blygsamma och inkluderar skuggeffekter, bakgrundsfärger, möjligheten att utforma bloggrutan och ändra positionen för bloggtitel och meta.

5. Divi Icon Expansion Pack

Divi Icon Expansion Pack

Divi Icon Expansion Pack gör precis vad det säger att det gör. Det lägger till en rad handritade ikoner till Divi Builder för dig att använda i din design. Det finns hundratals att välja mellan och du kan anpassa dem alla efter ditt tema.

Det finns en gratis och en premiumversion av denna modul. Premien lägger till fler ikoner och anpassningsalternativ.

6. Expandera Divi

Expandera Divi

Expand Divi är en annan självförklarande Divi-modul. Det lägger till en rad funktioner i Divi, inklusive Lightbox, ett nytt avsnitt med relaterade inlägg, nya författarboxar, nya inläggselement, animatör för sidförladdning, Font Awesome-verktyg och mycket mer.

Modulen har inte uppdaterats på ett tag men vi testade den på den senaste versionen av WordPress och Divi och det fungerade bra.

7. Stridsdräkt för Divi

Stridsdräkt för Divi

Förutom att ha ett väldigt coolt namn har Battle Suit for Divi mycket att erbjuda. Det är en expansionsmodul som lägger till fler inlägg, sidfot, galleri och bildalternativ, lägger till Lightbox för bild och video, lägger till bildeffekter, posttitel- och metalternativ och massor av andra verktyg.

Med tanke på att detta är en gratis modul, det händer mycket här och modulen gör allt tillgängligt och väldigt enkelt att använda.

8. Enkel Divi Shortcode

Enkel Divi Shortcode

Enkel Divi Shortcode tar ett mycket kraftfullt verktyg i WordPress, kortkoder och låter dig placera dem var som helst i andra moduler. Det är ett annat mycket enkelt verktyg som kan göra stor skillnad om du använder kortkoder mycket på dina sidor.

Det finns en gratis och en premiumversion av detta plugin, men det kostnadsfria alternativet gör allt du sannolikt behöver för att göra.

9. Surbma Divi Extra

Surbma Divi Extra

Surbma Divi Extras lägger till några fler funktioner i Divi som några av er kanske tycker är användbara. En sak som gör att den sticker ut är alternativet textlogotyp. Du kanske inte behöver använda det ofta, men när du gör det gör det här verktyget ensam värt att använda.

Modulen lägger också till styling, layout, meny och sidfotalternativ och har ett mycket snyggt vertikalt mittalternativ för kopiering i en modul. Detta är ett annat av de verktyg som kan vara en äkta livräddare!

10. Popups för Divi

Popups för Divi

Popups för Divi är mycket användbart om du vill skapa en enda popup men inte vill använda ett dedikerat popup-plugin för WordPress. Det lägger till en funktion där du kan skapa ett element i byggaren och använda det som en popup för marknadsföring.

Det är en enkel lösning på ett allvarligt problem och perfekt för att skapa grundläggande popup-fönster på en sida utan att behöva använda eller betala för ett popup-plugin.

10 Premium Divi-moduler

Det finns hundratals premium Divi-moduler där ute. Vissa är värda investeringen och andra, inte så mycket. Dessa 10 är definitivt värda pengarna!

Divi-karusellmodul 2.0

Divi Carousel Module 2.0 hjälper dig att bygga karuseller för nästan vad som helst inom Divi. De kan vara användbara för produkter, tjänster, vittnesmål och alla typer av reklamfunktioner. Detta plugin får dem att hända.

Det låter dig skapa så många karuseller du vill och spara dem som mallar för att använda var som helst. Du har full kontroll över hur de ser ut och känns och all design görs inom byggaren. Ett fantastiskt alternativ för skärmar.

2. Divi E-handel

Divi E-handel

Divi E-handel arbetar med både Divi och WooCommerce för att genvägar bygga en webbutik. Den har ett par mönster att använda som mallar, några anpassade sidelement, demo-innehåll för att snabbt komma igång och allt du behöver för att bygga en grundläggande butik.

Modulen levereras även med sidofält, social delning, alternativ för produktlayout, nedräkningsklockor, trendiga produktmoduler och mycket fler alternativ. Om du inte gillar någon av Divi-demorna kan det här vara modulen för dig.

3. Divi Headers Pack

Divi Headers Pack

Du har nu möjlighet Divi Headers Pack är enorm. Det lägger till över 750 nya rubriker, några funktionella, några nya mönster. Det lägger tillcanvas menyalternativ, responsiva rubriker, menyeffekter, menyanimationer och massor av verktyg för styling av rubriker.

Denna modul har ett mycket snävt fokus men det är väl värt investeringen om du har problem med att hitta den perfekta rubriken. Om du inte hittar det här hittar du det inte någonstans!

4. Divi Supreme Pro

Divi Supreme Pro

Divi Supreme Pro innehåller en rad moduler för att förbättra din kreativitet när du använder Divi. Modulerna inkluderar Gradient Text, Flipbox, Text Divider, Divi Typing, Supreme Button, Facebook Feed och ett antal andra.

Det finns mycket i denna modul, över 40 olika moduler och 7 premiumtillägg. Med tanke på priset är Divi Supreme Pro ett fynd!

5. Divi evenemangskalender

Divi evenemangskalender

Divi Events Calendar kan användas för att bygga en fullständig eventhanteringswebbplats eller användas för att lägga till händelser till en standardwebbplats. Den använder standarden Divi Builder för att skapa evenemang och har allt du behöver för att styla och visa dem.

Denna modul innehåller en kalender, en karusell, ett evenemangsflöde och en sidmodul som hjälper dig att skapa en fullt fungerande evenemangswebbplats eller evenemangssektion och det är väl värt att kolla in det.

6. Table Maker

Table Maker

Vissa människor tycker att det är enkelt med bord medan andra tycker att det är en frustrerande röra. Om du är i det senare lägret, Table Maker modulen är för dig. Det gör att du snabbt kan bädda in en tabell på en sida och utforma allt om den.

Du kan lägga till bilder, ikoner, texter, knappar och till och med kollapsa rader för mobilen. Det är ett mycket kraftfullt plugin som gör kort arbete med att lägga till och styla tabeller till vilken sida som helst och för det är det väl värt att köpa.

7. Divi Modal Popup

Divi Modal Popup

Om du vill använda popup-fönster och Popups för Divi räcker inte, kommer Divi Modal Popup att vara det. Det är en funktionsrik modul som gör kort arbete med att skapa popup-fönster från sidladdning, tidsfördröjning och en rad andra utlösare.

Ännu viktigare, du kan inkludera hela utbudet av sidelement, placera din popup var som helst, låta den utlösas av vad som helst på sidan och lägga till animationer i själva popupen. Om du vill öka engagemanget i popup-fönster är det här du använder.

8. Divi Responsive Helper

Divi Responsive Helper

Divi Responsive Helper är ett verktyg som hjälper dig att se exakt hur din sida kommer att laddas på mobilen från Builder. Du kan också ändra hur den ser ut, hur den laddas, ändra ordningen på elementen och helt kontrollera hur din webbplats ser ut på mobila enheter.

Modulen innehåller också ett mycket smart automatiskt fixeringsverktyg som kan balansera meningar eller stycken så att de ser bättre ut. Det bara gör det värt att köpa!

Divi murverk galleri

Divi Masonry Gallery är perfekt om du vill ha mer från en portfölj eller bloggsida. Det tar standard murlayout och lägger till möjligheten att skapa olika former, ändra kolumner, lägga till eller ta bort utrymme, lägga till modala popup-fönster och konfigurera ett specifikt galleri för mobil.

Om du utformar en bildrik webbplats och vill göra mer med murverk, låter den här modulen dig göra allt från det välbekanta Builder-gränssnittet.

10. Divi MadMeny

Divi MadMeny

Divi MadMenu lägger till fler alternativ till menysektionen i Divi Builder. Om standardinställningarna inte räcker till lägger denna modul till mer. Det delar också upp en rubrik i separata sektioner för enkel anpassning.

Modulen låter dig styra hur menyn fungerar på olika skärmstorlekar, ställa in olika layouter för olika enheter, lägger till Ajax-element för produkter, lägger till samtal till åtgärder och andra element också. Det är ett kraftfullt sätt att bemästra rubriker.

Om du letar efter ytterligare funktioner, kolla in vår artikel om Divi-plugins.

Hur du utvecklar din egen anpassade Divi-modul

Vill du utveckla din egen Divi-modul? Har du ett problem som inte täcks av en befintlig modul?

Denna del av artikeln är här för att hjälpa till.

Vi kommer att beskriva grunderna för att utveckla din egen anpassade Divi -modul. Du behöver grundläggande PHP -färdigheter för att slutföra detta avsnitt som Divi Builder definierar moduler som PHP -klasser.

Först måste du skapa ett Divi-tillägg. Du måste göra detta först eftersom din anpassade Divi-modul implementeras inom ett tillägg, tema eller underordnat tema och tillägget är det enklaste att skapa.

Läs den här guiden för att skapa ditt tillägg. När du är klar, kom tillbaka hit för att skapa din modul.

Öppna ditt tillägg och leta reda på inkluderade / moduler

Skapa en katalog som heter SimpleHeader

Skapa en fil i SimpleHeader och kalla den SimpleHeader.php

Klistra in följande i filen och spara


klass SIMP_SimpleHeader utökar ET_Builder_Module {
          public $ slug = 'simp_simple_header';
          public $ vb_support = 'on';
          public function init () {
                   $ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
          }
          offentlig funktion get_fields () {
                   returmatris (
                             'heading' => array (
                                      'label' => esc_html __ ('Heading', 'simp-simple-extension'),
                                      'typ' => 'text',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Ange önskad rubrik här.', 'simp-simple-extension'),
                                      'toggle_slug' => 'huvudinnehåll',
                             ),
                             'content' => array (
                                      'label' => esc_html __ ('Content', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Innehållet som anges här kommer att visas under rubriktexten.', 'simp-simple-extension'),
                                      'toggle_slug' => 'huvudinnehåll',
                             ),
                   );
          }
          public function render ($ unprocessed_props, $ content = null, $ render_slug) {
          }
}
ny SIMP_SimpleHeader;

Om du kan din PHP ser du en grundläggande rubrik som kan användas av Divi Builder. Du kommer att se en rubrik, lite innehåll och bakgrund.

Lägg nu till lite HTML i filen så att den kan renderas.

Lägg till följande efter 'public function render ($ unprocessed_props, $ content = null, $ render_slug) {'

                   retur sprintf (

                             '' % 1 $ s

                             % 2 $ s ',

                             esc_html ($ this-> rekvisita ['rubrik']),

                             $ this-> rekvisita ['content']

                   );

          }

}

ny SIMP_SimpleHeader;

Din fullständiga fil ska se ut så här:


klass SIMP_SimpleHeader utökar ET_Builder_Module {
          public $ slug = 'simp_simple_header';
          public $ vb_support = 'on';
          public function init () {
                   $ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
          }
          offentlig funktion get_fields () {
                   returmatris (
                             'heading' => array (
                                      'label' => esc_html __ ('Heading', 'simp-simple-extension'),
                                      'typ' => 'text',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Ange önskad rubrik här.', 'simp-simple-extension'),
                                      'toggle_slug' => 'huvudinnehåll',
                             ),
                             'content' => array (
                                      'label' => esc_html __ ('Content', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Innehållet som anges här kommer att visas under rubriktexten.', 'simp-simple-extension'),
                                      'toggle_slug' => 'huvudinnehåll',
                             ),
                   );
          }
          public function render ($ unprocessed_props, $ content = null, $ render_slug) {
                   retur sprintf (
                             '' % 1 $ s
                             % 2 $ s ',
                             esc_html ($ this-> rekvisita ['rubrik']),
                             $ this-> rekvisita ['content']
                   );
          }
}
ny SIMP_SimpleHeader;

Om det gör det är det nu dags att skapa React Komponentklass som låter Divi Builder återge modulen.

Skapa en fil och kalla den SimpleHeader.jsx

Klistra in följande och spara det

// Externa beroenden
importera React, {Component, Fragment} från 'react';
// Interna beroenden
importera './style.css';
klass SimpleHeader utökar komponent {
  statisk slug = 'simp_simple_header';
  framställa() {
    lämna tillbaka (
      
        {this.props.content ()}
      </div>
    );
  }
}
exportera standard SimpleHeader;

Navigera till inkluderar / modules / index.js i din tilläggsfil

Lägg till och spara följande

// Interna beroenden
importera SimpleHeader från './SimpleHeader/SimpleHeader';
export standard [
  SimpleHeader,
];

Lägg till följande till SimpleHeader.jsx efter   

framställa() {
    lämna tillbaka (
och spara det.
  
        {this.props.heading}
        

Hela filen ska nu se ut så här:

// Externa beroenden
importera React, {Component, Fragment} från 'react';
// Interna beroenden
importera './style.css';
klass SimpleHeader utökar komponent {
  statisk slug = 'simp_simple_header';
  framställa() {
    lämna tillbaka (
      
        {this.props.heading}
        
          {this.props.content ()}
        
      
    );
  }
}
exportera standard SimpleHeader;

Öppna modulens style.css och lägg till

.simp-simple-header-heading {
          marginal-botten: 20px;
}

Det är det för att utveckla din Divi-modul. Allt du behöver göra nu är att testa det!

Öppna Divi Builder, hitta din Simple Header -modul och försök använda den på en sida. Om du har koden rätt ser du ett enkelt rubrikalternativ.

Sammanfattning av Divi-moduler

Vi har inkluderat över 70 gratis och premium divi -moduler som täcker allt från att skapa popup -fönster till att lägga till extra designfunktioner till Divi Builder. Vissa är nischmoduler som du inte kommer att använda särskilt ofta men vissa är avgörande för en smidig och effektiv användning av Divi Builder.

Vi tror att de representerar ett tvärsnitt av vad som finns tillgängligt, vad som fungerar och vad som är förnuftigt prissatt. Vad tror du?

Använder du någon av dessa Divi-moduler? Har du några moduler att föreslå?

Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...