La guida definitiva ai moduli Divi (ufficiale + di terze parti)

Se utilizzi il tema Divi o Divi Builder, lavorerai regolarmente con i moduli. Sono gli elementi costitutivi del tema che ti consentono di aggiungere elementi della pagina, modellarli, controllarli e utilizzarli per creare bellissimi siti web.

Il problema è che, quando sei nel bel mezzo della progettazione o stai cercando di orientarti in Divi Builder, è difficile vedere esattamente cosa è disponibile.

Questa guida completa ai moduli Divi illustrerà i 46 moduli principali contenuti in Divi. Evidenzierà anche alcuni moduli gratuiti e premium di sviluppatori di terze parti.

Tutto in modo da poter sfruttare al meglio Divi per i siti Web tuoi o dei tuoi clienti.

 

Contenuti[Mostra]

Questo articolo è uno dei nostri tanti Recensioni Divi che CollectiveRay ha fatto per coprire i vari aspetti del tema e del costruttore Divi.

Hai bisogno di acquistare Divi a un prezzo speciale? Al momento abbiamo uno sconto esclusivo da Elegant Themes:

Ottieni Divi per il 10% di sconto in Maggio 2021 Solo

Moduli Divi ufficiali

Ci sono 46 moduli Divi attualmente disponibili.

1. Fisarmonica

Fisarmonica

La fisarmonica aggiunge un modulo di scorrimento a fisarmonica a una pagina. Sai quando vedi una casella di contenuto con un elemento selezionabile e scorre verso il basso per rivelare più contenuti? Questa è una fisarmonica.

Per Divi, un modulo a fisarmonica è un elemento selezionabile contenente contenuti. Seleziona la prima riga e si espande per rivelare una breve spiegazione o panoramica. Selezionare la riga successiva e la prima riga si chiude e la seconda si apre. È un modo elegante per includere molti contenuti in un piccolo spazio.

2. audio

audio

Il modulo Audio fornisce un lettore audio che puoi posizionare ovunque in una pagina. È possibile collegare il lettore a un file audio ospitato localmente in modo che venga riprodotto ogni volta che un utente lo seleziona.

In Divi, il modulo Audio è un semplice lettore audio, ma se conosci un po 'di CSS, puoi personalizzarlo da solo.

3. Banconi bar

Banconi bar

I contatori di barre sono le barre di avanzamento che vedi sui siti Web di Internet. Fatto bene, sono una misura immediatamente comprensibile di qualcosa e possono funzionare molto bene nella giusta situazione.

I banconi Divi Bar possono essere colorati, personalizzati per adattarsi a quasi tutti gli scopi, essere configurati manualmente per livelli specifici e utilizzati in diversi modi.

4. Blog

Blog

Il modulo Divi Blog ti consente di posizionare i post del blog ovunque su una pagina. Non solo puoi posizionare questi post ovunque, ma puoi anche modellarli in base al tuo tema.

Il modulo Divi Blog offre completa libertà su dove e come visualizzare i post del tuo blog. Non sei più legato a dove WordPress o il tuo tema pensano che dovresti averli con questo modulo.

5. Blurb

fascetta pubblicitaria

Il modulo Blurb è un elemento di contenuto completo di icone e animazioni opzionali. Questi sono utili per le descrizioni di prodotti o servizi sulle pagine poiché l'aspetto di animazione opzionale può aggiungere un po 'di interesse a una pagina.

Il modulo Divi Blurb ha una gamma di icone, colori e opzioni di animazione a seconda di come li usi. Alcuni sono contenuti come predefiniti all'interno del modulo mentre altri possono essere implementati con CSS.

6. Pulsante

pulsante

Il modulo Divi Button fornisce i mezzi per aggiungere pulsanti ovunque sul tuo sito, in qualsiasi colore e in un'ampia gamma di forme e dimensioni. Il design può essere controllato nella personalizzazione del tema e i collegamenti e gli effetti possono essere configurati contemporaneamente.

Sono un'estensione semplice ma efficace delle opzioni dei pulsanti esistenti all'interno di Divi.

7. Invito all'azione

Call to Action

Gli inviti all'azione giocano un ruolo fondamentale nella conversione. Più convincenti puoi renderli, più efficaci possono essere. È qui che entra in gioco questo modulo.

Il modulo Divi Call to Action offre un modo semplice per creare i tuoi inviti all'azione utilizzando una combinazione di casella CTA, titolo, contenuto e pulsante per aumentare le conversioni ovunque sul tuo sito web.

8. Contatore circolare

Contatore circolare

Il modulo Contatore circolare funziona in modo simile ai Contatori a barre, ma utilizza invece un'immagine a cerchio intero. Invece di una semplice barra, il modulo aggiunge un cerchio completo con aree coperte a seconda della percentuale contrassegnata come completa.

Il contatore circolare funziona con la personalizzazione del tema e può essere completamente personalizzato per adattarsi a qualsiasi tema.

9. codice

Codice

Il modulo Divi Code è un elemento di codice personalizzato che puoi aggiungere a qualsiasi pagina. Accetta codici brevi, CSS e HTML e può aiutarti a realizzare una moltitudine di cose all'interno di una pagina.

Funzionano in modo simile agli elementi CSS personalizzati all'interno dei temi, solo che puoi posizionarli ovunque e farli fare quasi tutto poiché non sono vincolati dal tema.

10. Commenti

Commenti

Il modulo Commenti Divi ti consente di aggiungere un commento dal tuo blog in qualsiasi punto della pagina. Ad esempio, una raccomandazione o un feedback da un commento del blog può essere presente in una pagina di prodotto.

Invece di usare un'immagine, puoi includere la cosa reale e quindi collegarti al commento principale, che si aggiunge all'autenticità.

11. Modulo di Contatto

