Come creare sezioni di eroi spettacolari con Divi

Sezioni Eroe; servono a tutti i tipi di scopi. Sono la prima cosa che i visitatori vedono quando visitano il tuo sito web, mostrano immediatamente lo stile del tuo sito web e influenzano il modo in cui i tuoi visitatori si sentono e si comportano sul tuo sito. Siamo già abituati a tutti i tipi di sezioni degli eroi là fuori, ma la maggior parte di loro include un'immagine dell'eroe, uno slogan e un invito all'azione. Ci sono anche altre possibilità, però. In questo post, ti mostreremo un altro approccio alle sezioni degli eroi e lo seguiremo con un esempio che puoi ricreare usando Divi.

Esempio

L'esempio che ti mostreremo come ricreare con Divi è simile a questo sul desktop:

E così sul cellulare:

Come far risaltare la tua sezione Eroe

Prima di mostrarti come ricreare l'esempio, diamo un'occhiata ad alcuni dei fattori che differenziano questa sezione degli eroi da altre.

1. Logo grande, descrittivo e centralizzato

La prima cosa che usiamo nel nostro esempio, per far risaltare la nostra sezione eroe, è un formato di intestazione centrato anziché quello predefinito. Insieme a ciò, utilizziamo anche un menu trasparente che aiuterà a sovrapporre le voci di menu al design della sezione degli eroi. Il collegamento tra il logo, il menu e il sito Web è più chiaro quando si utilizza uno sfondo trasparente poiché c'è una divisione in meno all'interno della sezione degli eroi.

2. Concentrati sul contenuto scritto

Un'altra cosa che puoi fare per far risaltare la tua sezione degli eroi è concentrare il contenuto scritto che hai. In questo modo, attirerai l'attenzione dei visitatori su un punto dello schermo, aumentando la possibilità che lo leggano. Se, d'altra parte, stai dividendo il contenuto scritto nell'intera sezione dell'eroe, è più probabile che le modifiche perdano una parte del messaggio che stai cercando di portare.

3. Evidenzia proposte di vendita uniche

Di solito, una sezione eroe contiene normali moduli di testo che condividono lo slogan di un prodotto o di un'azienda. Tuttavia, puoi anche utilizzare i moduli Blurb anche nella sezione degli eroi. Questi moduli Blurb sono perfetti se vuoi condividere subito le proposte di vendita uniche del tuo prodotto o servizio. Inoltre, puoi anche scegliere se includere o meno gli inviti all'azione immediatamente. Nel nostro esempio, questi inviti all'azione sono incorporati nei moduli blurb stessi.

4. Pulisci l'immagine del prodotto

Per finire e per bilanciare il contenuto scritto che hai fornito, ti consigliamo di utilizzare un'immagine del prodotto pulita come immagine di sfondo della sezione degli eroi. Vuoi che la tua immagine dell'eroe sia il più qualitativa e autoesplicativa possibile senza assumere l'intera sezione dell'eroe.

Come creare sezioni di eroi spettacolari con Divi

Iscriviti al nostro canale Youtube

Ricrea l'esempio con Divi

Ora che abbiamo superato il lato teorico, è ora di iniziare a ricrearlo.

Formato intestazione

La prima cosa che devi fare è scegliere "Centrato" come stile dell'intestazione andando sul dashboard di WordPress > Personalizza > Intestazione e navigazione > Formato intestazione > E scegli "Centrato" come stile dell'intestazione".

Impostazioni della barra dei menu principale

Quindi, torna a Intestazione e navigazione> Barra del menu principale> E apporta le seguenti modifiche:

• Altezza menu: 211px
• Altezza massima logo: 100 px
• Dimensione del testo: 16
• Spaziatura lettere: 2
• Carattere: Lato Light
• Stile carattere: maiuscolo
• Colore del testo: #FFFFFF
• Colore collegamento attivo: #FFFFFF
• Colore di sfondo: rgba (255,255,255,0)
• Colore di sfondo del menu a discesa: rgba (255,255,255,0)

Aggiungi nuova sezione

Una volta fatto, aggiungi una nuova pagina, abilita Divi Builder, abilita Visual Builder e aggiungi una nuova sezione standard.

Sfondo sfumato

Usa il seguente sfondo sfumato per questa sezione:

• Primo colore: #e2e2e2
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 40%
• Posizione finale: 40%

Immagine di sfondo

Quindi, carica l'immagine di sfondo e scegli "Moltiplica" come Miscela immagine di sfondo.

Aggiungi riga a due colonne

Colore di sfondo

