Come creare un layout di griglia CSS per moduli Divi

Per coloro che hanno già familiarità con la creazione di siti Web in Divi, la creazione di layout di griglia personalizzati è un aspetto fondamentale di Divi Builder. Crea semplicemente una riga e scegli tra più layout di colonna integrati per quella riga. Una volta che il layout della colonna è a posto, aggiungiamo semplicemente il contenuto/moduli che vogliamo all'interno di ogni colonna. Ma cosa succede se volessimo un layout di griglia aggiuntivo per quei moduli?

In questo tutorial, esploreremo come espandere i layout di griglia di Divi creando layout di griglia CSS per i moduli Divi all'interno di una singola colonna. La proprietà CSS Grid (insieme a CSS Flex) è un modo popolare per creare layout di griglia prevedibili e reattivi per i contenuti con poche righe di CSS. Con esso, possiamo organizzare tutti i moduli in una colonna in una griglia completamente reattiva. Consideralo come un layout di griglia aggiuntivo per i moduli che puoi aggiungere a qualsiasi colonna Divi. Ma una delle cose migliori di questa tecnica è che ogni modulo adiacente avrà la stessa altezza e larghezza senza il fastidio di provare a farlo utilizzando padding personalizzato o valori di altezza su ciascun modulo.

Forse è meglio che interveniamo e ti mostriamo come funziona.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Ed ecco una sbirciatina alla stessa tecnica utilizzando diversi moduli e design dal Fitness Gym Layout Pack.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Creazione di un layout di griglia CSS personalizzato per i moduli Divi

Parte 1: aggiunta dei moduli a una colonna Divi

Prima di organizzare i nostri moduli in un layout a griglia, aggiungiamo prima tutti i moduli che vogliamo utilizzare alla nostra colonna.

Per iniziare, crea una nuova riga a una colonna nella sezione normale predefinita in Divi Builder.

Creazione dei moduli

All'interno della colonna della riga, aggiungi un nuovo modulo di testo. Quindi aggiorna le impostazioni del contenuto del modulo come segue:

1. Aggiungi un'intestazione H2 sopra il testo del paragrafo del contenuto del corpo predefinito
2. Colore di sfondo: #333333

Quindi aggiorna le impostazioni di progettazione come segue:

1. Carattere del testo: Poppins
2. Colore del testo: chiaro
3. Seleziona la scheda H2 sotto Testo intestazione
4. Stile carattere titolo 2: TT
5. Imbottitura: 10% sopra, 10% sotto, 10% sinistra 10% destra

