70+ Divi Modules Ultimate Guide 2023 (virallinen / kolmas osapuoli)

Jos käytät Divi -teemaa tai Divi Builder, työskentelet säännöllisesti Divi-moduulien kanssa. Ne ovat teeman rakennuspalikoita, joiden avulla voit lisätä sivuelementtejä, muotoilla niitä, hallita niitä ja käyttää niitä kauniiden verkkosivustojen luomiseen.

Ongelma on, kun suunnittelet tai yrität navigoida Divi Builder, on vaikea nähdä tarkalleen mitä on saatavilla.

Tässä Divi-moduulien täydellisessä oppaassa hahmotellaan Divissä olevat 46 ydinmoduulia. Se tuo myös esiin joitain kolmansien osapuolien kehittäjien ilmaisia ​​ja premium-moduuleja.

Kaikki, jotta voit hyödyntää Divin omaa tai asiakkaasi verkkosivustoa.

Sisällys[show]

Tämä artikkeli on yksi monista Divi arvostelut että CollectiveRay on tehnyt kattamaan Divi -teeman ja -rakentajan eri näkökohdat. Tutustu myös luetteloomme esimerkkejä Divi -teeman käytöstä luoda upeita verkkosivustoja.

Haluatko hankkia Divin edulliseen hintaan? Meillä on tällä hetkellä yksinoikeus alennus Elegant Themes:

Hanki Divi 10%: n alennuksella sisään saattaa 2023 Vain

Jos tarvitset lisää motivaatiota ostaa Divi ja kokeilla monia Divi -moduuleja täällä, äskettäinen suorituskykypäivitys tekee sen.

Divi on äskettäin mullistanut koodinsa, joten se on nopeampi ja kevyempi kuin koskaan ennen.

Osana parannusta Divi on pienentänyt CSS: ää 94% ja ottanut käyttöön dynaamisen CSS: n, joka lataa vain vaaditun, esitteli älykkäitä tyylejä kaksoiskappaleiden pienentämiseksi ja tiedostokoon pienentämiseksi, poisti renderöinnin estävän CSS: n, optimoi JavaScriptin ja lisäsi dynaamisen PHP-kehyksen toimintojen tehokkuutta.

Viralliset Divi-moduulit

Tällä hetkellä käytettävissä on 46 Divi-moduulia.

1. Harmonikka

Harmonikka

Harmonikka lisää sivulle harmonikan liukusäätimen. Tiedätkö, kun näet sisältöruudun, jossa on valittavissa oleva elementti, ja se liukuu alaspäin paljastamaan enemmän sisältöä? Se on harmonikka.

Diville harmonikkamoduuli on valittava elementti, joka sisältää sisältöä. Valitse ensimmäinen rivi ja se laajenee paljastamaan lyhyen selityksen tai yleiskatsauksen. Valitse seuraava rivi ja ensimmäinen rivi sulkeutuu ja toinen aukeaa. Se on tyylikäs tapa sisällyttää paljon sisältöä pieneen tilaan.

2. audio-

Audio-

Audio-moduulissa on audiosoitin, jonka voit sijoittaa mihin tahansa sivulle. Voit linkittää soittimen paikallisesti isännöityyn äänitiedostoon, jotta se toistetaan aina, kun käyttäjä valitsee sen.

Divissa Audio-moduuli on yksinkertainen äänisoitin, mutta jos tiedät vähän CSS: ää, voit muotoilla sen itse.

3. Baaritiskit

Baaritiskit

Palkkilaskurit ovat edistymispalkit, jotka näet verkkosivustoilla kaikkialla Internetissä. Tehty oikein, ne ovat heti ymmärrettävä mitta jostakin ja voivat toimia erittäin hyvin oikeassa tilanteessa.

Divi-palkkilaskurit voidaan värittää, räätälöidä melkein mihin tahansa tarkoitukseen, konfiguroida manuaalisesti tietyille tasoille ja niitä voidaan käyttää monilla tavoilla.

4. blogi

Blogi

Divi Blog -moduulin avulla voit sijoittaa blogiviestejä mihin tahansa sivulle. Paitsi että voit sijoittaa nämä viestit mihin tahansa, voit myös muotoilla ne omalle teemallesi.

Divi Blogi -moduuli tarjoaa täydellisen vapauden siitä, missä ja miten blogiviestejä näytetään. Et ole enää sidottu kohtaan, jossa WordPress tai teeman mielestä sinun pitäisi olla ne tämän moduulin kanssa.

5. Blurb

liepeet

Blurb-moduuli on sisältöelementti, joka sisältää kuvakkeita ja valinnaisia ​​animaatioita. Nämä ovat hyödyllisiä sivujen tuote- tai palvelukuvauksissa, koska valinnainen animaatio voi lisätä sivuun vähän kiinnostusta.

Divi Blurb -moduulissa on useita kuvakkeita, värejä ja animaatiovaihtoehtoja niiden käyttötavan mukaan. Jotkut sisältyvät oletuksena moduuliin, kun taas toiset voidaan toteuttaa CSS: llä.

6. nappi

nappi

Divi Button -moduuli tarjoaa keinot lisätä painikkeita mihin tahansa sivustollesi, millä tahansa värillä ja monenlaisilla muodoilla ja kooilla. Suunnittelua voidaan ohjata teemamuokkaimessa sekä linkit ja tehosteet, jotka on määritetty samanaikaisesti.

Ne ovat yksinkertainen mutta tehokas laajennus Divin nykyisiin painikevaihtoehtoihin.

7. Toimintakehotus

Call To Action

Toimintakehotuksilla on tärkeä rooli kääntymyksessä. Mitä vakuuttavampia voit tehdä niistä, sitä tehokkaampia ne voivat olla. Siellä tämä moduuli tulee sisään.

Divi Call to Action -moduuli tarjoaa helpon tavan rakentaa omat toimintakehotuksesi käyttämällä CTA-kentän, otsikon, sisällön ja painikkeen yhdistelmää, jotta voit lisätä tuloksia missä tahansa verkkosivustollasi.

8. Ympyrälaskuri

Ympyrälaskuri

Circle Counter -moduuli toimii samalla tavalla kuin palkkilaskurit, mutta käyttää sen sijaan koko ympyräkuvaa. Yksinkertaisen palkin sijasta moduuli lisää täydellisen ympyrän, joka kattaa alueet riippuen siitä, kuinka prosenttiosuuden merkitset täydelliseksi.

Circle Counter toimii teeman muokkaimen kanssa, ja se voidaan täysin mukauttaa mihin tahansa teemaan.

9. Koodi

Koodi

Divi Code -moduuli on mukautettu koodielementti, jonka voit lisätä mille tahansa sivulle. Se hyväksyy lyhytkoodit, CSS: n ja HTML: n ja voi auttaa sinua toteuttamaan monia asioita sivulla.