Modulo di Contatto

Il modulo Modulo di contatto è utile se non si desidera utilizzare un plug-in per moduli di contatto di terze parti. Puoi implementare un modulo in qualsiasi punto della pagina e applicarne uno stile utilizzando il personalizzatore del tema.

È possibile creare più moduli, utilizzare la convalida dei campi e la logica condizionale per far funzionare qualsiasi modulo.

12. Conto alla rovescia

Countdown Timer

I timer per il conto alla rovescia vengono spesso utilizzati per i rilasci di prodotti, i conti alla rovescia per offerte speciali o vendite o per creare ansia da tempo nei lettori.

Il modulo Countdown Timer ti aiuta in questo, permettendoti di modellare un timer, aggiungere il tuo conto alla rovescia e posizionarlo ovunque sulla pagina.

13. Divisore

Divisore

I divisori sono modi piccoli ma importanti per suddividere le pagine Web e dare al pubblico un po 'di pausa prima della sezione successiva. La maggior parte dei temi web sembra includerli come un ripensamento, ed è qui che entra in gioco Divi.

Il tema Divi ha divisori ma il modulo Divider aggiunge altro.

14. Iscrizione e-mail

Attiva e-mail

I moduli di attivazione delle e-mail sono essenziali per creare elenchi di e-mail e aumentare il coinvolgimento. L'email è ancora uno strumento di marketing incredibilmente potente e il modulo di attivazione dell'email mira ad aiutare in questo.

Puoi creare moduli, iscrizioni a newsletter ed elementi generatori di lead utilizzando questo modulo e quindi collegarlo al tuo programma di posta elettronica per gestirlo in modo efficiente.

15. Portafoglio filtrabile

Portafoglio filtrabile

Il modulo Portafoglio filtrabile è ideale per includere una sezione interessante del portafoglio all'interno di una pagina. Puoi modellarlo, configurare le tue categorie e filtri e creare un portfolio completamente interattivo.

Alcuni temi Divi sono dotati di elementi del portfolio integrati e anche Divi Builder li ha, ma questo modulo aggiunge ancora di più.

Galleria

Il modulo Divi Gallery fa più o meno lo stesso per le gallerie. Ti consente di mostrare immagini e video ovunque su una pagina.

La galleria può essere completamente personalizzata e includere qualsiasi immagine ti piaccia. È possibile impostare lo stile come una griglia o un dispositivo di scorrimento e controllare molti aspetti dell'aspetto e del design dallo strumento di personalizzazione.

17. Immagine

Immagine

Il modulo Divi Image aggiunge una gamma di opzioni durante la visualizzazione di immagini su una pagina. Puoi aggiungere effetti lightbox, implementare il caricamento lento, aggiungere animazioni e far risaltare le tue immagini.

Le immagini hanno un potente effetto sul coinvolgimento e sul tempo sulla pagina, quindi rendere giustizia alle tue immagini ha perfettamente senso. Questo modulo può aiutare in questo.

18. Accesso

Accedi

Il modulo Accesso Divi aggiunge un modulo di accesso caratteristico alle pagine utilizzando lo stile familiare del tuo tema. Il modulo può essere adattato alla pagina per sedersi sullo sfondo o risaltare e farsi notare.

La pagina di accesso accederà automaticamente l'utente al sito senza reindirizzare alla pagina di accesso predefinita di WordPress.

19. Carta geografica

Mappa

Il modulo Divi Map prende l'elemento standard della mappa e aggiunge ulteriori opzioni di personalizzazione e una perfetta integrazione in una pagina. Poiché le mappe possono svolgere un ruolo fondamentale in alcuni siti, questo è un addon molto utile da usare!

Map si integra con Google Maps per evidenziare posizioni o aggiungere elementi interattivi. Può essere abbinato anche alla tua pagina.

20. Numero contatore

Numero contatore

Il modulo Number Counter è un altro dispositivo grafico per comunicare con il tuo pubblico. Piuttosto che utilizzare una barra o una grafica circolare, questo modulo utilizza numeri semplici per comunicare.

Funziona allo stesso modo anche degli altri. Modellalo nella personalizzazione del tema e posizionalo in qualsiasi punto della pagina.

21. Persona

Persona

Il modulo Persona aggiunge personalità al tuo sito web. Sia che tu voglia mostrare autori, fornire informazioni sul tuo team o qualcos'altro, il modulo Persona è come lo fai.

Puoi aggiungere un'immagine, una copia della biografia, collegamenti ai social media e pubblicarli ovunque sul tuo sito web. Ci sono anche opzioni di personalizzazione se ne hai bisogno per adattarsi a un tema esistente.

22. portafoglio

Portfolio

Il modulo Portfolio si basa sulle opzioni fornite da Gallery permettendoti di mostrare il tuo lavoro in diversi modi. Se sei un libero professionista o una piccola impresa e vuoi mettere in mostra il tuo lavoro, ecco come.

Il modulo può funzionare con griglie, layout a larghezza intera, filtri di categoria di offerta e impaginazione. Ci sono anche alcune personalizzazioni che puoi applicare se necessario.

23. Post Navigazione

Post Navigation

Post Navigation accetta le opzioni di lettura successiva o precedente predefinite e le rende più attraenti. Sebbene WordPress e molti temi abbiano queste funzionalità, l'opzione Divi aggiunge ancora più utilità.

Il modulo ti consente di includere interessanti pulsanti precedente e successivo in fondo ai post per consentire ai lettori di lavorare nel tuo blog.

24. Post Slider

Messaggio Slider

Il modulo Post Slider è un ottimo modo per mostrare i post del tuo blog. Utilizza un dispositivo di scorrimento per scorrere una serie definita di post del blog per mostrare il tuo lavoro e attirare i clic.

