Come modellare un'immagine nel modulo di intestazione a larghezza intera Divi

Il modulo di intestazione a larghezza intera di Divi include molte opzioni di stile dell'immagine, consentendo agli utenti Divi di creare bellissime immagini e layout per le loro intestazioni. L'immagine dell'intestazione può essere modificata in molti modi per creare layout e design interessanti. Diventa ancora più interessante quando è accoppiato con i vari design di testo e pulsanti. In questo post, vedremo come modellare un'immagine nel tuo modulo di intestazione Divi a larghezza intera e condivideremo tre esempi per aiutarti a progettare il tuo modulo di intestazione a larghezza intera.

Iniziamo!

Anteprima

Esempio di immagine di intestazione a larghezza intera del desktop uno

Esempio di immagine di intestazione a larghezza intera del telefono uno

Esempio due di immagine di intestazione a larghezza intera del desktop

Esempio di immagine di intestazione a larghezza intera del telefono due

Esempio di immagine di intestazione a larghezza intera del desktop tre

Esempio di immagine di intestazione a larghezza intera del telefono tre

Aggiungi un'immagine alla tua intestazione a larghezza intera

Ecco l'intestazione a larghezza intera che useremo in questo esempio. Per prima cosa, vediamo come costruirlo. Utilizziamo le immagini e le code di progettazione del pacchetto di layout Flower Farm gratuito disponibile in Divi.

Per aggiungere il modulo Divi Fullwidth Header alla tua pagina, avrai bisogno di un nuovo contenitore di sezione con una riga di una colonna. Una volta che lo hai, aggiungi il modulo di intestazione a larghezza intera alla colonna della tua riga.

Testo intestazione a larghezza intera

Quindi, aggiungi il tuo titolo, sottotitolo, testo del pulsante uno, testo del pulsante due e contenuto.

• Titolo: Benvenuti alla Divi Flower Farm
• Sottotitolo: Chi siamo
• Pulsante uno: maggiori informazioni
• Pulsante due: negozio
• Contenuto: il tuo testo

Immagine di intestazione

Scorri verso il basso fino a Immagini , scegli Immagine intestazione e aggiungi la tua immagine.

Sfondo

Quindi, scorri verso il basso fino a Sfondo , seleziona la scheda Sfumatura e aggiungi quattro interruzioni sfumatura:

• Gradiente Stop 1: 0%, #000000
• Fermata 2: 25%, rgba(0,0,0,0.8)
• Gradiente 3: 75%, rgba(0,0,0,0,8)
• Gradiente 4: 100%, #000000

Quindi, abilita Posiziona sfumatura sopra l'immagine di sfondo . Lascia le altre impostazioni ai valori predefiniti.

• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Seleziona la scheda Immagine di sfondo e aggiungi la tua immagine. Successivamente, modelleremo il modulo di intestazione a larghezza intera.

Testo del titolo

Seleziona la scheda Design e scorri verso il basso fino a Testo del titolo . Seleziona H1 e scegli Italiana per il Font. Imposta l'allineamento a sinistra e scegli il bianco per il colore.

• Livello di intestazione: H1
• Carattere: italiana
• Allineamento: a sinistra
• Colore: #ffffff

Imposta la dimensione del desktop su 80 px, la dimensione del tablet su 40 px e la dimensione del telefono su 32 px.

• Dimensioni: desktop 80px, tablet 40px, telefono 32px

Corpo del testo

Quindi, scorri verso il basso fino a Corpo del testo . Imposta l'allineamento a sinistra, scegli Roboto per il carattere e cambia il colore in bianco.

• Allineamento: a sinistra
• Carattere: Roboto
• Colore: #ffffff

Cambia la dimensione del desktop a 18px, la dimensione del tablet a 16px e la dimensione del telefono a 14px.

• Dimensione testo: 18px desktop, 16px tablet, 14px telefono

Testo dei sottotitoli

Quindi, scorri verso il basso fino a Testo dei sottotitoli . Scegli Roboto per il carattere e imposta il peso su pesante. Scegli TT per lo stile, imposta l'allineamento a sinistra e cambia il colore in # b5a68f.

• Carattere: Roboto
• Peso: pesante
• Stile: TT
• Allineamento: a sinistra
• Colore: #b5a68f