NOTA : Per semplicità, continueremo a utilizzare più moduli di testo con vari colori di sfondo per mostrare una distinzione tra ciascun modulo. Ma, come spiegherò più avanti, puoi utilizzare qualsiasi combinazione di moduli che desideri (moduli blurb, moduli di invito all'azione, moduli di moduli di contatto, ecc.).

Apri la vista dei livelli (opzionale) e crea il modulo di testo successivo come segue:

1. Duplica il modulo di testo.
2. Apri le impostazioni di testo per il modulo duplicato.
3. Aggiorna il colore di sfondo
   • Colore di sfondo: #4c6085

Ripeti questo processo per creare il terzo modulo di testo come segue:

1. Duplica il modulo di testo precedente.
2. Apri le impostazioni di testo per il modulo duplicato.
3. Aggiorna il colore di sfondo
   • Colore di sfondo: #39a0ed

Ripeti questo processo ancora una volta per creare il quarto modulo di testo come segue:

1. Duplica il modulo di testo precedente.
2. Apri le impostazioni di testo per il modulo duplicato.
3. Aggiorna il colore di sfondo
   • Colore di sfondo: #13c4a3

Per creare i quattro moduli successivi, usa la funzione di selezione multipla per selezionare tutti e quattro i moduli. Quindi copia e incolla i moduli nella stessa colonna per creare un totale di otto moduli di testo.

Parte 2: Creazione del layout della griglia CSS per i moduli

Ora che i nostri moduli sono a posto, siamo pronti per creare la nostra griglia CSS per quei moduli.

Impostazioni riga

Per questo esempio, stiamo usando un layout a una colonna in modo da poter visualizzare la nostra griglia del modulo in un layout a larghezza intera. Quindi dovremo aggiornare le impostazioni della riga per assicurarci che la riga occupi l'intera larghezza della pagina. Dobbiamo anche eliminare la larghezza della grondaia predefinita in modo che non vengano aggiunti margini aggiuntivi ai nostri moduli.

Apri le impostazioni della riga e aggiorna quanto segue:

• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Aggiunta della griglia CSS alla colonna per creare il layout della griglia per i moduli

Questo è il passaggio chiave nel tutorial che crea il layout per i moduli utilizzando la proprietà CSS Grid.

Per fare ciò, aggiungeremo tre righe di CSS alla Colonna che determineranno il layout dei nostri moduli.

Apri le impostazioni della colonna e, nella scheda avanzate, incolla il seguente CSS all'interno dell'elemento principale:

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

La prima riga di CSS dispone il contenuto (oi moduli) secondo il modulo della griglia CSS.

display:griglia

La seconda riga di CSS definisce il modello di colonna della griglia. In questo caso, la griglia avrà quattro colonne ciascuna con una larghezza del 25% (vedi screenshot sopra).

colonne-modello-griglia: 25% 25% 25% 25%

La terza riga di CSS specifica che le righe verranno generate automaticamente in base alle esigenze con una dimensione (o altezza) impostata su auto. Ciò significa che l'altezza di ogni riga sarà determinata dall'altezza verticale del contenuto (o dei moduli) all'interno della riga (vedi screenshot sopra).

grid-auto-rows: auto

Regola il layout della griglia su dispositivi mobili

Avremo anche bisogno di regolare il layout della griglia sui dispositivi mobili, se necessario.

Per fare questo abbiamo semplicemente bisogno di aggiungere ulteriori CSS a ogni tablet un cellulare che cambia il numero di colonne e la larghezza di ogni colonna.

In questo esempio, cambieremo il layout della griglia per i moduli sul tablet in due colonne larghe ciascuna il 50%.

Apri le opzioni reattive e seleziona la scheda tablet sotto l'elemento principale e incolla il seguente CSS:

 display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto; 

Per il display del telefono, vogliamo un layout a colonna singola. Per crearlo, incolla il seguente CSS nella scheda Telefono Elemento principale:

 display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto; 

Parte 3: apportare modifiche agli elementi della griglia (o ai moduli)

Aggiunta di un nuovo modulo alla griglia e come reagisce

Ora che ogni modulo è all'interno della griglia CSS, l'aggiunta di un nuovo modulo spingerà gli altri moduli a destra e creerà automaticamente nuove righe secondo necessità.

Poiché abbiamo comunque bisogno di un modulo in più per questo layout, duplica il primo modulo di testo per vedere come gli altri moduli si adattano all'interno della griglia.

Come la griglia risponde ai moduli con diverse quantità di contenuto

In questo momento, tutti i moduli di testo hanno la stessa quantità di contenuto, quindi è difficile vedere come il layout della griglia gestisce i moduli con quantità variabili di contenuto. Per vedere come funziona, cambia la quantità di testo del paragrafo all'interno di ciascun modulo. Notare che i moduli rimarranno della stessa altezza del modulo con la maggior parte del contenuto nella stessa riga. E l'altezza della riga sarà determinata anche dal modulo con il maggior contenuto (o altezza verticale).

Modifica della posizione dei moduli (o degli elementi della griglia)

Gli elementi della griglia CSS possono essere posizionati utilizzando il sistema di numerazione delle righe integrato nel modulo griglia. Ogni riga della griglia rappresenta un numero. Per le colonne, i numeri di riga iniziano da 1 e continuano orizzontalmente. Ogni numero di riga si trova all'inizio e alla fine di ogni colonna. Quindi, per la nostra struttura a quattro colonne, il numero di riga inizia con 1 a sinistra della prima colonna e finisce con 5 a destra della quarta colonna. E, poiché abbiamo tre righe, i numeri di riga per le righe iniziano da 1 nella parte superiore della prima riga e continuano a 4 nella parte inferiore della terza riga.

Per modificare la posizione di un modulo (o elemento della griglia) in CSS Grid, possiamo impostare define dove vogliamo posizionare un determinato modulo nella griglia. Questo sovrascriverà il posizionamento predefinito del modulo nella griglia.

Per questo esempio, sposteremo il primo modulo di testo in una posizione diversa. Per fare questo dobbiamo aggiungere due righe di CSS al modulo.

Apri le impostazioni per il primo modulo di testo e incolla il seguente CSS personalizzato nell'elemento principale:

grid-column: 2/4;
grid-row: 2/3;

La prima riga di CSS definisce la posizione del modulo (o elemento della griglia) orizzontalmente dicendo al modulo di iniziare sulla riga di colonna 2 e terminare sulla riga di colonna 4.

colonna-griglia: 2/4

La seconda riga di CSS definisce la posizione del modulo (o elemento della griglia) verticalmente dicendo al modulo di iniziare sulla riga 2 e terminare sulla riga 3.

riga della griglia: 2/3

Per il display di tablet e telefono, vogliamo riportare il modulo nella posizione originale. Questo è utile per mantenere l'intestazione principale nella parte superiore della pagina.

Per fare ciò, seleziona la scheda tablet sotto l'opzione responsive per l'elemento principale e incolla il seguente CSS:

grid-column: auto;
grid-row: auto;

Ora la posizione del modulo tornerà al flusso originale (automatico) degli elementi della griglia.

Andiamo avanti e posizioniamo altri moduli (o elementi della griglia) usando questo metodo.

Posizioneremo il terzo modulo di testo (ora nella seconda colonna della riga superiore) in una nuova posizione impostata all'interno della griglia. Questa nuova posizione inizierà alla riga di colonna 1 e terminerà alla riga di colonna 2 e inizierà anche alla riga di riga 2 e terminerà alla riga di riga 4.

Per fare ciò, apri le impostazioni per il terzo modulo di testo e incolla il seguente CSS personalizzato nell'elemento principale:

grid-column: 1/2;
grid-row: 2/4;

Ora possiamo cambiare la posizione su mobile aggiungendo il seguente CSS per tablet:

grid-column: auto;
grid-row: auto;

Per il posizionamento finale della griglia del modulo personalizzato, posizioneremo il settimo modulo di testo (ora nell'ultima colonna della seconda riga) in una nuova posizione impostata all'interno della griglia. Questa nuova posizione inizierà alla riga di colonna 4 e terminerà alla riga di colonna 5 e inizierà anche alla riga di riga 2 e terminerà alla riga di riga 4.

Per fare ciò, apri le impostazioni per il settimo modulo di testo e incolla il seguente CSS personalizzato nell'elemento principale:

grid-column: 4/5;
grid-row: 2/4;

Quindi incolla il seguente CSS per la visualizzazione su tablet come abbiamo fatto per i moduli precedenti.

grid-column: auto;
grid-row: auto;

Allineamento del contenuto del modulo (o elemento della griglia) al centro

Potremmo fermarci qui, ma perderemmo un modo utile per allineare (o centrare) il contenuto del nostro modulo verticalmente. Avere il contenuto del modulo (o elemento della griglia) centrato verticalmente è una caratteristica utile di un layout a griglia perché rende tutto più simmetrico ed esteticamente gradevole.

Per fare ciò, possiamo aggiungere un frammento di CSS che utilizza la proprietà flex CSS per allineare e giustificare il contenuto al centro. Dobbiamo aggiungere questo frammento a ciascuno dei moduli. Per fare ciò, possiamo usare multiselect per selezionare tutti i moduli (o elementi della griglia) che non hanno già CSS personalizzati per l'elemento principale (non vogliamo sovrascrivere quei moduli con posizioni personalizzate). Quindi apri le impostazioni dell'elemento aprendo le impostazioni per uno dei moduli selezionati. Nella scheda Avanzate, incolla il seguente CSS nell'elemento principale:

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

Ora possiamo tornare ai nostri altri tre moduli (modulo #1, #3 e #7) individualmente e aggiungere lo stesso frammento di CSS oltre al CSS che è stato usato per dare al modulo una posizione personalizzata sulla griglia. Assicurati di aggiungere lo snippet CSS sotto il CSS esistente sia per desktop che per tablet.

Aggiungi CSS al primo modulo di testo

Aggiungi CSS al terzo modulo di testo

Aggiungi CSS al settimo modulo di testo

Risultato finale

Ecco il risultato finale del nostro layout di griglia CSS personalizzato per i nostri moduli di testo.

Nota come i moduli (o gli elementi della griglia) si adattano senza problemi su diverse larghezze del browser per un bel design reattivo.

Esempio di utilizzo di moduli e design diversi

È difficile vedere il pieno potenziale dell'utilizzo della griglia CSS per creare layout di moduli utilizzando solo moduli di testo. Quindi ho pensato di mostrarti un design che ho creato applicando gli stessi passaggi in questo tutorial utilizzando diversi moduli ed elementi di design dal nostro Fitness Gym Layout Pack.

Ecco qui…

Ho anche incluso questo layout insieme al layout del modulo di testo con il download gratuito presente all'inizio di questo post.

Sentiti libero di portarlo a fare un giro!

Pensieri finali

In questo tutorial, ti abbiamo mostrato come creare un layout di griglia CSS per i moduli Divi. Sebbene il processo si basi su alcuni CSS personalizzati, sorprendentemente non è molto, considerando i potenti risultati che può avere. È bello poter controllare il layout di tutti i moduli a livello di colonna quando necessario per layout Divi più esclusivi. Per maggiori informazioni sulla griglia CSS, dovresti dare un'occhiata a questa guida completa per considerare più possibilità.

Non vedo l'ora di sentirti nei commenti.

Saluti!