Ne toimivat samalla tavalla kuin mukautetut CSS-elementit teemoissa, vain sinä voit sijoittaa ne minne tahansa ja pyytää heitä tekemään melkein mitä tahansa, koska teema ei rajoita niitä.

10. Kommentit

Kommentit

Divi Comments -moduulin avulla voit lisätä kommentin blogistasi mihin tahansa sivun kohtaan. Esimerkiksi blogikommentin suositus tai palaute voidaan esittää tuotesivulla.

Kuvan käyttämisen sijaan voit sisällyttää todellisen ja linkittää sitten pääkommenttiin, joka vain lisää aitoutta.

11. Yhteydenottolomake

Yhteydenottolomake

Yhteyslomakemoduulista on hyötyä, jos et halua käyttää kolmannen osapuolen yhteydenottolomakkeen laajennusta. Voit ottaa lomakkeen käyttöön missä tahansa sivulla ja tyylittää sen käyttämällä teeman mukautinta.

Voit luoda useita lomakkeita, käyttää kentän tarkistusta ja ehdollista logiikkaa saadaksesi minkä tahansa lomakkeen toimimaan.

12. Ajastin

Ajastinajastin

Ajastimia käytetään usein tuotejulkaisuissa, lähtölaskennoissa erikoistarjouksiin tai myyntiin tai aikahuolen aikaansaamiseen lukijoissa.

Countdown Timer -moduuli auttaa tässä antamalla sinulle tyylin ajastimesta, lisätä oman lähtölaskennasi ja sijoittaa se mihin tahansa sivulle.

13. Jakaja

Jakaja

Jakajat ovat pieniä mutta tärkeitä tapoja hajottaa verkkosivut ja antaa yleisölle hieman tauko ennen seuraavaa osiota. Useimmat verkkoteemat näyttävät sisällyttävän ne jälkikäteen, missä Divi tulee.

Divi-teemalla on jakajia, mutta Divider-moduuli lisää.

14. Sähköpostivalinta

Sähköpostiosoite

Sähköpostin valintalomakkeet ovat välttämättömiä sähköpostilistojen luomisessa ja sitoutumisen lisäämisessä. Sähköposti on edelleen uskomattoman tehokas markkinointityökalu, ja Email Opt-in -moduulin tarkoituksena on auttaa siinä.

Tämän moduulin avulla voit luoda lomakkeita, uutiskirjeen tilauksia ja lyijyjä tuottavia elementtejä ja linkittää sen sitten sähköpostiohjelmaasi hallitaksesi sitä tehokkaasti.

15. Suodatettava salkku

Suodatettava salkku

Suodatettava salkumoduuli on ihanteellinen houkuttelevan salkkuosan sisällyttämiseen sivulle. Voit muotoilla sitä, määrittää omat luokat ja suodattimet ja luoda täysin vuorovaikutteisen salkun.

Joissakin Divi -teemoissa on sisäänrakennettu portfolio -elementtejä ja Divi Builder on myös niitä, mutta tämä moduuli lisää vielä enemmän.

Galleria

Divi Gallery -moduuli tekee paljon samaa gallerioille. Sen avulla voit esitellä kuvia ja videoita missä tahansa sivulla.

Galleria voidaan täysin räätälöidä ja sisältää minkä tahansa haluamasi kuvan. Voit asettaa tyylin ruudukoksi tai liukusäätimeksi ja hallita monia ulkoasun näkökohtia mukauttajasta.

17. Kuva

Kuva

Divi Image -moduuli lisää useita vaihtoehtoja, kun kuvia näytetään sivulla. Voit lisätä lightbox-tehosteita, toteuttaa laiska lataus, lisätä animaatioita ja tehdä kuvistasi todella erottuvat.

Kuvilla on voimakas vaikutus sitoutumiseen ja sivun aikaan, joten kuvien oikeudenmukaisuuden tekeminen on täysin järkevää. Tämä moduuli voi auttaa siinä.

18. Kirjaudu sisään

Kirjaudu

Divi Login -moduuli lisää sivuille merkitsevän kirjautumislomakkeen käyttämällä teeman tuttua tyyliä. Moduuli voidaan muotoilla sivulle sopivaksi joko istumaan taustalla tai erottumaan ja olemaan huomattu.

Sisäänkirjautumissivu kirjaa käyttäjän automaattisesti sivustoon ilman, että ohjataan WordPress-oletuskirjautumissivulle.

19. Kartta

kartta

Divi Map -moduuli ottaa vakiokarttaelementin ja lisää ylimääräisiä mukautusvaihtoehtoja ja saumaaless integrointi sivulle. Koska kartat voivat olla olennainen rooli joillakin sivustoilla, tämä on erittäin hyödyllinen lisä!

Kartta integroituu Google Mapsiin korostaakseen sijainteja tai lisäämällä interaktiivisia elementtejä. Se voidaan muotoilla vastaamaan myös sivua.

20. Numerolaskuri

Numerolaskuri

Numerolaskurimoduuli on toinen graafinen laite kommunikointiin yleisön kanssa. Palkki- tai ympyrägrafiikan sijasta tämä moduuli käyttää yksinkertaisia ​​numeroita kommunikointiin.

Se toimii samalla tavalla kuin muutkin. Tyylittele se teeman räätälöintiin ja sijoita se mihin tahansa sivulle.

21. henkilö

Henkilö

Person-moduuli lisää persoonallisuuksia verkkosivustollesi. Halusitpa sitten esitellä kirjoittajia, antaa käsityksen tiimistäsi tai jotain muuta, Person-moduuli on se, miten teet sen.

Voit lisätä kuvan, elämäkerran kopion, sosiaalisen median linkit ja lähettää ne mihin tahansa verkkosivustollesi. Myös mukautusvaihtoehtoja on, jos tarvitset sitä sovittamaan olemassa olevaan teemaan.

22. Salkku

salkku

Portfolio-moduuli perustuu Gallerian tarjoamiin vaihtoehtoihin antamalla sinun esitellä työsi monin tavoin. Jos olet freelancer tai pieni yritys ja haluat esitellä työsi, niin.

Moduuli voi toimia ruudukkojen, täysleveiden asettelujen, luokkasuodattimien ja sivutuksen kanssa. On myös joitain mukautuksia, joita voit käyttää tarvittaessa.

23. Postinavigointi

Postin navigointi

Postinavigointi ottaa oletetun luetun seuraavan tai edellisen vaihtoehdon ja tekee niistä houkuttelevamman. Vaikka WordPressillä ja monilla teemoilla on nämä ominaisuudet, Divi-vaihtoehto lisää vielä enemmän apuohjelmia.

