Utilizzo dei contorni delle colonne per enfatizzare la griglia di Divi Design
Pubblicato: 2020-06-20La struttura degli elementi integrata di Divi può essere utilizzata in modi tradizionali per definire e modellare diverse sezioni, righe, colonne e moduli. Ma possono anche essere usati in modo creativo per migliorare le strutture di design sulla tua pagina. In questo tutorial, ti mostreremo come utilizzare i contorni delle colonne per enfatizzare la tua griglia di progettazione Divi. Dedicheremo una riga posizionata in modo assoluto per creare i bellissimi contorni della colonna di sfondo e unirla con altre righe nella nostra sezione. Potrai anche scaricare gratuitamente il file JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il layout dei contorni delle colonne
Per mettere le mani sul layout dei contorni delle colonne gratuito, 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 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.
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!
Iniziamo a ricreare!
Aggiungi nuova sezione
straripamenti
Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e imposta gli overflow su nascosti. Ciò contribuirà a garantire che nulla superi il contenitore della sezione, in particolare i contorni delle colonne che aggiungeremo in seguito nel tutorial.
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:
- Larghezza: 100%
- Larghezza massima: 100%
- Allineamento riga: a destra
Spaziatura
Successivamente, sposteremo la riga sul lato destro della pagina sul desktop utilizzando alcune impostazioni di ridimensionamento personalizzate.
- Margine superiore: 200 px
- Imbottitura sinistra: 47% (Desktop), 6% (Tablet), 10% (Telefono)
- Imbottitura destra: 6% (Tablet), 10% (Telefono)
Frontiera
Completeremo le impostazioni generali della riga aggiungendo un bordo superiore e inferiore.
- Larghezza bordo superiore e inferiore: 4 px
- Colore bordo superiore e inferiore: #bdffed
Impostazioni colonna 1
Spaziatura
Una volta completate le impostazioni generali della riga, apri le impostazioni della prima colonna e aggiungi alcuni valori di spaziatura personalizzati.
- Imbottitura superiore: 12%
- Imbottitura inferiore: 12%
- Imbottitura sinistra: 3%
- Imbottitura destra: 3%
Impostazioni colonna 2
Spaziatura
Apri successivamente le impostazioni della seconda colonna e utilizza le seguenti impostazioni di spaziatura:
- Imbottitura superiore: 12%
- Imbottitura inferiore: 12%
- Imbottitura sinistra: 5% (Desktop), 20% (Tablet), 15% (Telefono)
- Imbottitura destra: 5% (Desktop), 20% (Tablet), 15% (Telefono)
Aggiungi il modulo di testo n. 1 alla colonna 1
Aggiungi contenuto H2
È ora di aggiungere moduli, iniziando con un modulo di testo contenente contenuti H2 nella colonna 1.
Impostazioni testo H2
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 di conseguenza:
- Intestazione 2: Font: codice sorgente Pro
- Intestazione 2 Peso del carattere: grassetto
- Colore testo titolo 2: rgba (35,38,211,0.46)
- Titolo 2: Dimensione testo: 4vw (desktop), 60 px (tablet), 50 px (telefono)
- Intestazione 2 Spaziatura lettere: 5px
- Intestazione 2 Lunghezza orizzontale dell'ombra del testo: 0,05 em
- Intestazione 2 Lunghezza verticale dell'ombra del testo: 0,07 em
- Intestazione 2 Colore dell'ombra del testo: #bdffed
Movimento verticale
Aggiungeremo anche un po' di movimento verticale.
- Abilita movimento verticale: Sì
- Scostamento iniziale: 2
- Compensazione media: 0
- Compensazione finale: -2
- Attivazione effetto movimento: mezzo dell'elemento
Aggiungi il modulo di testo n. 2 alla colonna 2
Aggiungi contenuto
Aggiungi un altro modulo di testo proprio sotto il precedente e inserisci del contenuto descrittivo a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: codice sorgente Pro
- Colore del testo: rgba (35,38,211,0.76)
- Dimensione del testo: 15px
- Altezza riga di testo: 2em
Movimento verticale
Useremo un po' di movimento verticale anche per questo modulo.
- Abilita movimento verticale: Sì
- Scostamento iniziale: 2
- Compensazione media: 0
- Compensazione finale: -2
- Attivazione effetto movimento: mezzo dell'elemento
Aggiungi modulo pulsante alla colonna 1
Aggiungi copia
L'ultimo modulo di cui abbiamo bisogno nella colonna 1 è un modulo pulsante. Aggiungi una copia a tua scelta.
Impostazioni dei pulsanti
Passa alla scheda di progettazione del modulo e modella il pulsante come segue:
- Usa stili personalizzati per pulsante: Sì
- Colore del testo del pulsante: #2326d3
- Raggio bordo pulsante: 0px
- Carattere pulsante: codice sorgente Pro
- Mostra icona pulsante: Sì
- Posizionamento dell'icona del pulsante: a sinistra
- Mostra solo l'icona al passaggio del mouse per il pulsante: No
Spaziatura
Quindi, aggiungi alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 20px
- Imbottitura inferiore: 20px
- Imbottitura sinistra: 50 px
- Imbottitura destra: 50px
Movimento verticale
E completa le impostazioni del modulo aggiungendo un movimento verticale.
- Abilita movimento verticale: Sì
- Scostamento iniziale: 2
- Compensazione media: 0
- Compensazione finale: -2
- Attivazione effetto movimento: mezzo dell'elemento
Aggiungi modulo immagine alla colonna 2
Carica immagine con rapporto 1:1
Nella colonna 2, l'unico modulo di cui abbiamo bisogno è un modulo immagine. Carica un'immagine con un rapporto 1:1.
Dimensionamento
Passa alla scheda di progettazione del modulo e forza l'intera larghezza sull'immagine.
- Forza intera larghezza: Sì
Frontiera
Trasformeremo l'immagine in un cerchio aggiungendo successivamente alcuni angoli arrotondati.
- Tutti gli angoli: 50vw
Scatola ombra
Quindi, aggiungeremo un'ombra di scatola.
- Posizione orizzontale dell'ombra del riquadro: 30 px
- Posizione verticale dell'ombra del riquadro: 30 px
- Colore ombra: rgba (38,255,197,0.3)
Movimento verticale
E completeremo le impostazioni del modulo aggiungendo un movimento verticale.
- Abilita movimento verticale: Sì
- Compensazione iniziale: -2
- Compensazione media: 0
- Scostamento finale: 2
- Attivazione effetto movimento: mezzo dell'elemento
Clona l'intera riga due volte
Una volta completata la prima riga, puoi clonarla due volte.
Cambia tutto il contenuto e le immagini
Assicurati di modificare tutti i contenuti e le immagini duplicati.
Aggiungi il margine inferiore all'ultima riga
E apri le impostazioni dell'ultima riga, vai alle impostazioni di spaziatura e aggiungi un margine inferiore.
- Margine inferiore: 200 px
Dedica la nuova riga (nella parte superiore della sezione) ai contorni delle colonne
Struttura della colonna
Ora che abbiamo le righe generali a posto, è il momento di aggiungere i contorni delle colonne. Per fare ciò, aggiungeremo una nuova riga nella parte superiore della nostra sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Apri le impostazioni della riga, vai alla scheda Design e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 90%
- Larghezza massima: 100%
Spaziatura
Stiamo rimuovendo anche tutte le imbottiture superiori e inferiori predefinite.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Posizione
Quindi, passa alla scheda Avanzate e riposiziona l'intera riga. Impostando la posizione su assoluto, rimuoveremo lo spazio del contenitore occupato dalla riga all'interno della pagina.
- Posizione: Assoluta
- Posizione: in alto al centro
Larghezza CSS dell'elemento principale di tutte le colonne
Una volta che le impostazioni generali delle righe sono a posto, è il momento di iniziare a definire lo stile delle colonne. Innanzitutto, aggiungi una larghezza personalizzata a ciascuna colonna utilizzando una riga di codice CSS all'interno dell'elemento principale della riga. Questo ci aiuterà a mantenere la struttura a colonne su schermi di dimensioni più piccole.
width: 20% !important;
Impostazioni colonna 1
Spaziatura
Quindi, apri le impostazioni della colonna 1 e modifica i valori di riempimento su diverse dimensioni dello schermo.
- Imbottitura superiore: 150 vh (desktop), 250 vh (tablet e telefono)
- Imbottitura inferiore: 150 vh (desktop), 250 vh (tablet e telefono)
Frontiera
Aggiungi anche un bordo sinistro.
- Larghezza bordo sinistro: 5px
- Colore bordo sinistro: #bdffed
- Stile bordo sinistro: tratteggiato
Impostazioni colonna 2
Colore di sfondo
Successivamente, apriremo le impostazioni della colonna 2 e aggiungeremo un colore di sfondo.
- Colore di sfondo: #b5fff1
Frontiera
Useremo anche un bordo destro.
- Larghezza bordo destro: 4px
- Colore bordo destro: #bdffed
- Stile bordo destro: solido
Impostazioni colonna 3
Frontiera
Nella terza colonna, utilizzeremo un bordo destro con le seguenti impostazioni:
- Larghezza bordo destro: 4px
- Colore bordo destro: rgba (35,38,211,0.12)
- Stile bordo destro: tratteggiato
Impostazioni colonna 4
Frontiera
Quindi, apriremo le impostazioni della colonna 4 e modificheremo le impostazioni del bordo di conseguenza:
- Larghezza bordo destro: 4px
- Colore bordo destro: #bdffed
- Stile bordo destro: solido
Impostazioni colonna 5
Frontiera
Completeremo le impostazioni della colonna aggiungendo anche un bordo destro alla colonna 5.
- Larghezza bordo destro: 4px
- Colore bordo destro: rgba (35,38,211,0.12)
- Stile bordo destro: tratteggiato
Aggiungi modulo divisore alle colonne 1 e 2
Visibilità
Nell'anteprima mobile all'inizio di questo post, hai potuto notare un risultato leggermente diverso rispetto al desktop. Consentiamo solo la visualizzazione dei contorni delle colonne 1 e 2 aggiungendo un modulo divisore a quelle colonne specifiche. Assicurati di nascondere entrambi i divisori nelle impostazioni di visibilità e il gioco è fatto!
- Mostra divisore: No
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come essere creativo con le colonne integrate di Divi. Più specificamente, ti abbiamo mostrato come utilizzare i contorni delle colonne per enfatizzare la tua griglia di progettazione Divi. Questo approccio aiuta a creare un design unico senza la necessità di ulteriori software di modifica delle immagini. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.