10 layout della griglia realizzati con righe nidificate di Divi 5 (download gratuito)

I layout della griglia offrono un modo strutturato ma flessibile per organizzare i contenuti, migliorare l'esperienza dell'utente e garantire una reattività senza soluzione di continuità tra i dispositivi. Con il rilascio di Divi 5 Public Alpha, i web designer hanno un nuovo set di strumenti per creare bellissimi layout della griglia che spingono i confini creativi. Con un costruttore visivo completamente riprogettato e nuove potenti funzionalità come righe nidificate, unità avanzate e gruppi di moduli, è possibile facilmente costruire layout a strati e complessi.

In questo post, mostreremo i layout della griglia che puoi facilmente costruire con Divi 5, dalle griglie di caratteristiche simmetriche a blog di muratura dinamici e vetrine di portfolio interattive. Sia che tu stia progettando un portafoglio, un negozio di e-commerce o un sito Web aziendale, questi layout ti ispireranno a elevare i tuoi progetti e affascinare il tuo pubblico.

Esploriamo come le funzionalità avanzate di Divi 5 rendono possibili questi layout creativi in ​​stile griglia.

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

Chiave Divi 5 Caratteristiche per layout della griglia

La Fondazione ricostruita di Divi 5 introduce funzionalità che semplificano la creazione di layout della griglia più facili che mai. Questi strumenti consentono ai progettisti di creare griglie complesse e visivamente accattivanti con precisione ed efficienza, mantenendo la flessibilità tra i dispositivi. Di seguito, esploriamo le caratteristiche chiave Divi 5 che rendono possibili i bellissimi layout della griglia.

Iscriviti al nostro canale YouTube

Righe nidificate

La funzione delle righe nidificate di Divi 5 consente di posizionare le righe all'interno delle righe, offrendo infinite nidibilità per creare intricate strutture a griglia con un'interfaccia intuitiva di trascinamento. Questa funzionalità semplifica la progettazione di griglie a più strati, dando un controllo preciso sul posizionamento del modulo.

Che si tratti di costruire una vetrina di prodotti complessi o di una rete di portafoglio a strati, le righe successive consentono di organizzare contenuti in modo più intelligente, rendendo i layout dinamici e visivamente coinvolgenti.

Punti di interruzione personalizzabili

Il design reattivo è fondamentale per i siti Web moderni e i punti di interruzione personalizzabili di Divi 5 semplificano per garantire che le tue griglie appaiano impeccabili su qualsiasi dispositivo. È possibile utilizzare sette desktop, tablet e punti di interruzione mobile, consentendo alle griglie di adattarsi perfettamente a varie dimensioni dello schermo.

Abbinato al ridimensionamento della tela, che fornisce anteprime in tempo reale dei layout in diversi punti di interruzione all'interno del Visual Builder, questa funzione assicura che le tue griglie siano ottimizzate per la reattività, offrendo un'esperienza utente coerente su tutti i dispositivi.

Gruppi di moduli

I gruppi di moduli semplificano il processo di progettazione e manutenzione di estetica a griglia coerente. Raggruppando i moduli, è possibile applicare uno stile collettivo e riutilizzare questi gruppi su più pagine, risparmiando tempo e garantendo la coerenza del design.

Ciò è particolarmente utile per i layout della griglia come post sul blog o schede di prodotti, in cui elementi di design coerenti - come caratteri, colori o effetti hover - sono essenziali per un aspetto coeso in tutto il tuo sito.

Variabili di progettazione

Con variabili di design, Divi 5 offre una gestione centralizzata di elementi di design chiave come colori, caratteri, collegamenti, tipografia e altro ancora. Questa funzione garantisce l'uniformità tra i layout della griglia e l'intero sito Web, rendendo facile mantenere un'identità visiva coerente. Gli stili sono impostati in un gestore variabile e possono essere applicati dove si desidera

Hai bisogno di aggiornare uno stile di colore o carattere? Le variabili di progettazione consentono di apportare modifiche in un unico posto, applicandole istantaneamente in tutte le sezioni e pagine, razionalizzando il flusso di lavoro e mantenendo i progetti lucidi.

Unità avanzate

Le unità avanzate di Divi 5 ti danno il controllo granulare sulla spaziatura e sul dimensionamento con opzioni come VW, VH, REM ed EM. Queste unità consentono layout di griglia dinamici e reattive che si ridimensionano perfettamente attraverso i dispositivi. È possibile regolare l'imbottitura, i margini o le dimensioni degli elementi con il gestore variabile. Le unità avanzate forniscono la flessibilità per allineare e ridimensionare con precisione i componenti della griglia, garantendo che i layout siano funzionali e visivamente armoniosi.