Moduulin avulla voit lisätä viehättäviä edellisiä ja seuraavia painikkeita viestien alaosaan, jotta lukijat voivat työskennellä blogissasi.

24. Julkaise liukusäädin

Post Slider

Post Slider -moduuli on loistava tapa esitellä blogiviestejäsi. Se käyttää liukusäädintä määrättyjen blogiviestisarjojen läpi näyttämään työsi ja houkuttelemaan napsautuksia.

Vaikka monet muut laajennukset tarjoavat listata tai näyttää blogiviestejä, liukusäädin voi sisältää värikkään kuvan ja otteen, joka varmasti tarttuu. Pienet mukautukset ovat myös mahdollisia tällä moduulilla.

25. Viestin otsikko

Viestin otsikko

Post Title -moduuli on pieni, mutta hyödyllinen lisäys, joka käyttää Divi-tyyliä postinimikkeisiin. Se näyttää otsikon ja voi myös lisätä esillä olevan kuvan ja kaikki metatiedot, jotka haluat ehkä näyttää.

Moduulissa on muutama mukautusvaihtoehto, joita voit käyttää sovittamaan sen teemaan, mutta oletusasetukset toimivat riittävän hyvin useimpiin käyttötarkoituksiin.

26. Hinnoittelupöydät

hinnoittelu taulukot

Hinnoittelutaulukot ovat yksi niistä elementeistä, joita hyvin harvat WordPress-teemat näyttävät olevan oikeassa. Divi ei kuulu heihin. Oletusteemataulukot toimivat riittävän hyvin, mutta voit ladata sen Hinnoittelupöydät-moduulilla.

Tämä moduuli lisää mukautettavan taulukon, jonka voit sijoittaa mille tahansa sivulle. Voit muuttaa värejä, valuuttoja, ominaisuuksien ja tehosteiden määrää tarpeen mukaan.

Haku

Haku on toinen niistä ominaisuuksista, jotka yleensä ovat less kuin ihanteellinen. WordPressin oletushakutoiminto voi olla hidas ja jättää huomioimatta. Jotkut teemat sisältävät haun, joka usein pettää. Divi Search -moduuli muuttaa kaiken.

Tämä on yksinkertainen hakukenttä, jonka voit sijoittaa mihin tahansa ja tyyliisi sopivaksi. Yksinkertainen, nopea ja erittäin tehokas.

28. Kauppa

Verkkokauppa

Divi Shop -moduuli on erinomainen jatke WooCommercelle. Jos sinulla on jo kauppa, tämän moduulin avulla voit näyttää tuotteita erillisenä elementtinä missä tahansa sivustollasi. Se on erinomainen tilaisuus myydä ristiin tai myydä.

Moduulin avulla voit lajitella tuotteita, tyylittää elementin ja suorittaa muutaman mukautuksen myös näytölle.

29. sivupalkki

sivupalkki

Sivupalkkimoduuli on yksi hyödyllisimmistä tämän luettelon moduuleista. Se vie tavallisen sivupalkin ja antaa sinulle täyden hallinnan sen ulkonäöstä, ominaisuuksista ja toiminnasta.

Moduulin avulla voit rakentaa mukautettuja sivupalkkeja teemamuokkaimen avulla ja sijoittaa ne kaikille sivuille, joillekin sivuille tai määritetyille sivuille.

30. Liukusäädin

Slider

Liukusäätimet voivat olla kiistanalaisia ​​aiheita, mutta ei ole epäilystäkään siitä, että ne voivat olla tehokkaita, jos ne on muotoiltu oikein. Divi Slider -moduuli tekee juuri sen.

Se on yksinkertainen liukusäädin, jonka voit sijoittaa mihin tahansa sivulle ja muokata muotoilun mukaan. Voit käyttää myös videoita, kuvia, hallita diatyyppiä ja paljon muuta.

31. Seuraa sosiaalista mediaa

Sosiaalinen media seuraa

Seuraa-painikkeet ovat toinen sivuominaisuus, jota harvat teemat onnistuvat saamaan oikeaksi. Ne ovat niin yksinkertainen ominaisuus, mutta voivat usein näyttää kömpelöiltä, ​​eivät toimi kunnolla tai näyttävät siltä, ​​että ne on lisätty laajennuksella.

Social Media Follow -moduuli on erilainen. Se lisää viehättäviä kuvakkeita linkeillä ja antaa sinun mukauttaa niitä tarpeidesi mukaan.

32. Välilehdet

Välilehdet

Jos harmonikka-moduuli ei ole etsimäsi, ehkä välilehdet-moduuli on. Tämä on toinen tapa esitellä paljon tekstiä ylikuormittamatta sivua.

Tämän lisäosan avulla voit luoda sisältöelementin, jossa on useita vaakasuuntaisia ​​välilehtiä, jotka voivat sisältää kopioita, kuvia tai videoita.

33. Suositus

työtodistus

Suosittelumoduuli lisää sosiaalisen todistuksen sivulle. Me kaikki tiedämme kuinka tärkeä sosiaalinen todiste on, ja tämän moduulin avulla voit lisätä sen mihin tahansa.

Sinulla on useita tyylivaihtoehtoja moduulin sijoittamiseksi sivulle, voit varustaa kuvan, joitain kopioita ja linkkejä tarpeidesi mukaan.

34. Teksti

teksti

Teksti-moduulin avulla voit käyttää WordPress-tekstieditoria lisätäksesi mukautettua tekstiä mihin tahansa. Se on toinen pieni, mutta hyödyllinen lisäosa, joka tarjoaa paljon enemmän vapautta tekstin sijoittelulle sivulla.

35. Vaihda

Vaihda

Divi Toggle -moduuli toimii samalla tavalla kuin Harmonikka, sillä se vaihtaa sisältöruudut liukumaan auki ja kiinni. Jos harmonikka käyttää yhtä laatikkoa, jossa on useita dioja, Toggle käyttää yksittäisiä laatikoita, jotka kukin liukuvat erikseen.

Se on hyödyllinen vaihtoehto harmonikalle, jossa sinulla voi olla vain pari elementtiä, joita haluat käyttää, tai haluat kaikkien elementtien avautuvan kerralla.

36.Video

Video

Voit jo upottaa videon WordPressiin, mutta sinun on käytettävä koko iFrame-URL-osoitetta koodinäkymässä. Divi Video -moduuli tallentaa kaiken tämän.

Moduulin avulla voit upottaa ladatun tai linkitetyn videon mihin tahansa sivulle. Voit myös asettaa mukautetun kuvan ensimmäisen kehyksen sijaan ja mukauttaa toistopainiketta.

37. Video-liukusäädin

Video-liukusäädin

