70+ Divi Modules Ultimate Guide 2024 (Officiel / 3. part)

Hvis du bruger Divi -temaet eller Divi Builder, vil du jævnligt arbejde med Divi-moduler. De er byggestenene inden for temaet, der gør det muligt for dig at tilføje sideelementer, style dem, kontrollere dem og bruge dem til at skabe smukke hjemmesider.

Problemet er, når du er midt i at designe eller forsøge at navigere dig rundt Divi Builder, det er svært at se præcis, hvad der er tilgængeligt.

Denne komplette guide til Divi-moduler beskriver de 46 kernemoduler, der findes i Divi. Det vil også fremhæve nogle gratis og premium-moduler fra tredjepartsudviklere.

Alt, så du kan få mest muligt ud af Divi til din eller din klients websteder.

Indhold[show]

Denne artikel er en af ​​vores mange Divi anmeldelser at CollectiveRay har gjort for at dække de forskellige aspekter af Divi -temaet og bygherren. Se også vores liste over eksempler på brug af Divi -tema at oprette forbløffende websteder.

Har du brug for at få Divi til en god pris? Vi har i øjeblikket en eksklusiv rabat fra Elegant Themes:

Få Divi til 10 % rabat kun i marts 2024

Hvis du havde brug for mere motivation til at købe Divi og eksperimentere med de mange Divi -moduler her, en nylig ydeevneopdatering vil gøre det.

Divi har for nylig revolutioneret sin kode, så den er hurtigere og lettere end nogensinde før.

Som en del af forbedringen har Divi reduceret CSS med 94% og introduceret dynamisk CSS, der kun indlæser det, der kræves, introducerede smarte styles til at reducere dubletter og krympe filstørrelser, fjerne render-blokerende CSS, optimeret JavaScript og tilføjede en dynamisk PHP-ramme for at øge effektiviteten af ​​funktioner.

Officielle Divi-moduler

Der er i øjeblikket 46 Divi-moduler tilgængelige.

1. Akkordeon

Harmonika

Harmonika tilføjer et harmonika skyder modul til en side. Du ved, hvornår du ser et indholdsfelt med et valgbart element, og det glider ned for at afsløre mere indhold? Det er et harmonika.

For Divi er et harmonika-modul et valgbart element, der indeholder indhold. Vælg den første linje, og den udvides for at afsløre en kort forklaring eller oversigt. Vælg den næste linje, så lukkes den første linje, og den anden åbnes. Det er en elegant måde at medtage meget indhold på et lille rum.

2. Lyd

Audio

Audio-modulet giver en lydafspiller, som du kan placere hvor som helst på en side. Du kan linke afspilleren til en lokalt hostet lydfil, så den afspilles, når en bruger vælger den.

I Divi er lydmodulet en simpel lydafspiller, men hvis du kender lidt CSS, kan du selv style det.

3. Bar tællere

Bar tællere

Bar Counters er de statusbjælker, du ser på websteder over hele Internettet. Udført rigtigt, de er et umiddelbart forståeligt mål for noget og kan fungere meget godt i den rigtige situation.

Divi Bar Counters kan farves, tilpasses til næsten ethvert formål, konfigureres manuelt til bestemte niveauer og bruges på mange måder.

4. blog

Blog

Divi Blog-modulet giver dig mulighed for at placere blogindlæg hvor som helst på en side. Ikke kun kan du placere disse indlæg hvor som helst, du kan også style dem, så de passer til dit tema.

Divi Blog-modulet giver fuld frihed over, hvor og hvordan du viser dine blogindlæg. Du er ikke længere bundet til, hvor WordPress eller dit tema mener, at du skal have dem med dette modul.

5. Blurb

bagsidetekst

Blurb-modulet er et indholdselement komplet med ikon og valgfri animationer. Disse er nyttige til produkt- eller tjenestebeskrivelser på sider, da det valgfri animationsaspekt kan tilføje en lille interesse for en side.

Divi Blurb-modulet har en række ikoner, farver og animationsindstillinger afhængigt af hvordan du bruger dem. Nogle er indeholdt som standardindstillinger i modulet, mens andre kan implementeres med CSS.

6. Knap

knap

Divi Button-modulet giver mulighed for at tilføje knapper overalt på dit websted, i enhver farve og en bred vifte af former og størrelser. Designet kan styres i temaet tilpasning og links og effekter konfigureret på samme tid.

De er en simpel, men effektiv udvidelse af de eksisterende knapindstillinger i Divi.

7. Opfordring til handling

Opfordring til handling

Opfordringer til handling spiller en vigtig rolle i konvertering. Jo mere overbevisende du kan gøre dem, jo ​​mere effektive kan de være. Det er her dette modul kommer ind.

Divi Call to Action-modulet giver en nem måde at opbygge dine egne opfordringer til handling ved hjælp af en blanding af CTA-boks, overskrift, indhold og knap for at hjælpe med at øge konverteringer hvor som helst på dit websted.

8. Cirkeltæller

Cirkeltæller

Circle Counter-modulet fungerer på samme måde som Bar Counters, men bruger i stedet en hel cirkelgrafik. I stedet for en simpel bjælke tilføjer modulet en fuld cirkel med områder, der er dækket afhængigt af hvilken procentdel du markerer som komplet.

Circle Counter fungerer med temaet tilpasning og kan tilpasses fuldt ud, så det passer til ethvert tema.

9. kode

Kode

Divi Code-modulet er et brugerdefineret kodeelement, som du kan føje til enhver side. Det accepterer kortkoder, CSS og HTML og kan hjælpe dig med at udføre en lang række ting på en side.

De fungerer svarende til tilpassede CSS-elementer inden for temaer, kun du kan placere dem hvor som helst og få dem til at gøre næsten hvad som helst, da de ikke er begrænset af temaet.

