Come creare una bellissima sezione Hero per il tuo sito Web personale con Divi

Creare un sito web personale è sia divertente che stimolante. Vuoi che il tuo sito web appaia abbastanza coinvolgente e personale da raccontare la tua storia. E allo stesso tempo, vuoi avere un sito web bello e autentico che mostri che sai cosa stai facendo.

Per aiutarti nel processo creativo di creazione di un sito web così personale, abbiamo creato una bellissima sezione dedicata agli eroi che farà sicuramente risaltare il tuo sito web. In questo post, ti mostreremo passo dopo passo come creare quel risultato utilizzando nient'altro che le impostazioni integrate di Divi per ciascuno dei passaggi. Prima di immergerci nel tutorial, diamo un'occhiata al risultato.

Risultato sul desktop

Il risultato sul desktop è simile a questo:

Risultato su cellulare

E i visitatori che visitano il sito Web su dispositivi mobili vedranno il seguente risultato:

Come creare una bellissima sezione Hero per il tuo sito Web personale con Divi

Iscriviti al nostro canale Youtube

Crea sezione

Inizia creando una nuova pagina sul tuo sito Web WordPress, abilitando Divi Builder, passando a Visual Builder e aggiungendo una nuova sezione.

Sfondo sfumato

L'unica cosa che dovrai cambiare in questa sezione è lo sfondo. Questo sfondo verrà applicato a tutte le righe che aggiungeremo nei prossimi passaggi di questo post. Apri la sottocategoria Sfondo e aggiungi il seguente sfondo sfumato:

• Primo colore: #c2c6f3
• Secondo colore: #cea5b9
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 45%
• Posizione finale: 45%

Aggiungi la prima riga

Quindi, vai avanti e aggiungi la prima riga alla sezione. Questa riga includerà solo il modulo di testo che puoi vedere nella parte superiore del layout.

Struttura della colonna

Quindi, scegli una struttura di colonne con una colonna.

Dimensionamento

Passa alla scheda Progettazione delle impostazioni di riga e utilizza le seguenti impostazioni per la sottocategoria Dimensionamento:

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Modulo di testo

Come accennato in precedenza, questa riga avrà solo bisogno di un modulo di testo.

Impostazioni testo

Dopo aver inserito il testo che desideri visualizzare nella scheda Contenuto, vai alla scheda Design e applica le seguenti impostazioni alla sottocategoria Testo:

• Carattere del testo: Arizona
• Peso del carattere del testo: normale
• Dimensioni del testo: 150 (desktop), 80 (tablet), 70 (telefono)
• Colore del testo: rgba (255,255,255,0.39)
• Orientamento del testo: al centro

Aggiungi seconda riga

Una volta completata la prima riga, vai avanti e aggiungi una seconda riga alla stessa sezione.

Struttura della colonna

Come la riga precedente, anche questa riga avrà una sola colonna.

Immagine di sfondo

Apri le impostazioni della riga e aggiungi l'immagine personale che desideri utilizzare come immagine di sfondo per la prima colonna. Assicurati che anche la Posizione dell'immagine sia impostata su "Centro".

Dimensionamento

Quindi, apri la sottocategoria Ridimensionamento e apporta le seguenti modifiche:

• Usa larghezza personalizzata: Sì
• Larghezza personalizzata: 557 px

Spaziatura

Quindi, usa "0px" per il riempimento superiore, inferiore, destro e sinistro della riga.

Scatola ombra

Infine, applica la seguente Box Shadow:

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 2px
• Intensità sfocatura ombra scatola: 53 px
• Forza di diffusione dell'ombra della scatola: 10 px
• Colore ombra: rgba(0,0,0,0.3)
• Posizione dell'ombra: ombra esterna

Modulo di testo

Una volta completate le impostazioni della riga, vai avanti e aggiungi un modulo di testo alla colonna.

Colore di sfondo

Prima di tutto, questo modulo di testo avrà bisogno di un colore di sfondo con il colore 'rgba(0,0,0,0.66)'.