Mentre molti altri plugin offrono di elencare o mostrare i post del blog, un cursore può includere un'immagine colorata e un estratto che sicuramente coinvolgerà. Con questo modulo sono possibili anche piccole personalizzazioni.

25. Titolo del post

Titolo del post

Il modulo Titolo del post è una piccola ma utile aggiunta che utilizza lo stile Divi per i titoli dei post. Visualizza il titolo e ha anche la possibilità di aggiungere un'immagine in primo piano e tutti i metadati che potresti voler visualizzare.

Il modulo ha alcune opzioni di personalizzazione che puoi usare per adattarlo a un tema, ma le impostazioni predefinite funzionano abbastanza bene per la maggior parte degli usi.

26. Tabelle dei prezzi

Le tabelle dei prezzi

Le tabelle dei prezzi sono uno di quegli elementi che pochissimi temi WordPress sembrano avere ragione. Divi non è uno di loro. Le tabelle dei temi predefinite funzionano abbastanza bene, ma puoi potenziarle con il modulo Tabelle prezzi.

Questo modulo aggiunge una tabella personalizzabile che puoi adattare a qualsiasi pagina. È possibile modificare i colori, le valute, il numero di funzioni ed effetti in base alle esigenze.

Cerca

La ricerca è un'altra di quelle caratteristiche che di solito è tutt'altro che ideale. La funzione di ricerca predefinita di WordPress può essere lenta e perdere l'ovvio. Alcuni temi includono la ricerca che spesso delude. Il modulo Divi Search cambia tutto questo.

Questa è una semplice casella di ricerca che puoi posizionare ovunque e lo stile in base al tuo tema. Semplice, veloce e molto efficace.

28. negozio

Il negozio

Il modulo Divi Shop è un'eccellente estensione di WooCommerce. Se gestisci già un negozio, questo modulo ti consente di presentare i prodotti in un elemento autonomo in qualsiasi punto del tuo sito. È un'ottima opportunità per il cross-sell o l'upselling.

Il modulo consente di ordinare i prodotti, modellare l'elemento ed eseguire alcune personalizzazioni anche del display.

29. Sidebar

Sidebar

Il modulo Sidebar è uno dei più utili di qualsiasi modulo in questo elenco. Prende una barra laterale standard e ti dà il pieno controllo di come appare, cosa presenta e come funziona.

Il modulo ti consente di creare barre laterali personalizzate utilizzando il personalizzatore del tema e posizionarle su tutte le pagine, alcune pagine o pagine specificate.

30. cursore

Slider

I cursori possono essere argomenti controversi, ma non c'è dubbio che possono essere efficaci se hanno uno stile corretto. Il modulo Divi Slider fa proprio questo.

È un semplice cursore che puoi posizionare ovunque sulla pagina e personalizzare per adattarlo al design. Puoi anche usare video, immagini, controllare il tipo di diapositiva e molto altro ancora.

31. Social Media Follow

Segui i social media

I pulsanti Segui sono un'altra funzionalità della pagina che pochi temi riescono a ottenere correttamente. Sono una funzionalità così semplice ma spesso possono sembrare goffe, non funzionare correttamente o sembrare che siano state aggiunte con un plug-in.

Il modulo Social Media Follow è diverso. Aggiunge alcune icone attraenti con collegamenti e consente di personalizzarle in base alle proprie esigenze.

32. Tabs

Tabs

Se il modulo Fisarmonica non è quello che stai cercando, forse lo è il modulo Tabs. Questo è un altro modo per presentare molto testo senza sovraccaricare la pagina.

Questo componente aggiuntivo ti consente di creare un elemento di contenuto con un numero di schede orizzontali che possono contenere copia, immagini o video.

33. Testimonianza

Testimonianze

Il modulo Testimonianza aggiunge prove sociali a una pagina. Sappiamo tutti quanto sia importante la prova sociale e questo modulo ti consente di aggiungerla ovunque.

Hai diverse opzioni di stile per adattare il modulo alla pagina, puoi presentare un'immagine, alcune copie e collegamenti a seconda delle tue esigenze.

34. Testo

Testo

Il modulo Testo ti consente di accedere all'editor di testo di WordPress per aggiungere testo personalizzato ovunque tu voglia. È un altro componente aggiuntivo minore ma utile che offre molta più libertà in termini di posizionamento del testo su una pagina.

35. Attiva / disattiva

Toggle

Il modulo Divi Toggle funziona in modo simile a Accordion in quanto attiva e disattiva le caselle dei contenuti in modo che si aprano e si chiudano. Laddove Accordion utilizza una singola casella con più diapositive, Toggle utilizza singole caselle che ciascuna diapositiva individualmente.

È un'utile alternativa a Accordion in cui potresti avere solo un paio di elementi che desideri utilizzare o desideri che tutti gli elementi vengano aperti contemporaneamente.

36. video

Video

Puoi già incorporare video in WordPress ma devi utilizzare l'intero URL iFrame nella vista codice. Il modulo Divi Video salva tutto questo.

Il modulo ti consente di incorporare un video caricato o collegato in qualsiasi punto di una pagina. Puoi anche impostare un'immagine personalizzata al posto del primo fotogramma e personalizzare il pulsante di riproduzione.

37. Video Slider

Cursore video

Il modulo Video Slider prende il video e aggiunge uno slider. Puoi impostare un video principale e includerne altri sotto e lasciare che il cursore passi da uno all'altro.

Il modulo ti consente di personalizzare la prima immagine e il pulsante di riproduzione, utilizzare video caricati o collegati e posizionarli ovunque su una pagina.

38. Codice a larghezza intera

Codice a larghezza intera

Il modulo Codice a larghezza intera funziona con temi Divi a larghezza intera e ti consente di incorporare codice in una pagina mantenendo la formattazione. È un modulo semplice ma efficace che potrebbe essere utile per siti Web di istruzioni, siti Web per sviluppatori o qualcos'altro.