10. Kommentarer

Kommentarer

Divi Comments-modulet giver dig mulighed for at tilføje en kommentar fra din blog hvor som helst på siden. For eksempel kan en anbefaling eller feedback fra en blogkommentar vises på en produktside.

I stedet for at bruge et billede kan du medtage den rigtige ting og derefter linke til hovedkommentaren, hvilket bare tilføjer ægtheden.

11. Kontaktformular

Kontaktformular

Kontaktformularmodulet er nyttigt, hvis du ikke vil bruge et plugin til kontaktformular fra tredjepart. Du kan implementere en formular hvor som helst på siden og style den ved hjælp af temaet tilpasning.

Du kan oprette flere formularer, bruge feltvalidering og betinget logik til at få enhver form til at fungere.

12. Nedtællingsur

Nedtællingstimer

Nedtællingstimere bruges ofte til produktudgivelser, nedtællinger til specialtilbud eller salg eller til at skabe tidsangst hos læsere.

Nedtællingstimermodulet hjælper med det ved at lade dig style en timer, tilføje din egen nedtælling og placere den hvor som helst på siden.

13. Opdeler

Divider

Skillevægge er små, men vigtige måder at bryde websider op og give publikum lidt pause inden næste afsnit. De fleste webtemaer ser ud til at inkludere dem som en eftertanke, hvor Divi kommer ind.

Divi-temaet har skillevægge, men Divider-modulet tilføjer mere.

14. Tilmelding via e-mail

E-mail Tilmeld dig

Tilmeldingsformularer til e-mail er vigtige for at opbygge e-mail-lister og for at øge engagementet. E-mail er stadig et utroligt kraftfuldt marketingværktøj, og modulet Email Opt-in har til formål at hjælpe med det.

Du kan oprette formularer, tilmeldinger til nyhedsbrev og leadgenererende elementer ved hjælp af dette modul og derefter linke det til dit e-mail-program for at hjælpe med at administrere det effektivt.

15. Filtrerbar portefølje

Filtrerbar portefølje

Det filtrerbare porteføljemodul er ideelt til at inkludere en attraktiv porteføljesektion på en side. Du kan style det, konfigurere dine egne kategorier og filtre og oprette en fuldt interaktiv portefølje.

Nogle Divi -temaer har indbyggede porteføljeelementer og Divi Builder har dem også, men dette modul tilføjer endnu mere.

Galleri

Divi Gallery-modulet gør meget det samme for gallerier. Det giver dig mulighed for at fremvise billeder og videoer hvor som helst på en side.

Galleriet kan tilpasses fuldt ud og inkluderer ethvert billede, du kan lide. Du kan indstille stilen som et gitter eller en skyder og kontrollere mange aspekter af udseendet og følelsen af ​​det fra tilpaseren.

17. Billede

Billede

Divi Image-modulet tilføjer en række indstillinger, når billeder vises på en side. Du kan tilføje lysbokseffekter, implementere doven indlæsning, tilføje animationer og få dine billeder til at skille sig ud.

Billeder har en stærk effekt på engagement og tid på siden, så det er fornuftigt at gøre dine billeder retfærdige. Dette modul kan hjælpe med det.

18. Log på

Login

Divi Login-modulet tilføjer en karakteristisk loginformular til sider ved hjælp af den velkendte styling af dit tema. Modulet kan designes, så det passer til siden, så det enten sidder i baggrunden eller skiller sig ud og bemærkes.

Login-siden logger automatisk brugeren ind på webstedet uden at omdirigere til standard WordPress-login-siden.

19. Kort

Kort

Divi Map -modulet tager standardkortelementet og tilføjer ekstra tilpasningsmuligheder og sømless integration på en side. Da kort kan spille en integreret rolle på nogle websteder, er dette en meget nyttig tilføjelse at bruge!

Kort integreres med Google Maps for at fremhæve placeringer eller tilføje interaktive elementer. Det kan også designes, så det matcher din side.

20. Taletæller

Antal tæller

Number Counter-modulet er en anden grafisk enhed til kommunikation med dit publikum. I stedet for at bruge en bjælke eller cirkelgrafik bruger dette modul enkle tal til at kommunikere.

Det fungerer på samme måde som de andre også. Stil det i temaet tilpasning og placer det hvor som helst på siden.

21. person

Person

Personmodulet tilføjer personligheder til dit websted. Uanset om du vil fremvise forfattere, give indsigt i dit team eller noget andet, er personmodulet, hvordan du gør det.

Du kan tilføje et billede, en biografikopi, links til sociale medier og placere det hvor som helst på dit websted. Der er også tilpasningsmuligheder, hvis du har brug for det til at passe ind i et eksisterende tema.

22. portefølje

Portefølje

Porteføljemodulet bygger på de muligheder, der gives af Galleri, ved at lade dig vise dit arbejde på en række måder. Hvis du er freelancer eller en lille virksomhed og vil vise dit arbejde, er det sådan.

Modulet kan arbejde med gitre, layouter i fuld bredde, tilbyde kategorifiltre og paginering. Der er også nogle tilpasninger, du kan anvende, hvis du har brug for det.

23. Postnavigation

Post Navigation

Postnavigation tager standardlæsning næste eller forrige indstillinger og gør dem mere attraktive. Mens WordPress og mange temaer har disse funktioner, tilføjer Divi-indstillingen endnu mere nytte.

Modulet giver dig mulighed for at inkludere attraktive forrige og næste knapper i bunden af ​​indlæg for at give læsere mulighed for at arbejde sig igennem din blog.

24. Indlægsskyder

Indlæg Slider

