Aggiorna la tua pagina del blog Divi con uno sfondo progettato per il layout a griglia

Creare un layout a griglia per il tuo blog è un ottimo modo per organizzare i tuoi post. Divi lo rende estremamente facile con il modulo Blog. In pochi secondi puoi distribuire un layout di griglia del blog funzionante sulla tua pagina. E puoi persino utilizzare le numerose impostazioni di progettazione per personalizzare l'aspetto della griglia del tuo blog in molti modi. Ma oggi sto portando le cose ad un altro livello.

In questo tutorial, ti mostrerò come creare più livelli di sfondo per inquadrare la griglia del tuo blog a tre colonne con un design bello e simmetrico. Si spera che tu possa utilizzare queste tecniche di progettazione per creare una pagina del blog che ti garantisce di impressionare.

Iniziamo.

Iscriviti al nostro canale Youtube

Sneak Peak of the Grid Layout Design

Ecco un'anteprima del design.

Iniziare

Tutto ciò di cui hai bisogno è Divi per questo tutorial. Una volta installato e attivo il tema Divi, crea una nuova pagina e assegna un titolo alla pagina. Quindi distribuire Visual Builder. Seleziona "Scegli un layout predefinito", quindi carica il layout di pagina del blog del terapista sulla tua pagina e pubblicalo.

Assicurati di avere almeno 6 post del blog con contenuti e immagini in primo piano. In caso contrario, i post del blog non verranno visualizzati nella pagina.

Ora sei pronto per iniziare a modificare.

Aggiungi il primo livello di sfondo alla sezione

Il design personalizzato verrà aggiunto alla seconda sezione del layout contenente il modulo blog. Per creare il nostro primo livello di sfondo, modelleremo le impostazioni della sezione come segue:

Colore di sfondo: #5873dd
Imbottitura personalizzata (desktop): 4vw in alto, 4vw in basso, 7vw a sinistra
Imbottitura personalizzata (tablet): 0vw sinistra

L'imbottitura sinistra personalizzata 7vw compensa sostanzialmente il contenuto della sezione (la riga) per un aspetto unico. Se vuoi che tutto sia bello e centrato per il tuo design, puoi tralasciarlo.

Aggiungi il secondo e il terzo livello di sfondo alla riga

Il secondo e il terzo livello di sfondo verranno creati aggiungendo un colore di sfondo all'intera riga e quindi un gradiente di sfondo alla colonna all'interno della riga.

Apri le impostazioni della riga e aggiorna quanto segue:

Colore di sfondo: rgba (255,255,255,0.3)
Colore di sfondo della colonna 1 a sinistra: rgba (255,255,255,0.0)
Colore di sfondo della colonna 1 a destra: rgba (255,255,255,0.3)
Direzione gradiente colonna: 90 gradi
Posizione iniziale della colonna: Posizione iniziale della colonna: 33,3%
Posizione di fine colonna: 0%

Nota che sto usando un colore bianco con il 30% di opacità per creare un grado coerente di colori sovrapposti bianchi che permettano di mostrare lo sfondo della sezione blu. Quando ogni colore si sovrappone, l'utente vede una versione più chiara del 30% dello sfondo della sezione blu. In questo modo, se vuoi cambiare la combinazione di colori del layout, tutto ciò che dovrai fare è cambiare il colore di sfondo della sezione.

L'impostazione della posizione di inizio del gradiente della colonna al 33,3% garantisce che il gradiente si divida a destra tra la prima e la seconda colonna della griglia del mio blog. Ma questo non sembrerà corretto inizialmente perché dobbiamo ancora dare alla nostra riga una larghezza personalizzata del 100% tra le altre cose.

Larghezza personalizzata: 100%
Larghezza grondaia: 4
Imbottitura personalizzata: 4% superiore, 4% inferiore

L'imbottitura personalizzata espone i livelli verticalmente per aggiungere al design generale.

Salva le impostazioni.

Aggiungere il quarto livello di sfondo al nostro modulo blog