39. Intestazione a larghezza intera

Intestazione a larghezza intera

Il modulo Fullwidth Header consente di creare un'intestazione utilizzando l'intera larghezza della pagina. Semplice ma molto efficace. Puoi includere un titolo, un sottotitolo e una copia insieme a un massimo di due pulsanti.

40. Immagine a tutta larghezza

Immagine a tutta larghezza

Immagine a larghezza intera è la versione a larghezza intera di Image ma funziona perfettamente nei progetti a larghezza intera. Ha anche le stesse opzioni di visualizzazione e personalizzazione.

41. Mappa a larghezza intera

Mappa a larghezza intera

Il modulo Mappa a larghezza intera funziona come Maps ma per pagine a larghezza intera. Ottieni anche la stessa compatibilità con Google Map, opzioni di personalizzazione e facilità d'uso di quel modulo.

42. Menu a larghezza intera

Menu a larghezza intera

Il menu a larghezza intera fornisce un menu personalizzato che si estende su una pagina. Prende il menu standard di WordPress e lo presenta in un elemento personalizzato. È quindi possibile personalizzare il menu nel solito modo.

43. Portafoglio a larghezza intera

Portafoglio a tutta larghezza

Questo modulo prende il modulo Portfolio standard e lo fa funzionare con pagine a larghezza intera. Ha le stesse personalizzazioni e caratteristiche ma funziona con questo layout.

44. Dispositivo di scorrimento del palo a larghezza intera

Slider post a larghezza intera

Lo Slider Post a larghezza intera prende il modulo Slider Post e lo fa funzionare su tutta la larghezza di una pagina. Ha la stessa utilità e le stesse opzioni di personalizzazione di quel modulo, offrendo il pieno controllo su come appare all'utente.

45. Titolo articolo a larghezza intera

Titolo articolo a larghezza intera

Il titolo del post a larghezza intera è lo stesso del titolo del post ma funziona a larghezza intera. È qualcosa che immaginiamo useresti con parsimonia su una pagina, ma questo modulo Divi ti assicura di poter presentare titoli a larghezza intera senza alcuna codifica.

46. ​​Dispositivo di scorrimento a tutta larghezza

Dispositivo di scorrimento a larghezza intera

Lo Slider a larghezza intera prende il modulo Slider e fa lo stesso. Funziona perfettamente con un design a tutta larghezza. Questo è un modulo più utile con il pieno controllo su come appaiono e si sentono le diapositive.

Moduli Divi di WooCommerce

WooCommerce è molto ben servito da Divi. Alcuni estendono le funzionalità esistenti all'interno delle pagine di WooCommerce mentre altri ti consentono di presentare alcuni elementi del negozio in pagine non del negozio.

Vale la pena verificarli se stai cercando maggiore flessibilità nel modo in cui progetti il ​​tuo negozio.

1. Modulo Woo Breadcrumb

Modulo Woo Breadcrumb

I breadcrumb vengono utilizzati frequentemente sui siti Web per facilitare la navigazione. Il modulo Woo Breadcrumb per Divi fa la stessa cosa per il tuo negozio. Le opzioni sono semplici e includono una pagina del corso, una pagina corrente e un collegamento e un separatore opzionali.

È un modulo semplice ma efficace che ti consente di inserire breadcrumb descrittivi nella parte superiore della pagina per aiutare i tuoi utenti a navigare.

2. Modulo titolo Woo

Modulo titolo Woo

Questo modulo ti consente di avere il pieno controllo sui titoli dei prodotti. È possibile modificare il titolo, modellarlo e aggiungere collegamenti, sfondi e configurare come richiesto. Si basa sull'opzione del titolo predefinita aggiungendo più strumenti di progettazione e alcune spaziature avanzate.

Inoltre, quando aggiorni un titolo con questo modulo, puoi impostarlo in modo che si aggiorni automaticamente ovunque sul tuo sito.

3. Modulo Woo Image

Modulo Woo Image

Il modulo Woo Image offre il pieno controllo sulle immagini dei prodotti nel tuo negozio. Le opzioni predefinite sono buone, ma questo va oltre. Puoi aggiungere un numero di immagini, utilizzare un cursore di anteprima e aggiungere badge o livelli grafici per le offerte o qualcos'altro.

Il modulo ha alcune opzioni di personalizzazione che puoi utilizzare per modellare l'immagine e quindi ti consente di posizionarla ovunque tu voglia su qualsiasi pagina.

Modulo Woo Gallery

Il modulo Woo Gallery si basa sul modulo immagine incorporando immagini in una galleria di prodotti. Offre opzioni simili al modulo Divi Gallery che abbiamo menzionato in precedenza e offre l'opportunità di modellare la galleria e posizionarla ovunque, su qualsiasi pagina.

Le immagini vendono prodotti, quindi questa è un'opzione eccellente se la capacità di immagine predefinita di WooCommerce non offre ciò di cui hai bisogno.

5. Modulo Woo Price

Modulo Woo Price

Il modulo Woo Price estende i prezzi e ti consente di presentare prodotti e prezzi su qualsiasi pagina, non solo sulle pagine del negozio. È un elemento personalizzabile che mostra il prezzo corrente, il prezzo precedente, il prezzo di vendita e progetta quei prezzi per adattarli al tuo tema.

Sebbene il plug-in WooCommerce standard abbia molte opzioni di prezzo integrate, questo modulo fa un ulteriore passo avanti e include la possibilità di promuovere su pagine non di prodotto.

6. Modulo Woo Aggiungi al carrello

Modulo Woo Aggiungi al carrello

