Tutto ciò che devi sapere sui gruppi di moduli Divi 5

Divi 5 migliora la creazione di siti Web con nuove funzionalità e flessibilità senza pari. I gruppi di moduli sono una delle aggiunte più recenti a Divi 5. Questa funzione consente di organizzare più elementi in un singolo gruppo gestibile che puoi modellare, spostarsi o duplicare con un singolo clic. Questa funzione diventa particolarmente utile una volta che vengono rilasciate funzionalità imminenti come Flexbox e il costruttore di query loop.

In questo post, esploreremo tutto ciò che devi sapere sui gruppi di moduli di Divi 5. Dalla comprensione di cosa sono e perché importa per imparare a usarli in modo efficace, ti abbiamo coperto.

Nota: Divi 5 è pronto per essere utilizzato su nuovi siti Web, ma non consigliamo ancora di convertire i siti esistenti in Divi 5.

Esploriamo ciò che è possibile con i gruppi di moduli.

Cosa sono i gruppi di moduli?

I gruppi di moduli sono un nuovo elemento contenitore che consente di raggruppare più moduli in una singola unità coesiva all'interno di una colonna. Una volta raggruppati, i moduli possono essere disegnati, duplicati o riposizionati insieme, aumentando il flusso di lavoro e garantendo coerenza nel tuo design. I gruppi di moduli mantengono i moduli ben confezionati, rendendoli più facili da gestire collettivamente.

I gruppi di moduli offrono un significativo vantaggio organizzativo. Ad esempio, se si dispone di una colonna con un'intestazione, un modulo di testo e un pulsante, raggrupparli consente di applicare uno sfondo unificato, regolare la spaziatura o spostare l'intera composizione con una singola azione. Ciò consente di risparmiare tempo e ridurre il rischio di progetti incoerenti, rendendo i gruppi di moduli uno strumento essenziale per creare facilmente layout lucidati e professionali.

Perché i gruppi di moduli contano

I gruppi di moduli in Divi 5 sono più che una caratteristica conveniente: introducono un nuovo livello di controllo ed efficienza. Consentono a designer e sviluppatori di creare con maggiore precisione e creatività. Ecco perché hanno il potenziale per avere un grande impatto su come progettare siti Web con Divi.

1. Fanno parte del futuro di Divi: i gruppi di moduli sono costruiti pensando all'architettura lungimirante di Divi 5. Sono preparati per le prossime funzionalità come Flexbox e Query Loop Builder, che renderà la creazione di layout dinamici un gioco da ragazzi. Investire in gruppi di moduli ora ti prepara per il successo a lungo termine, soprattutto quando Divi 5 si evolve.
2. Risparmono tempo: con i gruppi di moduli, non devi affrontare le modifiche ripetitive. Puoi modellare, riposizionare o duplicare i layout complessi in un'azione, tagliando significativamente i tempi di progettazione. I preimpostazioni per i gruppi di moduli lo portano oltre permettendoti di salvare e applicare immediatamente configurazioni predefinite.
3. Promuovono la coerenza del design: i gruppi di moduli consentono di garantire che ogni elemento del gruppo, dai pulsanti al testo, segue le stesse regole di stile. Per coloro che gestiscono i siti di marca, i gruppi di moduli possono mantenere i progetti raffinati e professionali in tutto il tuo sito.
4. Più libertà creativa: i gruppi di moduli ti consentono di sperimentare senza dover modificare ogni elemento individualmente. Puoi creare progetti straordinari con facilità, anche se sei nuovo per Divi. La combinazione di righe nidificate e gruppi di moduli può aiutarti a sbloccare contenitori infinitamente nidibili.

Che tu sia un progettista solista o un imprenditore, i gruppi di moduli offrono il controllo e l'efficienza necessari per elevare i tuoi progetti.

Come utilizzare i gruppi di moduli in Divi 5

Iniziare con i gruppi di moduli è facile. Aggiungi una nuova riga a una pagina in Divi 5 e seleziona il layout a 3 colonne.

In Divi 5, noterai un nuovo modulo di gruppo . Fare clic per aggiungerlo alla prima colonna.

Da lì, puoi aggiungere qualsiasi modulo che desideri creare un layout riutilizzabile. Per dimostrare, creeremo un gruppo di moduli per un servizio in primo piano. Inizia con l'aggiunta di una riga nidificata a 2 colonne al gruppo del modulo.

