Se usi il tema Divi o Divi Builder, lavorerai regolarmente con i moduli Divi. Sono gli elementi costitutivi all'interno del tema che ti consentono di aggiungere elementi di 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 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.
Questo articolo è uno dei nostri tanti Recensioni Divi che CollectiveRay ha fatto per coprire i vari aspetti del tema e del builder Divi. Dai un'occhiata anche alla nostra lista di esempi di utilizzo del tema Divi per creare siti web straordinari.
Hai bisogno di ottenere Divi a un prezzo d'occasione? Al momento abbiamo uno sconto esclusivo da Elegant Themes:
Ottieni Divi con uno sconto del 10% solo ad aprile 2024
Se hai bisogno di ulteriore motivazione per acquistare Divi e sperimentare i numerosi moduli Divi qui, un recente aggiornamento delle prestazioni lo farà.
Divi ha recentemente rivoluzionato il suo codice, quindi è più veloce e leggero che mai.
Come parte del miglioramento, Divi ha ridotto i CSS del 94% e ha introdotto CSS dinamici che caricano solo ciò che è necessario, ha introdotto stili intelligenti per ridurre i duplicati e ridurre le dimensioni dei file, rimosso i CSS che bloccano il rendering, ottimizzato JavaScript e aggiunto un framework PHP dinamico per aumentare l'efficienza delle funzioni.
Moduli Divi ufficiali
Ci sono 46 moduli Divi attualmente disponibili.
1. 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
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
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
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. Sfocatura
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
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
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
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
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
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
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
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
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
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
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 di portfolio incorporati e il Divi Builder li ha anche loro, ma questo modulo ne aggiunge ancora di più.
16. 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
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
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
Il modulo Divi Map prende l'elemento mappa standard e aggiunge opzioni di personalizzazione extra e cucitureless integrazione in una pagina Poiché le mappe possono svolgere un ruolo fondamentale in alcuni siti, questo è un componente aggiuntivo 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
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
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
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 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. Dispositivo di scorrimento del post
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
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 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.
27. Ricerca
La ricerca è un'altra di quelle funzionalità che di solito è less 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 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
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
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. 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
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
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
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
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
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. Dispositivo di scorrimento 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
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
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
L'immagine a larghezza intera è la versione a larghezza intera dell'immagine ma funziona perfettamentelessly in modelli a tutta larghezza. Ha anche le stesse opzioni di visualizzazione e personalizzazione.
41. 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
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
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
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
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
Il Fullwidth Slider prende il modulo Slider e fa lo stesso. Lo fa funzionare difettosolessly con un design a tutta larghezza. Questo è un modulo più utile con il pieno controllo sull'aspetto e la sensazione delle 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
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
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
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.
4. 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
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
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
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
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
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
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
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
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.
13. Modulo prodotti correlati Woo
Il modulo di informazioni aggiuntive di Woo dovrebbe aver bisogno di poche presentazioni. I negozi thrive sul cross-sell e l'upsell e questo modulo è come lo fai. Puoi aggiungere un Spesso acquistati insieme sezione a una pagina e aggiungere le 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 perfettamentelessly con Divi.
14. 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
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
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 Tweak
Divi Tweaker è un modulo molto intelligente che aiuta ad accelerare il Divi Builder e WooCommerce, rimuove le stringhe di query che possono rallentare il caricamento della pagina e possono sostituire i file del tema locale con 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
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 Slim builder
Divi Slimbuilder è l'ideale se costruisci landing page o pagine di siti più lunghe con il 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
L'estensione delle carte dell'articolo era apparentemente Elegant Themes' primo modulo Divi in assoluto. È 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
Il Divi Icon Expansion Pack fa esattamente quello che dice di fare. Aggiunge una serie di icone disegnate a mano al Divi Builder da utilizzare nel tuo design. Ci 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
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
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
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 Extra
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
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!
1. 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 E-commerce
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. Divi Headers Pack
I Divi Headers Pack è enorme. Aggiunge oltre 750 nuove intestazioni, alcune funzionali, altre di nuovo design. Aggiunge off-canvas opzioni di menu, intestazioni reattive, effetti di menu, animazioni di menu e un sacco 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 Supremo 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
Divi Events Calendar può essere utilizzato per creare un sito Web completo di gestione degli eventi o per aggiungere eventi a un sito standard. Usa lo standard Divi Builder per aiutare a 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
Alcune persone trovano i tavoli facili mentre altri li trovano un disastro frustrante. Se sei in quest'ultimo campo, il Table Maker modulo è per te. Ti consente di incorporare rapidamente una tabella in una pagina e modellare tutto su di essa.
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. Popup modale Divi
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. Assistente reattivo Divi
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!
9. Galleria Divi in muratura
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 Mad Menu
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 o check-out la nostra recensione di DiviFlash.
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.
Illustreremo le basi per lo sviluppo del tuo modulo Divi personalizzato. Avrai bisogno delle competenze di base di PHP per completare questa sezione come 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) {
}
}
nuovo 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"]
);
}
}
nuovo 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"]
);
}
}
nuovo SIMP_SimpleHeader;
Se lo fa, è ora di creare il React Classe di componenti che consente Divi Builder renderizzare il modulo.
Crea un file e chiamalo SimpleHeader.jsx
Incolla quanto segue e salvalo
// Dipendenze esterne
importare React, { Componente, Frammento } 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 [
Intestazione semplice,
];
Aggiungere quanto segue a SimpleHeader.jsx dopo
render () {
ritorno (
e salvalo.
{this.props.heading}
Il file completo dovrebbe ora assomigliare a questo:
// Dipendenze esterne
importare React, { Componente, Frammento } 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!
Aprire il Divi Builder, individua il modulo Intestazione semplice e prova a utilizzarlo in 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 progettazione extra a Divi Builder. Alcuni sono moduli di nicchia che non utilizzerai molto spesso, ma alcuni sono essenziali per un uso agevole ed efficiente 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?
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.
e molti altri ...