Il modulo Woo Add to Cart offre il pieno controllo sull'acquisto effettivo. Con esso puoi modellare il pulsante Compralo ora nel modo che preferisci. Da quello che dice a come appare e separa il pulsante dal layout WooCommerce predefinito.

Se, per qualche motivo, il prezzo predefinito e il layout dei pulsanti non funzionano per il tuo tema, questo modulo ti aiuta. Puoi posizionarlo ovunque, modellarlo, mostrare un'opzione di quantità e persino una visualizzazione dello stock rimanente.

7. Modulo di valutazione Woo

Modulo di valutazione Woo

Le valutazioni sono tutto nella vendita al dettaglio. I prodotti con un punteggio elevato superano i prodotti senza rating con un margine significativo. L'aumento delle recensioni e delle prove sociali può essere tuo con il modulo di valutazione Woo.

Ti consente di inserire una valutazione su una pagina, visualizzare recensioni, visualizzare il numero e la valutazione media di tali recensioni e i link ad esse. Ogni negozio dovrebbe usare le valutazioni e questo è come farlo.

8. Modulo Woo Stock

Modulo Woo Stock

Il modulo Woo Stock fa esattamente quello che dice sulla latta. Ti consente di mostrare un numero di magazzino accurato sul display del tuo prodotto. Questo può aiutare ad aumentare l'urgenza, che a sua volta aumenta la conversione.

Puoi modellare ogni display per aiutare con quell'urgenza evidenziando scorte basse in rosso o scorte alte in verde, aggiungi il testo "Non disponibile" e posizionalo ovunque sulla pagina.

9. Woo Meta Modulo

Modulo Woo Meta

Il modulo Woo Meta si prende cura di piccoli dettagli come la visualizzazione di SKU, tag, categorie e dati supplementari su una pagina. Se vuoi includere quanti più dati possibile nelle pagine, questo modulo ti aiuterà.

Non è un modulo a forma libera ma può prendere meta interni e visualizzarli affinché tutti possano vederli. Puoi modellare il design però.

10. Modulo di descrizione Woo

Modulo di descrizione Woo

Il modulo di descrizione di Woo ti consente di visualizzare una descrizione del prodotto per un prodotto specifico ovunque all'interno di un tema Divi.

È un modulo di base ma utilizzabile che ti consente di promuovere prodotti su pagine di blog o pagine di servizio e di dare uno stile completo all'aspetto di quella descrizione.

11. Modulo Woo Tabs

Modulo Woo Tabs

Il modulo Woo Tabs funziona in modo simile al modulo Divi Tabs. Installa un elemento di contenuto a schede in una pagina che puoi riempire con qualsiasi contenuto tu voglia.

Le schede possono essere utili per combinare più fonti di informazioni su una singola pagina. Ad esempio, i dettagli del prodotto, le specifiche del prodotto, le opzioni di consegna e le recensioni all'interno di una singola casella con una scheda per ciascuna.

12. Modulo di informazioni aggiuntive Woo

Modulo di informazioni aggiuntive Woo

Il modulo Woo Additional Information è per coloro che vogliono di più. Hai prodotti con opzioni extra? Questo è il modulo da usare. Ad esempio, qui saranno presenti taglie o colori diversi.

Puoi modellarlo come preferisci e posizionarlo su una pagina utilizzando il personalizzatore standard. Un'altra aggiunta semplice ma preziosa.

Modulo prodotti correlati Woo

Il Woo Additional Information Module dovrebbe richiedere poche presentazioni. I negozi prosperano nel cross-selling e nell'upselling e questo modulo è come lo fai. È possibile aggiungere una sezione Prodotti correlati a una pagina e aggiungere informazioni di supporto come desiderato.

Ogni negozio dovrebbe utilizzare il cross-selling e se le opzioni standard di WooCommerce non sono sufficienti, questo modulo funziona perfettamente con Divi.

14. Modulo Upsell Woo

Modulo Upsell Woo

Il modulo Woo Upsell fa più o meno la stessa cosa. Puoi aggiungerlo alle pagine dei prodotti o a qualsiasi pagina del tuo sito per eseguire l'upselling dei prodotti.

I prodotti presenti in questo modulo saranno quelli che hai impostato come opzioni di upsell in WooCommerce. Questo modulo ti consente di posizionarli ovunque su una pagina.

15. Modulo Avviso carrello Woo

Modulo Avviso carrello Woo

Il modulo Woo Cart Notice è un'opzione a valore aggiunto che aggiunge un semplice avviso alla pagina di un prodotto per notificare all'utente che ha aggiunto un prodotto al carrello. È un elemento di interazione semplice ma utile che può distinguere un grande negozio da uno buono.

Le notifiche possono essere stili e con colori e caratteri. L'impostazione predefinita utilizzerà il colore del tema, ma puoi facilmente sovrascriverlo se preferisci.

16. Modulo Woo Reviews

Modulo Recensioni Woo

Il modulo Woo Reviews ti consente di inserire recensioni di prodotti per i tuoi articoli su qualsiasi pagina del tuo sito. È utile che le pagine di promozione o i post del blog aggiungano quella prova sociale vitale per aiutare a influenzare una decisione di acquisto.

Il modulo consente di impostare campi specifici, mostrare il conteggio dei commenti e influenzare il colore e lo stile. È un modulo utile se promuovi in ​​luoghi diversi dalle pagine dei tuoi prodotti.

10 dei migliori moduli Divi gratuiti

Esiste una vasta gamma di moduli Divi gratuiti e non tutti sono uguali. Pensiamo che vale la pena provare questi 10 moduli Divi gratuiti.

1. Divi Tweaker

Divi Tweaker

Divi Tweaker è un modulo molto intelligente che aiuta ad accelerare Divi Builder e WooCommerce, rimuove le stringhe di query che possono rallentare il caricamento della pagina e può sostituire i file dei temi locali con i file serviti da un CDN.