Video Slider -moduuli ottaa videon ja lisää liukusäätimen. Voit asettaa päävideon ja näyttää useita muita alla ja antaa liukusäätimen vaihtaa niiden välillä.

Moduulin avulla voit mukauttaa ensimmäisen kuvan ja toistopainikkeen, käyttää ladattuja tai linkitettyjä videoita ja sijoittaa ne mihin tahansa sivulle.

38. Täysleveyskoodi

Täysleveä koodi

Fullwidth Code -moduuli toimii täysleveillä Divi-teemoilla ja antaa sinun upottaa koodin sivulle säilyttäen muotoilun. Se on yksinkertainen mutta tehokas moduuli, josta voi olla hyötyä ohjesivustoille, kehittäjien verkkosivustoille tai muulle.

39. Täyden leveyden otsikko

Täysleveä otsikko

Fullwidth Header -moduulin avulla voit luoda otsikon käyttämällä sivun koko leveyttä. Yksinkertainen mutta erittäin tehokas. Voit käyttää otsikkoa, alaotsikkoa ja kopioida yhdessä enintään kahden painikkeen kanssa.

40. Täysleveä kuva

Täysleveä kuva

Koko leveyskuva on kuvan täysleveä versio, mutta toimii saumattomastilessTäysleveissä malleissa. Siinä on myös samat näyttö- ja mukautusvaihtoehdot.

41. Täyden leveyden kartta

Täyden leveyden kartta

Fullwidth Map -moduuli toimii aivan kuten Maps, mutta täysleveillä sivuilla. Saat myös samat Google Map -yhteensopivuus-, mukautusvaihtoehdot ja helppokäyttöisyyden kuin kyseinen moduuli.

42. Fullwidth-valikko

Fullwidth-valikko

Fullwidth Menu tarjoaa mukautetun valikon, joka ulottuu sivun yli. Se vie tavallisen WordPress-valikon ja sisältää sen mukautetussa elementissä. Tämän jälkeen voit mukauttaa valikkoa tavalliseen tapaan.

43. Koko leveys

Täysleveä salkku

Tämä moduuli ottaa tavallisen Portfolio-moduulin ja saa sen toimimaan täysleveiden sivujen kanssa. Sillä on samat mukautukset ja ominaisuudet, mutta se toimii tämän asettelun kanssa.

44. Fullwidth Post -liukusäädin

Täysleveä postiliukusäädin

Fullwidth Post Slider vie Post Slider -moduulin ja saa sen toimimaan koko sivun leveydellä. Sillä on samat apuohjelmat ja mukautusvaihtoehdot kuin kyseisellä moduulilla, mikä tarjoaa täyden hallinnan siitä, miltä se näyttää käyttäjälle.

45. Koko leveyden viestin otsikko

Täysleveä viestin otsikko

Täysleveä viestin otsikko on sama kuin viestin otsikko, mutta toimii koko leveydellä. Luulemme, että käytät sitä säästeliäästi sivulla, mutta tämä Divi-moduuli varmistaa, että voit käyttää täysleveitä otsikoita ilman koodausta.

46. ​​Täysleveä liukusäädin

Täysleveä liukusäädin

Fullwidth Slider ottaa Slider -moduulin ja tekee saman. Tekee sen virheelliseksilessTäysleveä muotoilu. Tämä on hyödyllisempi moduuli, joka hallitsee täysin sitä, miltä diat näyttävät ja tuntuvat.

WooCommerce Divi -moduulit

Divi palvelee WooCommercea erittäin hyvin. Jotkut laajentavat olemassa olevia ominaisuuksia WooCommerce-sivuilla, kun taas toiset mahdollistavat joidenkin myymäläelementtien esittämisen muissa kuin myymäläsivuissa.

Jokainen niistä on syytä tarkistaa, jos etsit enemmän joustavuutta myymälän suunnittelussa.

1. Woo Breadcrumb -moduuli

Woo Breadcrumb -moduuli

Leivänmuruja käytetään verkkosivustoilla usein navigoinnin helpottamiseksi. Diville tarkoitettu Woo Breadcrumb -moduuli tekee saman kaupassasi. Vaihtoehdot ovat yksinkertaisia ​​ja sisältävät kurssisivun, nykyisen sivun sekä valinnaisen linkin ja erottimen.

Se on yksinkertainen mutta tehokas moduuli, jonka avulla voit sijoittaa kuvaavia leivänmuruja sivun yläosaan, jotta käyttäjät voivat navigoida.

2. Woo-otsikkomoduuli

Woo-nimimoduuli

Tämän moduulin avulla voit hallita täysin tuotenimiä. Voit muuttaa otsikkoa, tyylittää sen ja lisätä linkkejä, taustoja ja määrittää tarvittaessa. Se perustuu oletusarvoiseen otsikkovaihtoehtoon lisäämällä lisää suunnittelutyökaluja ja joitain edistyneitä välilyöntejä.

Lisäksi kun päivität otsikon tällä moduulilla, voit asettaa sen päivittymään automaattisesti kaikkialle sivustollasi.

3. Woo-kuvamoduuli

Woo-kuvamoduuli

Woo-kuvamoduuli tarjoaa täyden hallinnan myymälän tuotekuvista. Oletusasetukset ovat hyvät, mutta tämä vie sitä pidemmälle. Voit lisätä useita kuvia, käyttää pikkukuvan liukusäädintä ja lisätä merkkejä tai graafisia tasoja tarjouksiin tai muuhun.

Moduulissa on muutama mukautusvaihtoehto, joita voit käyttää kuvan muotoiluun, ja sen avulla voit sijoittaa sen mihin tahansa haluamaasi sivulle.

Woo-galleriamoduuli

Woo Gallery -moduuli perustuu Image Module -moduuliin sisällyttämällä kuvat tuotegalleriaan. Se tarjoaa samanlaisia ​​vaihtoehtoja kuin aiemmin mainitsemamme Divi Gallery -moduuli ja tarjoaa mahdollisuuden muotoilla galleriaa ja sijoittaa se minne tahansa, millä tahansa sivulla.

Kuvat myyvät tuotteita, joten tämä on erinomainen vaihtoehto, jos WooCommercen oletuskuva ei tuota tarvitsemasi.

5. Woo-hintamoduuli

Woo-hintamoduuli

Woo-hintamoduuli laajentaa hinnoittelua ja antaa sinulle mahdollisuuden näyttää tuotteita ja hintoja millä tahansa sivulla, ei vain myymäläsivuilla. Se on muokattava elementti, joka näyttää nykyisen hinnan, vanhan hinnan, myyntihinnan ja suunnittelee nämä hinnat teemasi mukaan.

Vaikka tavallisessa WooCommerce-laajennuksessa on paljon sisäänrakennettuja hintavaihtoehtoja, tämä moduuli vie sen askeleen pidemmälle ja sisältää mahdollisuuden mainostaa muilla kuin tuotesivuilla.