Post Slider-modulet er en fantastisk måde at fremvise dine blogindlæg på. Det bruger en skyder til at rulle gennem en defineret række blogindlæg for at vise dit arbejde og tiltrække klik.

Mens mange andre plugins tilbyder at vise eller vise blogindlæg, kan en skyder indeholde et farverigt billede og et uddrag, der helt sikkert vil engagere sig. Mindre tilpasninger er også mulige med dette modul.

25. Indlægstitel

Indlæg Titel

Posttitel-modulet er en lille, men nyttig tilføjelse, der bruger Divi-styling til posttitler. Det viser titlen og har også mulighed for at tilføje et fremhævet billede og de metadata, du måske også vil have vist.

Modulet har et par tilpasningsmuligheder, du kan bruge til at passe det ind i et tema, men standardindstillingerne fungerer godt nok til de fleste anvendelser.

26. Prissætningstabeller

Priser Tabeller

Prissætningstabeller er et af de elementer, som meget få WordPress-temaer ser ud til at få ret. Divi er ikke en af ​​dem. Standardtema-tabellerne fungerer godt nok, men du kan overbelaste det med Pricing Tables-modulet.

Dette modul tilføjer en tabel, der kan tilpasses, som du kan passe på enhver side. Du kan ændre farver, valutaer, antal funktioner og effekter efter behov.

Søg

Søgning er en anden af ​​de funktioner, der normalt er less end ideelt. Standard WordPress -søgefunktionen kan være langsom og gå glip af det indlysende. Nogle temaer inkluderer søgning, der ofte skuffer. Divi Search -modulet ændrer alt det.

Dette er et simpelt søgefelt, du kan placere hvor som helst og stil, så det passer til dit tema. Enkel, hurtig og meget effektiv.

28. butik

Shop

Divi Shop-modulet er en fremragende udvidelse til WooCommerce. Hvis du allerede driver en butik, giver dette modul dig mulighed for at vise produkter i et enkeltstående element hvor som helst på dit websted. Det er en glimrende mulighed for at krydssælge eller upsell.

Modulet giver dig mulighed for at sortere produkter, style elementet og udføre et par tilpasninger til skærmen også.

29. Sidebar

Sidebar

Sidebar-modulet er et af de mest nyttige af ethvert modul på denne liste. Det tager et standard sidebjælke og giver dig fuld kontrol over, hvordan det ser ud, hvad det har, og hvordan det fungerer.

Modulet giver dig mulighed for at oprette brugerdefinerede sidebjælker ved hjælp af tematilpasningen og placere dem på alle sider, nogle sider eller bestemte sider.

30. skyderen

skyderen

Glidere kan være omstridte emner, men der er ingen tvivl om, at de kan være effektive, hvis de er stylet rigtigt. Divi Slider-modulet gør netop det.

Det er en simpel skyder, du kan placere hvor som helst på siden og tilpasse, så den passer til designet. Du kan også bruge video, billeder, kontrollere diasetypen og meget mere.

31. Følg sociale medier

Sociale medier Følg

Følg knapper er en anden sidefunktion, som få temaer formår at få ret. De er sådan en simpel funktion, men kan ofte se klodset ud, ikke fungere ordentligt eller se ud som om de er blevet tilføjet med et plugin.

Social Media Follow-modulet er anderledes. Det tilføjer nogle attraktive ikoner med links og giver dig mulighed for at tilpasse dem, så de passer til dine behov.

32. Faner

Tabs

Hvis Accordion-modulet ikke er det, du leder efter, er Tabs-modulet måske det. Dette er en anden måde at præsentere meget tekst på uden at overbelaste siden.

Denne tilføjelse giver dig mulighed for at oprette et indholdselement med et antal vandrette faner, der kan indeholde kopi, billeder eller video.

33. Udtalelse

Testimonial

Testimonial-modulet føjer socialt bevis til en side. Vi ved alle, hvor vigtigt socialt bevis er, og dette modul giver dig mulighed for at tilføje det hvor som helst.

Du har flere stylingmuligheder, der passer til modulet på siden, du kan have et billede, nogle kopier og links afhængigt af dine behov.

34. Tekst

tekst

Tekstmodulet giver dig adgang til WordPress-teksteditoren for at tilføje tilpasset tekst hvor som helst du vil. Det er en anden mindre, men nyttig tilføjelse, der giver meget mere frihed med hensyn til tekstplacering på en side.

35. Skift

Skift

Divi Toggle-modulet fungerer på samme måde som Accordion, idet det skifter indholdsfelter for at glide åbent og lukket. Hvor Accordion bruger et enkelt felt med flere dias, bruger Toggle individuelle felter, der hver glider individuelt.

Det er et nyttigt alternativ til Harmonika, hvor du måske kun har et par elementer, du vil bruge eller ønsker at alle elementer skal åbnes på én gang.

36. video

video

Du kan allerede integrere video i WordPress, men du skal bruge hele iFrame-URL'en i kodevisningen. Divi Video-modulet gemmer alt det.

Modulet giver dig mulighed for at integrere en uploadet eller linket video hvor som helst på en side. Du kan også indstille et brugerdefineret billede i stedet for den første ramme og tilpasse afspilningsknappen.

37. Video -skyder

Video -skyder

Video Slider-modulet tager video og tilføjer en skyder. Du kan indstille en hovedvideo og have et antal andre nedenunder og lade skyderen skifte mellem dem.

Modulet giver dig mulighed for at tilpasse det første billede og afspil-knap, bruge uploadede eller linkede videoer og placere dem hvor som helst på en side.

38. Kode for fuld bredde

Fuldbreddekode

Fullwidth Code-modulet fungerer med Divi-temaer i fuld bredde og lader dig integrere kode på en side, mens du bevarer formateringen. Det er et simpelt, men effektivt modul, der kan være nyttigt til vejledningswebsteder, udviklerwebsteder eller noget andet.