Gestione degli attributi

La gestione degli attributi accelera il processo di progettazione consentendo di copiare, incollare e ripristinare gli attributi tra gli elementi di progettazione. Questa funzione è fondamentale per l'applicazione di stili coerenti, come effetto hover o spaziatura, su più moduli. Riducendo le attività ripetitive, la gestione degli attributi ti consente di concentrarti sulla creatività accelerando lo sviluppo di layout della griglia complessi.

Queste caratteristiche Divi 5 lavorano insieme per fornire flessibilità ed efficienza senza pari, rendendo più semplice la creazione di layout di griglia straordinari e reattive che migliorano l'esperienza dell'utente e elencano i tuoi web design.

10 esempi di layout della griglia creativi in ​​Divi 5

I layout della griglia sono una pietra miliare del moderno web design e con Divi 5, costruirli non è mai stato più facile. Che tu stia mostrando prodotti, portafogli, membri del team o FAQ, Divi 5 è in grado di costruire layout funzionali e visivamente sbalorditivi. Diamo un'occhiata a 10 esempi di layout della griglia che puoi creare con Divi 5.

1. Griglia di caratteristiche simmetriche

Le griglie di funzionalità simmetriche offrono un ottimo modo per mostrare prodotti, servizi o articoli di portafoglio in modo pulito e organizzato. Questo stile della griglia è perfetto per evidenziare il contenuto strutturato ed è versatile nella sua applicazione. Possono essere utilizzati per siti Web aziendali, portafogli e landing page, offrendo un aspetto lucido che guida gli utenti attraverso informazioni senza sforzo.

Nell'esempio seguente, abbiamo costruito una griglia a quattro colonne per mostrare un'azienda di farmacie. Possiamo ottenere un aspetto professionale e lucido in pochi minuti usando righe nidificate, gruppi di moduli e gestione degli attributi.

2. Grid in muratura

Una griglia in muratura è un layout dinamico in stile Pinterest che organizza post di blog, oggetti di portafoglio o persino ricette di diverse altezze in una griglia visivamente coinvolgente e ben confezionata. A differenza delle griglie tradizionali con altezze di riga fissa, le griglie in muratura consentono al contenuto di fluire in modo naturale, riempiendo lacune verticali per creare un aspetto biologico senza soluzione di continuità. Questo stile della griglia è perfetto per i siti Web che danno la priorità alla narrazione visiva, come blog, riviste o portafogli creativi. Con le caratteristiche native di Divi 5, la creazione di una griglia in muratura elegante e reattiva è intuitiva ed efficiente.

Nell'esempio seguente, abbiamo combinato righe nidificate e gruppi di moduli per creare una griglia in muratura per le ricette, usando le scorciatoie di Divi per duplicare i gruppi più velocemente.

3. Grid del portfolio interattivo

Un layout interattivo della griglia del portfolio fornisce un modo coinvolgente per mostrare il tuo lavoro. Puoi incorporare popup LightBox, effetti in bilico, pulsanti e altro per consentire agli utenti di esplorare i tuoi contenuti. Questo stile della griglia è eccellente per i siti Web che mirano a catturare il loro pubblico con un lavoro visivo, come fotografia, design o entrambi, fornendo al contempo la navigazione e l'interattività senza soluzione di continuità.

Con le funzionalità avanzate di Divi 5, i designer possono creare griglie di portafoglio reattive e intuitive che evidenziano il lavoro creativo in modo efficace.

4. Griglia di vetrina del prodotto

Una griglia di Product Showcase offre un modo unico per presentare i tuoi best seller, prodotti in primo piano o nuovi prodotti che stai introducendo al mondo. È possibile creare un layout strutturato e visivamente accattivante con immagini, titoli, prezzi e pulsanti ottimizzati per i negozi di e-commerce. Utilizzando un layout della griglia, è possibile creare un layout pulito e organizzato per rendere facile per gli utenti navigare e prendere decisioni di acquisto.

Con Divi 5, è possibile utilizzare funzionalità potenti per creare layout reattive e coerenti che guidano il coinvolgimento e le conversioni.

5. Grid membro del team

Le griglie membri del team ti consentono di mostrare profili di squadra con immagini, nomi, ruoli e collegamenti sociali. Questo stile della griglia crea una presentazione professionale e accessibile, rendendolo ideale per i siti Web che evidenziano la competenza e la personalità del loro team. Le griglie del team sono perfette per siti aziendali, agenzie o organizzazioni non profit, ma possono essere applicate su qualsiasi sito in cui è necessario mostrare le persone.

