Hai familiarità con la creazione di siti Web mozzafiato utilizzando Divi? Probabilmente dovresti sapere che il layout della griglia è una caratteristica principale di Divi Builder. In genere, si inizia creando una riga e si sceglie di creare più colonne per tale riga. Con la colonna in posizione, è lì che si aggiungeranno i moduli. Possiamo fare in modo che le cose vadano oltre, aggiungendo più griglie per quei moduli.
Durante questa esercitazione, esploreremo come estendere il layout a griglia di Divi creando layout a griglia CSS per i moduli Divi con una singola colonna. La griglia CSS è (usando CSS Flex) è molto popolare per creare griglie reattive per il contenuto con poche righe CSS. Possiamo quindi organizzare tutti i nostri moduli per essere reattivi. Considerarlo come un layout aggiuntivo per i moduli che è possibile aggiungere a una colonna Divi. Il punto buono qui è che tutti i nostri moduli nidificati avranno la stessa altezza e larghezza senza la necessità di impostare i valori di imbottitura e altezza.
Anteprima risultato finale
Prima di iniziare, vediamo cosa sarai in grado di ottenere entro la fine di questa esercitazione.
Creazione di un layout griglia CSS personalizzato per moduli Divi
Parte 1: Aggiunta dei moduli a una colonna Divi
Una delle prime cose che dobbiamo fare è organizzare i nostri moduli in layout a griglia. Aggiungeremo tutti i moduli che vogliamo usare alla nostra colonna. Iniziamo creando una nuova riga a una colonna nella sezione normale predefinita.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti ora
Creazione dei moduli
All'interno delle colonne, w e'll aggiungere il modulo di testo. Modificheremo quindi le impostazioni del contenuto come segue:
- Aggiungere un titolo H2 sopra il testo del paragrafo
- Colore sfondo: #444444
Aggiorneremo anche le impostazioni di progettazione come segue:
- Tipo di carattere testo: Poppins
- Colore testo: Chiaro
- Selezionare la scheda H2 in Titolo testo
- Titolo 2 Stile carattere: TT
- Imbottitura: 10% in alto, 10% in basso, 10% a sinistra 10% a destra
NOTA: Per renderlo molto semplice, continueremo a utilizzare più moduli di testo con vari colori di sfondo per mostrare una distinzione tra ogni modulo.
Passare alla vista livelli e creare il modulo di testo successivo come segue:
- Duplicare il modulo di testo.
- Aprire le impostazioni di testo per il modulo duplicato.
- Aggiorna colore sfondoColore sfondo: #4c6085
È possibile ripetere questo processo per creare il terzo modulo di testo come segue:
- Duplicare il modulo di testo precedente.
- Aprire le impostazioni di testo per il modulo duplicato.
- Aggiorna colore sfondoColore sfondo: #39a0ed
Ripeteremo il processo ancora una volta per creare il quarto modulo di testo come segue:
- Duplicare il modulo di testo precedente.
- Aprire le impostazioni di testo per il modulo duplicato.
- Aggiorna colore sfondoColore sfondo: #13c4a3
Per creare i quattro moduli successivi, utilizzare la funzione di selezione multipla per selezionare tutti e quattro i moduli. Quindi copiare e incollare i moduli nella stessa colonna per creare un totale di otto moduli di testo.
Parte 2: Creiamo il layout della griglia CSSper i moduli
Ora che tutti i nostri moduli sono aggiunti, creiamo una griglia per quelli.
Impostazioni riga
Per questo esempio, stiamo usando un layout a una colonna in modo da poter visualizzare la griglia del modulo in un layout a larghezza intera. Ora, dovremo aggiornare le impostazioni della riga per assicurarci che la riga prenda l'intera larghezza della pagina. Dovremo anche esegnare la larghezza di grondaia predefinita in modo che non siano aggiunti margini aggiuntivi ai nostri moduli.
Aprire le impostazioni delle righe e aggiornare quanto segue:
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100%
Aggiunta della griglia CSS alla colonna per creare il layout a griglia per i moduli
Si tratta di un passaggio importante dell'esercitazione che crea il layout per i moduli utilizzando la proprietà Griglia CSS.
Per fare questo, aggiungeremo tre righe di CSS alla colonna che determineranno il layout dei nostri moduli.
Aprire le impostazioni delle colonne e, nella scheda avanzata, incollare il CSS seguente all'interno dell'elemento principale:
display:grid;grid-template-columns: 25% 25% 25% 25%;grid-auto-rows: auto;
La prima riga di CSS espone il contenuto (o i moduli) secondo il Modulo griglia CSS.
Schermo:griglia
Nella seconda riga di CSS definiremo il modello di colonna della griglia. In questo caso, la nostra griglia avrà quattro colonne che hanno il 25% di larghezza.
Grid-template-colonne: 25% 25% 25% 25%
La terza riga menziona le righe che verranno generate automaticamente. Ciò significa che l'altezza di ogni riga sarà determinata dall'altezza verticale del contenuto (o dei moduli) all'interno della riga.
Grid-auto-rows: auto
Adjust Grid Layout on Mobile
Ora, dovremo anche regolare il layout della griglia sui dispositivi mobili in base alle esigenze.
Per poterlo fare, dovremo solo aggiungere alcuni CSS sia al tablet che al cellulare che modificano il numero di colonne e la larghezza di ogni colonna.
In questo esempio, cambieremo il layout della griglia per i moduli sui tablet in due colonne che sono ciascuna del 50% di larghezza.
Apriamo le opzioni reattive e selezioniamo la scheda tablet sotto l'elemento principale e incolliamo il CSS seguente:
display:grid;grid-template-columns: 50% 50%;grid-auto-rows: auto;
Per la visualizzazione del telefono, vogliamo un layout a colonna singola. Per creare questa operazione, incollare il CSS seguente nella scheda Telefono Elemento principale:
display:grid;grid-template-columns: 100%;grid-auto-rows: auto;
Parte 3: Apportare modifiche ai moduli griglia
Aggiunta di un nuovo modulo alla griglia e al modo in cui reagisce
Ora che abbiamo ogni modulo alla griglia, se aggiungiamo più moduli, l'altro verrà spinto a destra e verranno create nuove righe. Poiché abbiamo comunque bisogno di un altro modulo per questo layout, duplica il primo modulo di testo per vedere come gli altri moduli si regolano all'interno della griglia.
Come grid risponde ai moduli con diverse quantità di contenuto
Nel frattempo, tutti i moduli hanno la stessa quantità di contenuti, quindi non possiamo davvero vedere come la griglia gestirà moduli che hanno varie altezze. Per vedere come funziona, modificare la quantità di testo del paragrafo all'interno di ogni modulo. Si noti che i moduli rimarranno della stessa altezza del modulo con la maggior parte del contenuto nella stessa riga. D'ora in ora l'altezza della riga sarà determinata anche dal modulo con più contenuto (o altezza verticale).
Modifica della posizione dei moduli sulla griglia
Gli elementi della griglia CSS possono essere posizionati utilizzando il sistema di numerazione 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 di colonna, il numero di riga inizia da 1 a sinistra della prima colonna e termina a 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 fino a 4 nella parte inferiore della terza riga.
Se vogliamo cambiare la posizione di un modulo (o elemento griglia) nella griglia CSS, possiamo impostare la posizione in cui vogliamo che un determinato modulo venga posizionato nella griglia. In questo modo si sostituirà il posizionamento predefinito del modulo nella griglia.
Per questo esempio, sposteremo il primo modulo di testo in una posizione diversa. Per questo, abbiamo solo bisogno di aggiungere due righe di CSS al modulo.
Aprire le impostazioni per il primo modulo di testo e incollare il CSS personalizzato seguente nell'elemento principale:
grid-column: 2/4;grid-row: 2/3;
La prima riga di CSS definisce la posizione del modulo orizzontalmente dicendo al modulo di iniziare sulla linea 2 della colonna e terminare sulla riga 4 della colonna.
Colonna griglia: 2/4
La seconda riga di CSS definisce verticalmente la posizione del modulo (o dell'elemento griglia) in modo che il modulo inizi sulla riga 2 e finisca sulla riga 3.
Fila griglia: 2/3
Per il display di tablet e telefono, riporteremo il modulo nella posizione originale. Questo è utile per mantenere l'intestazione principale nella parte superiore della pagina.
Quindi, seleziona la scheda tablet sotto l'opzione reattiva per l'elemento principale e incolla il CSS seguente:
grid-column: auto;grid-row: auto;
Ora la posizione del modulo tornerà al flusso originale (automatico) degli elementi della griglia.
Andiamo avanti e posizionaamo alcuni altri moduli (o elementi della griglia) usando questo metodo.
Ora 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à dalla riga 1 della colonna e terminerà sulla riga 2 della colonna e inizierà anche dalla riga 2 e terminerà sulla riga 4.
A tale scopo, aprire le impostazioni per il terzo modulo di testo e incollare il CSS personalizzato seguente nell'elemento principale:
grid-column: 1/2;grid-row: 2/4;
Ora possiamo cambiare la posizione per i dispositivi mobili aggiungendo il seguente CSS per tablet:
grid-column: auto;grid-row: auto;
Per la nostra ultima modifica, posizioneremo il settimo modulo in una nuova posizione impostata all'interno della griglia. Questa nuova posizione inizierà dalla riga 4 della colonna e terminerà sulla riga 5 e inizierà anche dalla riga 2 e terminerà sulla riga 4.
Per questo, apriamo le impostazioni per il settimo modulo di testo e incolliamo il CSS personalizzato seguente all'elemento principale:
grid-column: 4/5;grid-row: 2/4;
Incollare ora il CSS seguente per la visualizzazione del tablet.
grid-column: auto;grid-row: auto;Allineamento del contenuto del modulo (o dell'elemento griglia) al centro
Probabilmente sei stanco delle istruzioni, ma se ci fermiamo qui, perderemo un modo utile per allineare (o centrare) il contenuto del nostro modulo verticalmente. Avere il contenuto del modulo centrato verticalmente è una bella caratteristica di un layout a griglia perché rende tutto più simmetrico ed esteticamente piacevole.
Quindi, possiamo aggiungere un frammento di CSS che usa la proprietà CSS flex per allineare e giustificare il contenuto al centro. Dobbiamo aggiungere questo frammento a ciascuno dei moduli. Possiamo usare il multi-select per selezionare tutti i moduli (o gli elementi della griglia) che non hanno già CSS personalizzati per l'elemento principale (perché non vogliamo ignorare quei moduli con posizioni personalizzate). Quindi aprire le impostazioni dell'elemento aprendo le impostazioni per uno dei moduli selezionati. Nella scheda Avanzate incollare il CSS seguente nell'elemento principale:
display:flex;flex-direction:column;align-items:center;justify-content:center;
Ora possiamo tornare agli altri tre moduli (modulo #1, #3 e #7) singolarmente e aggiungere lo stesso frammento di CSS oltre al CSS che è stato utilizzato 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.
Risultato finale
Ecco come appare quello che abbiamo fatto finora.
Puoi notare come i moduli (o gli elementi della griglia) si regolano senza intoppi su diverse larghezze del browser per un bel design reattivo.
Esempio reale con moduli e progetti diversi
Se vuoi vedere un vero esempio usando questo sistema a griglia, puoi usare moduli diversi. Ecco cosa puoi creare usando quella tecnica. Questo è disponibile sul Fitness Gym Layout Pack.
In tutto tuo ora
In questa esercitazione abbiamo lavorato alla creazione di un layout a griglia CSS per i moduli Divi. Mentre il processo si basa su alcuni CSS personalizzati, sorprendentemente non è così tanto, considerando i potenti risultati che possiamo avere da esso. È bello essere in grado di controllare il layout di tutti i moduli a livello di colonna quando necessario per layout Divi più unici. Se sei un tossicodipendente CSS e vorresti immergerti, dovresti dare un'occhiata a Questa guida completa per considerare più possibilità.
Saremo lieti di vedere con quanto successo hai nella sezione commenti.