39. Overskrift til fuldbredde

Overskrift til fuldbredde

Fullwidth Header-modulet giver dig mulighed for at oprette en header ved hjælp af sidens fulde bredde. Enkel, men meget effektiv. Du kan have en overskrift, underoverskrift og kopiere sammen med op til to knapper.

40. Fuldbreddebillede

Fuldbreddebillede

Fullwidth Image er versionen i fuld bredde af Image, men fungerer sømlessi design i fuld bredde. Det har også alle de samme display- og tilpasningsmuligheder.

41. Fuldbreddekort

Fuldbreddekort

Fullwidth Map-modulet fungerer ligesom Maps, men til sider i fuld bredde. Du får også den samme Google Map-kompatibilitet, tilpasningsmuligheder og brugervenlighed som det modul.

42. Fuldbreddemenu

Fuldbreddemenu

Fuldbreddemenu giver en brugerdefineret menu, der strækker sig på tværs af en side. Det tager standard WordPress-menuen og indeholder den i et brugerdefineret element. Du kan derefter tilpasse menuen på den sædvanlige måde.

43. Portefølje med fuld bredde

Fuldbreddeportefølje

Dette modul tager standardporteføljemodulet og får det til at fungere med sider i fuld bredde. Det har de samme tilpasninger og funktioner, men fungerer med dette layout.

44. Glideren til indlæg i fuldbredde

Fuldbredde-postskyder

Fullwidth Post Slider tager Post Slider-modulet og får det til at arbejde på tværs af den fulde bredde af en side. Det har de samme hjælpeprogrammer og tilpasningsmuligheder som det modul, der giver fuld kontrol over, hvordan det ser ud for brugeren.

45. Titel i fuld bredde

Fuld bredde Post titel

Fuldbreddets posttitel er den samme som posttitlen, men fungerer fuldbredden. Det er noget, vi forestiller os, at du ville bruge sparsomt på en side, men dette Divi-modul sørger for, at du kan have titler i fuld bredde uden nogen kodning.

46. ​​Fuldbredde

Fuldbredde

Fullwidth -skyderen tager slider -modulet og gør det samme. Får det til at fungere fejlfritlessly med et design i fuld bredde. Dette er et mere nyttigt modul med fuld kontrol over, hvordan diasene ser ud og føles.

WooCommerce Divi-moduler

WooCommerce serveres meget godt af Divi. Nogle udvider eksisterende funktioner inden for WooCommerce-sider, mens andre giver dig mulighed for at vise nogle butikselementer på sider uden for butikken.

Hver er værd at tjekke ud, hvis du leder efter mere fleksibilitet i, hvordan du designer din butik.

1. Woo Breadcrumb-modul

Woo Breadcrumb-modul

Brødsmuler bruges ofte på websteder til at hjælpe navigationen. Woo Breadcrumb-modulet til Divi gør det samme for din butik. Indstillingerne er enkle og inkluderer en kursusside, den aktuelle side og valgfrit link og separator.

Det er et simpelt, men effektivt modul, der giver dig mulighed for at placere beskrivende brødkrummer øverst på siden for at hjælpe dine brugere med at navigere.

2. Woo-titelmodul

Woo-titelmodul

Dette modul giver dig fuld kontrol over produkttitler. Du kan ændre titlen, formatere den og tilføje links, baggrunde og konfigurere efter behov. Det bygger på standardtitelindstillingen ved at tilføje flere designværktøjer og nogle avancerede mellemrum.

Hvad mere er, når du opdaterer en titel med dette modul, kan du indstille den til automatisk at opdatere overalt på dit websted.

3. Woo-billedmodul

Woo-billedmodul

Woo Image Module giver fuld kontrol over produktbilleder i din butik. Standardindstillingerne er gode, men dette tager det længere. Du kan tilføje et antal billeder, bruge en miniatureskyder og tilføje badges eller grafiske lag til tilbud eller noget andet.

Modulet har et par tilpasningsmuligheder, du kan bruge til at style billedet og derefter lade dig placere det hvor som helst du vil på en hvilken som helst side.

Woo Gallery-modul

Woo Gallery-modulet bygger på Image Module ved at inkorporere billeder i et produktgalleri. Det tilbyder lignende muligheder som Divi Gallery-modulet, vi nævnte tidligere, og giver mulighed for at style galleriet og placere det hvor som helst, på enhver side.

Billeder sælger produkter, så dette er en glimrende mulighed, hvis WooCommerce's standardbilledkapacitet ikke leverer det, du har brug for.

5. Woo-prismodul

Woo-prismodul

Woo-prismodulet udvider priserne og giver dig mulighed for at præsentere produkter og priser på enhver side, ikke kun gemme sider. Det er et element, der kan tilpasses, der viser aktuel pris, gammel pris, salgspris og designer disse priser, så de passer til dit tema.

Mens standard WooCommerce-plugin har mange indbyggede prisindstillinger, tager dette modul det et skridt videre og inkluderer muligheden for at promovere på ikke-produktsider.

6. Woo Tilføj til kurv-modul

Woo Tilføj til kurv Modul

Woo Add to Cart-modulet giver fuld kontrol over det faktiske køb. Med den kan du style Buy It Now-knappen på den måde, du vil. Fra hvad der står til hvordan det ser ud, og adskil knappen fra standard WooCommerce-layout.

Hvis standardprisen og knaplayoutet af en eller anden grund ikke fungerer for dit tema, hjælper dette modul med det. Du kan placere den hvor som helst, style den, vise en mængdemulighed og endda en resterende lagervisning.

7. Woo-vurderingsmodul