Nell'esempio seguente, utilizziamo una griglia a tre colonne con righe nidificate e applichiamo variabili di progettazione per controllare la dimensione del carattere in modo reattivo.

6. Grid dei servizi

Un layout della griglia è un ottimo modo per mostrare i servizi di un'azienda. Evidenzia i servizi in un formato scansionabile organizzato, rendendolo ideale per i siti Web che devono comunicare le loro proposizioni di valore. Perfetto per agenzie, liberi professionisti o aziende basate sui servizi, la rete utilizza le funzionalità avanzate di Divi 5 per creare layout reattive e coinvolgenti che guidano le richieste e le conversioni dei clienti.

Nell'esempio seguente, abbiamo usato una riga di quattro colonne, assegnato una formula calc () per la spaziatura delle righe e gruppi di moduli incorporati e righe nidificate per accelerare il processo di progettazione.

7. Grid del programma degli eventi

Lo stile della griglia del programma degli eventi è perfetto per l'organizzazione e la presentazione di informazioni sensibili al tempo in modo professionale e ordinato, rendendolo ideale per i siti Web che ospitano eventi come conferenze, seminari o incontri di comunità. Le funzionalità di Divi 5 consentono di aggiungere date, titoli e descrizioni in formato a griglia, rendendo facile per i visitatori trovare ciò che vogliono.

L'esempio seguente mostra un layout a tre colonne con righe nidificate per visualizzare eventi in modo funzionalmente ed esteticamente.

8. Grid del tavolo dei prezzi

Divi 4 (e Divi 5) sono dotati di un modulo di prezzo, ma è limitato ai prezzi, a un pulsante e ai punti elenco. Per coloro che cercano di espandere la funzionalità nativa di Divi e costruire una griglia di prezzi soddisfatta le loro esigenze, Divi 5 fornisce un modo per farlo. È possibile creare una griglia di prezzi che visualizzi sbalorditivi i tuoi contenuti utilizzando righe, gruppi di moduli e gestione degli attributi nidificati.

Ad esempio, è possibile creare un layout a tre colonne che fornisca prezzi, funzionalità e più pulsanti senza dover conformarsi ai limiti del modulo di prezzi integrato. È possibile modificare le impostazioni reattive per schermate più piccole e quindi creare un gruppo di opzioni preimpostati per colonne di larghezza al 50%, garantendo che le colonne si allineano perfettamente su tablet e mobili.

9. Grid della fisarmonica delle FAQ

Avere una sezione FAQ sul tuo sito Web può aiutare gli utenti ad accedere a un elenco di domande frequenti, dando loro un'idea migliore di ciò che offri. Questo stile della griglia combina la chiarezza di una griglia con l'interattività dei moduli della fisarmonica, rendendolo ideale per i siti Web che devono fornire informazioni concise e accessibili. Perfetto per pagine di supporto, centri di aiuto o siti informativi, la rete FAQ sfrutta le robuste funzionalità di Divi 5 per creare layout reattive e coinvolgenti che migliorano l'esperienza dell'utente.

In questo esempio, abbiamo usato le righe nidificate per creare una sezione FAQ coinvolgenti con video informativi e domande e risposte per fornire agli utenti le informazioni pertinenti di cui hanno bisogno per prendere una decisione informata.

10. Galleria della galleria di immagini

Una griglia della galleria con popup Lightbox è un modo visivamente sorprendente per mostrare fotografia, esempi di portfolio o altre immagini. Questo stile della griglia è perfetto per mostrare storie visive, rendendolo ideale per i siti Web che danno la priorità a immagini straordinarie, come gallerie d'arte, blog di viaggio o fotografia. Con Divi 5, i designer possono creare griglie di gallerie reattive e coinvolgenti che affascinano.

Nell'esempio seguente, utilizziamo un semplice layout a quattro colonne per mostrare le immagini. Per un tocco aggiunto, abbiamo abilitato LightBox sulle immagini e aggiunto un modulo di condivisione social nell'angolo in basso a destra di ogni foto.

Suggerimenti per la creazione di layout di griglia efficaci in Divi 5

Grazie alle potenti e flessibili caratteristiche di Divi 5, costruire layout di griglia efficaci è più facile che mai. Che tu stia costruendo una griglia di funzionalità o una galleria di immagini dinamiche con elementi di sovrapposizione, questi suggerimenti ti aiuteranno a massimizzare le capacità di Divi 5 per creare progetti reattivi, coesi ed efficienti che aumentano l'esperienza utente del tuo sito Web.