Nella prima colonna della riga nidificata, aggiungi un modulo immagine .

Nella seconda colonna della riga nidificata, aggiungi un modulo di intestazione e modellalo come desideri.

Successivamente, aggiungi una riga nidificata a colonna singola , seguita da un'altra intestazione, testo e moduli pulsanti. Una volta aggiunto, il layout dovrebbe apparire simile all'immagine qui sotto.

I gruppi di moduli possono essere disegnati come un singolo modulo, aggiungendo colori o gradienti di sfondo, regolando la spaziatura o aggiungendo effetti di confine. È inoltre possibile salvare il gruppo del modulo come preset accedendo alle impostazioni del gruppo del modulo, facendo clic sull'opzione preimpostata e salvando la configurazione. Questo preimpostazione può quindi essere applicato ad altri gruppi di moduli con un solo clic, garantendo uno stile e una struttura identici in tutto il sito o più progetti. Una volta creato un gruppo di moduli, puoi duplicarlo, salvarlo su Divi Cloud o riutilizzare il tuo preimpostazione in tutti i tuoi siti Web.

Casi d'uso pratici per i gruppi di moduli

I gruppi di moduli in Divi 5 sono ottimi per la costruzione di siti Web professionisti ed efficienti. Il raggruppamento di moduli in unità riutilizzabili e in stile risparmia tempo ed eleva i tuoi progetti a nuove altezze. Che si tratti di costruire una pagina di destinazione o di gestire un portafoglio di siti di clienti, i gruppi di moduli fanno sentire i layout complessi senza sforzo. Ecco alcuni casi d'uso pratici che mostrano la loro potenza e semplificano il processo di progettazione.

1. Caso d'uso futuro: post e prodotti

I gruppi di moduli sono costruiti per brillare con l'imminente costruttore Loop di Divi 5. Prepara ora raggruppando elementi per layout dinamici, come le anteprime dei post sul blog o gli elenchi di prodotti WooCommerce. Una volta arrivato Loop Builder, questi gruppi popoleranno il contenuto dinamico senza sforzo, risparmiando tempo e garantendo progetti impeccabili e scalabili.

2. Sezioni di chiamata all'azione

Raggruppa un titolo audace, un sottotitolo persuasivo e un pulsante vibrante con un effetto hover per creare CTA riutilizzabili. Hai bisogno dello stesso CTA su più pagine? Duplica il gruppo in pochi secondi o salvalo su Divi Cloud per un accesso immediato. Questo taglia il tempo di configurazione garantendo al contempo che ogni CTA si allinea con l'aspetto del tuo marchio.

3. Sezioni di testimonianze

Combina la citazione, l'immagine e il nome di un cliente in un singolo gruppo di moduli per layout di testimonianze coerenti e professionali. Trascina il gruppo per riorganizzare le sezioni o applicare uno stile unificato - come angoli arrotondati o un'ombra sottile - in un clic.

4. Categorie di prodotti

I gruppi di moduli possono essere perfetti per mostrare le categorie di prodotti. Ad esempio, crea un gruppo per evidenziare il numero di prodotti in una categoria, un titolo, un'immagine e un pulsante, quindi duplicarlo per altre categorie. Questo approccio garantisce la coerenza visiva tra le pagine del prodotto e accelera la progettazione per i siti Web di e-commerce.

5. Menu di ristorante

Un altro ottimo modo per utilizzare i gruppi di moduli è per i siti Web che devono presentare un menu. Strutturare il testo dinamicamente può richiedere molto tempo, quindi l'uso di gruppi di moduli è perfetto per accelerare il processo. Puoi combinare gruppi e righe nidificate per rendere una sezione incredibile e facile da duplicare in futuro.

Gruppi di moduli nel contesto di Divi 5

Divi 5 è un salto audace per il design di WordPress, dando la priorità a prestazioni rapide, flessibilità e caratteristiche innovative come i gruppi di moduli. Costruito sull'architettura moderna, Divi 5 ti consente di creare siti Web efficienti quanto belli. I gruppi di moduli sono una pietra miliare di questa visione, integrando perfettamente con altre funzionalità Divi 5 per aumentare il flusso di lavoro. Mentre Divi 5 si evolve nella sua fase alfa pubblica con aggiornamenti bisettimanali, i gruppi di moduli sono pronti a ridefinire il modo in cui si costruisce. Ecco come si adattano al quadro più ampio.

