Come progettare un layout "vetrina" a cinque colonne reattivo con Divi

Progettare un layout a cinque colonne con spazio sufficiente per i tuoi contenuti può essere difficile. Per non parlare della sfida più grande di assicurarsi che si adatti bene a tutte le dimensioni del browser. In questo tutorial, ti mostrerò come massimizzare lo spazio necessario per adattare il contenuto all'interno di un layout a cinque colonne senza compromettere il design su schermi di dimensioni più piccole (come tablet e smartphone). Questo design è ideale per mostrare prodotti, servizi e progetti. Aggiungerò anche alcune funzionalità di design bonus per un po' di ispirazione.

Iniziamo.

Sbirciata

Tecniche reattive utilizzate

Usa una larghezza di riga personalizzata e una larghezza di grondaia

La chiave per rendere reattivo un layout a cinque colonne è innanzitutto dare alle colonne spazio sufficiente per contenere il contenuto. Nel design di questo tutorial, darò alla riga che contiene le cinque colonne una larghezza personalizzata dell'89%. Quindi creerò ancora più spazio impostando la larghezza della grondaia su 1, che sostanzialmente elimina qualsiasi margine tra le colonne. Per questo disegno, è importante utilizzare una larghezza personalizzata dell'89% invece di impostare la riga su tutta la larghezza perché è possibile impostare la larghezza della grondaia su 1 e mantenere comunque un margine su ciascun lato della riga. Vedrai cosa intendo.

Usa unità di lunghezza vw per la spaziatura e il testo dell'intestazione

Un'altra chiave per mantenere le cose reattive su un layout a cinque colonne è distanziare i contenuti utilizzando unità di lunghezza vw. Ed è importante essere coerenti con l'utilizzo di vw in tutta la spaziatura. Ciò assicurerà di mantenere le cose in scala in modo coerente su tutte le dimensioni del browser senza che gli elementi si rompano o saltino mentre si regola la larghezza della finestra. Anche l'uso dell'unità di lunghezza vw per il testo dell'intestazione sarà fondamentale in modo che il testo non si spezzi in una nuova riga su finestre del browser più piccole. Tuttavia, per il testo dell'intestazione, dovremo assegnare un'unità px per tablet e smartphone per far sì che il testo si riduca troppo.

Parte 1: Iniziare

Tutto ciò di cui hai bisogno per questo tutorial è il tema Divi. Useremo il Visual Builder insieme al layout della home page dello studio di architettura.

Quindi, per iniziare, crea una nuova pagina, assegna un titolo alla tua pagina e distribuisci Visual Builder. Seleziona l'opzione "Scegli un layout predefinito". Nel popup di caricamento dalla libreria, seleziona il pacchetto di layout Interior Design e quindi carica il layout della home page dello studio di architettura sulla tua pagina.

Parte 2: Creazione della sezione del titolo

Per cominciare, duplica la seconda sezione contenente i tre blurb.

Abbiamo bisogno di due sezioni per questo progetto perché la sezione superiore servirà a due scopi. Innanzitutto, conterrà il titolo della nostra sezione sottostante. E in secondo luogo, ci consentirà di aggiungere un design unico utilizzando un divisore di sezione.

Continuiamo.

Nella sezione originale (non nel duplicato), elimina i tre contrassegni e modifica la struttura delle colonne della riga in una colonna.

Quindi scorri verso il basso fino alla fine del layout fino all'ultima sezione e copia il modulo di testo nella colonna di sinistra.

Quindi incollalo all'interno della riga di una colonna appena creata ed elimina tutto il contenuto di testo sotto l'intestazione h2 in modo che rimanga solo "Costruiamo qualcosa".

Parte 3: personalizzazione di Blurb per un layout a cinque colonne

Ora è il momento di visitare la sezione che abbiamo duplicato con i nostri tre contrassegni originali all'interno della riga di 3 colonne. Innanzitutto, cambiamo la struttura delle righe in un layout a cinque colonne.

Apri le impostazioni blurb del modulo blurb nella prima colonna e quindi elimina l'immagine utilizzata come icona.

Quindi duplica il modulo blurb nella prima colonna. Useremo due blurb per colonna per questo design perché abbiamo bisogno del blurb in alto per contenere la nostra immagine di sfondo.

Apri le impostazioni per la descrizione in alto nella prima colonna ed elimina il testo del corpo nella casella del contenuto.

Aggiungi un'immagine di sfondo e una sfumatura al modulo Blurb superiore

Quindi dai lo stesso blurb a un'immagine di sfondo e aggiungi un gradiente per sovrapporre l'immagine come segue:

Aggiungi immagine di sfondo
Colore sfondo sfumato sinistro: rgba (255,255,255,0)
Colore di sfondo sfumato a destra: rgba (18,18,18,0.65)
Posizione di partenza: 50%
Posiziona il gradiente sopra l'immagine di sfondo: S

Il gradiente è necessario per aiutare il testo del titolo a diventare più leggibile con immagini di sfondo più chiare.

