Come rendere a schermo intero il tuo modulo di intestazione Divi a larghezza intera

Le intestazioni a schermo intero occupano l'intero schermo, indipendentemente dalle dimensioni dello schermo del visitatore. Questo è ottimo per attirare l'attenzione degli utenti. È anche ottimo per indirizzarli al tuo invito all'azione. Fortunatamente, è facile creare un'intestazione a schermo intero con il modulo di intestazione a larghezza intera di Divi. In questo post, ti mostreremo come creare un'intestazione a larghezza intera, trasformarla a schermo intero e modellarla. Puoi utilizzare questo approccio per creare qualsiasi sezione dell'eroe a schermo intero per le tue pagine!

Iniziamo.

Anteprima dell'intestazione a schermo intero

Vediamo un'anteprima di ciò che costruiremo in questo tutorial.

Desktop

Tavoletta

Telefono

Perché creare un'intestazione a schermo intero con il modulo di intestazione a larghezza intera di Divi?

Prima di discutere come creare un'intestazione a schermo intero, parliamo del motivo per cui gli utenti Divi potrebbero volerne uno.

Un'intestazione a schermo intero presenta elementi specifici in una sezione contenuta. Questa sezione presenta questi elementi in un layout pulito che attira l'attenzione ed esegue diverse attività.

In primo luogo, questo può essere utilizzato per visualizzare un invito all'azione che può guidare i tuoi visitatori nella tua canalizzazione di vendita. È un ottimo posto per menzionare un prodotto o servizio specifico.

In secondo luogo, può presentare all'utente un design interessante che lo mantiene sul sito web. I siti web hanno solo pochi secondi per catturare l'attenzione dei visitatori.

Ci sono alcune cose da tenere a mente quando crei un'intestazione a schermo intero:

• Segui le pratiche di progettazione comuni per colori e caratteri. Assicurati che siano leggibili e adatti all'argomento del tuo sito web.
• Mantieni il design semplice e pulito. Non utilizzare troppe immagini, collegamenti o pulsanti. Concentrati su alcune cose. Meno è di più.
• Assicurati che l'intestazione a schermo intero sia reattiva. Un'intestazione a schermo intero deve avere un bell'aspetto e funzionare correttamente su tutte le dimensioni dello schermo.

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, aggiungi un modulo di intestazione a larghezza intera alla sezione a larghezza intera.

Si apriranno le impostazioni del modulo. Seleziona la scheda Design. Abilita l'opzione denominata Crea schermo intero .

Ora abbiamo un'intestazione a schermo intero. È così semplice.

Abilita l'icona di scorrimento dell'intestazione a schermo intero verso il basso

Possiamo anche aggiungere un pulsante che indica all'utente di scorrere verso il basso. Tuttavia, dobbiamo abilitarlo. Questo pulsante è sempre visualizzato nell'opzione a schermo intero. L'opzione dell'intestazione a schermo intero corrisponde sempre all'altezza dello schermo del visitatore.

Nelle impostazioni del modulo, vedremo una sezione chiamata Icona di scorrimento verso il basso sotto le opzioni di layout. Fare clic sul pulsante per abilitare Mostra pulsante Scorri verso il basso .

Esempio di intestazione a schermo intero con intestazione a larghezza intera Divi

Ora che abbiamo discusso del motivo per cui vorremmo creare a schermo intero un'intestazione a larghezza intera e vedere come eseguire l'attività, diamo un'occhiata a un esempio. Creerò un'intestazione a larghezza intera usando la sezione eroe di un layout Divi.

Per questo esempio, sto utilizzando la sezione eroe dalla home page del pacchetto di layout Studio fotografico gratuito disponibile all'interno di Divi. Personalizzerò questa sezione dell'eroe usando i caratteri e i colori del layout per creare un'intestazione unica a tutta larghezza.

Impostazioni del modulo di intestazione a schermo intero

Di seguito sono riportati i passaggi per ciascuna sezione delle impostazioni nel modulo di intestazione a schermo intero.