Il modulo aggiunge anche alcune funzionalità di progettazione extra per dispositivi mobili e desktop, alcune animazioni ed effetti, transizioni di pagina, opzioni di layout e molto altro ancora.

2. Modulo di testo avanzato Divi

Modulo di testo avanzato Divi

Divi Advanced Text Module è un modulo piccolo ma molto utile che espande le opzioni di testo esistenti e aggiunge alcuni strumenti utili. Se lavori molto con il testo, come facciamo noi, la possibilità di modificare la larghezza e l'altezza dell'elemento di testo fa un'enorme differenza quando cerchi di perfezionare un layout di pagina. Questo modulo lo fa.

Aggiunge anche uno strumento di caricamento delle immagini che riduce i tempi di progettazione in modo piccolo ma importante.

3. Divi Slimbuilder

Divi Slimbuilder

Divi Slimbuilder è l'ideale se crei pagine di destinazione o pagine del sito più lunghe con Divi Builder. Cambia il layout della finestra principale in modo che gli elementi della pagina siano più sottili. Cambia anche il modo in cui vengono visualizzati i titoli delle sezioni per rendere l'intero processo di progettazione molto più fluido.

È una cosa piccola ma significa che puoi vedere molto di più di quello che sta succedendo con il back-end del design senza dover continuare a scorrere su e giù.

4. Estensione delle carte dell'articolo

Estensione delle carte dell'articolo

L'articolo Cards Extension era apparentemente il primo modulo Divi di Elegant Themes. È così utile che è ancora in circolazione e ancora popolare oggi. È un altro modulo modesto che aggiunge più opzioni di stile al modulo Divi Blog per cambiare il modo in cui vengono visualizzate le schede del blog.

Le modifiche sono modeste e includono effetti di ombreggiatura, colori di sfondo, la possibilità di modellare la griglia del blog e modificare la posizione del titolo e del meta del blog.

5. Pacchetto di espansione icona Divi

Pacchetto di espansione icona Divi

Il Divi Icon Expansion Pack fa esattamente quello che dice di fare. Aggiunge una serie di icone disegnate a mano a Divi Builder da utilizzare nel tuo progetto. Ce ne sono centinaia tra cui scegliere e puoi personalizzarli tutti per adattarli al tuo tema.

C'è una versione gratuita e una versione premium di questo modulo. Il premio aggiunge più icone e opzioni di personalizzazione.

6. Espandi Divi

Espandi Divi

Expand Divi è un altro modulo Divi autoesplicativo. Aggiunge una gamma di funzionalità a Divi tra cui Lightbox, una nuova sezione di post correlati, nuove caselle di autore, nuovo elemento di post recenti, animatore per il precaricamento della pagina, strumenti di Font Awesome e molto altro ancora.

Il modulo non è stato aggiornato per un po 'ma lo abbiamo testato sull'ultima versione di WordPress e Divi e ha funzionato bene.

7. Tuta da battaglia per Divi

Tuta da battaglia per Divi

Oltre ad avere un nome molto interessante, Battle Suit for Divi ha molto da offrire. È un modulo di espansione che aggiunge più opzioni di post, piè di pagina, galleria e immagine, aggiunge Lightbox per immagini e video, aggiunge effetti immagine, titolo del post e meta opzioni e un sacco di altri strumenti.

Considerando che questo è un modulo gratuito, c'è molto da fare qui e il modulo rende tutto accessibile e molto facile da usare.

8. Shortcode Divi semplice

Shortcode Divi semplice

Simple Divi Shortcode prende uno strumento molto potente in WordPress, gli shortcode e ti consente di posizionarli ovunque all'interno di altri moduli. È un altro strumento molto semplice che può fare un'enorme differenza se usi molto gli shortcode nelle tue pagine.

Esiste una versione gratuita e una versione premium di questo plug-in, ma l'opzione gratuita fa tutto ciò di cui potresti aver bisogno.

9. Surbma Divi Extras

Surbma Divi Extras

Surbma Divi Extras aggiunge alcune funzionalità in più a Divi che alcuni di voi potrebbero trovare utili. Una cosa che lo distingue è l'opzione del logo di testo. Potrebbe non essere necessario usarlo spesso, ma quando lo fai, questo strumento da solo rende questo modulo degno di essere utilizzato.

Il modulo aggiunge anche opzioni di stile, layout, menu e piè di pagina e ha un'opzione centrale verticale molto ordinata per la copia all'interno di un modulo. Questo è un altro di quegli strumenti che possono essere un vero toccasana!

10 Popup per Divi

Popup per Divi

Popups for Divi è molto utile se desideri creare un singolo popup ma non desideri utilizzare un plug-in popup dedicato per WordPress. Aggiunge una funzionalità in cui è possibile creare un elemento all'interno del generatore e utilizzarlo come popup per il marketing.

È una soluzione semplice a un problema serio e ideale per creare popup di base all'interno di una pagina senza dover utilizzare o pagare per un plug-in popup.

10 moduli Divi Premium

Ci sono centinaia di moduli Divi premium là fuori. Alcuni valgono l'investimento e altri non così tanto. Questi 10 valgono sicuramente i tuoi soldi!

Modulo giostra Divi 2.0

Divi Carousel Module 2.0 ti aiuta a costruire caroselli per quasi tutto all'interno di Divi. Possono essere utili per prodotti, servizi, testimonianze e tutti i tipi di funzioni promozionali. Questo plugin li fa accadere.

Ti consente di creare tutte le giostre che desideri e di salvarle come modelli da utilizzare ovunque. Hai il pieno controllo su come appaiono e si sentono e tutta la progettazione viene eseguita all'interno del costruttore. Un'ottima opzione per i display.

2. Divi Ecommerce