Woo-vurderingsmodul

Vurderinger er alt i detailhandlen. Højt vurderede produkter sælger ikke-klassificerede produkter med en betydelig margen. Stigningen af ​​anmeldelser og socialt bevis kan være din ordre med Woo Rating Module.

Det giver dig mulighed for at placere en vurdering på en side, vise anmeldelser, vise antallet og gennemsnittet af disse anmeldelser og links til dem. Hver butik skal bruge ratings, og det er sådan, man gør det.

8. Woo lagermodul

Woo lager modul

Woo Stock-modulet gør nøjagtigt hvad der står på dåsen. Det giver dig mulighed for at vise et nøjagtigt lagernummer på dit produktdisplay. Dette kan bidrage til at øge haster, hvilket igen øger konverteringen.

Du kan style hver skærm for at hjælpe med den hastende karakter ved at fremhæve lavt lager i rødt eller højt lager i grønt, tilføje 'Ikke på lager' tekst og placere den hvor som helst på siden.

9. Woo Meta-modul

Woo Meta-modul

Woo Meta-modulet tager sig af små detaljer som at vise SKU, tags, kategorier og supplerende data på en side. Hvis du vil medtage så mange data som muligt på sider, hjælper dette modul.

Det er ikke et freeform-modul, men kan tage intern meta og vise dem for alle at se. Du kan dog style designet.

10. Woo-beskrivelsesmodul

Woo-beskrivelsesmodul

Woo Description Module giver dig mulighed for at vise en produktbeskrivelse for et bestemt produkt hvor som helst inden for et Divi-tema.

Det er et grundlæggende, men brugbart modul, der giver dig mulighed for at promovere produkter på blogsider eller servicesider og fuldt ud style udseendet og følelsen af ​​denne beskrivelse.

11. Woo Tabs-modul

Woo Tabs-modul

Woo Tabs-modulet fungerer på samme måde som Divi Tabs-modulet. Det installerer et fanebladet indholdselement til en side, som du kan udfylde med det indhold, du kan lide.

Faner kan være nyttige til at kombinere flere informationskilder på en enkelt side. For eksempel produktoplysninger, produktspecifikationer, leveringsmuligheder og anmeldelser inden for en enkelt kasse med en fane for hver.

12. Woo supplerende informationsmodul

Woo Yderligere informationsmodul

Woo Yderligere informationsmodul er til dem, der ønsker mere. Har du produkter med ekstra muligheder? Dette er det modul, der skal bruges. For eksempel vil størrelser eller forskellige farver blive vist her.

Du kan style det, som du vil, og placere det på en side ved hjælp af standardtilpasningen. En anden enkel men værdifuld tilføjelse.

Woo-relaterede produkter-modul

Woo Yderligere informationsmodul burde have lidt introduktion. Butikker thrive om kryds- og mersalg, og dette modul er, hvordan du gør det. Du kan tilføje en Relaterede Produkter sektion til en side og tilføje understøttende oplysninger efter ønske.

Hver butik bør bruge krydssalg, og hvis standard WooCommerce-muligheder ikke er nok, fungerer dette modul sømlessly med Divi.

14. Woo Upsell-modul

Woo Upsell-modul

Woo Upsell-modulet gør meget det samme. Du kan føje dette til produktsider eller til enhver side på dit websted for at sælge produkter.

Produkterne i dette modul er dem, du har angivet som opsalgsmuligheder i WooCommerce. Dette modul lader dig bare placere dem hvor som helst på en side.

15. Woo vognmeddelelsesmodul

Woo indkøbsvogn meddelelsesmodul

Woo Cart Notice Module er en værdi-tilføjelsesmulighed, der tilføjer en simpel meddelelse til en produktside, der underretter brugeren om, at de har føjet et produkt til indkøbskurven. Det er et simpelt, men nyttigt stykke interaktion, der kan markere en stor butik ud fra bare en god.

Underretninger kan være stilarter og med farver og skrifttyper. Standardindstillingen bruger din temafarve, men du kan nemt tilsidesætte det, hvis du foretrækker det.

16. Woo anmeldelser modul

Woo anmeldelser modul

Woo Reviews-modulet giver dig mulighed for at placere produktanmeldelser for dine varer på enhver side på dit websted. Det er nyttigt for forfremmelsessider eller blogindlæg at tilføje det vigtige sociale bevis for at hjælpe med at påvirke en købsbeslutning.

Modulet giver dig mulighed for at indstille specifikke felter, vise antallet af kommentarer og påvirke farve og stil. Det er et nyttigt modul, hvis du promoverer andre steder end dine produktsider.

10 af de bedste gratis Divi-moduler

Der er en bred vifte af gratis Divi-moduler derude, og ikke alle er skabt ens. Vi synes, at disse 10 gratis Divi-moduler er værd at prøve.

1. Divi Tweaker

Divi Tweaker

Divi Tweaker er et meget smart modul, der hjælper med at fremskynde Divi Builder og WooCommerce, fjerner forespørgselsstrenge, der kan bremse indlæsning af sider og kan erstatte lokale temafiler med filer, der serveres fra et CDN.

Modulet tilføjer også nogle ekstra designfunktioner til mobil og desktop, nogle animationer og effekter, sideovergange, layoutmuligheder og meget mere.

2. Divi avanceret tekstmodul

Divi avanceret tekstmodul

Divi Advanced Text Module er et lille, men meget nyttigt modul, der udvider de eksisterende tekstindstillinger og tilføjer nogle nyttige værktøjer. Hvis du arbejder meget med tekst, som vi gør, gør evnen til at ændre tekstelementets bredde og højde en enorm forskel, når du prøver at perfektionere et sidelayout. Dette modul gør det.

