Costruisci i tuoi moduli con gruppi di moduli Divi 5

Vuoi creare moduli Divi personalizzati senza toccare una riga di codice? Con i nuovi gruppi di moduli di Divi 5, ora puoi combinare più elementi in un singolo layout riutilizzabile, tutto dall'interno del costruttore visivo. Nessun JavaScript. Nessun PHP. Basta trascinare, cadere e design.

In questa rapida guida, ti mostreremo come creare i tuoi moduli usando i nuovi gruppi di Divi. Vedrai specificamente come costruire da zero un blurb, una tabella dei prezzi, una testimonianza o qualsiasi altro tipo di modulo che puoi immaginare.

Nota: Divi 5 è pronto per essere utilizzato su nuovi siti Web, ma non consigliamo ancora di convertire i siti esistenti in Divi 5. Vedrai qualcosa da noi quando saremo fiduciosi nel processo di aggiornamento.

Quali sono i nuovi gruppi di moduli di Divi?

Gruppi, o gruppi di moduli, sono un nuovo elemento contenitore che abbina più moduli e/o righe in una singola unità all'interno di una colonna. Ciò ha il vantaggio di raggruppare più elementi più piccoli e consentire di spostare l'intero gruppo ovunque ne abbia bisogno sulla pagina.

I gruppi di moduli possono essere spostati in tutta la tua pagina senza problemi e diventeranno particolarmente utili quando vengono rilasciati Flexbox e la funzione Loop Builder. Una volta rilasciato il Builder Loop, sarai in grado di utilizzare gruppi per creare layout di blog personalizzati, menu a piè di pagina, gallerie di immagini e altro ancora. Quindi, ora è utile, ma tra qualche mese sarà ancora più impressionante da usare.

Le righe nidificate erano un'altra funzionalità Divi altamente richiesta che abbiamo aggiunto a Divi 5. Ti hanno permesso di mettere le file all'interno delle file sul contenuto del tuo cuore. Sebbene il nome "gruppi di moduli" possa sembrare che tu possa solo raggruppare i moduli, è vero il contrario. È un dato di fatto, è possibile utilizzare le file nidificate all'interno dei gruppi, che apre l'opportunità di costruire strutture di layout infinitamente nidificate e farle parte di un gruppo riutilizzabile.

Come creare i tuoi moduli Divi

I gruppi di moduli ti consentono di creare i tuoi moduli all'interno dell'editor. È possibile raggruppare moduli e righe nidificate per creare accordi complessi che assomigliano ad alcuni dei nostri moduli più grandi.

1. Crea il tuo modulo Blurb

Il nostro modulo Blurb integrato

Il modulo Blurb è un punto fermo in molti design Divi. È un modulo di riferimento, ma quando lo scomponi, ha solo alcune cose che lo fanno clic. Quelli sono:

Un'icona/icona, titolo/intestazione e contenuto del corpo. Possiamo creare un gruppo di moduli e posizionare questi moduli al suo interno: un'immagine o un'icona, un'intestazione e un modulo di testo. Insieme, questi tre moduli possono riprodurre lo stesso contenuto utilizzabile nel modulo Blurb.

Anatomia di un modulo Blurb

Creazione del tuo gruppo di moduli Blurb

Ecco un esempio di un modulo Blurb con un'icona sul lato sinistro e una replica visivamente identica del modulo Blurb usando A:

Gruppo, riga interna, colonna (1) con un modulo icona e colonna (2) con un modulo di intestazione e testo.

La radiografia è attivata per vedere lo scheletro di ciascuno per vedere le loro somiglianze, anche se sono costruiti in modo diverso.