È qui che tutto va a posto. Il quarto e ultimo livello sarà un gradiente di sfondo aggiunto al nostro modulo blog. Quindi, con l'esatta spaziatura aggiunta, il modulo blog si allineerà perfettamente con i nostri livelli di sfondo. Aggiungerò anche alcune modifiche di stile alle schede del blog per aggiungere alcuni ritocchi finali.

Vai alle impostazioni del modulo blog e aggiorna quanto segue:

Colore di sfondo della griglia: rgba (255,255,255,0.7)

Per aggiungere il gradiente di sfondo, puoi andare alle impostazioni della riga e copiare il gradiente di sfondo della colonna 1, quindi tornare alle impostazioni del blog e incollarlo utilizzando le opzioni del tasto destro.

Quindi aggiorna quanto segue:

Posizione di partenza: 66,6%

Margine personalizzato: 4% superiore, 4% inferiore
Imbottitura personalizzata: 4% in alto, 4% in basso, 4% a sinistra, 4% a destra

Come puoi vedere, il valore della lunghezza del 4% viene utilizzato ovunque per dare uguale spaziatura al nostro design. E c'è di più in questo valore del 4% di quanto sembri. Se ricordi, impostiamo la nostra riga in modo che abbia una larghezza del margine personalizzata di 4. In Divi, se aggiungi un modulo blog con un layout a griglia a una riga con una larghezza del margine di 4, le colonne della griglia del blog saranno separate orizzontalmente dell'8% di margine. Quindi, l'aggiunta del 4% di padding sinistro e destro al modulo creerà la spaziatura esatta di cui abbiamo bisogno.

A questo punto, abbiamo finito con il design dello sfondo. Dai un'occhiata a ciò che abbiamo finora.

Ora tutto ciò che dobbiamo fare è aggiungere alcuni ritocchi finali al modulo blog.

Tocchi finali

Nella scheda Design delle Impostazioni modulo blog, aggiorna quanto segue:

Colore del corpo del testo: rgba(0,0,0,0,8)
Colore meta testo: rgba(0,0,0,0.5)
Stile carattere di impaginazione: sottolineato
Colore sottolineatura paginazione: rgba(166,221,217,0.39)
Colore del testo dell'impaginazione: #ffffff
Dimensione del testo dell'impaginazione: 3vw (desktop), 40px (tablet), 30px (smartphone)

Se vuoi dare un po' più di consistenza al tuo design, puoi aggiungere sfondi divisori alla tua sezione.

Divisore in alto: vedi screenshot
Colore divisore: rgba (88,115,221,0,5)
Altezza divisore: 32vw
Ripetizione orizzontale divisore: 0,3X

Divisore in basso: vedi screenshot
Colore divisore: rgba (88,115,221,0,5)
Altezza divisore: 43vw
Ripetizione orizzontale divisore: 0,3X

Ora controlla il risultato finale...

Design reattivo

I livelli che incorniciano le colonne della griglia si adattano perfettamente a tutte le dimensioni del browser desktop.

Sebbene i livelli di sfondo non si adattino a due colonne su tablet e una colonna su smartphone, il risultato è ancora molto simmetrico e fornisce un design a griglia spezzata sottile che funziona bene.

Ecco come sarà sui dispositivi mobili...

Pensieri finali

Questa tecnica di sfondo a strati è davvero un modo per creare l'impressione di avere sfondi a tre colonne dove in realtà c'è solo una colonna (poiché il modulo blog si trova in una colonna). Certo, è possibile farlo in CSS personalizzato a livello di modulo del blog, ma ho pensato che sarebbe stato più utile fornire una soluzione creativa utilizzando Divi Builder. E le variazioni del design possono essere utilizzate anche come sfondo di altri contenuti.

Ho cercato di spiegare il ragionamento alla base di alcuni degli stili utilizzati in questo tutorial, ma se hai domande, sono tutt'orecchi. E, per quelli di voi che sperano di ravvivare il layout della griglia del blog, si spera che questo post vi dia almeno alcuni suggerimenti di progettazione per farlo.

Non vedo l'ora di sentirti nei commenti.

Saluti!