Impostazioni testo

Quindi, passa alla scheda Progettazione e applica le seguenti modifiche alla sottocategoria Testo:

• Carattere del testo: Andika
• Peso del carattere del testo: grassetto
• Stile del carattere del testo: maiuscolo
• Dimensione del testo: 78 px (desktop), 70 px (tablet), 50 px (telefono)
• Colore del testo: #c2c6f3
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Frontiera

Quindi, apri la sottocategoria Border e utilizza il seguente bordo:

• Usa bordo: Sì
• Colore bordo: #c2c6f3
• Larghezza bordo: 8px
• Stile bordo: solido

Spaziatura

Andando avanti, aggiungi il seguente margine e padding:

• Margine superiore, destro, inferiore e sinistro: 50 px
• Imbottitura superiore: 200 px
• Imbottitura inferiore: 200 px

Scatola ombra

Infine, usa il seguente Box Shadow al modulo di testo:

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 0px
• Forza sfocatura ombra scatola: 0px
• Forza di diffusione dell'ombra della scatola: 50 px
• Colore ombra: rgba (206,165,185,0.41)
• Posizione ombra scatola: Ombra esterna

Aggiungi terza riga

Come accennato in precedenza, stiamo utilizzando solo una sezione per questo tutorial. Il motivo è che vogliamo che lo sfondo sfumato della sezione sia distribuito su tutti i diversi contenuti che vengono condivisi. Vai avanti e aggiungi una nuova riga.

Struttura della colonna

Seleziona due colonne per questa riga.

Dimensionamento

Quindi, abilita l'opzione "Usa larghezza personalizzata" e applica una larghezza di "663 px".

Spaziatura

Infine, aggiungi un margine superiore e inferiore di "50 px".

Primo modulo di testo

Aggiungi un primo modulo di testo alla prima colonna della riga.

Impostazioni testo

Quindi, vai alla scheda Design, usa "Andika" come carattere del testo e "Normale" come peso del carattere del testo.

Clona il modulo di testo e posizionalo nella seconda colonna

Il modulo di testo nella seconda colonna ha le stesse identiche impostazioni, quindi vai avanti, clona il modulo di testo e posizionalo nella seconda colonna.

Aggiungi la quarta riga

C'è ancora un'altra riga da aggiungere alla sezione prima che il progetto sia completato.

Struttura della colonna

Anche questa nuova riga ha due colonne.

Dimensionamento

Apri le Impostazioni riga e applica le seguenti impostazioni alla sottocategoria Ridimensionamento:

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Quindi, aggiungi un'imbottitura superiore di 20px.

Primo modulo immagine

Vai avanti e aggiungi un primo modulo immagine alla prima colonna di quest'ultima riga.

Scatola ombra

E aggiungi la seguente Box Shadow:

• Posizione orizzontale dell'ombra del riquadro: -6px
• Posizione verticale dell'ombra del riquadro: 2px
• Intensità sfocatura ombra scatola: 53 px
• Forza di diffusione dell'ombra della scatola: 10 px
• Colore ombra: rgba(0,0,0,0.3)
• Posizione ombra scatola: Ombra esterna

Clona modulo immagine e posiziona nella seconda colonna

E infine, clona questo modulo immagine e posizionalo anche nella seconda colonna per completare questa riga.

Risultato

Dopo aver eseguito tutti i passaggi che abbiamo aggiunto a questo post, dovresti essere in grado di ottenere il seguente risultato:

Sul desktop

Sul cellulare

Pensieri finali

Le possibilità che hai con Divi sono infinite. Puoi rendere il tuo sito web esattamente come lo desideri utilizzando il Visual Builder che ti mostrerà le modifiche in tempo reale. Per questo post in particolare, ti abbiamo mostrato come creare una bellissima sezione degli eroi per un sito web personale. Questo tutorial è stato realizzato utilizzando nient'altro che le opzioni integrate di Divi. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!