Righe nidificate

I gruppi di moduli di coppia con infinita fila di Divi 5 per creare layout complessi e organizzati. Ad esempio, raggruppare un titolo, un'immagine e un pulsante con una riga nidificata per costruire sezioni come tabelle dei prezzi o vetrine dei membri del team.

Variabili di progettazione

È possibile mantenere la coerenza del design applicando i valori di stile riutilizzabili tra i gruppi di moduli, come i colori del marchio, i caratteri o i calcoli del morsetto (). Puoi aggiornare una variabile una volta e ogni gruppo riflette immediatamente il cambiamento, rendendoli perfetti per progetti su larga scala.

Unità avanzate

È possibile utilizzare unità CSS REM, EM, VW, VH o altri per costruire spaziatura e dimensionamento reattive per i gruppi di moduli. Ciò garantisce che gli elementi raggruppati appaiano sbalorditivi su ogni dispositivo, dai desktop agli smartphone.

Suggerimenti per massimizzare i gruppi di moduli

Per ottenere il massimo dai gruppi di moduli, alcune strategie intelligenti possono portare la tua potenza di progettazione al livello successivo. Ecco come farli lavorare di più per te.

1. Pianifica i layout: prima di raggruppare i moduli, disegnare la struttura della tua sezione o utilizzare uno strumento di prototipazione per aiutarti a pianificare gli elementi che si desidera utilizzare. Questa pianificazione iniziale impedisce un ulteriore lavoro e garantisce che i tuoi gruppi siano logici e riutilizzabili.
2. Utilizza Divi Cloud: salva i tuoi gruppi di moduli preferiti in Divi Cloud per trasformarli in risorse incrociate. Ad esempio, è possibile salvare un gruppo di membri del team lucido e attirarlo in qualsiasi sito con pochi clic.
3. Prova la reattività con i punti di interruzione: utilizzare i punti di interruzione personalizzabili di Divi 5 per garantire che i gruppi di moduli appaiano impeccabili su ogni dispositivo. Regola le dimensioni della spaziatura o dei caratteri per il cellulare all'interno delle impostazioni del gruppo per evitare le modifiche manuali.
4. Utilizza le variabili di design: per aggiungere coesione ai tuoi progetti, impostare le variabili di design per colori, testo, caratteri o regole numeriche (come i calcoli di clamp ()) per semplificare le piccole modifiche.
5. Diventa creativo con lo stile: sperimenta effetti audaci come animazioni hover o transizioni sincronizzate all'interno dei gruppi di moduli. Ad esempio, aggiungi un effetto scala a un pulsante raggruppato e immagine per un CTA dinamico.
6. Sperimenta con Divi 5: Alpha pubblica di Divi 5 è il tuo parco giochi: costruisci un sito di test per esplorare i gruppi di moduli. Prova a raggruppare diverse combinazioni di moduli o testare nuove idee di styling per scoprire cosa è possibile.

Design più intelligente con gruppi di moduli in Divi 5

I gruppi di moduli di Divi 5 semplificano il flusso di lavoro, garantendo la coerenza del design e preparandoti per il futuro dei layout dinamici. Che si tratti di bundling di elementi di progettazione per un CTA riutilizzabile, creazione di sezioni di testimonianze coerenti o sperimentando uno stile audace, i gruppi di moduli consentono di lavorare in modo più intelligente e creare siti Web più velocemente. Man mano che Divi 5 si evolve, questa funzione ti consente di creare siti Web efficienti e belli.

Inizia a sperimentare i gruppi di moduli nell'alfa pubblica di Divi 5 e sperimenta un nuovo modo di creare siti Web con Divi. Come notato in precedenza, Divi 5 è pronto per nuovi siti Web, ma non lo consigliamo ancora per i siti esistenti.

Ti invitiamo a unirti alla comunità Divi a condividere le creazioni del tuo gruppo di moduli. Pubblica i tuoi progetti nel gruppo Divi Facebook o tag @ElegantThemes su X.

Costruiamo qualcosa di straordinario insieme!