Come progettare sezioni di eroi a più colonne uniche con la sezione speciale di Divi
Pubblicato: 2019-07-04In tutte le tendenze del design, il modo in cui progetti le sezioni degli eroi rimane estremamente importante. Con Divi, puoi adottare approcci diversi e creare una sezione degli eroi che si distingue e incoraggia le persone a prolungare la permanenza sul tuo sito web. Per aiutarti a trarre ispirazione per i tuoi prossimi progetti Divi, ti mostreremo come progettare sezioni di eroi a più colonne uniche utilizzando solo le opzioni integrate di Divi. Non solo le sezioni degli eroi a più colonne hanno un bell'aspetto, ma ti aiutano anche a posizionare strategicamente più contenuti nella sezione degli eroi senza travolgere i tuoi visitatori.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Scarica GRATUITAMENTE il layout della sezione Eroe a più colonne
Per mettere le mani sul layout della sezione degli eroi a più colonne, 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 una nuova sezione di specialità
Struttura della colonna
Per creare una sezione eroe a più colonne senza interruzioni, utilizzeremo una delle sezioni speciali Divi a cui hai accesso all'interno di Visual Builder. Scegliere una sezione speciale ti consente di avere una presa migliore sulla struttura della griglia che cerchi quando stai progettando una sezione degli eroi a più colonne. Per questo particolare esempio, stiamo selezionando la seguente struttura di colonne:
Colore di sfondo
Apri le impostazioni della sezione e aggiungi un colore di sfondo bianco.
- Colore di sfondo: #ffffff
Dimensionamento
Ci stiamo assicurando che non ci sia spazio tra le colonne della sezione modificando le impostazioni di dimensionamento.
- Equalizza le altezze delle colonne: Sì
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100%
- Larghezza interna: 100%
- Larghezza massima interna: 100%
Spaziatura
Stiamo anche rimuovendo tutto il riempimento superiore e inferiore predefinito della riga e delle colonne.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
- Imbottitura superiore della colonna 1: 0px
- Imbottitura inferiore colonna 1: 0px
- Imbottitura superiore colonna 2: 0px
- Imbottitura inferiore colonna 2: 0px
- Imbottitura superiore colonna 3: 0px
- Imbottitura inferiore colonna 3: 0px
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga alla prima colonna della sezione utilizzando la seguente struttura di colonne:
Spaziatura
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi modulo di testo alla colonna
Aggiungi paragrafo e contenuto H1
È ora di iniziare ad aggiungere moduli! Aggiungi un nuovo modulo di testo con un paragrafo e un contenuto H1 a tua scelta.
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo.
- Carattere del testo: Open Sans
- Dimensione del testo: 0.9vw (desktop), 1.6vw (tablet), 2.2vw (telefono)
Impostazioni testo H1
Modifica anche le impostazioni del testo H1.
- Carattere dell'intestazione: Open Sans
- Peso del carattere dell'intestazione: semi grassetto
- Stile carattere intestazione: maiuscolo
- Colore del testo dell'intestazione: #000000
- Dimensione del testo dell'intestazione: 4vw
- Altezza della linea di prua: 1.1em
Spaziatura
Aggiungi anche alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 10.8vw
- Imbottitura sinistra: 4vw
- Imbottitura destra: 4vw
Aggiungi riga #2
Struttura della colonna
La seconda riga di cui abbiamo bisogno nella prima colonna della sezione utilizza la seguente struttura di colonne:
Spaziatura
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica i valori di riempimento.
- Imbottitura superiore: 3vw
- Imbottitura sinistra: 4vw
- Imbottitura destra: 4vw
Aggiungi il modulo di testo n. 1 alla colonna 1
Aggiungi contenuto H3
Una volta che hai finito con le impostazioni della riga, puoi andare avanti e aggiungere un nuovo modulo di testo alla prima colonna. Inserisci alcuni contenuti H3 a tua scelta.
Impostazioni testo H3
Passa alla scheda Design e modifica le impostazioni del testo H3 di conseguenza:
- Carattere titolo 3: Open Sans
- Intestazione 3 Peso del carattere: semi grassetto
- Intestazione 3 Stile carattere: maiuscolo
- Colore testo titolo 3: #000000
- Titolo 3: Dimensione testo: 1.5vw (desktop), 2vw (tablet), 2.5vw (telefono)
Spaziatura
Continua aggiungendo un margine superiore sul telefono.
- Margine superiore: 2vw (solo telefono)
Aggiungi modulo divisore alla colonna 1
Visibilità
Il secondo modulo di cui abbiamo bisogno nella prima colonna è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Linea
Cambia il colore della linea dopo.
- Colore linea: #000000
Spaziatura
Aggiungi alcuni valori di margine personalizzati per creare spazio attorno al divisore.
- Margine superiore: 2vw
- Margine inferiore: 2vw
- Margine destro: 2vw
Aggiungi il modulo di testo n. 2 alla colonna 1
Aggiungi contenuto
Il prossimo e ultimo modulo di cui abbiamo bisogno in questa colonna è un altro modulo di testo. Inserisci un contenuto del paragrafo a tua scelta.
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Open Sans
- Dimensione del testo: 0.6vw (desktop), 1.1vw (tablet), 2vw (telefono)
- Altezza riga di testo: 2em
Spaziatura
Aggiungi anche un po 'di imbottitura in basso e a destra.
- Margine inferiore: 5vw (solo telefono)
- Margine destro: 2vw
Clona tutti i moduli nella colonna 1 due volte e posiziona i duplicati nelle colonne rimanenti
Una volta completati tutti i moduli nella colonna 1, puoi andare avanti e clonarli due volte. Posiziona i duplicati nelle due colonne rimanenti della riga.
Modifica contenuto
Assicurati di modificare tutto il contenuto nei moduli di testo.
Aggiungi riga #3
Struttura della colonna
La riga successiva e l'ultima di cui abbiamo bisogno nella prima colonna della sezione utilizza la seguente struttura di colonne:
Spaziatura
Apri le impostazioni di riga e modifica i valori di spaziatura.
- Margine superiore: 2vw
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi modulo di testo alla colonna 1
Aggiungi contenuto
Continua aggiungendo un modulo di testo alla prima colonna con una copia di invito all'azione a tua scelta.
Aggiungi collegamento
Aggiungi anche un collegamento all'intero modulo.
Colore di sfondo
Stiamo anche cambiando il colore di sfondo del modulo di testo.
- Colore di sfondo: #000000
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Open Sans
- Peso del carattere del testo: Ultra grassetto
- Stile del carattere del testo: maiuscolo
- Allineamento del testo: Centro
- Colore del testo: #ffffff
- Dimensione del testo: 1vw (desktop), 1.7vw (tablet), 2.5vw (telefono)
Spaziatura
E crea spazio attorno al modulo utilizzando alcuni margini personalizzati e valori di riempimento.
- Margine superiore: 4vw (desktop), 11vw (tablet), 0vw (telefono)
- Imbottitura superiore: 4vw
- Imbottitura inferiore: 4vw
Clona modulo testo e posiziona duplicato nella colonna 2
Una volta completato il modulo di testo nella colonna 1, puoi clonarlo e posizionare il duplicato nella seconda colonna.
Modifica contenuto
Assicurati di modificare il contenuto e il collegamento.
Cambia colore di sfondo
Così come il colore di sfondo.
- Colore di sfondo: #e5e5e5
Cambia il colore del testo
Quindi, passa alla scheda Design e cambia il colore del testo.
- Colore del testo: #000000
Cambia spaziatura
Ultimo ma non meno importante, assicurati che le impostazioni di spaziatura contengano solo i seguenti valori:
- Imbottitura superiore: 4vw
- Imbottitura inferiore: 4vw
Aggiungi modulo immagine alla colonna della sezione 2
Carica immagine
Alla prossima colonna della sezione! Qui, il primo modulo di cui avremo bisogno è un modulo immagine. Carica un'immagine a tua scelta o usane una che trovi nella cartella zippata che è stata condivisa all'inizio di questo post.
Dimensionamento
Vai alle impostazioni di dimensionamento e assicurati che l'opzione "Forza larghezza intera" sia abilitata. Ciò assicurerà che l'immagine mantenga le sue dimensioni su tutte le dimensioni dello schermo.
- Forza intera larghezza: Sì
Filtri
Modificare le impostazioni dei filtri successivamente.
- Saturazione: 0%
- Luminosità: 50%
Aggiungi modulo di testo alla colonna della sezione 2
Aggiungi paragrafo e contenuto H3
Il secondo modulo di cui abbiamo bisogno in questa colonna è un modulo di testo. Inserisci un paragrafo e un contenuto H3 a tua scelta.
Colore di sfondo
Aggiungi un colore di sfondo al modulo.
- Colore di sfondo: #000000
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Open Sans
- Colore del testo: #ffffff
- Dimensione del testo: 0.9vw (desktop), 1.6vw (tablet), 2.2vw (telefono)
Impostazioni testo H3
Modifica anche le impostazioni del testo H3.
- Carattere titolo 3: Open Sans
- Intestazione 3 Peso del carattere: semi grassetto
- Intestazione 3 Stile carattere: maiuscolo
- Colore testo titolo 3: #ffffff
- Dimensione testo titolo 3: 1.5vw (desktop), 2.5vw (tablet), 3vw (telefono)
Spaziatura
E aggiungi alcuni valori di riempimento personalizzati nelle impostazioni di spaziatura.
- Imbottitura superiore: 3vw
- Imbottitura inferiore: 3vw
- Imbottitura sinistra: 2vw
- Imbottitura destra: 2vw
Clona entrambi i moduli e posiziona i duplicati nella colonna 3 della sezione (ordine inverso)
Una volta completati entrambi i moduli, puoi procedere e clonarli. Posiziona i duplicati nella colonna della sezione rimanente in ordine inverso.
Modifica modulo testo
Cambia colore di sfondo
Apri il modulo di testo duplicato nella colonna della terza sezione e cambia il colore di sfondo.
- Colore di sfondo: #ffffff
Cambia il colore del testo
Cambia il colore del testo in seguito.
- Colore del testo: #000000
Cambia il colore del testo H3
Insieme al colore del testo H3.
- Colore testo titolo 3: #000000
Modifica modulo immagine
Cambia immagine
Successivamente, carica un'immagine diversa nel modulo immagine duplicato.
Cambia filtri
E cambia le impostazioni dei filtri.
- Saturazione: 0%
- Luminosità: 147%
Aggiungi modulo divisore alla colonna sezione 2
Posizione
Stiamo anche aggiungendo alcuni divisori trasformati per aggiungere dettagli al nostro design. Posiziona il primo modulo divisore proprio qui:
Visibilità
Assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Linea
Aggiungi un colore di linea successivo.
- Colore linea: #ffffff
Trasforma Ruota
E trasforma il divisore orizzontale in verticale modificando il valore di rotazione della trasformazione a sinistra.
- Sinistra: 270°
Trasforma Traduci
Riposizionare il modulo divisore utilizzando l'unità di larghezza della finestra nelle impostazioni di conversione della trasformazione.
- Destra: -19vw (desktop)
- In basso: -11vw (desktop), -24vw (tablet)
Visibilità
E nascondi l'intero modulo sul telefono.
Aggiungi modulo divisore alla colonna sezione 3
Posizione
Il prossimo e ultimo modulo divisore deve essere aggiunto proprio qui:
Visibilità
Assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Linea
Passa alla scheda Design e cambia il colore della linea.
- Colore linea: #000000
Trasforma Ruota
Trasforma il divisore orizzontale in uno verticale.
- Sinistra: 270°
Trasforma Traduci
E riposiziona il divisore usando le impostazioni di conversione della trasformazione.
- Destra: 2vw
- In basso: -11vw (desktop), -24vw (tablet)
Visibilità
Per assicurarci che il divisore appaia sopra il modulo immagine sotto di esso, aumenteremo l'indice Z nelle impostazioni di visibilità. Nasconderemo anche l'intero modulo sul telefono.
- Indice Z: 2
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Pensieri finali
In questo post, ti abbiamo mostrato come creare sezioni di eroi a più colonne bellissime e uniche solo con le opzioni integrate di Divi. Questa è un'ottima tecnica che può essere utilizzata per diversi tipi di siti web. Se hai domande o suggerimenti, assicurati di 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.