Usa le unità VW per il testo del titolo e la spaziatura

Quindi aggiorna le impostazioni della scheda di progettazione come segue:

Dimensione del testo del titolo: 2.7vw (desktop), 46px (tablet), 36px (smartphone)
Spaziatura delle lettere del titolo: -3px
Margine personalizzato: 1.5vw sinistro, 1.5vw destro
Imbottitura personalizzata: 35vw in alto, 2vw in basso, 1vw a sinistra, 1vw a destra

Salva le impostazioni.

L'imbottitura superiore personalizzata di 35vw è ciò che crea l'esclusivo design dell'immagine verticale lunga. Al testo del titolo viene assegnato un valore 2.7vw per mantenere il ridimensionamento del testo coerente su diverse larghezze del browser. Il resto della spaziatura avrà più senso una volta che aggiungeremo più spaziatura alla nostra riga in seguito.

Personalizzazione del blurb in basso

Quindi apri le impostazioni del secondo modulo blurb sotto nella prima colonna ed elimina il testo del titolo. Quindi aggiorna quanto segue:

Allineamento del corpo del testo: a sinistra
Colore del corpo del testo: #666666
Imbottitura personalizzata: 2vw in alto, 2vw in basso, 2vw a sinistra, 2vw a destra

Ora che abbiamo i nostri due blurb progettati nella nostra prima colonna. Copiali entrambi e incollali in ciascuna delle colonne rimanenti. Dovrai prima eliminare i moduli blurb originali nelle colonne 2 e 3. Ora il tuo design dovrebbe assomigliare a questo.

Parte 4: Personalizzazione delle impostazioni della sezione

Ora aggiorniamo le impostazioni della nostra sezione per avere uno sfondo bianco e un'ombra di riquadro in basso che creerà uno spazio per la sovrapposizione della nostra riga.

Colore di sfondo: #ffffff
Imbottitura personalizzata: predefinita in alto, 5vw in basso, predefinita a sinistra, predefinita a destra
Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: -200 px
Forza sfocatura ombra scatola: 0px
Colore ombra: #121212

Parte 5: personalizzazione delle impostazioni di riga

Ora torniamo alla nostra riga e aggiorniamo le impostazioni come segue:

Immagine di sfondo: #ffffff
Allineamento righe: Centro
Larghezza personalizzata: 89%
Larghezza grondaia: 1
Margine personalizzato: -10vw
Imbottitura personalizzata: 3vw in alto, 3vw in basso, 1.5vw a sinistra, 1.5vw a destra
Box Shadow: vedi screenshot
Intensità della sfocatura dell'ombra della scatola: 80 px

Come accennato in precedenza nel tutorial, la larghezza personalizzata e la larghezza della grondaia sono essenziali per creare lo spazio del contenuto di cui abbiamo bisogno per un layout a cinque colonne.

A questo punto, la struttura di base del progetto è terminata. Ecco come appare il design finora.

Parte 6: Aggiungere gli ultimi ritocchi

Ora possiamo aggiungere qualche altra modifica al design per completarlo.

Sbalordire i Blurb

Innanzitutto, scaglioniamo l'altezza delle immagini di sfondo sfocate diminuendo il riempimento di alcune. Apri le impostazioni del modulo blurb superiore nella seconda riga e aggiorna il padding come segue:

Imbottitura personalizzata: 28vw Top

E per la trama in alto nella terza colonna, cambia l'imbottitura in alto a 30vw.

Aggiungi un divisore di sezione per aggiungere texture alla tua riga a cinque colonne

Una tecnica di design interessante consiste nell'aggiungere un divisore della sezione superiore alla sezione direttamente sopra la sezione con le nostre cinque colonne. Lo sfondo del divisore verrà visualizzato sullo sfondo della riga di cinque colonne anche se si sovrappone alla sezione sopra. Per fare ciò, vai alla sezione contenente il titolo "Costruiamo qualcosa" e assegnagli un divisore come segue:

Poiché il colore del divisore è lo stesso colore dello sfondo della sezione con un'opacità del 15%, il divisore non è visibile nella sezione superiore, ma diventa visibile nella sezione inferiore e sulla riga sovrapposta. E poiché abbiamo dato alla riga un'ombra a scatola, questo crea un design unico.

Sono andato avanti e ho aggiornato alcune delle immagini di sfondo per avere un'idea migliore di come sarebbe il design con immagini diverse.

Ecco il disegno definitivo.

Una delle grandi cose del layout a cinque colonne è che ottieni un bel layout a due colonne sul tablet.

Ed ecco come appare su smartphone.

Pensieri finali

Adoro esplorare la potenza di Divi per creare layout reattivi. La sfida di un layout a cinque colonne è che non c'è davvero molto spazio per i contenuti a meno che non si utilizzino le tecniche giuste per distanziare i contenuti in modo appropriato per scalare bene su tutte le dimensioni del browser. Spero che questo design sia stato utile per introdurre alcune possibilità per l'utilizzo di un layout a cinque colonne per il tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti.

Saluti!