6. Woo Lisää ostoskoriin -moduuli

Woo Lisää ostoskoriin -moduuli

Woo Lisää ostoskoriin -moduuli tarjoaa täyden hallinnan varsinaisesta ostoksesta. Sen avulla voit muotoilla Osta nyt -painiketta millä tahansa haluamallasi tavalla. Siitä, mitä siinä sanotaan, miltä se näyttää, ja erota painike WooCommerce-oletusasettelusta.

Jos jostain syystä oletushinta ja painikkeiden asettelu eivät toimi teemalla, tämä moduuli auttaa siinä. Voit sijoittaa sen mihin tahansa, muotoilla sen, näyttää määrän vaihtoehdon ja jopa jäljellä olevan varastossa olevan näytön.

7. Woo-luokitusmoduuli

Woo-luokitusmoduuli

Arviot ovat kaikki vähittäiskaupassa. Hyvin mitoitetut tuotteet myyvät luokittelemattomat tuotteet merkittävällä marginaalilla. Arvostelujen ja sosiaalisten todisteiden nousu voi olla sinun komento Woo Rating Module -moduulin avulla.

Sen avulla voit sijoittaa luokituksen sivulle, näyttää arvosteluja, näyttää kyseisten arvostelujen lukumäärän ja keskiarvon sekä linkit niihin. Jokaisen kaupan tulisi käyttää luokituksia, ja se tehdään näin.

8. Woo -osakemoduuli

Woo -osakemoduuli

Woo Stock Module tekee juuri sen, mitä se sanoo tinasta. Sen avulla voit näyttää tarkan varastonumeron tuotenäytössä. Tämä voi lisätä kiireellisyyttä, mikä puolestaan ​​lisää kääntymistä.

Voit muotoilla jokaisen näytön helpottamaan tätä kiireellisyyttä korostamalla vähäinen varastossa punaisella tai korkea varastovihreä vihreällä, lisäämällä Ei varastossa -teksti ja sijoittamalla se mihin tahansa sivulle.

9. Woo Meta -moduuli

Woo-metamoduuli

Woo Meta -moduuli huolehtii pienistä yksityiskohdista, kuten SKU: n, tunnisteiden, luokkien ja lisätietojen näyttämisestä sivulla. Jos haluat sisällyttää sivuille mahdollisimman paljon tietoa, tämä moduuli auttaa.

Se ei ole vapaamuotoinen moduuli, mutta voi ottaa sisäisen metan ja näyttää ne kaikkien nähtäväksi. Voit kuitenkin muotoilla suunnittelua.

10. Woo-kuvausmoduuli

Woo-kuvausmoduuli

Woo Description -moduulin avulla voit näyttää tietyn tuotteen tuotekuvauksen missä tahansa Divi-teeman sisällä.

Se on yksinkertainen mutta käyttökelpoinen moduuli, jonka avulla voit mainostaa tuotteita blogisivuilla tai palvelusivuilla ja muotoilla tämän kuvauksen ulkoasua täysin.

11. Woo-välilehtien moduuli

Woo-välilehtien moduuli

Woo-välilehdet-moduuli toimii samalla tavalla kuin Divi-välilehdet-moduuli. Se asentaa välilehden sisältävän elementin sivulle, jonka voit täyttää haluamallasi sisällöllä.

Välilehdet voivat olla hyödyllisiä yhdistettäessä useita tietolähteitä yhdelle sivulle. Esimerkiksi tuotetiedot, tuotetiedot, toimitusvaihtoehdot ja arvostelut yhdessä laatikossa, jossa on välilehti kullekin.

12. Woo-lisämoduuli

Woo-lisämoduuli

Woo-lisämoduuli on tarkoitettu niille, jotka haluavat enemmän. Onko tuotteillasi ylimääräisiä vaihtoehtoja? Tämä on käytettävä moduuli. Tässä esitettäisiin esimerkiksi koot tai eri värit.

Voit muotoilla sen haluamallasi tavalla ja sijoittaa sen sivulle vakiomuokkaimen avulla. Toinen yksinkertainen mutta arvokas lisäys.

Woon liittyvät tuotteet -moduuli

Woo-lisätiedot-moduulin pitäisi tarvita vähän käyttöönottoa. Kaupat thrive ristiinmyynnistä ja lisämyynnistä, ja tässä moduulissa teet sen. Voit lisätä a Liittyvät tuotteet -osio sivulle ja lisää tarvittaessa tukitietoja.

Jokaisen myymälän tulisi käyttää ristimyyntiä, ja jos WooCommerce-vakiovaihtoehdot eivät riitä, tämä moduuli toimii saumattomastilessDivin kanssa.

14. Woo Upsell -moduuli

Woo Upsell -moduuli

Woo Upsell -moduuli tekee paljon samaa. Voit lisätä tämän tuotesivuille tai mille tahansa sivustosi sivulle myydäksesi tuotteita.

Tässä moduulissa esitetyt tuotteet ovat ne, jotka olet asettanut myyntivaihtoehtoiksi WooCommercessa. Tämän moduulin avulla voit vain sijoittaa ne mihin tahansa sivulle.

15. Woo Cart -ilmoitusmoduuli

Woo-ostosilmoitusmoduuli

Woo Cart Notice Module on lisäarvoa tarjoava vaihtoehto, joka lisää yksinkertaisen ilmoituksen tuotesivulle ja ilmoittaa käyttäjälle, että he ovat lisänneet tuotteen ostoskoriin. Se on yksinkertainen mutta hyödyllinen vuorovaikutus, joka voi merkitä suuren myymälän vain hyvästä.

Ilmoitukset voivat olla tyylejä, värejä ja fontteja. Oletusasetus käyttää teeman väriä, mutta voit helposti ohittaa sen, jos haluat.

16. Woo-arvostelut-moduuli

Woo-arvostelut-moduuli

Woo-arvostelut-moduulin avulla voit sijoittaa tuotteidesi arvosteluita mille tahansa sivustosi sivulle. Tarjoussivuilla tai blogiviesteissä on hyödyllistä lisätä tämä tärkeä sosiaalinen todiste ostopäätökseen vaikuttamiseksi.

Moduulin avulla voit asettaa tiettyjä kenttiä, näyttää kommenttien lukumäärän ja vaikuttaa väriin ja tyyliin. Se on hyödyllinen moduuli, jos mainostat muualla kuin tuotesivuillasi.

10 parasta ilmaista Divi-moduulia

Siellä on laaja valikoima ilmaisia ​​Divi-moduuleja, eivätkä kaikki ole luotu tasa-arvoisiksi. Mielestämme nämä 10 ilmaista Divi-moduulia ovat kokeilemisen arvoisia.