Divi Ecommerce

Divi Ecommerce funziona sia con Divi che con WooCommerce per creare scorciatoie per la creazione di un negozio online. Ha un paio di design da utilizzare come modelli, alcuni elementi di pagina personalizzati, contenuti demo per farti diventare operativo rapidamente e tutto ciò di cui hai bisogno per creare un negozio di base.

Il modulo include anche barre laterali, condivisione sui social, opzioni di layout del prodotto, timer per il conto alla rovescia, moduli di prodotti di tendenza e molte altre opzioni. Se non ti piace nessuna delle demo di Divi, questo potrebbe essere il modulo che fa per te.

3. Pacchetto Divi Headers

Pacchetto Divi Headers

Il Divi Headers Pack è enorme. Aggiunge oltre 750 nuove intestazioni, alcune funzionali, alcuni nuovi design. Aggiunge opzioni di menu fuori dall'area di disegno, intestazioni reattive, effetti di menu, animazioni di menu e una tonnellata di strumenti per lo stile delle intestazioni.

Questo modulo ha un focus molto ristretto, ma vale la pena investire se hai problemi a trovare l'intestazione perfetta. Se non lo trovi qui, non lo troverai da nessuna parte!

4. Divi Supreme Pro

Divi Supreme Pro

Divi Supreme Pro include una gamma di moduli per migliorare la tua creatività durante l'utilizzo di Divi. I moduli includono Testo sfumato, Flipbox, Divisore di testo, Divi Typing, Supreme Button, Facebook Feed e molti altri.

C'è molto contenuto in questo modulo, oltre 40 moduli diversi e 7 estensioni premium. Considerando il prezzo, Divi Supreme Pro è un vero affare!

5. Calendario eventi Divi

Calendario eventi Divi

Divi Events Calendar può essere utilizzato per creare un sito Web completo per la gestione degli eventi o per aggiungere eventi a un sito standard. Utilizza lo standard Divi Builder per creare eventi e ha tutto il necessario per modellarli e visualizzarli.

Questo modulo include un calendario, un carosello, un feed di eventi e un modulo di pagina per aiutarti a creare un sito Web di eventi completamente funzionante o una sezione di eventi e vale la pena dare un'occhiata.

6. Table Maker

Table Maker

Alcune persone trovano i tavoli facili, mentre altri li trovano un disastro frustrante. Se ti trovi in ​​quest'ultimo campo, il modulo Table Maker è per te. Ti consente di incorporare rapidamente una tabella in una pagina e di dare uno stile a tutto ciò che la riguarda.

Puoi aggiungere immagini, icone, testi, pulsanti e persino comprimere righe per dispositivi mobili. È un plug-in molto potente che semplifica l'aggiunta e lo stile delle tabelle a qualsiasi pagina e per questo vale la pena acquistarlo.

7. Divi Modal Popup

Divi Modal Popup

Se vuoi utilizzare popup e popup per Divi non è sufficiente, Divi Modal Popup lo sarà. È un modulo ricco di funzionalità che semplifica la creazione di popup dal caricamento della pagina, dal ritardo e da una serie di altri trigger.

Ancora più importante, puoi includere l'intera gamma di elementi della pagina, posizionare il tuo popup ovunque, farlo attivare da qualsiasi cosa sulla pagina e aggiungere animazioni al popup stesso. Se vuoi aumentare il coinvolgimento con i popup, questo è ciò che usi.

8. Divi Responsive Helper

Divi Responsive Helper

Divi Responsive Helper è uno strumento che ti aiuta a vedere esattamente come verrà caricata la tua pagina sui dispositivi mobili dall'interno del Builder. Puoi anche modificare l'aspetto, il caricamento, cambiare l'ordine degli elementi e controllare completamente l'aspetto del tuo sito sui dispositivi mobili.

Il modulo include anche uno strumento di correzione automatica molto intelligente che può ribilanciare frasi o paragrafi in modo che abbiano un aspetto migliore. Già solo questo ne vale la pena!

Divi Masonry Gallery

Divi Masonry Gallery è l'ideale se vuoi di più da un portfolio o da una pagina di blog. Prende il layout in muratura standard e aggiunge la possibilità di creare forme diverse, modificare colonne, aggiungere o rimuovere spazio, aggiungere popup modali e configurare una galleria specifica per dispositivi mobili.

Se stai progettando un sito Web ricco di immagini e desideri fare di più con la muratura, questo modulo ti consente di fare tutto dall'interfaccia familiare di Builder.

10 Divi MadMenu

Divi MadMenu

Divi MadMenu aggiunge più opzioni alla sezione del menu di Divi Builder. Se le impostazioni predefinite non sono sufficienti, questo modulo ne aggiunge altre. Inoltre suddivide un'intestazione in sezioni separate per una facile personalizzazione.

Il modulo consente di controllare il funzionamento del menu su schermi di dimensioni diverse, impostare layout diversi per dispositivi diversi, aggiungere elementi Ajax per i prodotti, aggiungere chiamate alle azioni e anche altri elementi. È un modo potente per padroneggiare le intestazioni.

Se stai cercando funzionalità aggiuntive, consulta il nostro articolo su Plugin Divi.

Come sviluppare il tuo modulo Divi personalizzato

Vuoi sviluppare il tuo modulo Divi? Hai un problema che non è coperto da un modulo esistente?

Questa parte dell'articolo è qui per aiutarti.

Descriveremo le basi per sviluppare il tuo modulo Divi personalizzato. Avrai bisogno di competenze PHP di base per completare questa sezione poiché Divi Builder definisce i moduli come classi PHP.

Per prima cosa dovrai creare un'estensione Divi. Devi prima farlo perché il tuo modulo Divi personalizzato è implementato all'interno di un'estensione, un tema o un tema figlio e l'estensione è la più semplice da creare.

