Ti piacerebbe sapere come creare una sezione Hero con il modulo Fullwidth Header di Divi?
Costruire una sezione Eroe è un ottimo modo per attirare l'attenzione su contenuto importante per la tua pagina. Questo è un contenuto 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, un testo del corpo, un'immagine del logo e un'immagine di intestazione. Naturalmente, puoi anche utilizzare le opzioni di sfondo per aggiungere e combinare immagini, sfumature, colori, motivi e maschere.
Puoi modificare tutte queste impostazioni nelle impostazioni del modulo invece di dover passare da più moduli immagine, testo e pulsante.
In questo tutorial, ti mostreremo come creare una sezione Hero attraente e accattivante usando il modulo Fullwidth Header di Divi.
Andiamo!
Panoramica
Ecco un'anteprima di ciò che andremo a progettare.
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 creare una sezione eroe con il modulo di intestazione a larghezza intera di Divi
Leggi anche: Divi: Come utilizzare il "Gradient Builder" per abbellire le tue immagini
Crea una nuova pagina con un layout predefinito
Iniziamo utilizzando un layout predefinito dalla libreria Divi. Per questo disegno useremo la homepage pacchetto di layout veterinario.
Dalla dashboard di Worpress, aggiungi una nuova pagina al tuo sito web
Dagli un titolo, quindi seleziona l'opzione Usa Divi Builder.
Utilizzeremo un layout predefinito dalla libreria Divi per questo esempio. Quindi seleziona Sfoglia i layout.
Trova e seleziona il layout Allevatore di cani.
selezionare Usa questo layout per aggiungere il layout alla tua pagina.
Ora siamo pronti per progettare.
Aggiungi il modulo Intestazione a larghezza intera
Ricreeremo la sezione dell'eroe usando il modulo Fullwidth Header. 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 Intestazione a larghezza intera
Aggiungi contenuto
Apri le impostazioni del modulo e aggiungi il file contenuto accanto al modulo:
- Titolo: Veterinario
- Sottotitolo: Divivet. Servi i nostri migliori amici
- Pulsante n. 1: 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 un'immagine di intestazione.
Impostazioni di sfondo sfumato
Vai 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.
- Sfondo maschera: macchia d'angolo
- Colore maschera: #FFFFFF
- Trasforma: verticale
Personalizza il testo
Passa alla scheda Design e modificare le impostazioni del titolo
- Carattere del titolo: Nunito
- Peso del carattere del titolo: Ultra grassetto
- Stile carattere: TT (maiuscolo)
- Colore del testo del titolo: #a9cb6b
- Dimensione del testo: 14px
- Spaziatura lettere titolo: 2px
Vai alla sezione di Corpo del testo e personalizza il carattere.
- Colore del testo: # 000000
- Dimensione del testo del corpo:
- Desktop: 18px
- Telefono: 14px
- Altezza della linea del corpo: 1.8 em
Guarda anche: Divi: Come personalizzare il carrello e le icone di ricerca del modulo "Menu a larghezza intera".
Quindi, apri le impostazioni dei sottotitoli e personalizza il carattere.
- Carattere dei sottotitoli: Nunito
- Peso del carattere dei sottotitoli: grassetto
- Colore del testo: #000000
Infine, cambia la dimensione del testo
- Dimensione del testo dei sottotitoli:
- Desktop: 56px
- Mobile: 32px
- Altezza della linea dei sottotitoli: 1.2 em
Personalizza il pulsante n. 1
Successivamente, personalizzeremo gli stili dei pulsanti. Inizia abilitando gli stili personalizzati per il pulsante uno, quindi regola le dimensioni del testo.
- Usa stili personalizzati per pulsante: 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 uno:
- Larghezza bordo: 0px
- Raggio di confine: 80px
- Spaziatura lettere: 2px
- Carattere: Nunito
- Peso del carattere: Ultra grassetto
- Stile: TT (in maiuscolo)
- 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 Uno Margine
- In alto: 200px
- In basso: 0px
- Imbottitura pulsante uno:
- In alto: 16px
- In basso: 16px
- A sinistra: 2em
- A destra: 50 em
- Box Shadow: Visualizza acquisizione
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
Personalizza il pulsante n. 2
Innanzitutto, fai clic con il pulsante destro del mouse n. 1 e fai clic Copia gli stili del pulsante uno.
Quindi, fai clic con il pulsante destro del mouse sul pulsante due e incolla gli stili dal pulsante n.
Ora possiamo personalizzare il pulsante due. 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:
- In alto: 0px
- In basso: 0px
- Sinistra: 30%
- Imbottitura a due pulsanti:
- In alto: 16px
- In basso: 16px
- A sinistra: 48em
- A destra: 2 em
Usa le impostazioni di responsifq per impostare diversi valori di margine e riempimento per il design mobile.
- Pulsante due margine sinistro-cellulare: 5%
- Imbottitura a due pulsanti:
- Mobile sinistro: 35%
- Cellulare destro: 5%
CSS personalizzato
Infine, il grosso del lavoro di progettazione è terminato. Ora dobbiamo aggiungere CSS personalizzati per completare il design. Passa alla scheda Tecnologia e apri la sezione CSS personalizzato.
Innanzitutto, iniziamo con il CSS per l'immagine di intestazione. Questo CSS consente di visualizzare l'immagine dell'intestazione sopra il pulsante.
z-index: 1;
position:relative;
Successivamente, CSS personalizzato nel titolo. Imposteremo valori diversi per le visualizzazioni desktop e mobile utilizzando le impostazioni reattive.
Per computer desktop:
padding-top:50px;
padding-bottom:30px;
Per cellulare:
padding-top:5px;
padding-bottom:10px;
Infine, aggiungi il seguente CSS al pulsante uno e al pulsante due.
white-space: nowrap;
Risultato finale
Ecco il design finale per la nostra sezione dell'eroe dell'intestazione a larghezza intera.
Leggi anche: Divi: come creare una sezione dei membri del team come un carosello
Scarica DIVI ora!!!
Conclusione
Il modulo Fullwidth Header ti permette di creare facilmente una bellissima sezione Hero per pubblicizzare i tuoi servizi e raccontare i tuoi Visitatori di cosa stai parlando? sito web.
Le impostazioni integrate semplificano la personalizzazione di ogni aspetto dell'intestazione ed è tutto in un unico posto, quindi non è necessario passare da un modulo all'altro per creare la tua sezione Eroe.
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