1. Divi Tweaker

Divi Tweaker

Divi Tweaker on erittäin älykäs moduuli, joka nopeuttaa Divi Builder ja WooCommerce, poistaa kyselymerkkijonot, jotka voivat hidastaa sivun lataamista ja korvata paikalliset teematiedostot CDN -tiedostosta.

Moduuli lisää myös joitain ylimääräisiä suunnitteluominaisuuksia mobiililaitteille ja työpöydälle, joitain animaatioita ja tehosteita, sivusiirtymiä, asetteluvaihtoehtoja ja paljon muuta.

2. Divi Advanced Text Module

Divi Advanced Text Module

Divi Advanced Text Module on pieni, mutta erittäin hyödyllinen moduuli, joka laajentaa olemassa olevia tekstiasetuksia ja lisää hyödyllisiä työkaluja. Jos työskentelet paljon tekstin kanssa, kuten me, tekstielementin leveyden ja korkeuden muuttamisella on valtava ero, kun yrität viimeistellä sivun asettelua. Tämä moduuli tekee sen.

Se lisää myös kuvan lataustyökalun, joka lyhentää suunnitteluaikoja pienellä mutta tärkeällä tavalla.

3. Divi Slimbuilder

Divi Slimbuilder

Divi Slimbuilder on ihanteellinen, jos rakennat aloitussivuja tai pidempiä sivustosivuja Divi Builder. Se muuttaa pääikkunan asettelua niin, että sivuelementit ovat ohuempia. Se muuttaa myös tapaa, jolla osioiden otsikot näytetään, jotta koko suunnitteluprosessi olisi paljon sujuvampi.

Se on pieni asia, mutta tarkoittaa, että voit nähdä paljon enemmän suunnittelun taustapuolella tapahtuvasta tilanteesta ilman, että sinun täytyy vierittää ylös ja alas.

4. Artikkelikorttien laajennus

Artikkelikorttien laajennus

Artikkelikorttien laajennus oli ilmeisesti Elegant Themeskaikkien aikojen ensimmäinen Divi-moduuli. Se on niin hyödyllinen, että se on edelleen noin ja edelleen suosittu tänään. Se on toinen vaatimaton moduuli, joka lisää enemmän muotoiluvaihtoehtoja Divi Blog -moduuliin muuttaakseen blogikorttien näyttötapaa.

Muutokset ovat vaatimattomia ja sisältävät varjoefektejä, taustavärejä, kyvyn muotoilla blogiruudukkoa ja muuttaa blogin otsikon ja meta-sijaintia.

5. Divi Icon -laajennuspaketti

Divi Icon -laajennuspaketti

Divi Icon -laajennuspaketti tekee juuri sen mitä sanoo. Se lisää joukon käsin piirrettyjä kuvakkeita Divi Builder voit käyttää suunnittelussa. Valittavana on satoja, ja voit muokata ne kaikki teemasi mukaan.

Tästä moduulista on ilmainen ja premium-versio. Premium lisää uusia kuvakkeita ja mukautusvaihtoehtoja.

6. Laajenna Divi

Laajenna Divi

Laajenna Divi on toinen itsestään selittävä Divi-moduuli. Se lisää Diville monia ominaisuuksia, kuten Lightbox, uuden aiheeseen liittyvän viestin, uudet kirjoittajalaatikot, uudet viimeisimmät postaukset, animaattorin sivun esilatausta varten, Font Awesome -työkalut ja paljon muuta.

Moduulia ei ole päivitetty jonkin aikaa, mutta testasimme sen uusimmalla WordPress- ja Divi-versiolla ja se toimi hyvin.

7. Taistelupuku Diville

Taistelupuku Diville

Sen lisäksi, että Battle Suit for Divi on erittäin siisti nimi, sillä on paljon tarjottavaa. Se on laajennusmoduuli, joka lisää lisää viesti-, alatunniste-, galleria- ja kuvavaihtoehtoja, lisää Lightbox-kuvan ja videon, lisää kuvatehosteet, julkaisun otsikko- ja metavaihtoehdot ja paljon muita työkaluja.

Koska tämä on ilmainen moduuli, täällä on paljon tekemistä ja moduuli tekee kaikesta helppokäyttöisen ja helppokäyttöisen.

8. Yksinkertainen Divi-lyhytkoodi

Yksinkertainen Divi-lyhytkoodi

Simple Divi Shortcode vie erittäin tehokkaan työkalun WordPressiin, pikakoodeihin ja antaa sinun sijoittaa ne mihin tahansa muihin moduuleihin. Se on toinen hyvin yksinkertainen työkalu, jolla voi olla valtava ero, jos käytät pikakoodeja paljon sivuillasi.

Tästä laajennuksesta on ilmainen ja premium-versio, mutta ilmainen vaihtoehto tekee kaiken mitä todennäköisesti tarvitset sen tekemiseen.

9. Surbma Divi Extrat

Surbma Divi Extrat

Surbma Divi Extras lisää Diviin vielä muutamia ominaisuuksia, jotka jotkut teistä saattavat pitää hyödyllisinä. Yksi asia, joka tekee siitä erottuvan, on tekstilogo-vaihtoehto. Sinun ei ehkä tarvitse käyttää sitä usein, mutta kun käytät, tämä työkalu tekee tästä moduulista käyttökelpoisen.

Moduuli lisää myös tyylin, asettelun, valikon ja alatunnisteen vaihtoehdot, ja siinä on erittäin siisti pystysuora keskivaihtoehto moduulin sisällä tapahtuvaa kopiointia varten. Tämä on toinen niistä työkaluista, jotka voivat olla aito hengenpelastaja!

10. Ponnahdusikkunat Diville

Ponnahdusikkunat Diville

Divin ponnahdusikkunat ovat erittäin hyödyllisiä, jos haluat luoda yhden ponnahdusikkunan, mutta et halua käyttää erillistä ponnahdusikkunaa WordPressille. Se lisää ominaisuuden, jossa voit luoda elementin rakentajaan ja käyttää sitä markkinoinnin ponnahdusikkunana.

Se on yksinkertainen ratkaisu vakavaan ongelmaan ja sopii erinomaisesti ponnahdusikkunoiden luomiseen sivulla ilman, että tarvitsee käyttää ponnahdusikkunaa tai maksaa siitä.

10 Premium Divi -moduulia

Siellä on satoja premium-luokan Divi-moduuleja. Jotkut ovat sijoituksen arvoisia ja toiset, ei niin paljon. Nämä 10 ovat ehdottomasti rahasi arvoisia!

Divi-karusellimoduuli 2.0