L'unica cosa speciale con questa disposizione è che la prima colonna è impostata su una larghezza del 18% e la seconda occupa una larghezza dell'82% (le opzioni di dimensionamento della colonna sono nuove con l'aggiornamento della funzione delle righe nidificate).

Costruire i tuoi moduli in questo modo ha l'ulteriore vantaggio di offrirti più opzioni di styling di progettazione per ogni singolo elemento. Il modulo Blurb semplifica il posizionamento dell'immagine/icona, ma ha i suoi compromessi. Usa l'approccio che ti porta il più vicino al design desiderato.

2. Crea il tuo modulo tabelle di prezzo

Il nostro modulo tavolo da prezzi integrati

Alcuni moduli Divi hanno molto di più da fare. Questo è il caso del modulo della tabella dei prezzi. Esistono diversi campi per tabella dei prezzi come puoi vedere di seguito.

Anatomia di un modulo Tabella dei prezzi

Creazione del tuo gruppo di moduli tabella di prezzi

Se ricreiamo il modulo della tabella dei prezzi utilizzando gruppi di moduli e singoli moduli, otterremo questo risultato.

Notare i sette campi di testo/opzione separati per tabella. Visivamente, ogni tabella ha tre parti principali (intestazione, prezzo e dettagli). Ci sono un paio di modi per farlo all'interno di un gruppo, ma di seguito abbiamo usato tre file nidificate per ciascuno. Da lì, abbiamo usato i moduli di intestazione e di testo all'interno di ogni sezione per ricreare la tabella dei prezzi.

La cosa bella di usare il modulo del tavolo dei prezzi è che gestisce la maggior parte del layout e ottieni un vantaggio. Ma a volte ciò significa che è più difficile lavorare quando vuoi fare cose specifiche con esso. Fare un lavoro extra per creare questo layout della tabella dei prezzi con moduli più semplici ci dà un maggiore controllo del design e libertà.

3. Crea il tuo modulo di testimonianza

Il nostro modulo testimonial integrato

I moduli di testimonianze di Divi sono un altro che ha molto da fare. Include fino a quattro diversi elementi di testo e una coppia di opzioni di immagine/icona.

Creazione del tuo gruppo di moduli di testimonianza

L'aspetto più che richiede tempo di ricreare il modulo di testimonianze è ottenere la spaziatura giusta (specialmente in più punti di interruzione). Ma una volta ottenuto, le cose sono abbastanza semplici. Durante tutto il layout del gruppo, abbiamo usato un paio di righe e i moduli icona, immagine, intestazione e testo.

La cosa bella di ricreare alcuni di questi moduli è che ti apri a più possibilità. Alcuni moduli più complicati hanno un layout supponente che solo esteso CSS può manipolare. Ma quando lo costruisci da solo, hai più libertà di muoverti in molti di quei sotto-elementi.

Quando si progetta in questo modo, si aprono più possibilità di layout. Ad esempio, puoi fare ciò che non è possibile (almeno ciò che non è facile) con il modulo di testimonianze spostando elementi in posizioni completamente diverse all'interno del layout di gruppo maggiore. Se il tuo design richiede una certa flessibilità, costruire alcuni di questi frammentari può aiutarti a raggiungere la precisione che stai cercando.

Adoro anche l'idea che tu sia in grado di creare un modulo di testimonianze personalizzato, come quello sopra, e utilizzare il prossimo Loop Builder per estrarre testimonianze da un CPT. Ti darà la libertà di progettazione + la capacità di costruire più velocemente con dati e contenuti strutturati.

Salva il tuo modulo personalizzato come elemento globale

Quando il tuo nuovo modulo si sente giusto, salvalo come elemento globale per l'uso altrove sul tuo sito. Apri il menu Impostazioni del gruppo. Fai clic sull'opzione " Salva alla libreria ".

Un modale apparirà in cui puoi nominare il tuo modulo per un facile utilizzo in seguito. Attiva " Salva come globale " per archiviarlo nella libreria Divi. Qualsiasi modifica apportata successiva aggiorna ogni copia sul tuo sito.

Il tuo elemento globale avrà ora un colore verde distinto per aiutarti a notare che è globale.

Puoi accedere a tutti i tuoi elementi globali salvati e altri elementi della libreria in Dashboard> Divi> Divi Library . La modifica di un elemento globale qui lo aggiornerà sul sito. Puoi anche modificare elementi globali direttamente sulle pagine su cui vengono utilizzati (e aggiornerà il sito).

Hai bisogno del modulo su ogni sito che crei? Attiva " Salva su Divi Cloud ". Il modulo è ora nella tua libreria di cloud, pronto per qualsiasi progetto ovunque. Gli articoli della libreria mantengono le cose su un sito, mentre Divi Cloud viaggia con te da un sito all'altro. Usa sia per accelerare le build e inaugurare una maggiore coerenza.

Ottieni Divi Cloud

Costruisci qualcosa di nuovo oggi

I gruppi di moduli mettono nuova potenza nelle mani. Puoi modellare i layout originali e proprio ciò di cui hai bisogno. Inizia ricreando un modulo Blurb e guarda come si adatta il processo. Man mano che ti abitui a usare Divi in ​​questo modo, noterai creare disegni ancora più intricati perché puoi utilizzare i moduli standard o crearne uno tuo.

Gran parte di ciò che era coperto sopra era possibile con Divi prima che i gruppi fossero caduti, ma rendono le cose più facili. Soprattutto quando lanciamo Flex e The Loop Builder, i gruppi diventeranno un punto fermo della progettazione con Divi.

Pronto a salire di livello? Prendi un sito nuovo e prova il tuo primo modulo personalizzato oggi.