Leggi questa guida per creare la tua estensione. Una volta che hai finito, torna qui per creare il tuo modulo.

Apri la tua estensione e individua include / modules

Crea una directory chiamata SimpleHeader

Crea un file in SimpleHeader e chiamalo SimpleHeader.php

Incolla quanto segue nel file e salva


class SIMP_SimpleHeader estende ET_Builder_Module {
          public $ slug = 'simp_simple_header';
          public $ vb_support = 'on';
          funzione pubblica init () {
                   $ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
          }
          funzione pubblica get_fields () {
                   return array (
                             'intestazione' => array (
                                      'label' => esc_html __ ('Heading', 'simp-simple-extension'),
                                      'type' => 'text',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Inserisci qui l'intestazione desiderata.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                             'contenuto' => array (
                                      'label' => esc_html __ ('Content', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Il contenuto inserito qui apparirà sotto il testo dell'intestazione.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                   );
          }
          render funzione pubblica ($ unprocessed_props, $ content = null, $ render_slug) {
          }
}
new SIMP_SimpleHeader;

Se conosci il tuo PHP, vedrai un'intestazione di base che può essere utilizzata da Divi Builder. Vedrai un'intestazione, alcuni contenuti e uno sfondo.

Ora aggiungi un po 'di HTML al file in modo che possa eseguire il rendering.

Aggiungi quanto segue dopo "public function render ($ unprocessed_props, $ content = null, $ render_slug) {"

                   return sprintf (

                             ' % 1 $ s

                             % 2 $ s ',

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

                             $ this-> props ["content"]

                   );

          }

}

new SIMP_SimpleHeader;

Il tuo file completo dovrebbe assomigliare a questo:


class SIMP_SimpleHeader estende ET_Builder_Module {
          public $ slug = 'simp_simple_header';
          public $ vb_support = 'on';
          funzione pubblica init () {
                   $ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
          }
          funzione pubblica get_fields () {
                   return array (
                             'intestazione' => array (
                                      'label' => esc_html __ ('Heading', 'simp-simple-extension'),
                                      'type' => 'text',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Inserisci qui l'intestazione desiderata.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                             'contenuto' => array (
                                      'label' => esc_html __ ('Content', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Il contenuto inserito qui apparirà sotto il testo dell'intestazione.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                   );
          }
          render funzione pubblica ($ unprocessed_props, $ content = null, $ render_slug) {
                   return sprintf (
                             ' % 1 $ s
                             % 2 $ s ',
                             esc_html ($ this-> props ['intestazione']),
                             $ this-> props ["content"]
                   );
          }
}
new SIMP_SimpleHeader;

In tal caso, è giunto il momento di creare la classe React Component che consente a Divi Builder di eseguire il rendering del modulo.

Crea un file e chiamalo SimpleHeader.jsx

Incolla quanto segue e salvalo

// Dipendenze esterne
import React, {Component, Fragment} da 'react';
// Dipendenze interne
import './style.css';
class SimpleHeader estende Component {
  slug statico = 'simp_simple_header';
  render () {
    ritorno (
      
        {this.props.content ()}
      </div>
    );
  }
}
export SimpleHeader predefinito;

Passa a includes / modules / index.js nel tuo file di estensione

Aggiungi e salva quanto segue

// Dipendenze interne
importa SimpleHeader da './SimpleHeader/SimpleHeader';
esportazione predefinita [
  SimpleHeader,
];

Aggiungere quanto segue a SimpleHeader.jsx dopo   

render () {
    ritorno (
e salvalo.
  
        {this.props.heading}
        

Il file completo dovrebbe ora assomigliare a questo:

// Dipendenze esterne
import React, {Component, Fragment} da 'react';
// Dipendenze interne
import './style.css';
class SimpleHeader estende Component {
  slug statico = 'simp_simple_header';
  render () {
    ritorno (
      
        {this.props.heading}
        
          {this.props.content ()}
        
      
    );
  }
}
export SimpleHeader predefinito;

Apri il file style.css del tuo modulo e aggiungi

.simp-simple-header-header {
          margine inferiore: 20px;
}

Questo è tutto per sviluppare il tuo modulo Divi. Tutto quello che devi fare ora è provarlo!

Apri Divi Builder, individua il tuo modulo Simple Header e prova a usarlo su una pagina. Se hai il codice corretto, vedrai una semplice opzione di intestazione.

Raccolta di moduli Divi

Abbiamo incluso oltre 70 moduli divi gratuiti e premium che coprono tutto, dalla creazione di popup all'aggiunta di funzionalità di design extra a Divi Builder. Alcuni sono moduli di nicchia che non utilizzerai molto spesso, ma alcuni sono essenziali per un uso regolare ed efficiente di Divi Builder.

Pensiamo che rappresentino una sezione trasversale di ciò che è disponibile, di ciò che funziona e di ciò che ha un prezzo ragionevole. Cosa ne pensi?

Usi qualcuno di questi moduli Divi? Hai dei moduli da suggerire?

L'autore
David Attard
Autore: David AttardSito web: https://www.linkedin.com/in/dattard/
David ha lavorato nel o intorno al settore online / digitale negli ultimi 18 anni. Ha una vasta esperienza nei settori del software e del web design utilizzando WordPress, Joomla e le nicchie che li circondano. In qualità di consulente digitale, il suo obiettivo è aiutare le aziende a ottenere un vantaggio competitivo utilizzando una combinazione del loro sito Web e delle piattaforme digitali disponibili oggi.

Un'altra cosa... Sapevi che anche le persone che condividono cose utili come questo post sembrano FANTASTICHE? ;-)
per favore lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!

Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.

Autore / i in primo piano su:  Inc Magazine Logo   Logo di Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   e molti altri ...