Quindi, cambia la spaziatura a 0,2 e l'altezza della linea a 1,7 em. Lascia la dimensione del carattere al suo valore predefinito, 18px.

• Spaziatura: 0,2 em
• Altezza della linea: 1,7 em

Pulsante Uno

Scorri verso il basso fino a Button One e seleziona Usa stili personalizzati per Button One . Imposta la dimensione del carattere su 14px, il colore del testo su # aa6a3c e il colore di sfondo su # f5f3ef.

• Usa stili personalizzati per Button One: Sì
• Dimensione carattere: 14px
• Colore del testo: #aa6a3c
• Colore di sfondo: #f5f3ef

Imposta il Colore del bordo su # aa6a3c, la spaziatura delle lettere su 0,15 em, il carattere su Roboto, il peso su grassetto e lo stile su TT.

• Colore bordo: #aa6a3c
• Spaziatura lettere: 0,15 em
• Carattere: Roboto
• Peso: grassetto
• Stile: TT

Scorri verso il basso fino a Imbottitura Button One . Cambia il riempimento superiore e inferiore a 20px e il riempimento sinistro e destro a 30px.

• Imbottitura: Superiore, Inferiore 20px, Sinistra, Destra 30px

Pulsante due

Quindi, scorri verso il basso fino al pulsante due . Selezionare Usa stili personalizzati per il pulsante due . Imposta la dimensione del carattere su 14px, il colore del testo su bianco e il colore di sfondo su rgba(255,255,255,0).

• Usa stili personalizzati per il pulsante due: Sì
• Dimensione carattere: 14px
• Colore del testo: #ffffff
• Colore di sfondo: rgba(255,255,255,0)

Imposta il Colore del bordo su bianco, la spaziatura lettere su 0,15 em, il carattere su Roboto, il peso su grassetto e lo stile su TT.

• Colore bordo: #ffffff
• Spaziatura lettere: 0,15 em
• Carattere: Roboto
• Peso: grassetto
• Stile: TT

Scorri verso il basso fino al riempimento del pulsante due e imposta il riempimento superiore e inferiore su 20px e il riempimento sinistro e destro su 30px. Questo è tutto per lo stile del modulo di intestazione a larghezza intera. Ora vedremo tre modi per modellare l'immagine.

• Imbottitura: Superiore, Inferiore 20px, Sinistra, Destra 30px

Esempi di stile immagine intestazione a larghezza intera

Ecco tre esempi che utilizzano il nostro layout come punto di partenza. Apporterò alcune modifiche al layout per ciascuno degli esempi.

Esempio di immagine di intestazione a larghezza intera uno

Per il nostro primo esempio di immagine di intestazione a larghezza intera, creeremo una parte superiore arrotondata con un bordo. Vai alla scheda Design e scorri verso il basso fino a Immagine . Annulla la sincronizzazione dei valori e modifica il bordo superiore a 400 px.

• Bordo superiore destro e sinistro: 400px
• Bordo inferiore destro e sinistro: 0px

Cambia il Larghezza del bordo a 2px e il Colore del bordo in bianco.

• Larghezza: 2px
• Colore: #ffffff

Successivamente, regoleremo l' allineamento del testo e dell'immagine per regolare il loro posizionamento sullo schermo. Per questo esempio, lasceremo l'immagine e il testo nelle posizioni correnti, ma cambieremo l'allineamento verticale per il testo e i pulsanti. Selezionando Schermo intero si apre un'opzione per l'allineamento verticale del testo nelle opzioni del testo.

Per prima cosa, vai alla scheda Design. In Layout, imposta l'allineamento del testo a destra e abilita Crea schermo intero.

• Rendi schermo intero: Sì

Infine, scorri verso il basso fino a Testo . Ora vedrai un'opzione denominata Allineamento verticale del testo . Impostalo in basso. Chiudi il modulo e salva le impostazioni.

• Allineamento verticale del testo: in basso

Immagine di intestazione a larghezza intera Esempio due

Per questo esempio, utilizzeremo un testo e un'immagine del pulsante diversi. Innanzitutto, cambia il testo del pulsante One in Informazioni.

• Testo pulsante uno: informazioni

Quindi, scorri verso il basso fino a Sfondo e scegli un'immagine diversa. Questa immagine occuperà circa 1/3 della larghezza dello schermo. Sto usando la stessa immagine dello sfondo.