Testo

Innanzitutto, aggiungi il testo che sarà visibile nell'intestazione a larghezza intera. Ciò include il titolo, il sottotitolo, il contenuto (per questo userò il testo fittizio integrato di Divi) e il testo del pulsante.

• Titolo: Studio fotografico Divi
• Sottotitolo: Fotografia
• Pulsante 1: sintesi del progetto
• Pulsante 2: Pianificazione del progetto
• Corpo: contenuto

immagini

Quindi, aggiungi l'immagine . Viene visualizzato sul lato destro dell'intestazione a larghezza intera, spostando il testo a sinistra.

• Immagine di intestazione: a tua scelta

Sfondo

Scorri verso il basso fino a Sfondo e imposta il Colore su # f6f5ee.

• Colore: #f6f5ee

Disposizione

Quindi, vai alla scheda Design. Abilita Crea schermo intero .

• Rendi schermo intero: Sì

Icona Scorri verso il basso

Quindi, abilita l' icona Scorri verso il basso . Cambia il colore in nero per desktop e tablet e bianco per telefoni. Con l'immagine che ho selezionato, l'icona apparirà sull'immagine in basso per i telefoni e questo gli permette di essere visibile con i colori dell'immagine. Modifica la dimensione dell'icona a 70 px per i desktop, 60 px per i tablet e 50 px per i telefoni.

• Mostra pulsante Scorri verso il basso: Sì
• Colore icona: #000000 Desktop e Tablet, #ffffff Telefono
• Dimensioni: desktop 70px, tablet 60px, telefono 50px

Testo del titolo

Successivamente, regoleremo il testo del titolo . Imposta il testo su H1 e scegli Inter per il Font. Imposta il Peso in grassetto, l'Allineamento al centro e il Colore al nero.

• Intestazione: H1
• Fonte: Inter
• Peso: grassetto
• Allineamento: centro
• Colore: #000000

Utilizzeremo tre dimensioni per la dimensione del carattere : 75px per desktop, 40ps per tablet e 24px per telefoni. Cambia l'altezza della linea a 1,2 em.

• Dimensioni: desktop 75px, tablet 40px, telefono 24px
• Altezza della linea: 1,2 em

Corpo del testo

Quindi, scorri verso il basso fino a Corpo del testo . Scegli Open Sans per il carattere. Imposta l'allineamento a sinistra e il colore su nero.

• Carattere: Open Sans
• Allineamento: a sinistra
• Colore: #000000

Imposta la dimensione del carattere su 16px per desktop, 15px per tablet e 14px per telefoni. Cambia l'altezza della linea a 1,8 em.

• Dimensioni: desktop 16px, tablet 15px, telefono 14px
• Altezza della linea: 1,8 em

Testo dei sottotitoli

Quindi, scorri verso il basso fino a Testo dei sottotitoli . Cambia il carattere in Inter. Imposta il Peso su grassetto, lo Stile su TT, l'Allineamento al centro e il Colore su # ff5a17.

• Fonte: Inter
• Peso: grassetto
• Stile: TT
• Allineamento: centro
• Colore: #ff5a17

Cambia la dimensione a 14px per tutte e tre le dimensioni dello schermo. Cambia la spaziatura delle lettere a 1px e l'altezza della linea a 1,4 em.

• Dimensioni: 14px
• Spaziatura lettere 1px
• Altezza della linea: 1,8 em

Pulsante Uno

Quindi, scorri verso il basso fino a Button One e seleziona Usa stili personalizzati per Button . Cambia il Colore del testo in nero.

• Usa stili personalizzati per pulsante: Sì
• Dimensioni: desktop 20px, tablet 18px, telefono 16px
• Colore del testo: #000000

Cambia il Colore di sfondo in bianco e imposta Larghezza bordo e Raggio su 0px.

• Colore di sfondo: #ffffff
• Pulsante Un bordo Larghezza: 0px
• Pulsante un raggio del bordo: 0px

Cambia il Font in Inter e il Peso in Grassetto.