Det tilføjer også et billeduploadværktøj, der forkorter designtiderne på en lille, men vigtig måde.

3. Divi Slimbuilder

Divi Slimbuilder

Divi Slimbuilder er ideel, hvis du bygger destinationssider eller længere webstedssider med Divi Builder. Det ændrer layoutet på hovedvinduet, så sideelementerne er slankere. Det ændrer også den måde, sektionstitler vises på for at gøre hele designprocessen meget glattere.

Det er en lille ting, men betyder, at du kan se meget mere af, hvad der foregår med bagsiden af ​​designet uden at skulle fortsætte med at rulle op og ned.

4. Udvidelse af artikelkort

Udvidelse af artikelkort

Artikelkort forlængelse var tilsyneladende Elegant Themes'første divi -modul nogensinde. Det er så nyttigt, at det stadig findes og stadig er populært i dag. Det er et andet beskedent modul, der tilføjer flere stylingsmuligheder til Divi Blog -modulet for at ændre den måde, kortene vises på.

Ændringerne er beskedne og inkluderer skyggeeffekter, baggrundsfarver, evnen til at style bloggitteret og ændre placeringen af ​​blogtitlen og metaen.

5. Divi Icon-udvidelsespakke

Divi Icon-udvidelsespakke

Divi Icon Expansion Pack gør præcis, hvad den siger, den gør. Det tilføjer en række håndtegnede ikoner til Divi Builder for dig at bruge i dit design. Der er hundredvis at vælge imellem, og du kan tilpasse dem alle, så de passer til dit tema.

Der er en gratis og en premiumversion af dette modul. Præmien tilføjer flere ikoner og tilpasningsmuligheder.

6. Udvid Divi

Udvid Divi

Udvid Divi er et andet selvforklarende Divi-modul. Det tilføjer en række funktioner til Divi, herunder Lightbox, en ny sektion med relaterede indlæg, nye forfatterbokse, nyt nyere indlægselement, animator til sideindlæsning, Font Awesome-værktøjer og meget mere.

Modulet er ikke blevet opdateret i et stykke tid, men vi testede det på den nyeste version af WordPress og Divi, og det fungerede fint.

7. Kampdragt til Divi

Kampdragt til Divi

Ud over at have et meget sej navn har Battle Suit for Divi meget at tilbyde. Det er et udvidelsesmodul, der tilføjer flere indlægs-, sidefod-, galleri- og billedindstillinger, tilføjer Lightbox til billede og video, tilføjer billedeffekter, posttitel og metaindstillinger og masser af andre værktøjer.

I betragtning af at dette er et gratis modul, foregår der meget her, og modulet gør alt tilgængeligt og meget let at bruge.

8. Enkel Divi Shortcode

Enkel Divi Shortcode

Simple Divi Shortcode tager et meget kraftfuldt værktøj i WordPress, shortcodes, og giver dig mulighed for at placere dem hvor som helst inde i andre moduler. Det er et andet meget simpelt værktøj, der kan gøre en enorm forskel, hvis du bruger kortkoder meget på dine sider.

Der er en gratis og en premiumversion af dette plugin, men den gratis mulighed gør alt, hvad du sandsynligvis har brug for for at gøre.

9. Ekstra tilbehør til Surbma Divi

Ekstra tilbehør til Surbma Divi

Surbma Divi Extras tilføjer et par flere funktioner til Divi, som nogle af jer måske finder nyttige. En ting, der får det til at skille sig ud, er indstillingen tekstlogo. Du behøver muligvis ikke bruge det ofte, men når du gør det, gør dette værktøj alene dette modul værd at bruge.

Modulet tilføjer også indstillinger for styling, layout, menu og sidefod og har en meget pæn lodret centerindstilling til kopiering i et modul. Dette er et andet af de værktøjer, der kan være en ægte livredder!

10. Popups til Divi

Popups til Divi

Popups til Divi er meget nyttigt, hvis du vil oprette en enkelt popup, men ikke ønsker at bruge et dedikeret popup-plugin til WordPress. Det tilføjer en funktion, hvor du kan oprette et element i bygherren og bruge det som en popup til markedsføring.

Det er en simpel løsning på et alvorligt problem og ideel til at oprette grundlæggende pop op-vinduer på en side uden at skulle bruge eller betale for et popup-plugin.

10 Premium Divi-moduler

Der er hundredvis af premium Divi-moduler derude. Nogle er investeringen værd, og andre ikke så meget. Disse 10 er bestemt dine penge værd!

Divi-karruselmodul 2.0

Divi Carousel Module 2.0 hjælper dig med at opbygge karruseller til næsten alt inden for Divi. De kan være nyttige til produkter, tjenester, udtalelser og alle former for salgsfremmende funktioner. Dette plugin får dem til at ske.

Det giver dig mulighed for at oprette så mange karruseller, som du vil, og gemme dem som skabeloner til brug overalt. Du har fuld kontrol over, hvordan de ser ud og føles, og al design udføres inden for bygherren. En fremragende mulighed for skærme.

2. Divi E-handel

Divi E-handel

Divi E-handel arbejder med både Divi og WooCommerce for at genveje opbygge en onlinebutik. Det har et par designs, der skal bruges som skabeloner, nogle brugerdefinerede sideelementer, demoindhold for at få dig i gang hurtigt og alt hvad du behøver for at opbygge en grundlæggende butik.

Modulet kommer endda med sidebjælker, social deling, produktlayoutmuligheder, nedtællingsure, trending produktmoduler og mange flere muligheder. Hvis du ikke kan lide nogen af ​​Divi-demoerne, kan dette være modulet for dig.

3. Divi Headers Pack

Divi Headers Pack