• Immagine di intestazione: immagine grande

Quindi, vai alla scheda Avanzate e scorri verso il basso fino al campo Immagine intestazione. Aggiungi CSS per impostare la larghezza su 150% e l'altezza su auto. Chiudi il modulo e salva le impostazioni.

CSS immagine intestazione:

max-width: 150%;
height: auto;

Ora con l'immagine e il testo del pulsante in posizione, apporteremo le nostre modifiche. Possiamo regolare l' allineamento del testo e dell'immagine per regolare il loro posizionamento sullo schermo. Per prima cosa, vai alla scheda Design . In Layout, lascia l'allineamento del testo a sinistra e abilita Crea schermo intero .

• Rendi schermo intero: Sì

Quindi, scorri fino a Testo del titolo e imposta l'Allineamento su Centra.

• Allineamento del testo del titolo: Centro

Quindi, scorri verso il basso fino a Corpo del testo . Cambia l'allineamento del testo su Centra.

• Allineamento: centro

Quindi, scorri fino a Testo dei sottotitoli e imposta l'allineamento su Centra.

• Allineamento del testo dei sottotitoli: centro

Scorri verso il basso fino a Button One Margin e modifica il margine sinistro al 29% per i desktop, al 18% per i tablet e al 19% per i telefoni.

• Margine sinistro del pulsante uno: 29% desktop, 18% tablet, 19% telefono

Scorri verso il basso fino al margine del pulsante due e modifica il margine sinistro al 30% per i tablet e al 31% per i telefoni.

• Pulsante due margine sinistro: 30% tablet, 31% telefono

Scorri verso il basso fino a Dimensionamento e imposta la Larghezza su 104% per i telefoni. Questo centra correttamente il contenuto per gli schermi stretti.

• Larghezza: 104% telefono

Esempio tre di immagine di intestazione a larghezza intera

Per prima cosa, vai alla scheda Design . In Layout , imposta l'allineamento del testo a destra. Nel mio caso, il testo è allineato a sinistra, ma il tuo potrebbe essere centrato se non hai specificato l'allineamento.

• Allineamento testo e logo: centro

Scorri verso il basso fino a Immagine . Cambia la Larghezza del bordo a 4px e il Colore del bordo a # b5a68f.

• Larghezza bordo: 4px
• Colore bordo: # b5a68f

Quindi, scorri fino a Testo del titolo e cambia l'Allineamento in Centrato.

• Allineamento del testo del titolo: centrato

Scorri fino a Corpo del testo e cambia l'Allineamento in Centrato.

• Allineamento del corpo del testo: centrato

Quindi, scorri fino a Testo dei sottotitoli e cambia l'Allineamento in Centrato.

• Allineamento del testo dei sottotitoli: centrato

Quindi, vai alla scheda Contenuto e cambia il testo del pulsante One in Informazioni solo per telefoni.

• Contenuto Button One per telefoni: informazioni

Torna alla scheda Design e aggiungi un margine destro del 5% alla scheda del telefono di Button Two.

• Margine destro: 5% telefono

Infine, scorri verso il basso fino a Ridimensionamento e imposta Larghezza contenuto su 52% per desktop e 100% per tablet e telefoni. Chiudi il modulo e salva le impostazioni.

• Larghezza del contenuto: 52% desktop, 100% tablet e telefono

Risultati

Esempio di immagine di intestazione a larghezza intera del desktop uno

Esempio di immagine di intestazione a larghezza intera del telefono uno

Esempio due di immagine di intestazione a larghezza intera del desktop

Esempio di immagine di intestazione a larghezza intera del telefono due

Esempio di immagine di intestazione a larghezza intera del desktop tre

Esempio di immagine di intestazione a larghezza intera del telefono tre

Pensieri finali

Questo è il nostro sguardo su come modellare il tuo modulo di intestazione Divi Fullwidth. L'immagine è facile da modellare e può essere posizionata in diverse posizioni all'interno del modulo. Le varie opzioni di layout del modulo ti offrono molte possibilità di design. Assicurati di testare i tuoi progetti su tutte le dimensioni dello schermo per garantire la migliore esperienza utente.

Vogliamo sentire da voi. Hai disegnato le tue immagini nel modulo di intestazione a larghezza intera di Divi? Facci sapere la tua esperienza nei commenti.