• Fonte: Inter
• Peso: grassetto

Quindi, seleziona l'icona preferita, cambia il Colore in nero, imposta la posizione del pulsante a sinistra e disabilita Mostra solo icona al passaggio del mouse per il pulsante uno.

• Icona: a tua scelta
• Colore icona: #000000
• Posizionamento dell'icona del pulsante uno: a sinistra
• Mostra icona solo al passaggio del mouse per il pulsante uno: No

Infine, scorri verso il basso fino alle opzioni di riempimento di Button One. Useremo Padding diverso per ogni dimensione dello schermo. Per i desktop, usa 20px per Alto e Basso e 40px per Sinistra e Destra. Per i tablet, cambia il riempimento superiore e inferiore su 16px. Sui telefoni, cambia il riempimento superiore e inferiore su 12px. Lascia lo stesso riempimento sinistro e destro per tutti e tre.

• Desktop Padding: 20px in alto e in basso, 40px a sinistra e a destra
• Imbottitura tablet: 16px in alto e in basso, 40px a sinistra e a destra
• Imbottitura del telefono: 12px in alto e in basso, 40px a sinistra e a destra

Pulsante due

Infine, scorri verso il basso fino al pulsante due . Seleziona Usa stili personalizzati per il pulsante . Imposta la dimensione del carattere su 20px per desktop, 19ps per tablet e 16px per telefoni. Cambia il Colore del testo in bianco.

• Usa stili personalizzati per pulsante: Sì
• Dimensioni: desktop 20px, tablet 18px, telefono 16px
• Colore del testo: #ffffff

Cambia il Colore di sfondo in #ff5a17. Imposta la larghezza del bordo e il raggio su 0px.

• Colore di sfondo: #ff5a17
• Pulsante Due Larghezza bordo: 0px
• Pulsante Due Raggio Bordo: 0px

Quindi, cambia il Font in Inter e il Peso in Grassetto.

• Fonte: Inter
• Peso: grassetto

Scegli la tua icona preferita. Cambia il colore in nero, imposta la posizione del pulsante a sinistra e disabilita Mostra icona solo al passaggio del mouse per il pulsante due.

• Icona: a tua scelta
• Colore icona: #000000
• Posizionamento dell'icona del pulsante due: sinistra
• Mostra icona solo al passaggio del mouse per il pulsante due: No

Infine, scorri verso il basso fino alle opzioni di riempimento del pulsante due. Per i desktop, usa 20px per Alto e Basso e 40px per Sinistra e Destra. Sui tablet, cambia il riempimento superiore e inferiore su 16px. Per i telefoni, cambia il riempimento superiore e inferiore su 12px. Chiudi il modulo e salva il tuo lavoro.

• Desktop Padding: 20px in alto e in basso, 40px a sinistra e a destra
• Imbottitura tablet: 16px in alto e in basso, 40px a sinistra e a destra
• Imbottitura del telefono: 12px in alto e in basso, 40px a sinistra e a destra

Risultati dell'intestazione a schermo intero

Ecco come appare la nostra intestazione a larghezza intera su desktop, tablet e telefoni.

Desktop

Tavoletta

Telefono

Conclusioni sulla creazione di un'intestazione a schermo intero con il modulo di intestazione a larghezza intera di Divi

Questo è il nostro sguardo su come creare un'intestazione a schermo intero con il modulo intestazione Divi Fullwidth. Il processo è semplice e sembra fantastico su qualsiasi dispositivo. L'aggiunta del pulsante Scorri verso il basso è un'eccellente visuale che indica agli utenti che possono scorrere. La progettazione di un'intestazione a schermo intero è simile alla progettazione di una sezione eroi. Seguire alcune semplici linee guida può aiutarti a creare incredibili intestazioni a schermo intero con il modulo di intestazione a schermo intero di Divi.

Vogliamo sentire da voi. Hai reso il tuo Divi Fullwidth Header a schermo intero? Fatecelo sapere nei commenti.