Divi Headers Pack er enorm. Det tilføjer over 750 nye overskrifter, nogle funktionelle, nogle nye designs. Det tilføjer off-canvas menuindstillinger, responsive headers, menueffekter, menuanimationer og masser af værktøjer til styling af headers.

Dette modul har et meget snævert fokus, men det er investeringen værd, hvis du har problemer med at finde den perfekte header. Hvis du ikke finder det her, finder du det ikke nogen steder!

4. Divi Supreme Pro

Divi Supreme Pro

Divi Supreme Pro indeholder en række moduler, der forbedrer din kreativitet, mens du bruger Divi. Moduler inkluderer Gradient Text, Flipbox, Text Divider, Divi Typing, Supreme Button, Facebook Feed og et antal andre.

Der er meget indeholdt i dette modul, over 40 forskellige moduler og 7 premiumudvidelser. I betragtning af prisen er Divi Supreme Pro et godt køb!

5. Divi begivenhedskalender

Divi begivenhedskalender

Divi Events Calendar kan bruges til at opbygge et komplet event management website eller bruges til at tilføje begivenheder til et standard site. Den bruger standarden Divi Builder for at hjælpe med at oprette begivenheder og har alt hvad du behøver for at style og vise dem.

Dette modul inkluderer en kalender, karrusel, begivenhedsfeed og sidemodul til at hjælpe dig med at oprette et fuldt funktionelt begivenhedswebsted eller begivenhedsafsnit og det er værd at tjekke ud.

6. Table Maker

Table Maker

Nogle mennesker finder borde lette, mens andre finder dem et frustrerende rod. Hvis du er i sidstnævnte lejr, er Table Maker modul er noget for dig. Det giver dig mulighed for hurtigt at integrere en tabel på en side og style alt om det.

Du kan tilføje billeder, ikoner, tekster, knapper og endda skjule rækker til mobil. Det er et meget kraftigt plugin, der gør kort arbejde med at tilføje og stylere tabeller til enhver side, og for det er det værd at købe.

7. Divi Modal Popup

Divi Modal Popup

Hvis du vil bruge pop op og Popups til Divi ikke er nok, vil Divi Modal Popup være. Det er et funktionsrikt modul, der gør kort arbejde med at oprette pop op-vinduer fra sideindlæsning, tidsforsinkelse og en række andre udløsere.

Endnu vigtigere er, at du kan inkludere hele spektret af sideelementer, placere din popup hvor som helst, få den udløst af noget på siden og tilføje animationer til selve popupen. Hvis du vil øge engagementet i pop op-vinduer, er det det, du bruger.

8. Divi Responsive Helper

Divi Responsive Helper

Divi Responsive Helper er et værktøj, der hjælper dig med at se nøjagtigt, hvordan din side indlæses på mobil fra Builder. Du kan også ændre, hvordan det ser ud, hvordan det indlæses, ændre rækkefølgen af ​​elementer og fuldt ud kontrollere, hvordan dit websted ser ud på mobile enheder.

Modulet indeholder også et meget smart automatisk fixer-værktøj, der kan genbalancere sætninger eller afsnit, så de ser bedre ud. Det alene gør det værd at købe!

Divi Murværk Galleri

Divi Masonry Gallery er ideelt, hvis du vil have mere fra en portefølje eller blogside. Det tager standard murværk layout og tilføjer muligheden for at oprette forskellige former, ændre kolonner, tilføje eller fjerne plads, tilføje modal pop op og konfigurere et specifikt galleri til mobil.

Hvis du designer et billedrig websted og vil gøre mere med murværk, giver dette modul dig mulighed for at gøre alt inden for den velkendte Builder-grænseflade.

10. Divi MadMenu

Divi MadMenu

Divi MadMenu tilføjer flere muligheder til menusektionen af Divi Builder. Hvis standardindstillingerne ikke er nok, tilføjer dette modul mere. Det opdeler også et overskrift i separate sektioner for let tilpasning.

Modulet giver dig mulighed for at kontrollere, hvordan menuen fungerer på forskellige skærmstørrelser, indstille forskellige layouts til forskellige enheder, tilføjer Ajax-elementer til produkter, tilføjer opkald til handlinger og andre elementer også. Det er en stærk måde at mestre overskrifter på.

Hvis du leder efter yderligere funktionalitet, skal du tjekke vores artikel om Divi-plugins eller tjek vores anmeldelse af DiviFlash.

Sådan udvikler du dit eget tilpassede Divi-modul

Vil du udvikle dit eget Divi-modul? Har du et problem, der ikke er dækket af et eksisterende modul?

Denne del af artiklen er her for at hjælpe.

Vi vil skitsere det grundlæggende for at udvikle dit eget tilpassede Divi -modul. Du skal bruge grundlæggende PHP -færdigheder for at fuldføre dette afsnit som Divi Builder definerer moduler som PHP -klasser.

Først skal du oprette en Divi-udvidelse. Du skal gøre dette først, fordi dit tilpassede Divi-modul er implementeret inden for et udvidelses-, tema- eller underordnet tema, og udvidelsen er den nemmeste at oprette.

Læs denne vejledning for at oprette din udvidelse. Når du er færdig, skal du komme tilbage her for at oprette dit modul.

Åbn din udvidelse, og find inkluderer / moduler

Opret en mappe kaldet SimpleHeader

Opret en fil i SimpleHeader og kald den SimpleHeader.php

Indsæt følgende i filen og gem


