Come costruire una sezione eroe con il modulo di intestazione a larghezza intera di Divi

Costruire una sezione eroe è un modo eccellente per richiamare l'attenzione su contenuti importanti della tua pagina. È un contenuto di grandi dimensioni che puoi utilizzare per raccontare la tua storia, condividere informazioni sul tuo lavoro o evidenziare un prodotto o servizio. Con il modulo Intestazione a larghezza intera di Divi, puoi aggiungere un titolo, un sottotitolo, due pulsanti, il corpo del testo, un'immagine del logo e un'immagine dell'intestazione. Naturalmente, puoi anche utilizzare le opzioni di sfondo per aggiungere e combinare immagini, sfumature, colori, motivi e maschere. Puoi modificare tutte queste impostazioni all'interno delle impostazioni del modulo di intestazione a larghezza intera invece di dover alternare tra più moduli immagine, testo e pulsanti.

In questo tutorial, ti mostreremo come creare una sezione eroe accattivante e accattivante utilizzando il modulo di intestazione a larghezza intera di Divi.

Iniziamo!

Sbirciata

Ecco un'anteprima di ciò che progetteremo.

Cosa ti serve per iniziare

Prima di iniziare, assicurati di avere l'ultima versione di Divi sul tuo sito web.

Ora sei pronto per iniziare!

Come costruire una sezione eroe con il modulo di intestazione a larghezza intera di Divi

Crea una nuova pagina con un layout predefinito

Iniziamo utilizzando un layout predefinito dalla libreria Divi. Per questo progetto, utilizzeremo la pagina di destinazione del veterinario del pacchetto layout veterinario.

Aggiungi una nuova pagina al tuo sito web e assegnagli un titolo, quindi seleziona l'opzione Usa Divi Builder.

Utilizzeremo un layout predefinito dalla libreria Divi per questo esempio, quindi seleziona Sfoglia layout.

Cerca e seleziona il layout della pagina di destinazione del veterinario.

Seleziona Usa questo layout per aggiungere il layout alla tua pagina.

Ora siamo pronti per costruire il nostro design.

Aggiungi il modulo di intestazione a larghezza intera

Ricreeremo la sezione dell'eroe usando il modulo di intestazione a larghezza intera. Aggiungi una nuova sezione a larghezza intera alla pagina, sotto l'intestazione esistente.

Aggiungi un modulo di intestazione a larghezza intera alla sezione.

Quindi, elimina la sezione dell'intestazione originale.

Personalizza il modulo di intestazione a larghezza intera

Aggiungi contenuto

Apri le impostazioni del modulo di intestazione a larghezza intera e aggiungi il seguente contenuto al modulo:

• Titolo: Veterinario
• Sottotitolo: DiviVet. Al servizio dei nostri migliori amici
• Pulsante n. 1: Visualizza tutti i servizi
• Pulsante n. 2: fissa un appuntamento
• Corpo: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.

Quindi, aggiungi l'immagine di intestazione dei veterinari con gli animali.

Impostazioni sfondo sfumato

Passa alle impostazioni di sfondo. Elimina il colore di sfondo originale, quindi aggiungi una sfumatura di sfondo.

• 0%: RGB(255,170,205,0,48)
• 40%: RGB(110,66,255,0,24)
• 87%: RGB(124,239,255,0,71)
• Tipo di sfumatura: ellittica
• Posizione gradiente: destra

Quindi, seleziona la scheda Maschera di sfondo e aggiungi una maschera di sfondo allo sfondo.

• Maschera di sfondo: Blob d'angolo
• Colore maschera: #FFFFFF
• Trasformazione maschera: verticale

Personalizza gli stili di testo

Con il contenuto dell'intestazione e lo sfondo attivi, passiamo alla scheda di progettazione per personalizzare gli stili di testo. Innanzitutto, apri le impostazioni del titolo e personalizza il testo come segue:

• Carattere del titolo: Nunito
• Peso del carattere del titolo: Ultra grassetto
• Stile del carattere del titolo: TT (in maiuscolo)

Modifica il colore, le dimensioni e la spaziatura del testo del titolo.

• Colore del testo del titolo: #a9cb6b
• Dimensione del testo del titolo: 14px
• Spaziatura lettere titolo: 2px

Passa alla sezione del corpo del testo e personalizza il carattere. Usa le impostazioni reattive di Divi per aggiungere una dimensione del testo più piccola per i dispositivi mobili.

• Colore del corpo del testo: #000000
• Dimensione testo corpo: desktop: 18px
• Dimensione del corpo del testo: Mobile: 14px
• Altezza della linea del corpo: 1,8 em

Quindi, apri le impostazioni dei sottotitoli e personalizza il carattere.

• Carattere dei sottotitoli: Nunito
• Peso del carattere dei sottotitoli: grassetto
• Colore testo sottotitoli: #000000

Infine, cambia la dimensione del testo per desktop e dispositivi mobili (ancora una volta, usa le impostazioni reattive per aggiungere una dimensione del testo più piccola su dispositivi mobili) e regola l'altezza della linea.

• Dimensioni del testo dei sottotitoli: desktop: 56 px
• Dimensione testo sottotitoli-Mobile: 32px
• Altezza della linea dei sottotitoli: 1,2 em

Personalizza gli stili di Button One