Divi Carousel Module 2.0 auttaa sinua rakentamaan karuselleja melkein mihin tahansa Divissä. Ne voivat olla hyödyllisiä tuotteille, palveluille, suosituksille ja kaikenlaisille myynninedistämistoiminnoille. Tämä laajennus saa ne tapahtumaan.

Sen avulla voit luoda niin monta karusellia kuin haluat ja tallentaa ne malleina käytettäväksi missä tahansa. Sinulla on täysi hallinta heidän ulkonäössään ja kaikessa suunnittelussaan rakentajan sisällä. Erinomainen vaihtoehto näytöille.

2. Divi verkkokauppa

Divi verkkokauppa

Divi-verkkokauppa toimii sekä Divin että WooCommercen kanssa pikakuvakkeena verkkokaupan rakentamiseen. Siinä on pari mallia, joita voidaan käyttää malleina, joitain mukautettuja sivuelementtejä, esittelysisältöä saadaksesi sinut nopeasti käyntiin ja kaiken mitä tarvitset peruskaupan rakentamiseen.

Moduulissa on jopa sivupalkit, sosiaalinen jakaminen, tuoteasetteluvaihtoehdot, lähtölaskennakellot, trendituotemoduulit ja paljon muuta. Jos et pidä mistään Divi-demoista, tämä voi olla moduuli sinulle.

3. Divi Headers Pack

Divi Headers Pack

- Divi Headers Pack on valtava. Se lisää yli 750 uutta otsikkoa, jotkut toiminnalliset ja jotkut uudet mallit. Se lisää pois-canvas valikkovaihtoehdot, reagoivat otsikot, valikkotehosteet, valikkoanimaatiot ja paljon työkaluja otsikoiden muotoiluun.

Tällä moduulilla on hyvin kapea keskittyminen, mutta se on investoinnin arvoinen, jos sinulla on vaikeuksia löytää täydellinen otsikko. Jos et löydä sitä täältä, et löydä sitä mistään!

4. Divi Supreme Pro

Divi Supreme Pro

Divi Supreme Pro sisältää useita moduuleja, jotka parantavat luovuuttasi Divia käytettäessä. Moduuleihin kuuluu liukuväriteksti, Flipbox, tekstinjakaja, Divi-kirjoittaminen, korkein painike, Facebook-syöte ja joukko muita.

Tässä moduulissa on paljon, yli 40 erilaista moduulia ja 7 premium-laajennusta. Hinnan huomioon ottaen Divi Supreme Pro on edullinen!

5. Divi Tapahtumakalenteri

Divi Tapahtumakalenteri

Divi -tapahtumakalenteria voidaan käyttää koko tapahtumienhallintasivuston luomiseen tai tapahtumien lisäämiseen vakiosivustoon. Se käyttää standardia Divi Builder auttaa sinua tapahtumien luomisessa, ja siinä on kaikki mitä tarvitset niiden muotoiluun ja esittämiseen.

Tämä moduuli sisältää kalenterin, karusellin, tapahtumasyötön ja sivumoduulin, jonka avulla voit luoda täysin toimivan tapahtumasivuston tai tapahtumaosan, ja kannattaa tarkistaa.

6. Table Maker

Table Maker

Jotkut pitävät pöytiä helpoina, kun taas toiset pitävät niitä turhauttavana sotkuna. Jos olet jälkimmäisessä leirissä, Table Maker moduuli on sinua varten. Sen avulla voit upottaa taulukon nopeasti sivulle ja muotoilla kaiken siitä.

Voit lisätä kuvia, kuvakkeita, tekstejä, painikkeita ja jopa tiivistä rivejä matkapuhelimelle. Se on erittäin tehokas laajennus, joka tekee lyhyestä työstä taulukoiden lisäämistä ja muotoilua mille tahansa sivulle, ja siksi se kannattaa ostaa.

7. Divi-modaalinen ponnahdusikkuna

Divi-modaalinen ponnahdusikkuna

Jos haluat käyttää ponnahdusikkunoita ja ponnahdusikkunoita Diville, se ei riitä, Divi Modal Popup tulee olemaan. Se on monipuolinen moduuli, joka tekee nopeasti työtä ponnahdusikkunoiden luomisessa sivun latautumisesta, viiveestä ja joukosta muita laukaisimia.

Vielä tärkeämpää on, että voit sisällyttää täyden valikoiman sivuelementtejä, sijoittaa ponnahdusikkunasi mihin tahansa, saada sen laukaisemaan mistä tahansa sivulla ja lisätä animaatioita itse ponnahdusikkunaan. Tätä haluat käyttää, jos haluat lisätä sitoutumista ponnahdusikkunoiden kanssa.

8. Divi reagoiva auttaja

Divi reagoiva auttaja

Divi Responsive Helper on työkalu, jonka avulla voit nähdä tarkalleen, miten sivusi latautuu mobiililaitteisiin Builderissa. Voit myös muuttaa ulkoasua, latautumista, muuttaa elementtien järjestystä ja hallita täysin sivustosi ulkoasua mobiililaitteissa.

Moduuli sisältää myös erittäin älykkään automaattisen korjaustyökalun, joka voi tasapainottaa lauseita tai kappaleita niin, että ne näyttävät paremmilta. Pelkästään se tekee siitä ostamisen arvoisen!

Divi Muurausgalleria

Divi Muurausgalleria on ihanteellinen, jos haluat enemmän salkusta tai blogisivulta. Se vie tavallisen muurausasettelun ja lisää mahdollisuuden luoda erilaisia ​​muotoja, muuttaa sarakkeita, lisätä tai poistaa tilaa, lisätä modaalisia ponnahdusikkunoita ja määrittää tietty galleria mobiililaitteille.

Jos suunnittelet kuvarikkaaa verkkosivustoa ja haluat tehdä enemmän muuraus, tämä moduuli antaa sinun tehdä kaiken tutusta Builder-käyttöliittymästä.

10. Divi MadValikko

Divi MadValikko

Divi MadMenu lisää lisää vaihtoehtoja Divi Builder. Jos oletusasetukset eivät riitä, tämä moduuli lisää lisää. Se jakaa myös otsikon erillisiin osiin mukauttamisen helpottamiseksi.

Moduulin avulla voit hallita, miten valikko toimii erikokoisilla näytöillä, asettaa erilaisia ​​asetteluja eri laitteille, lisätä Ajax-elementtejä tuotteille, lisätä toimintakutsuja ja muita elementtejä. Se on tehokas tapa hallita otsikoita.

Jos etsit lisätoimintoja, tutustu artikkeliin Divi-laajennukset tai tarkistaa Arvostelumme DiviFlashista.

Kuinka kehittää oma mukautettu Divi-moduuli

Haluatko kehittää oman Divi-moduulin? Onko sinulla ongelma, jota nykyinen moduuli ei kata?

Tämä artikkelin osa on täällä auttamassa.