klasse SIMP_SimpleHeader udvider ET_Builder_Module {
          offentlig $ slug = 'simp_simple_header';
          public $ vb_support = 'til';
          offentlig funktion init () {
                   $ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
          }
          offentlig funktion get_fields () {
                   retur array (
                             'heading' => array (
                                      'label' => esc_html __ ('Heading', 'simp-simple-extension'),
                                      'type' => 'tekst',
                                      'option_category' => 'basic_option',
                                      'beskrivelse' => esc_html __ ('Indtast din ønskede overskrift her.', 'simp-simple-udvidelse'),
                                      'toggle_slug' => 'hovedindhold',
                             ),
                             'content' => array (
                                      'label' => esc_html __ ('Content', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basic_option',
                                      'beskrivelse' => esc_html __ ('Indtastet indhold her vises under overskriftsteksten.', 'simp-simple-udvidelse'),
                                      'toggle_slug' => 'hovedindhold',
                             ),
                   );
          }
          offentlig funktion gengives ($ unprocessed_props, $ content = null, $ render_slug) {
          }
}
ny SIMP_SimpleHeader;

Hvis du kender din PHP, vil du se et grundlæggende header, der kan bruges af Divi Builder. Du vil se en overskrift, noget indhold og baggrund.

Tilføj nu noget HTML til filen, så den kan gengives.

Tilføj følgende efter 'offentlig funktion gengivelse ($ unprocessed_props, $ content = null, $ render_slug) {'

                   retur sprintf (

                             '' % 1 $ s

                             % 2 $ s ',

                             esc_html ($ this-> rekvisitter ['overskrift']),

                             $ this-> rekvisitter ['indhold']

                   );

          }

}

ny SIMP_SimpleHeader;

Din komplette fil skal se sådan ud:


klasse SIMP_SimpleHeader udvider ET_Builder_Module {
          offentlig $ slug = 'simp_simple_header';
          public $ vb_support = 'til';
          offentlig funktion init () {
                   $ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
          }
          offentlig funktion get_fields () {
                   retur array (
                             'heading' => array (
                                      'label' => esc_html __ ('Heading', 'simp-simple-extension'),
                                      'type' => 'tekst',
                                      'option_category' => 'basic_option',
                                      'beskrivelse' => esc_html __ ('Indtast din ønskede overskrift her.', 'simp-simple-udvidelse'),
                                      'toggle_slug' => 'hovedindhold',
                             ),
                             'content' => array (
                                      'label' => esc_html __ ('Content', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basic_option',
                                      'beskrivelse' => esc_html __ ('Indtastet indhold her vises under overskriftsteksten.', 'simp-simple-udvidelse'),
                                      'toggle_slug' => 'hovedindhold',
                             ),
                   );
          }
          offentlig funktion gengives ($ unprocessed_props, $ content = null, $ render_slug) {
                   retur sprintf (
                             '' % 1 $ s
                             % 2 $ s ',
                             esc_html ($ this-> rekvisitter ['overskrift']),
                             $ this-> rekvisitter ['indhold']
                   );
          }
}
ny SIMP_SimpleHeader;

Hvis det gør det, er det nu tid til at oprette React Komponent klasse, der lader Divi Builder gengive modulet.

Opret en fil, og kald den SimpleHeader.jsx

Indsæt følgende, og gem det

// Eksterne afhængigheder
importere React, {Component, Fragment} fra 'react';
// Interne afhængigheder
import './style.css';
klasse SimpleHeader udvider komponent {
  statisk slug = 'simp_simple_header';
  gengive () {
    Vend tilbage (
      
        {this.props.content ()}
      
    );
  }
}
eksport standard SimpleHeader;

Naviger til inkluderer / modules / index.js i din udvidelsesfil

Tilføj og gem følgende

// Interne afhængigheder
importer SimpleHeader fra './SimpleHeader/SimpleHeader';
eksportstandard [
  SimpleHeader,
];

Føj følgende til SimpleHeader.jsx efter   

gengive () {
    Vend tilbage (
og gem det.
  
        {this.props.heading}
        

Den fulde fil skal nu se sådan ud:

// Eksterne afhængigheder
importere React, {Component, Fragment} fra 'react';
// Interne afhængigheder
import './style.css';
klasse SimpleHeader udvider komponent {
  statisk slug = 'simp_simple_header';
  gengive () {
    Vend tilbage (
      
        {this.props.heading}
        
          {this.props.content ()}
        
      
    );
  }
}
eksport standard SimpleHeader;

Åbn dit moduls style.css og tilføj

.simp-simple-header-heading {
          margin-bund: 20px;
}

Det er det til udvikling af dit Divi-modul. Alt hvad du skal gøre nu er at teste det!

Åbne Divi Builder, find dit Simple Header -modul, og prøv at bruge det på en side. Hvis du har koden korrekt, vil du se en simpel overskriftsmulighed.

Roundup af Divi-moduler

Vi har inkluderet over 70 gratis og premium divi -moduler, der dækker alt fra oprettelse af popup -vinduer til tilføjelse af ekstra designfunktioner til Divi Builder. Nogle er nichemoduler, du ikke vil bruge meget ofte, men nogle er afgørende for en smidig og effektiv brug af Divi Builder.

Vi tror, ​​de repræsenterer et tværsnit af, hvad der er tilgængeligt, hvad der fungerer, og hvad der er fornuftigt prissat. Hvad synes du?

Bruger du et af disse Divi-moduler? Har du nogen moduler at foreslå?

Om forfatteren
David Attard
David har arbejdet i eller omkring online- og digitalindustrien i de sidste 21 år. Han har stor erfaring i software- og webdesignindustrien ved at bruge WordPress, Joomla og nicher omkring dem. Han har arbejdet med softwareudviklingsbureauer, internationale softwarevirksomheder, lokale marketingbureauer og er nu Head of Marketing Operations hos Aphex Media - et SEO-bureau. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencefordel ved at bruge en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag. Hans blanding af teknologisk ekspertise kombineret med et stærkt forretningssans giver hans forfatterskab en konkurrencefordel.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig at forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...