Successivamente, personalizzeremo gli stili dei pulsanti. Inizia abilitando gli stili personalizzati per Button One, quindi regola le dimensioni del testo.

• Usa stili personalizzati per Button One: Sì
• Pulsante Una dimensione del testo: 14px

Aggiungi una sfumatura di sfondo al pulsante. I valori del gradiente sono i seguenti:

• 58%: #316EFF
• 100%: #1D2B60
• Direzione del gradiente: 90 gradi

Quindi, personalizza le impostazioni del bordo e le impostazioni dei caratteri.

• Pulsante Un bordo Larghezza: 0px
• Pulsante un raggio del bordo: 80px
• Pulsante Una spaziatura delle lettere: 2px
• Carattere del pulsante uno: Nunito
• Pulsante One Font Weight: Ultra grassetto
• Pulsante Uno Stile carattere: TT (in maiuscolo)

Disabilita l'icona Button One.

• Mostra icona pulsante uno: no

Quindi, personalizza le impostazioni di margine e riempimento per il design del desktop e aggiungi un'ombra del riquadro.

• Pulsante One Margin-Top-Desktop: 200px
• Pulsante Uno Margine-Inferiore-Desktop: 0px
• Pulsante One Padding-Top-Desktop: 16px
• Pulsante One Padding-Bottom-Desktop: 16px
• Pulsante One Padding-Sinistra-Desktop: 2em
• Pulsante One Imbottitura-Desktop-Desktop: 50em
• Ombra della casella dei pulsanti: inferiore

Utilizza le impostazioni reattive per impostare margini e valori di riempimento diversi sui dispositivi mobili.

• Pulsante One Margin-Top-Mobile: 25px
• Pulsante One Padding-Right-Mobile: 10em

Ci sono alcuni problemi di avvolgimento del testo con il nostro pulsante che risolveremo con alcuni CSS personalizzati in seguito.

Personalizza pulsante due stili

Il pulsante due ha colori e spaziatura diversi, ma è abbastanza simile al pulsante uno. Per salvare alcuni passaggi di progettazione ripetitivi, copiamo gli stili del modulo del pulsante uno nel modulo del pulsante due, quindi personalizziamo ciò che dobbiamo modificare.

Innanzitutto, fai clic con il pulsante destro del mouse sulla sezione del pulsante uno e copia gli stili del pulsante uno.

Quindi fare clic con il pulsante destro del mouse sulla sezione del pulsante due e incollare gli stili del pulsante uno.

Ora possiamo personalizzare il pulsante due stili. Cambia il colore del testo.

• Colore del testo del pulsante due: #121F60

Personalizza il gradiente di sfondo per il pulsante due.

• 30%: RGB(0,229,198,0)
• 100%: #00e5c6

Usa le impostazioni reattive per regolare la sfumatura dello sfondo per i dispositivi mobili.

• 0%: RGB(0,229,198,0)
• 100%: #00e5c6

Quindi, regola il margine e il riempimento per il design del desktop.

• Pulsante Due Margine-Top-Desktop: 0px
• Pulsante Due Margine-Inferiore-Desktop: 0px
• Pulsante Due Margine-Sinistra-Desktop: 30%
• Pulsante Due Padding-Top-Desktop: 16px
• Pulsante due imbottitura-fondo-desktop: 16px
• Pulsante due imbottitura-sinistra-desktop: 48em
• Pulsante due imbottitura-destro-desktop: 2em

Utilizza le impostazioni reattive per impostare margini e valori di riempimento diversi per il design mobile.

• Pulsante due margine sinistro-cellulare: 5%
• Pulsante due imbottitura-sinistra-cellulare: 35%
• Pulsante due imbottitura-destro-cellulare: 5%

CSS personalizzato

Infine, il grosso del lavoro di progettazione è terminato. Ora dobbiamo aggiungere alcuni CSS personalizzati per completare il design. Passa alla scheda Avanzate e apri la sezione CSS personalizzato.

Innanzitutto, iniziamo con il CSS dell'immagine di intestazione. Questo CSS consente all'immagine dell'intestazione di essere visualizzata sopra il pulsante.

z-index: 1;
position:relative;

Successivamente, CSS personalizzato per il titolo. Imposteremo valori diversi per le visualizzazioni desktop e mobile utilizzando le impostazioni reattive.

Per desktop:

padding-top:50px;
padding-bottom:30px;

Per cellulare:

padding-top:5px;
padding-bottom:10px;

Infine, aggiungi il seguente CSS a Button One e Button Two.

white-space: nowrap;

Risultato finale

Ecco il design finale per la nostra sezione dell'eroe dell'intestazione a larghezza intera.

Pensieri finali

Il modulo di intestazione a larghezza intera ti consente di creare facilmente una bellissima sezione eroe per pubblicizzare i tuoi servizi e dire ai tuoi visitatori di cosa tratta il tuo sito web. Le impostazioni integrate semplificano la personalizzazione del design di ogni aspetto dell'intestazione e tutto è in un unico posto, quindi non è necessario passare da un modulo all'altro per costruire la tua sezione eroe. Per design di sezioni di eroi più unici, dai un'occhiata a questo tutorial: Come utilizzare le maschere e i modelli di sfondo di Divi per una sezione di eroi. Usi il modulo di intestazione a larghezza intera per costruire le sezioni dei tuoi eroi? Ci piacerebbe sentirti nei commenti!