Vuoi visualizzare a schermo intero il modulo Divi Fullwidth Header?
Le intestazioni a schermo intero occupano l'intero schermo, indipendentemente dalle dimensioni dello schermo visitatore. Questo è ottimo per attirare l’attenzione degli utenti. Fortunatamente, è facile creare un'intestazione a schermo intero con il modulo Intestazione a larghezza intera di Divi.
In questo articolo, ti mostreremo come creare un'intestazione a larghezza intera, personalizzarla e visualizzarla a schermo intero. Puoi utilizzare questo approccio per creare qualsiasi sezione dell'eroe a schermo intero per le tue pagine.
Cominciamo.
Panoramica
Vediamo un'anteprima di ciò che progetteremo in questo tutorial.
ufficio
tavoletta di cioccolato Tablette
Telefono
Come rendere la tua intestazione a larghezza intera Divi un'intestazione a schermo intero
Inizia aggiungendo una sezione a larghezza intera alla pagina su cui stai lavorando.
Quindi aggiungere un Modulo di intestazione a larghezza intera alla sezione a tutta larghezza.
Si aprono le impostazioni del modulo. Seleziona scheda Design. Attiva l'opzione chiamata Crea a schermo intero
Ora abbiamo un'intestazione a schermo intero. E 'così semplice.
Abilita l'icona di scorrimento
Possiamo anche aggiungere un pulsante che dice all'utente di scorrere verso il basso. Dobbiamo però abilitarlo. Questo pulsante è sempre visibile nell'opzione a schermo intero. L'opzione dell'intestazione a schermo intero corrisponde sempre all'altezza dello schermo del file visitatore.
- Mostra il pulsante di scorrimento verso il basso: SÌ
Esempio di intestazione a schermo intero a larghezza intera Divi
Parametri del modulo di intestazione a larghezza intera
Di seguito sono riportati i passaggi per ciascuna sezione delle impostazioni del modulo Fullwidth Header.
Leggi anche: Divi: come combinare maschere di sfondo e separatori
Testo
Tutti per prima cosa, aggiungi il testo che sarà visibile nell'intestazione a larghezza intera. Ciò include il titolo, il sottotitolo, contenuto e il testo del pulsante.
- Titolo: Creare il tuo blog con Divi
- Sottotitolo: Blogpascher
- Burron #1: Riepilogo
- Pulsante n. 2: Programma
- Corpo: (predefinito)
Immagini
con bagno, aggiungi immagine. Viene visualizzato sul lato destro dell'intestazione a larghezza intera, spostando il testo a sinistra.
- Immagine di intestazione: a tua scelta
sfondo
Scorri fino a sfondo e imposta il colore su #f6f5ee.
- Colore di sfondo: #f6f5ee
Fornitura
Quindi, vai alla scheda Progettazione.
- Rendi schermo intero: SÌ
Scorri l'icona verso il basso
- Mostra il pulsante di scorrimento verso il basso: SÌ
- Scorri verso il basso Colore icona: #000000 (Desktop e Tablet), #ffffff (Telefono)
- Scorri verso il basso Dimensione icona: 70px (desktop), 60px (tablet), 50px (telefono)
Titolo del testo
Successivamente regoleremo il testo del titolo.
- Livello di intestazione: H1
- Fonte: Inter
- Peso del carattere: grassetto
- Allineamento del testo: centro
- Colore del testo: #000000
- Dimensione del testo del titolo: 75px (desktop), 40px (tablet), 24px (telefono)
- Altezza della riga del titolo: 1.2 em
Testo descrittivo
Quindi scorri verso il basso fino a Corpo del testo.
- Carattere: Open Sans
- Allineamento: a sinistra
- Colore: #000000
- Dimensione testo: 16px (desktop), 15px (tablet), 14px (telefono)
- Altezza della linea: 1.8 em
sottotitolo
Quindi scorri verso il basso fino a Testo dei sottotitoli.
- Fonte: Inter
- Peso del carattere: grassetto
- Stile: TT
- Allineamento: centro
- Colore: #ff5a17
- Dimensioni: 14px
- Spaziatura lettere: 1px
- Altezza della linea: 1.8 em
Pulsante n. 1
Quindi scorri verso il basso fino a Pulsante uno.
- Usa stili personalizzati per pulsante: SÌ
- Dimensione testo: 20px (desktop), 18px (tablet), 16px (telefono)
- Colore del testo: #000000
- Colore di sfondo: #ffffff
- Larghezza bordo: 0px
- Raggio di confine: 0px
- Fonte: Inter
- Peso del carattere: grassetto
- Icona: a tua scelta
- Colore icona: #000000
- Posizionamento: giusto
- Mostra solo l'icona al passaggio del mouse per il pulsante uno: NO
Infine, scorri verso il basso fino alle opzioni Imbottitura pulsante uno.
- Imbottitura:
- Desktop: 20px (superiore e inferiore), 40px (sinistra e destra)
- Tablet: 16px (superiore e inferiore), 40px (sinistra e destra)
- Telefono: 12px (superiore e inferiore), 40px (sinistra e destra)
Pulsante n. 2
Infine, scorri verso il basso fino a Pulsante due.
- Usa stili personalizzati per il pulsante due: Sì
- Dimensione del testo: 20px (desktop), 18px (tablet), 16px (telefono)
- Colore del testo: #ffffff
- Colore di sfondo: #ff5a17
- Larghezza bordo: 0 px
- Raggio di confine: 0px
- Fonte: Inter
- Peso del carattere: grassetto
Scegli la tua icona preferita.
- Icona: a tua scelta
- Colore icona: #000000
- Posizionamento: a sinistra
- Mostra solo l'icona al passaggio del mouse per il pulsante due: NO
Infine, scorri verso il basso fino alle opzioni Pulsante due imbottitura.
- Imbottitura:
- Desktop: 20px (superiore e inferiore), 40px (sinistra e destra)
- Tablet: 16px (superiore e inferiore), 40px (sinistra e destra)
- Telefono: 12px (superiore e inferiore), 40px (sinistra e destra)
Risultati finali
Ecco come appare la nostra intestazione a larghezza intera su desktop, tablet e telefoni.
Puoi anche consultare: Divi: come utilizzare gli effetti ombra e al passaggio del mouse per creare contenuti interattivi
ufficio
tavoletta di cioccolato Tablette
Telefono
Scarica DIVI ora!!!
Conclusione
Ecco il nostro sguardo su come creare un'intestazione a larghezza intera con il modulo intestazione Divi a larghezza intera.
Il processo è semplice e sembra fantastico su qualsiasi dispositivo. Aggiunta del pulsante Scorri in basso è un ottimo visual che dice agli utenti che possono scorrere.
La progettazione di un'intestazione a schermo intero è simile alla progettazione di una sezione Eroe. Seguire alcune semplici linee guida può aiutarti a creare incredibili intestazioni a schermo intero con il modulo Fullwidth Header di Divi.
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.
...