1. Leva a leva nidificate

La funzione delle righe nidificate di Divi 5 crea strutture a griglia complesse e a più livelli. È possibile organizzare il contenuto nidificando le righe all'interno delle righe, come posizionare immagini e testo all'interno di una singola cella a griglia per un allineamento preciso. Le righe nidificate sono perfette per la costruzione di layout come griglie di portafoglio o orari di eventi, dandoti la flessibilità di progettare griglie creative e strutturate.

2. Ottimizza per la reattività

Utilizzando il ridimensionamento della tela e i punti di interruzione personalizzabili, puoi assicurarti che le tue griglie appaiano impeccabili su ogni dispositivo. Test i layout all'interno del Visual Builder in tempo reale per visualizzare in anteprima come si adattano attraverso i dispositivi desktop, tablet e mobili. È possibile regolare le larghezze delle colonne, la spaziatura o le dimensioni dei caratteri in specifici punti di interruzione per mantenere l'usabilità e il fascino visivo. Con i punti di interruzione personalizzabili di Divi 5, puoi garantire un'esperienza senza soluzione di continuità per tutti gli utenti, da grandi schermi agli smartphone.

3. Usa gruppi di moduli per l'efficienza

I gruppi di moduli in Divi 5 possono semplificare il flusso di lavoro raggruppando elementi di griglia simili, come schede di prodotti o profili dei membri del team. È possibile applicare contemporaneamente uno stile coerente - caratteri, colori, effetti del bosco, ecc. - a più moduli e riutilizzarli attraverso le pagine. Questo è un risparmio di tempo per mantenere l'uniformità in griglie come le tabelle dei prezzi o le domande frequenti, ridurre le modifiche ripetitive e garantire un aspetto lucido.

4. Mantenere la coerenza con le variabili di progettazione

Usa le variabili di design per centralizzare il controllo su colori, caratteri, spaziatura, collegamenti e altro ancora. Definendo questi elementi in un unico posto, è possibile aggiornare gli stili a livello globale, perfetti per mantenere visivamente le griglie di servizio o i layout della galleria.

5. Sperimenta con unità avanzate

Migliora la flessibilità delle griglie utilizzando unità avanzate come VH, VW, REM, CALC () o CLAMP () per spaziatura e dimensionamento dinamici. Queste unità consentono ai tuoi elementi della griglia di ridimensionare fluido in base alla dimensione di visualizzazione o alle impostazioni dei caratteri, garantendo la reattività e l'equilibrio visivo.

Scarica i layout della sezione griglia gratuitamente

Vuoi iniziare a utilizzare i layout della griglia all'interno di Divi 5? Iscriviti di seguito per ottenere l'accesso ai file JSON. Puoi caricarli nella tua libreria Divi e importarli in seguito alle tue pagine.

Scarica i file

Scarica gratuitamente

Unisciti alla newsletter Divi e ti invieremo una copia del pacchetto di layout della pagina di destinazione di Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi di Divi straordinari e gratuiti. Segui e sarai un Master Divi in ​​pochissimo tempo. Se sei già sottoscritto, digita semplicemente il tuo indirizzo email di seguito e fai clic su Download per accedere al pacchetto di layout.

SCARICAMENTO

Ti sei iscritto con successo. Controlla il tuo indirizzo email per confermare l'abbonamento e accedere ai pacchetti di layout Divi settimanali gratuiti!

Scatena la creatività con Divi 5

La suite di funzionalità di Divi 5, dalle file nidificate alla gestione degli attributi, consente ai progettisti di costruire i layout della griglia versatili, reattivi e visivamente sbalorditivi. Divi 5 fornisce flessibilità, precisione ed efficienza senza pari per creare qualsiasi layout della griglia, dalle griglie di funzionalità ai portafogli interattivi. Che tu stia costruendo un sito Web di e-commerce, una pagina di proposito o una sezione FAQ, l'interfaccia moderna di Divi 5 e le capacità migliorate rendono semplice la tua visione creativa in vita.

Sei pronto a esplorare le possibilità? Immergiti nell'alfa pubblica Divi 5 per sperimentare la creazione di layout della griglia. Come accennato in precedenza, Divi 5 è adatto a nuovi siti Web, ma non consigliamo di usarlo su siti esistenti, almeno non ancora.

Ci piacerebbe vedere le tue creazioni. Condividi i tuoi layout di griglia unici sui nostri social media o commenta qui sotto.