Aggiungi una riga a due colonne alla sezione che hai appena creato e usa "# b7afa1" come colore di sfondo.

Sfondo sfumato colonna 1

Scorri verso il basso e utilizza il seguente sfondo sfumato per la prima colonna:

• Primo colore: rgba (255,255,255,0.43)
• Secondo colore: rgba (255,255,255,0)
• Colonna 1 Tipo di gradiente: radiale
• Colonna 1 Direzione sfumatura: in alto a sinistra
• Colonna 1 Posizione iniziale: 49%
• Posizione finale della colonna 1: 49%

Sfondo sfumato colonna 2

E usa il seguente sfondo sfumato per la seconda colonna:

• Primo colore: rgba (255,255,255,0.43)
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente colonna 2: radiale
• Colonna 2 Direzione radiale: in basso a destra
• Colonna 2 Posizione iniziale: 49%
• Posizione finale della colonna 2: 49%

Dimensionamento

Vai alla scheda Progettazione, abilita l'opzione "Usa larghezza grondaia personalizzata" e usa "1" per Larghezza grondaia.

Spaziatura

Apri la sottocategoria Spaziatura e utilizza il riempimento e il margine seguenti:

• Imbottitura superiore: 0px (desktop), 20px (tablet e telefono)
• Imbottitura destra: 25px
• Imbottitura inferiore: 20px
• Imbottitura sinistra: 25px
• Margine inferiore: 200 px

Primo modulo Blurb

Abilita icona

Aggiungi un modulo Blurb alla prima colonna della riga, abilita l'opzione "Usa icona" e scegli un'icona.

Impostazioni icona

Quindi, vai alle impostazioni di progettazione e apporta le seguenti modifiche alla sottocategoria Immagine e icona:

• Colore icona: #FFFFFF
• Posizionamento immagine/icona: a sinistra
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 40px

Impostazioni del testo dell'intestazione

Quindi, applica le seguenti impostazioni alla sottocategoria Testo intestazione:

• Carattere intestazione: Roboto Light
• Stile carattere: grassetto
• Dimensione carattere intestazione: 25px
• Colore del testo dell'intestazione: #FFFFFF
• Altezza della riga di intestazione: 1,5 em

Impostazioni del corpo del testo

La sottocategoria Corpo del testo richiederà le seguenti modifiche:

• Carattere del corpo: Lato Light
• Dimensione carattere corpo: 13px
• Colore del corpo del testo: #FFFFFF

Dimensionamento

Quindi, usa "300 px" come Larghezza del contenuto.

Spaziatura

Infine, usa il seguente margine e padding per il modulo Blurb:

• Margine superiore: -50 px (desktop), 0 px (tablet e telefono)
• Imbottitura superiore: 100 px
• Imbottitura destra: 10px
• Imbottitura inferiore: 30px
• Imbottitura sinistra: 10px

Clona modulo Blurb e posiziona nella seconda colonna

Continua clonando il modulo Blurb precedentemente creato e posizionandolo anche nell'altra colonna.

Cambia colore di sfondo

La prima cosa che dovrai cambiare in questo modulo Blurb clonato è il colore di sfondo. Cambialo in 'rgba(89,60,31,0.5)'.

Cambia icona

La prossima e ultima cosa che dovrai cambiare è l'icona all'interno della scheda contenuto.

Extra: aggiungi la nuova opzione Box Shadow di Divi alla riga

Con il recente aggiornamento, ora puoi anche aggiungere ombre box a righe, moduli e sezioni. Per questo esempio, aggiungeremo un'ombra di riquadro alla riga. Ciò contribuirà a creare un po' di profondità ed enfatizzare il contenuto scritto nella nostra sezione degli eroi.

• Posizione orizzontale dell'ombra del riquadro: -3px
• Posizione verticale dell'ombra del riquadro: 31px
• Intensità della sfocatura dell'ombra della scatola: 79 px
• Forza di diffusione dell'ombra della scatola: -4px
• Colore ombra: #424242
• Posizione ombra scatola: Ombra esterna

Risultato

Prendiamo un altro rapido risultato al risultato che dovresti essere in grado di ottenere sul desktop dopo aver seguito questo post:

E sul cellulare:

Pensieri finali

In questo post, ti abbiamo mostrato un approccio diverso alle sezioni degli eroi. Ti abbiamo fornito alcuni suggerimenti e li abbiamo elaborati mostrandoti come ricreare un esempio che abbiamo realizzato in anticipo con 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!

Immagine in evidenza di Ellagrin / shutterstock.com