Hvis du bruker Divi -temaet eller Divi Builder, vil du regelmessig arbeide med Divi-moduler. De er byggeklossene i temaet som lar deg legge til sideelementer, style dem, kontrollere dem og bruke dem til å lage vakre nettsteder.
Problemet er at når du er midt i å designe eller prøve å navigere deg rundt Divi Builder, det er vanskelig å se nøyaktig hva som er tilgjengelig.
Denne komplette guiden til Divi-moduler vil skissere de 46 kjernemodulene i Divi. Det vil også markere noen gratis og premium-moduler fra tredjepartsutviklere.
Alt slik at du kan få mest mulig ut av Divi til dine eller klientens nettsteder.
Denne artikkelen er en av våre mange Divi anmeldelser Det CollectiveRay har gjort for å dekke de forskjellige aspektene ved Divi -temaet og byggherren. Sjekk også vår liste over eksempler på bruk av Divi -tema for å lage forbløffende nettsteder.
Trenger du å kjøpe Divi til en rimelig pris? Vi har for øyeblikket en eksklusiv rabatt fra Elegant Themes:
Få Divi for 10% AV i Mars 2023 Bare
Hvis du trengte mer motivasjon for å kjøpe Divi og eksperimentere med de mange Divi -modulene her, en fersk ytelsesoppdatering vil gjøre det.
Divi har nylig revolusjonert koden, så den er raskere og lettere enn noen gang før.
Som en del av forbedringen har Divi krympet CSS med 94% og introdusert dynamisk CSS som bare laster det som kreves, introduserte smarte stiler for å redusere duplikater og krympe filstørrelser, fjerne gjengivelsesblokkerende CSS, optimalisert JavaScript og lagt til et dynamisk PHP-rammeverk for å øke effektiviteten til funksjonene.
Offisielle Divi-moduler
Det er 46 Divi-moduler tilgjengelig for øyeblikket.
1. Trekkspill
Trekkspillet legger til en trekkspill glidermodul på en side. Du vet når du ser en innholdsboks med et valgbart element, og det glir ned for å avsløre mer innhold? Det er et trekkspill.
For Divi er en trekkspillmodul et valgbart element som inneholder innhold. Velg den første linjen, og den utvides for å avsløre en kort forklaring eller oversikt. Velg neste linje og den første linjen lukkes og den andre åpnes. Det er en elegant måte å inkludere mye innhold på et lite rom.
2. Audio
Audio-modulen gir en lydspiller du kan plassere hvor som helst på en side. Du kan koble spilleren til en lokalt vert lydfil slik at den spilles av når en bruker velger den.
I Divi er lydmodulen en enkel lydspiller, men hvis du kjenner litt CSS, kan du style den selv.
3. Bardisker
Bar Counters er fremdriftslinjene du ser på nettsteder over hele Internett. Gjort riktig, de er et umiddelbart forståelig mål på noe og kan fungere veldig bra i riktig situasjon.
Divi Bar Counters kan farges, tilpasses for å passe til nesten ethvert formål, konfigureres manuelt for bestemte nivåer og brukes på mange måter.
4. blog
Divi Blog-modulen lar deg plassere blogginnlegg hvor som helst på en side. Ikke bare kan du plassere disse innleggene hvor som helst, du kan også style dem slik at de passer til temaet ditt.
Divi Blog-modulen gir full frihet over hvor og hvordan du viser blogginnleggene dine. Du er ikke lenger knyttet til hvor WordPress eller temaet ditt mener at du burde ha dem med denne modulen.
5. Uklarhet
Blurb-modulen er et innholdselement komplett med ikon og valgfrie animasjoner. Disse er nyttige for produkt- eller tjenestebeskrivelser på sider, da det valgfrie animasjonsaspektet kan gi litt interesse for en side.
Divi Blurb-modulen har en rekke ikoner, farger og animasjonsalternativer, avhengig av hvordan du bruker dem. Noen er inneholdt som standardinnstillinger i modulen, mens andre kan implementeres med CSS.
6. Knapp
Divi Button-modulen gir deg muligheten til å legge til knapper hvor som helst på nettstedet ditt, i alle farger og et bredt spekter av former og størrelser. Designet kan styres i tematilpasningen og koblinger og effekter konfigurert samtidig.
De er en enkel, men effektiv utvidelse av de eksisterende knappealternativene i Divi.
7. Call to Action
Handlingskall spiller en viktig rolle i konvertering. Jo mer overbevisende du kan gjøre dem, jo mer effektive kan de være. Det er her denne modulen kommer inn.
Divi Call to Action-modulen gir en enkel måte å lage dine egne handlingsanrop ved å bruke en blanding av CTA-boks, overskrift, innhold og knapp for å øke konverteringen hvor som helst på nettstedet ditt.
8. Sirkelteller
Circle Counter-modulen fungerer på samme måte som Bar Counters, men bruker en full sirkel grafikk i stedet. I stedet for en enkel stolpe, legger modulen til en hel sirkel med områder dekket avhengig av hvor mange prosent du markerer som fullført.
Circle Counter fungerer med tematilpasseren og kan tilpasses fullt ut for ethvert tema.
9. kode
Divi Code-modulen er et tilpasset kodeelement som du kan legge til på hvilken som helst side. Den godtar kortkoder, CSS og HTML og kan hjelpe deg med å oppnå en rekke ting på en side.
De fungerer som tilpassede CSS-elementer innen temaer, bare du kan plassere dem hvor som helst og få dem til å gjøre nesten hva som helst, da de ikke er begrenset av temaet.
10. kommentarer
Divi Comments-modulen lar deg legge til en kommentar fra bloggen din hvor som helst på siden. For eksempel kan en anbefaling eller tilbakemelding fra en bloggkommentar vises på en produktside.
I stedet for å bruke et bilde, kan du inkludere den virkelige tingen og deretter koble til hovedkommentaren, som bare legger til ektheten.
11. Kontakt skjema
Kontaktskjema-modulen er nyttig hvis du ikke vil bruke et programtillegg for kontaktskjema fra tredjepart. Du kan implementere et skjema hvor som helst på siden og style det ved hjelp av tematilpasningen.
Du kan opprette flere skjemaer, bruke feltvalidering og betinget logikk for å få hvilket som helst skjema til å fungere.
12. Nedtellingstimer
Nedtellingstimere brukes ofte til produktutgivelser, nedtelling til spesialtilbud eller salg eller for å skape tidsangst hos leserne.
Countdown Timer-modulen hjelper deg med det ved å la deg utforme en timer, legge til din egen nedtelling og plassere den hvor som helst på siden.
13. Skille
Dividers er små, men viktige måter å bryte opp nettsider og gi publikum en liten pause før neste avsnitt. De fleste webtemaer ser ut til å inkludere dem som en ettertanke, det er der Divi kommer inn.
Divi-temaet har skillelinjer, men Divider-modulen legger til mer.
14. Tilmelding via e-post
E-posttilmeldingsskjemaer er avgjørende for å lage e-postlister og for å øke engasjementet. E-post er fremdeles et utrolig kraftig markedsføringsverktøy, og E-posttilvalg-modulen har som mål å hjelpe med det.
Du kan opprette skjemaer, påmeldinger til nyhetsbrev og generere blyelementer ved hjelp av denne modulen og deretter koble den til e-postprogrammet ditt for å administrere det effektivt.
15. Filtrerbar portefølje
Den filtrerbare porteføljemodulen er ideell for å inkludere en attraktiv porteføljeseksjon på en side. Du kan style det, konfigurere dine egne kategorier og filtre og lage en fullt interaktiv portefølje.
Noen Divi -temaer har porteføljeelementer innebygd og Divi Builder har dem også, men denne modulen legger til enda mer.
16. Galleri
Divi Gallery-modulen gjør omtrent det samme for gallerier. Det lar deg vise frem bilder og videoer hvor som helst på en side.
Galleriet kan tilpasses fullt ut og inkluderer hvilket som helst bilde du vil. Du kan angi stilen som et rutenett eller glidebryter og kontrollere mange aspekter av utseendet og følelsen av den fra tilpasningen.
17. Bilde
Divi Image-modulen legger til en rekke alternativer når du viser bilder på en side. Du kan legge til lysbokseffekter, implementere lat belastning, legge til animasjoner og få bildene dine til å skille seg ut.
Bilder har en kraftig effekt på engasjement og tid på siden, så det er perfekt å gjøre bildene rettferdige. Denne modulen kan hjelpe med det.
18. Logg Inn
Divi Login-modulen legger til et karakteristisk påloggingsskjema på sider ved hjelp av den kjente utformingen av temaet ditt. Modulen kan utformes slik at den passer til siden for å enten sitte i bakgrunnen eller skille seg ut og bli lagt merke til.
Påloggingssiden vil automatisk logge brukeren inn på nettstedet uten å omdirigere til standard WordPress-påloggingsside.
19. Kart
Divi Map -modulen tar standard kartelement og legger til ekstra tilpasningsmuligheter og sømless integrering på en side. Siden kart kan spille en integrert rolle på noen nettsteder, er dette et veldig nyttig tillegg å bruke!
Kart integreres med Google Maps for å markere steder eller legge til interaktive elementer. Det kan utformes for å matche siden din også.
20. Taleteller
Number Counter-modulen er en annen grafisk enhet for å kommunisere med publikum. I stedet for å bruke en søyle- eller sirkelgrafikk, bruker denne modulen enkle tall for å kommunisere.
Det fungerer på samme måte som de andre også. Stil den i tematilpasningen og plasser den hvor som helst på siden.
21. person
Person-modulen legger til personligheter på nettstedet ditt. Enten du vil presentere forfattere, gi innsikt i teamet ditt eller noe annet, er personmodulen hvordan du gjør det.
Du kan legge til et bilde, en biografikopi, lenker til sosiale medier og legge det ut hvor som helst på nettstedet ditt. Det er også tilpasningsalternativer hvis du trenger det for å passe inn i et eksisterende tema.
22. portefølje
Portfolio-modulen bygger på alternativene som tilbys av Gallery ved å la deg presentere arbeidet ditt på en rekke måter. Hvis du er frilanser eller liten bedrift og vil vise frem arbeidet ditt, er det slik.
Modulen kan fungere med rutenett, layouter i full bredde, tilby kategorifiltre og paginering. Det er også noen tilpasninger du kan bruke hvis du trenger det.
23. Innleggsnavigasjon
Innleggsnavigasjonen tar standardlese neste eller forrige alternativer og gjør dem mer attraktive. Mens WordPress og mange temaer har disse funksjonene, legger Divi-alternativet til enda mer verktøy.
Modulen lar deg inkludere attraktive forrige og neste knapper nederst på innleggene slik at leserne kan jobbe seg gjennom bloggen din.
24. Innleggsglider
Post Slider-modulen er en fin måte å vise frem blogginnleggene dine. Den bruker en glidebryter for å rulle gjennom en definert serie blogginnlegg for å vise frem arbeidet ditt og tiltrekke seg klikk.
Mens mange andre plugins tilbyr å vise eller vise blogginnlegg, kan en glidebryter inneholde et fargerikt bilde og utdrag som sikkert vil engasjere seg. Mindre tilpasninger er også mulig med denne modulen.
25. Innleggstittel
Posttittelmodulen er et lite, men nyttig tillegg som bruker Divi-styling for innleggstitler. Den viser tittelen og har også muligheten til å legge til et utvalgt bilde og eventuelle metadata du kanskje vil vise.
Modulen har noen få tilpasningsalternativer du kan bruke for å passe den inn i et tema, men standardene fungerer godt nok for de fleste bruksområder.
26. Pristabeller
Pristabeller er et av de elementene som svært få WordPress-temaer ser ut til å bli riktig. Divi er ikke en av dem. Standard tematabeller fungerer bra nok, men du kan lade det opp med Pricing Tables-modulen.
Denne modulen legger til en tilpassbar tabell som du kan plassere på hvilken som helst side. Du kan endre farger, valutaer, antall funksjoner og effekter etter behov.
27. Søke
Søk er en annen av de funksjonene som vanligvis er less enn ideelt. Standard WordPress -søkefunksjon kan være treg og gå glipp av det åpenbare. Noen temaer inkluderer søk som ofte skuffer. Divi Search -modulen endrer alt dette.
Dette er en enkel søkeboks du kan plassere hvor som helst og stil som passer ditt tema. Enkelt, raskt og veldig effektivt.
28. butikk
Divi Shop-modulen er en utmerket utvidelse av WooCommerce. Hvis du allerede driver en butikk, lar denne modulen deg vise produkter i et frittstående element hvor som helst på nettstedet ditt. Det er en utmerket mulighet til å kryssalg eller oppsalg.
Modulen lar deg sortere produkter, style elementet og utføre noen få tilpasninger til skjermen også.
29. Sidefelt
Sidefeltmodulen er en av de mest nyttige av alle moduler i denne listen. Det tar et standard sidefelt og gir deg full kontroll over hvordan det ser ut, hva det har og hvordan det fungerer.
Modulen lar deg bygge egendefinerte sidefelt ved hjelp av tematilpasseren og plassere dem på alle sider, noen sider eller spesifiserte sider.
30. glidebryteren
Glidebrytere kan være omstridte emner, men det er ingen tvil om at de kan være effektive hvis de er utformet riktig. Divi Slider-modulen gjør nettopp det.
Det er en enkel glidebryter du kan plassere hvor som helst på siden og tilpasse for å passe til designet. Du kan også bruke video, bilder, kontrollere lysbildetypen og mye mer.
31. Sosiale medier Følg
Følg-knappene er en annen sidefunksjon som få temaer klarer å få rett. De er en så enkel funksjon, men kan ofte se klønete ut, ikke fungere ordentlig eller se ut som om de er lagt til med et plugin.
Social Media Follow-modulen er annerledes. Det legger til noen attraktive ikoner med lenker og lar deg tilpasse dem etter dine behov.
32. Tabs
Hvis Accordion-modulen ikke er det du leter etter, er det kanskje Tabs-modulen. Dette er en annen måte å presentere mye tekst på uten å overbelaste siden.
Dette tillegget lar deg lage et innholdselement med et antall horisontale faner som kan inneholde kopi, bilder eller video.
33. Attest
Testimonial-modulen legger til sosialt bevis på en side. Vi vet alle hvor viktig sosial bevis er, og denne modulen lar deg legge den til hvor som helst.
Du har flere stylingsalternativer for å passe modulen på siden, du kan ha et bilde, noen kopier og lenker, avhengig av dine behov.
34. Tekst
Tekstmodulen lar deg få tilgang til WordPress teksteditor for å legge til tilpasset tekst hvor som helst. Det er et annet lite, men nyttig tillegg som gir mye mer frihet når det gjelder tekstplassering på en side.
35. Veksle
Divi Toggle-modulen fungerer på samme måte som Accordion ved at den bytter innholdsbokser for å gli åpne og lukkede. Der Accordion bruker en enkelt rute med flere lysbilder, bruker Toggle individuelle ruter som hver glir hver for seg.
Det er et nyttig alternativ til trekkspill hvor du kanskje bare har et par elementer du vil bruke eller vil at alle elementene skal være åpne samtidig.
36. video
Du kan allerede legge inn video i WordPress, men du må bruke hele iFrame-nettadressen i kodevisningen. Divi Video-modulen lagrer alt det.
Modulen lar deg bygge inn en opplastet eller lenket video hvor som helst på en side. Du kan også angi et tilpasset bilde i stedet for den første rammen og tilpasse avspillingsknappen.
37. Videoglidebryter
Video Slider-modulen tar video og legger til en skyveknapp. Du kan stille inn en hovedvideo og ha en rekke andre under og la glidebryteren veksle mellom dem.
Modulen lar deg tilpasse det første bildet og avspillingsknappen, bruke opplastede eller koblede videoer og plassere dem hvor som helst på en side.
38. Fullbreddekode
Fullwidth Code-modulen fungerer med Divi-temaer i full bredde og lar deg legge inn kode på en side mens du beholder formateringen. Det er en enkel, men effektiv modul som kan være nyttig for veiledningsnettsteder, utviklernettsteder eller noe annet.
39. Topptekst i full bredde
Med Fullwidth Header-modulen kan du opprette en header ved å bruke sidens fulle bredde. Enkelt, men veldig effektivt. Du kan ha en overskrift, underoverskrift og kopiere sammen med opptil to knapper.
40. Fullbreddebilde
Fullwidth Image er fullbreddeversjonen av Image, men fungerer sømlessi design i full bredde. Den har også de samme skjerm- og tilpasningsalternativene.
41. Fullbreddekart
Fullwidth Map-modulen fungerer akkurat som Maps, men for sider med full bredde. Du får også den samme Google Map-kompatibiliteten, tilpasningsalternativene og brukervennligheten som den modulen.
42. Meny med full bredde
Fullbreddemeny gir en tilpasset meny som strekker seg over en side. Det tar standard WordPress-menyen og har den i et tilpasset element. Du kan deretter tilpasse menyen på vanlig måte.
43. Fullbreddeportefølje
Denne modulen tar standard porteføljemodul og får den til å fungere med sider i full bredde. Den har samme tilpasninger og funksjoner, men fungerer med dette oppsettet.
44. Glidebryter for fullbredde
Fullwidth Post Slider tar Post Slider-modulen og får den til å fungere over hele sidens bredde. Den har samme verktøy og tilpasningsalternativer som den modulen, og tilbyr full kontroll over hvordan det ser ut for brukeren.
45. Tittel på full bredde
Tittelen på full bredde er den samme som innleggets tittel, men fungerer full bredde. Det er noe vi forestiller oss at du vil bruke sparsomt på en side, men denne Divi-modulen sørger for at du kan ha titler i full bredde uten koding.
46. Glidebryter for fullbredde
Fullwidth Slider tar glidemodulen og gjør det samme. Får det til å fungere feillessmed full bredde. Dette er en mer nyttig modul med full kontroll over hvordan lysbildene ser ut og føles.
WooCommerce Divi-moduler
WooCommerce serveres veldig godt av Divi. Noen utvider eksisterende funksjoner på WooCommerce-sider, mens andre lar deg vise noen butikkelementer på sider som ikke er store.
Hver er verdt å sjekke ut hvis du leter etter mer fleksibilitet i hvordan du designer butikken din.
1. Woo Breadcrumb -modul
Brødsmuler brukes ofte på nettsteder for å hjelpe navigasjonen. Woo Breadcrumb-modulen for Divi gjør det samme for butikken din. Alternativene er enkle og inkluderer en kursside, gjeldende side og valgfri lenke og skilletegn.
Det er en enkel, men effektiv modul som lar deg plassere beskrivende brødsmuler øverst på siden for å hjelpe brukerne dine med å navigere.
2. Woo tittelmodul
Denne modulen lar deg ha full kontroll over produkttitler. Du kan endre tittelen, style den og legge til lenker, bakgrunner og konfigurere etter behov. Det bygger på standard tittelalternativ ved å legge til flere designverktøy og litt avansert avstand.
Hva mer, når du oppdaterer en tittel med denne modulen, kan du stille den slik at den automatisk oppdateres overalt på nettstedet ditt.
3. Woo Image Module
Woo Image Module gir full kontroll over produktbilder i butikken din. Standardalternativene er gode, men dette tar det lenger. Du kan legge til et antall bilder, bruke en miniatyrglidebryter og legge til merker eller grafiske lag for tilbud eller noe annet.
Modulen har noen få tilpasningsalternativer du kan bruke til å style bildet, og lar deg plassere det hvor som helst på en hvilken som helst side.
4. Woo Gallery -modul
Woo Gallery Module bygger på Image Module ved å inkorporere bilder i et produktgalleri. Den tilbyr lignende alternativer til Divi Gallery-modulen vi nevnte tidligere, og gir muligheten til å style galleriet og plassere det hvor som helst, på hvilken som helst side.
Bilder selger produkter, så dette er et utmerket alternativ hvis standardbildekapasiteten til WooCommerce ikke leverer det du trenger.
5. Woo-prismodul
Woo-prismodulen utvider prisene og lar deg vise produkter og priser på alle sider, ikke bare butiksider. Det er et tilpassbart element som viser gjeldende pris, gammel pris, salgspris og designer prisene slik at de passer til temaet ditt.
Mens standard WooCommerce-plugin har mange innebygde prisalternativer, tar denne modulen det et skritt videre og inkluderer muligheten til å markedsføre på ikke-produktsider.
6. Woo Legg i handlekurv Modul
Woo Add to Cart-modulen gir full kontroll over selve kjøpet. Med den kan du style Buy It Now-knappen på den måten du vil. Fra hva det står til hvordan det ser ut og skille knappen fra standard WooCommerce-oppsett.
Hvis standardprisen og knappelayouten av en eller annen grunn ikke fungerer for temaet ditt, hjelper denne modulen med det. Du kan plassere den hvor som helst, style den, vise et mengdealternativ og til og med en gjenværende lagervisning.
7. Woo Rating Module
Rangeringer er alt i detaljhandel. Høyt vurderte produkter selger ikke-klassifiserte produkter med en betydelig margin. Fremveksten av anmeldelser og sosial bevis kan være din å kommandere med Woo Rating Module.
Den lar deg plassere en vurdering på en side, vise anmeldelser, vise antall og gjennomsnittlig vurdering av disse anmeldelsene og lenker til dem. Hver butikk skal bruke rangeringer, og dette er hvordan du gjør det.
8. Woo lagermodul
Woo Stock Module gjør nøyaktig hva det står på boksen. Det lar deg vise et nøyaktig lagernummer i produktdisplayet. Dette kan bidra til å øke haster, noe som igjen øker konvertering.
Du kan utforme hver skjerm for å hjelpe med det hastet ved å markere lavt lager i rødt eller høyt lager i grønt, legge til 'Ikke på lager' tekst og plassere den hvor som helst på siden.
9. Woo Meta-modul
Woo Meta-modulen tar vare på små detaljer som å vise SKU, koder, kategorier og tilleggsdata på en side. Hvis du vil inkludere så mye data som mulig på sider, vil denne modulen hjelpe.
Det er ikke en freeform-modul, men kan ta intern meta og vise dem for alle å se. Du kan style design skjønt.
10. Woo-beskrivelsesmodul
Woo Description Module lar deg vise en produktbeskrivelse for et bestemt produkt hvor som helst innenfor et Divi-tema.
Det er en grunnleggende, men brukbar modul som lar deg markedsføre produkter på bloggsider eller tjenestesider og tilpasse utseendet og følelsen av beskrivelsen.
11. Woo Tabs-modul
Woo Tabs-modulen fungerer på samme måte som Divi Tabs-modulen. Den installerer et innholdselement med faner på en side som du kan fylle med hvilket innhold du vil.
Faner kan være nyttige for å kombinere flere informasjonskilder på en enkelt side. For eksempel produktdetaljer, produktspesifikasjoner, leveringsalternativer og anmeldelser i en enkelt boks med en fane for hver.
12. Woo tilleggsinformasjonsmodul
Woo tilleggsinformasjonsmodul er for de som ønsker mer. Har du produkter med ekstra alternativer? Dette er modulen du skal bruke. For eksempel vil størrelser eller forskjellige farger bli omtalt her.
Du kan style den slik du vil og plassere den på en side ved hjelp av standardtilpasningen. Nok et enkelt, men verdifullt tilskudd.
13. Woo-relaterte produkter-modul
Woo tilleggsinformasjonsmodul burde trenge lite introduksjon. Butikker thrive på kryss- og mersalg, og denne modulen er hvordan du gjør det. Du kan legge til en Relaterte produkter seksjon til en side og legg til støtteinformasjon etter ønske.
Hver butikk bør bruke kryssalg, og hvis standard WooCommerce-alternativer ikke er nok, fungerer denne modulen sømlessly med Divi.
14. Woo Upsell-modul
Woo Upsell Module gjør omtrent det samme. Du kan legge til dette på produktsidene eller på en hvilken som helst side på nettstedet ditt for å oppsalgsprodukter.
Produktene som vises i denne modulen, er de du har angitt som alternativ for oppsalg i WooCommerce. Denne modulen lar deg bare plassere dem hvor som helst på en side.
15. Woo Cart Notice Module
Woo Cart Notice Module er et verdiøkende alternativ som legger til en enkel merknad til en produktside som gir brukeren beskjed om at de har lagt et produkt i handlekurven. Det er et enkelt, men nyttig stykke interaksjon som kan markere en flott butikk fra bare en god en.
Varsler kan være stiler og med farger og skrifttyper. Standardinnstillingen vil bruke temafargen, men du kan enkelt overstyre den hvis du foretrekker det.
16. Woo anmeldelser modul
Woo Reviews-modulen lar deg plassere produktanmeldelser for varene dine på hvilken som helst side på nettstedet ditt. Det er nyttig for promoteringssider eller blogginnlegg å legge til det viktige samfunnsbeviset for å påvirke en kjøpsbeslutning.
Modulen lar deg angi spesifikke felt, vise antall kommentarer og påvirke farge og stil. Det er en nyttig modul hvis du markedsfører andre steder enn produktsidene dine.
10 av de beste gratis Divi-modulene
Det er et bredt utvalg av gratis Divi-moduler der ute, og ikke alle er like. Vi synes disse 10 gratis Divi-modulene er vel verdt å prøve.
1. Divi Tweaker
Divi Tweaker er en veldig smart modul som hjelper til med å øke hastigheten på Divi Builder og WooCommerce, fjerner Query Strings som kan bremse nedlasting av sider og kan erstatte lokale temafiler med filer som serveres fra et CDN.
Modulen legger også til noen ekstra designfunksjoner for mobil og desktop, noen animasjoner og effekter, sideoverganger, layoutalternativer og mye mer.
2. Divi avansert tekstmodul
Divi Advanced Text Module er en liten, men veldig nyttig modul som utvider de eksisterende tekstalternativene og legger til noen nyttige verktøy. Hvis du jobber mye med tekst, som vi gjør, gjør muligheten til å endre bredden og høyden på tekstelementet en enorm forskjell når du prøver å perfeksjonere et sidelayout. Denne modulen gjør det.
Det legger også til et verktøy for bildeopplasting som forkorter designtider på en liten, men viktig måte.
3. Divi Slimbuilder
Divi Slimbuilder er ideell hvis du bygger destinasjonssider eller lengre nettstedssider med Divi Builder. Det endrer oppsettet til hovedvinduet slik at sideelementene er slankere. Det endrer også måten seksjonstitler vises på for å gjøre hele designprosessen mye jevnere.
Det er en liten ting, men betyr at du kan se mye mer av hva som skjer med bakenden av designet uten å måtte bla opp og ned.
4. Artikkelkort-utvidelse
Artikkelkort forlengelse var tilsynelatende Elegant Themes'første Divi -modul noensinne. Det er så nyttig at det fortsatt er rundt og fremdeles populært i dag. Det er en annen beskjeden modul som gir flere stylingsalternativer til Divi Blog -modulen for å endre måten bloggkortene vises på.
Endringene er beskjedne og inkluderer skyggeeffekter, bakgrunnsfarger, muligheten til å style bloggrutenettet og endre posisjonen til bloggtittelen og metaen.
5. Divi Icon utvidelsespakke
Divi Icon Expansion Pack gjør akkurat det den sier den gjør. Det legger til en rekke håndtegnede ikoner til Divi Builder som du kan bruke i designet ditt. Det er hundrevis å velge mellom, og du kan tilpasse dem alle til ditt tema.
Det er en gratis og en premiumversjon av denne modulen. Premien legger til flere ikoner og tilpasningsalternativer.
6. Utvid Divi
Expand Divi er en annen selvforklarende Divi-modul. Det legger til en rekke funksjoner til Divi, inkludert Lightbox, en ny relatert innleggsseksjon, nye forfatterbokser, nytt nylig innleggselement, animator for sideinnlasting, Font Awesome-verktøy og mye mer.
Modulen har ikke blitt oppdatert på en stund, men vi testet den på den siste versjonen av WordPress og Divi, og den fungerte bra.
7. Kampdrakt for Divi
I tillegg til å ha et veldig kult navn, har Battle Suit for Divi mye å tilby. Det er en utvidelsesmodul som legger til flere innleggs-, bunntekst-, galleri- og bildealternativer, legger til Lightbox for bilde og video, legger til bildeeffekter, innleggstittel og meta-alternativer og massevis av andre verktøy.
Tatt i betraktning at dette er en gratis modul, det skjer mye her, og modulen gjør alt tilgjengelig og veldig enkelt å bruke.
8. Enkel Divi Shortcode
Simple Divi Shortcode tar et veldig kraftig verktøy i WordPress, kortkoder, og lar deg plassere dem hvor som helst i andre moduler. Det er et annet veldig enkelt verktøy som kan utgjøre en enorm forskjell hvis du bruker kortkoder mye på sidene dine.
Det er en gratis og en premiumversjon av dette pluginet, men det gratis alternativet gjør alt du sannsynligvis trenger for å gjøre.
9. Surbma Divi-tillegg
Surbma Divi Extras legger til noen flere funksjoner til Divi som noen av dere kan finne nyttige. En ting som gjør at den skiller seg ut er alternativet tekstlogo. Du trenger kanskje ikke å bruke den ofte, men når du gjør det, gjør dette verktøyet alene denne modulen verdt å bruke.
Modulen legger også til styling, layout, meny og bunntekst og har et veldig pent vertikalt midtalternativ for kopiering i en modul. Dette er et annet av de verktøyene som kan være en ekte livredder!
10. Popup -vinduer for Divi
Popups for Divi er veldig nyttig hvis du vil opprette en enkelt popup, men ikke vil bruke et dedikert popup-plugin for WordPress. Det legger til en funksjon der du kan opprette et element i byggherren og bruke det som en popup for markedsføring.
Det er en enkel løsning på et alvorlig problem og ideelt for å lage grunnleggende popup-vinduer på en side uten å måtte bruke eller betale for et popup-plugin.
10 Premium Divi-moduler
Det er hundrevis av premium Divi-moduler der ute. Noen er verdt investeringen og andre, ikke så mye. Disse 10 er absolutt verdt pengene dine!
1. Divi karusellmodul 2.0
Divi Carousel Module 2.0 hjelper deg med å bygge karuseller til nesten hva som helst innen Divi. De kan være nyttige for produkter, tjenester, attester og alle slags salgsfremmende funksjoner. Dette pluginet får dem til å skje.
Den lar deg lage så mange karuseller du vil og lagre dem som maler du kan bruke hvor som helst. Du har full kontroll over hvordan de ser ut og føles, og all design gjøres i byggherren. Et ypperlig alternativ for skjermer.
2. Divi Netthandel
Divi E-handel jobber med både Divi og WooCommerce for å snarvei bygge en nettbutikk. Den har et par design å bruke som maler, noen egendefinerte sideelementer, demoinnhold for å komme raskt i gang og alt du trenger for å bygge en grunnleggende butikk.
Modulen kommer til og med med sidefelt, sosial deling, produktoppsettalternativer, nedtellingsklokker, trending produktmoduler og mange flere alternativer. Hvis du ikke liker noen av Divi-demoer, kan dette være modulen for deg.
3. Divi Headers Pack
De Divi Headers Pack er enorm. Det legger til over 750 nye overskrifter, noen funksjonelle, noen nye design. Det legger tilcanvas menyalternativer, responsive overskrifter, menyeffekter, menyanimasjoner og massevis av verktøy for styling av overskrifter.
Denne modulen har et veldig smalt fokus, men det er vel verdt investeringen hvis du har problemer med å finne den perfekte toppteksten. Hvis du ikke finner den her, finner du den ikke noe sted!
4. Divi Supreme Pro
Divi Supreme Pro inneholder en rekke moduler for å forbedre kreativiteten din mens du bruker Divi. Moduler inkluderer Gradient Text, Flipbox, Text Divider, Divi Typing, Supreme Button, Facebook Feed og en rekke andre.
Det er mye som finnes i denne modulen, over 40 forskjellige moduler og 7 premiumutvidelser. Med tanke på prisen er Divi Supreme Pro et røverkjøp!
5. Divi hendelseskalender
Divi Events Calendar kan brukes til å bygge et komplett nettsted for hendelsesadministrasjon eller brukes til å legge hendelser til et standard nettsted. Den bruker standarden Divi Builder for å hjelpe til med å lage arrangementer og har alt du trenger for å style og vise dem.
Denne modulen inneholder en kalender, en karusell, en eventfeed og en sidemodul som hjelper deg med å lage et fullt funksjonelt nettsted for hendelser eller en eventavdeling, og det er vel verdt å sjekke ut.
6. Table Maker
Noen synes det er enkelt å finne bord, mens andre synes det er et frustrerende rot. Hvis du er i sistnevnte leir, er Table Maker modulen er for deg. Den lar deg raskt legge inn en tabell på en side og style alt om den.
Du kan legge til bilder, ikoner, tekster, knapper og til og med skjule rader for mobil. Det er et veldig kraftig plugin som gjør kort arbeid med å legge til og styling av tabeller til hvilken som helst side, og for det er det vel verdt å kjøpe.
7. Divi Modal Popup
Hvis du vil bruke popup-vinduer og Popups for Divi ikke er nok, vil Divi Modal Popup være det. Det er en funksjonsrik modul som gjør kort arbeid med å lage popup-vinduer fra sideinnlasting, tidsforsinkelse og en rekke andre utløsere.
Enda viktigere, du kan inkludere hele spekteret av sideelementer, plassere popup-en hvor som helst, få den utløst av hva som helst på siden og legge til animasjoner i selve popup-en. Hvis du vil øke engasjementet med popup-vinduer, er dette det du bruker.
8. Divi Responsive Helper
Divi Responsive Helper er et verktøy som hjelper deg med å se nøyaktig hvordan siden din lastes inn på mobilen innen byggherren. Du kan også endre hvordan den ser ut, hvordan den lastes inn, endre rekkefølgen på elementene og fullstendig kontrollere hvordan nettstedet ditt ser ut på mobile enheter.
Modulen inneholder også et veldig smart automatisk fikseringsverktøy som kan balansere setninger eller avsnitt slik at de ser bedre ut. Det alene gjør det verdt å kjøpe!
9. Divi murverk galleri
Divi Masonry Gallery er ideelt hvis du vil ha mer fra en portefølje eller bloggside. Det tar standard muroppsett og legger til muligheten til å lage forskjellige former, endre kolonner, legge til eller fjerne plass, legge til modale popup-vinduer og konfigurere et bestemt galleri for mobil.
Hvis du designer et bilderikt nettsted og vil gjøre mer med mur, kan du bruke denne modulen til å gjøre alt fra det kjente Builder-grensesnittet.
10. Divi MadMeny
Divi MadMenu legger til flere alternativer i menyseksjonen av Divi Builder. Hvis standardinnstillingene ikke er nok, legger denne modulen til flere. Det deler også en topptekst i separate seksjoner for enkel tilpasning.
Modulen lar deg kontrollere hvordan menyen fungerer på forskjellige skjermstørrelser, angi forskjellige oppsett for forskjellige enheter, legger til Ajax-elementer for produkter, legger til samtaler til handlinger og andre elementer også. Det er en kraftig måte å mestre overskrifter på.
Hvis du leter etter ekstra funksjonalitet, kan du sjekke artikkelen vår om Divi-plugins eller sjekk ut vår anmeldelse av DiviFlash.
Hvordan utvikle din egen tilpassede Divi-modul
Vil du utvikle din egen Divi-modul? Har du et problem som ikke dekkes av en eksisterende modul?
Denne delen av artikkelen er her for å hjelpe.
Vi skal skissere det grunnleggende for å utvikle din egen tilpassede Divi -modul. Du trenger grunnleggende PHP -ferdigheter for å fullføre denne delen som Divi Builder definerer moduler som PHP -klasser.
Først må du opprette en Divi-utvidelse. Du må gjøre dette først fordi den tilpassede Divi-modulen din er implementert i et utvidelses-, tema- eller underordnet tema, og utvidelsen er den enkleste å lage.
Les denne veiledningen for å lage utvidelsen din. Når du er ferdig, kom tilbake hit for å lage modulen din.
Åpne utvidelsen og finn inkluderer / moduler
Lag en katalog som heter SimpleHeader
Opprett en fil i SimpleHeader og kall den SimpleHeader.php
Lim inn følgende i filen og lagre
<?php
klasse SIMP_SimpleHeader utvider ET_Builder_Module {
offentlig $ slug = 'simp_simple_header';
offentlig $ vb_support = 'på';
offentlig funksjon init () {
$ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
}
offentlig funksjon get_fields () {
retur matrise (
'heading' => array (
'label' => esc_html __ ('Heading', 'simp-simple-extension'),
'type' => 'tekst',
'option_category' => 'basic_option',
'description' => esc_html __ ('Skriv inn ønsket overskrift her.', 'simp-simple-extension'),
'toggle_slug' => 'hovedinnhold',
),
'content' => array (
'label' => esc_html __ ('Content', 'simp-simple-extension'),
'type' => 'tiny_mce',
'option_category' => 'basic_option',
'beskrivelse' => esc_html __ ('Innholdet som er angitt her vises under overskriftsteksten.', 'simp-simple-extension'),
'toggle_slug' => 'hovedinnhold',
),
);
}
gjengivelse av offentlig funksjon ($ unprocessed_props, $ content = null, $ render_slug) {
}
}
ny SIMP_SimpleHeader;
Hvis du kjenner din PHP, vil du se en grunnleggende overskrift som kan brukes av Divi Builder. Du vil se en overskrift, litt innhold og bakgrunn.
Legg nå til litt HTML i filen slik at den kan gjengis.
Legg til følgende etter 'offentlig funksjon gjengivelse ($ unprocessed_props, $ content = null, $ render_slug) {'
retur sprintf (
' % 1 $ s
% 2 $ s ',
esc_html ($ this-> rekvisitter ['heading']),
$ this-> rekvisitter ['content']
);
}
}
ny SIMP_SimpleHeader;
Hele filen din skal se slik ut:
<?php
klasse SIMP_SimpleHeader utvider ET_Builder_Module {
offentlig $ slug = 'simp_simple_header';
offentlig $ vb_support = 'på';
offentlig funksjon init () {
$ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
}
offentlig funksjon get_fields () {
retur matrise (
'heading' => array (
'label' => esc_html __ ('Heading', 'simp-simple-extension'),
'type' => 'tekst',
'option_category' => 'basic_option',
'description' => esc_html __ ('Skriv inn ønsket overskrift her.', 'simp-simple-extension'),
'toggle_slug' => 'hovedinnhold',
),
'content' => array (
'label' => esc_html __ ('Content', 'simp-simple-extension'),
'type' => 'tiny_mce',
'option_category' => 'basic_option',
'beskrivelse' => esc_html __ ('Innholdet som er angitt her vises under overskriftsteksten.', 'simp-simple-extension'),
'toggle_slug' => 'hovedinnhold',
),
);
}
gjengivelse av offentlig funksjon ($ unprocessed_props, $ content = null, $ render_slug) {
retur sprintf (
' % 1 $ s
% 2 $ s ',
esc_html ($ this-> rekvisitter ['heading']),
$ this-> rekvisitter ['content']
);
}
}
ny SIMP_SimpleHeader;
Hvis det gjør det, er det nå på tide å lage React Komponentklasse som lar Divi Builder gjengi modulen.
Opprett en fil og kall den SimpleHeader.jsx
Lim inn følgende og lagre det
// Eksterne avhengigheter
importere React, {Component, Fragment} fra 'react';
// Interne avhengigheter
importere './style.css';
klasse SimpleHeader utvider komponent {
statisk slug = 'simp_simple_header';
gjengi () {
komme tilbake (
{this.props.content ()}
);
}
}
eksport standard SimpleHeader;
Naviger til inkluderer / modules / index.js i utvidelsesfilen din
Legg til og lagre følgende
// Interne avhengigheter
importere SimpleHeader fra './SimpleHeader/SimpleHeader';
eksportstandard [
SimpleHeader,
];
Legg til følgende i SimpleHeader.jsx etter
gjengi () {
komme tilbake (
og lagre det.
{this.props.heading}
Hele filen skal nå se slik ut:
// Eksterne avhengigheter
importere React, {Component, Fragment} fra 'react';
// Interne avhengigheter
importere './style.css';
klasse SimpleHeader utvider komponent {
statisk slug = 'simp_simple_header';
gjengi () {
komme tilbake (
{this.props.heading}
{this.props.content ()}
);
}
}
eksport standard SimpleHeader;
Åpne modulens stil.css og legg til
.simp-simple-header-heading {
margin-bottom: 20px;
}
Det er det for å utvikle Divi-modulen din. Alt du trenger å gjøre nå er å teste det!
Åpne Divi Builder, finn Simple Header -modulen og prøv å bruke den på en side. Hvis du har koden riktig, vil du se et enkelt topptekstalternativ.
Sammendrag av Divi-moduler
Vi har inkludert over 70 gratis og premium divi -moduler som dekker alt fra å lage popup -vinduer til å legge til ekstra designfunksjoner til Divi Builder. Noen er nisjemoduler du ikke vil bruke veldig ofte, men noen er avgjørende for en jevn og effektiv bruk av Divi Builder.
Vi tror de representerer et tverrsnitt av hva som er tilgjengelig, hva som fungerer og hva som er fornuftig priset. Hva tror du?
Bruker du noen av disse Divi-modulene? Har du noen moduler å foreslå?
Vær så snill forlate en nyttig kommenter med tankene dine, så del dette på Facebook-gruppen din (e) som synes dette er nyttig, og la oss høste fordelene sammen. Takk for at du delte og var hyggelig!
Avsløring: Denne siden kan inneholde lenker til eksterne nettsteder for produkter som vi elsker og anbefaler helhjertet. Hvis du kjøper produkter vi foreslår, kan vi tjene et henvisningsgebyr. Slike avgifter påvirker ikke våre anbefalinger, og vi godtar ikke betaling for positive anmeldelser.
og mange flere ...