Aiomme hahmotella oman mukautetun Divi -moduulin kehittämisen perusteet. Tarvitset PHP: n perustaidot tämän osan suorittamiseksi Divi Builder määrittelee moduulit PHP -luokiksi.

Ensin sinun on luotava Divi-laajennus. Sinun on tehtävä tämä ensin, koska mukautettu Divi-moduulisi toteutetaan laajennuksessa, teemalla tai aliteemassa ja laajennus on helpoin luoda.

Luo laajennus lukemalla tämä opas. Kun olet valmis, palaa tänne luomaan moduuli.

Avaa laajennus ja etsi sisällyttimet / moduulit

Luo hakemisto nimeltä SimpleHeader

Luo tiedosto SimpleHeaderiin ja kutsu sitä SimpleHeader.php: ksi

Liitä seuraava tiedosto ja tallenna

<?php
luokka SIMP_SimpleHeader laajentaa ET_Builder_Module {
          public $ slug = 'simp_simple_header';
          public $ vb_support = 'päällä';
          julkinen toiminto init () {
                   $ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
          }
          julkinen toiminto get_fields () {
                   paluutaulukko (
                             'otsikko' => matriisi (
                                      'label' => esc_html __ ('Otsikko', 'simp-yksinkertainen-laajennus'),
                                      'type' => 'teksti',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Syötä haluamasi otsikko tähän.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                             'content' => matriisi (
                                      'label' => esc_html __ ('Sisältö', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Tähän syötetty sisältö näkyy otsikkotekstin alla.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                   );
          }
          julkisen funktion renderöinti ($ käsittelemätön_propsi, $ sisältö = null, $ render_slug) {
          }
}
uusi SIMP_SimpleHeader;

Jos tiedät PHP: si, näet perusotsikon, jota voidaan käyttää Divi Builder. Näet otsikon, jonkin verran sisältöä ja taustaa.

Lisää nyt HTML-tiedosto tiedostoon, jotta se voidaan tehdä.

Lisää seuraava julkisen funktion renderöinti ($processed_props, $ content = null, $ render_slug) {jälkeen.

                   paluu sprintf (

                             ' % 1 $ s

                             % 2 $ s ",

                             esc_html ($ this-> props ['otsikko']),

                             $ this-> rekvisiitta ['content']

                   );

          }

}

uusi SIMP_SimpleHeader;

Koko tiedostosi pitäisi näyttää tältä:

<?php
luokka SIMP_SimpleHeader laajentaa ET_Builder_Module {
          public $ slug = 'simp_simple_header';
          public $ vb_support = 'päällä';
          julkinen toiminto init () {
                   $ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
          }
          julkinen toiminto get_fields () {
                   paluutaulukko (
                             'otsikko' => matriisi (
                                      'label' => esc_html __ ('Otsikko', 'simp-yksinkertainen-laajennus'),
                                      'type' => 'teksti',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Syötä haluamasi otsikko tähän.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                             'content' => matriisi (
                                      'label' => esc_html __ ('Sisältö', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Tähän syötetty sisältö näkyy otsikkotekstin alla.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                   );
          }
          julkisen funktion renderöinti ($ käsittelemätön_propsi, $ sisältö = null, $ render_slug) {
                   paluu sprintf (
                             ' % 1 $ s
                             % 2 $ s ",
                             esc_html ($ this-> props ['otsikko']),
                             $ this-> rekvisiitta ['content']
                   );
          }
}
uusi SIMP_SimpleHeader;

Jos näin on, on nyt aika luoda React Komponenttiluokka, joka mahdollistaa Divi Builder renderöi moduuli.

Luo tiedosto ja kutsu sitä nimellä SimpleHeader.jsx

Liitä seuraava ja tallenna se

// Ulkoiset riippuvuudet
tuoda React, {Component, Fragment} käyttäjältä 'react';
// Sisäiset riippuvuudet
tuo './style.css';
luokka SimpleHeader laajentaa komponenttia {
  staattinen etana = 'simp_simple_header';
  renderöinti () {
    palata (
      
        {this.props.content ()}
      
    );
  }
}
vie oletusarvoinen SimpleHeader;

Siirry tiedostoon / modules / index.js laajennustiedostoon

Lisää ja tallenna seuraava

// Sisäiset riippuvuudet
tuo SimpleHeader osoitteesta './SimpleHeader/SimpleHeader';
viennin oletus [
  Yksinkertainen otsikko,
];

Lisää seuraava SimpleHeader.jsx-tiedostoon jälkeen   

renderöinti () {
    palata (
ja tallenna se.
  
        {this.props.heading}
        

Koko tiedoston pitäisi nyt näyttää tältä:

// Ulkoiset riippuvuudet
tuoda React, {Component, Fragment} käyttäjältä 'react';
// Sisäiset riippuvuudet
tuo './style.css';
luokka SimpleHeader laajentaa komponenttia {
  staattinen etana = 'simp_simple_header';
  renderöinti () {
    palata (
      
        {this.props.heading}
        
          {this.props.content ()}
        
      
    );
  }
}
vie oletusarvoinen SimpleHeader;

Avaa moduulin style.css ja lisää

.simp-simple-header-header {
          marginaali-pohja: 20px;
}

Se on Divi-moduulin kehittämiseen. Sinun tarvitsee vain testata se!

Avaa Divi Builder, etsi Simple Header -moduuli ja yritä käyttää sitä sivulla. Jos sait koodin oikein, näet yksinkertaisen otsikkovaihtoehdon.

Divi-moduulien yhteenveto

Olemme sisällyttäneet yli 70 ilmaista ja premium -divis -moduulia, jotka kattavat kaiken ponnahdusikkunoiden luomisesta lisäominaisuuksien lisäämiseen Divi Builder. Jotkut ovat niche -moduuleja, joita et käytä kovin usein, mutta jotkut ovat välttämättömiä sujuvalle ja tehokkaalle käytölle Divi Builder.

Mielestämme ne edustavat poikkileikkausta siitä, mikä on saatavilla, mikä toimii ja mikä on järkevästi hinnoiteltu. Mitä mieltä sinä olet?

Käytätkö jotain näistä Divi-moduuleista? Onko moduuleja ehdottaa?

kirjailijasta
David Attard
David on työskennellyt verkko- / digitaalialalla tai sen ympäristössä viimeiset 18 vuotta. Hänellä on laaja kokemus ohjelmisto- ja verkkosuunnitteluteollisuudesta WordPressin, Joomlan ja niitä ympäröivien markkinarakojen käytöstä. Digitaalisena konsulttina hän keskittyy auttamaan yrityksiä saamaan kilpailuetua käyttämällä verkkosivustonsa ja tänään saatavilla olevien digitaalisten alustojen yhdistelmää.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...