5 stili di moduli di intestazione Divi creativi che puoi ottenere utilizzando le impostazioni integrate

Fuori dalla scatola, il modulo Divi Header può creare design di intestazione sorprendenti con solo poche regolazioni. Questo lo rende un modulo estremamente popolare quando si progettano intestazioni per il tuo sito Web in Divi. E con un piccolo pensiero fuori dagli schemi, puoi creare alcuni design davvero unici usando solo le impostazioni integrate (nessun CSS personalizzato). Quindi, per quelli di voi che vogliono esplorare alcuni nuovi design di intestazioni, vi mostrerò 5 stili di moduli di intestazione Divi che potrebbero ispirarvi.

Divertiti!

Anteprima dei 5 stili del modulo di intestazione Divi

Stile n. 1: il gradiente astratto

Inizia a progettare lo stile n. 1

Stile n. 2: la tripla minaccia

Inizia a progettare lo stile #2

Stile n. 3: la cornice arrotondata

Inizia a progettare lo stile n. 3

Stile n. 4: The Blended Lefty

Inizia a progettare lo stile n. 4

Stile n. 5: il tipo a grande scala

Inizia a progettare lo stile n. 5

Cosa ti serve per iniziare

Per iniziare avrai bisogno del tema Divi. Userò il Divi Builder per costruire i disegni sul front-end. Avrai anche bisogno di alcune immagini per completare il tutorial. Ricorda che puoi sempre importare le immagini di un layout predefinito. In effetti, per questo tutorial, utilizzerò le immagini del pacchetto di layout dell'impresa di pulizie, del pacchetto di layout Business Coach e del pacchetto di layout Web Freelancer.

Iniziamo!

Iscriviti al nostro canale Youtube

Stile n. 1: il Gadient astratto

Questo primo design del modulo di intestazione Divi è un design semplice e multiuso che utilizza sfondi sfumati in modo creativo.

Per iniziare, aggiungi una nuova sezione a larghezza intera con un modulo di intestazione a larghezza intera.

Aggiorna il contenuto delle impostazioni dell'intestazione con un nuovo titolo e un'immagine dell'intestazione.

Quindi aggiorna le impostazioni di progettazione come segue:

Carattere del titolo: Lato
Dimensione del testo del titolo: 6vw
Colore di sfondo del pulsante uno: # 0c71c3
Pulsante Un bordo Larghezza: 0px
Imbottitura personalizzata: 8vw in alto, 8vw in basso

Prima di aggiungere lo sfondo della nostra sezione, dobbiamo prima rendere trasparente lo sfondo del modulo di intestazione e dargli un gradiente personalizzato per creare la nostra forma circolare nell'angolo in basso a destra. Torna alla scheda dei contenuti e aggiorna lo sfondo come segue:

Colore di sfondo: rgba (255,255,255,0)
Colore sfondo sfumato sinistro: #0096eb
Colore di sfondo sfumato a destra: rgba (255,255,255,0)
Tipo di gradiente: radiale
Direzione radiale: in basso a destra
Posizione di partenza: 25%
Posizione finale: 0%

Salva le impostazioni

Quindi dobbiamo aggiungere i nostri design di sfondo alla sezione che si troverà dietro il nostro modulo di intestazione. Per fare ciò, apri le impostazioni della sezione e aggiorna quanto segue:

Colore sfondo sfumato sinistro: #0096eb
Colore sfondo sfumato destro: #007ea1
Tipo di gradiente: radiale
Direzione radiale: in alto a sinistra
Posizione di partenza: 43%
Posizione finale: 0%

Suggerimento per la progettazione: se stai cercando alcuni colori da provare per i tuoi gradienti di intestazione, ti suggerisco di estrarre i colori utilizzati nell'immagine/grafica dell'intestazione che potresti utilizzare.

Per aggiungere un altro sottile elemento di design al nostro sfondo astratto, possiamo aggiungere un divisore di sezione superiore e inferiore. Per fare ciò, vai alla scheda Progettazione e aggiungi i seguenti divisori:

Stile divisore superiore: vedi screenshot
Colore del divisore superiore: rgba (150,210,210,0.2)
Altezza divisore superiore: 8vw
Ripetizione orizzontale divisore superiore: 0,7x
Capovolgimento divisore superiore: verticale

Stile divisore inferiore: vedi screenshot
Colore divisore inferiore: rgba (150,210,210,0.2)
Altezza divisore inferiore: 10vw
Ripetizione orizzontale divisore inferiore: 0,5x
Capovolgimento divisore inferiore: verticale

Questo è tutto! Guarda il progetto definitivo.

Stile n. 2: la tripla minaccia

Questo prossimo stile di modulo di intestazione divi include tre inviti all'azione inclusi i due pulsanti e l'icona di scorrimento verso il basso. L'abbinamento delle icone dei pulsanti con l'icona di scorrimento aiuta l'aspetto simmetrico del design. E i divisori di sezione creano un bel design triangolare astratto che guida gli utenti lungo la pagina.

Crea una nuova sezione a larghezza intera con un'intestazione a larghezza intera.

Quindi aggiorna il testo per il titolo, il testo del collegamento del pulsante n. 1 e il testo del collegamento del pulsante n. 2.

Quindi aggiorna il resto del design come segue:

Colore di sfondo: #1a1844
Orientamento del testo e del logo: al centro
Icona: vedi screenshot
Scorri verso il basso Dimensione icona: 20px
Carattere del titolo: Lato
Peso del carattere del titolo: pesante
Dimensione del testo del titolo: 5vw (desktop), 40px (tablet), 30px (smartphone)
Altezza della riga del titolo: 1,3 em
Pulsante Due Colore di sfondo: #fe4943
Larghezza bordo pulsante due: 0px
Pulsante Due Icona: freccia destra (vedi screenshot)
Colore di sfondo del pulsante uno: #fe4943
Pulsante Un bordo Larghezza: 0px
Pulsante One Icon: freccia sinistra (vedi screenshot)
Posizionamento dell'icona del pulsante uno: sinistra
Imbottitura personalizzata: 10vw in alto, 10vw a sinistra

Ora tutto ciò che dobbiamo fare è aggiungere i nostri divisori di sezione per creare il design dello sfondo triangolare. Apri le impostazioni della sezione e aggiorna le seguenti impostazioni di progettazione:

Stile divisore superiore: vedi screenshot
Colore divisore superiore: rgba (255,255,255,0.3)
Altezza divisore superiore: 45vw

Stile divisore superiore: vedi screenshot
Colore divisore superiore: rgba (255,255,255,0.1)
Altezza divisore superiore: 45vw

Ora diamo un'occhiata al progetto finale:

Suggerimento di progettazione bonus: regolazioni mobili per i pulsanti

So di aver detto niente CSS personalizzato, ma questo è un tocco in più non essenziale che ho pensato che alcuni di voi avrebbero apprezzato. Potresti notare che per le intestazioni con due pulsanti, il secondo pulsante ha un margine sinistro che elimina il design sugli smartphone. Per un design più pulito sugli smartphone, puoi aggiungere uno snippet di CSS personalizzato alle impostazioni della tua pagina per rendere i pulsanti della stessa larghezza e senza il margine del secondo pulsante.

Apri le impostazioni della pagina in Divi Builder e aggiungi il seguente CSS

@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
  display: block;
  width: 100%;
margin-left: 0px;    
  }
}

Ora guarda il design sul cellulare.

Stile n. 3: la cornice arrotondata

Questo design arrotondato del modulo di intestazione divi è un ottimo modo per inquadrare l'immagine di sfondo e il contenuto dell'intestazione per portare ancora più attenzione alla tua chiamata all'azione. Tutto ciò che serve sono alcune modifiche al raggio del bordo dell'intestazione, un'ombra della casella e una spaziatura personalizzata.

Per iniziare, crea una nuova sezione a larghezza intera con un'intestazione a larghezza intera.

Innanzitutto, aggiorniamo gli elementi di contenuto per l'intestazione aggiungendo il titolo, il testo del collegamento del pulsante n. 1 e un'immagine del logo.

Quindi aggiungi un'immagine di sfondo abbastanza grande da coprire l'altezza e la larghezza dell'intestazione. Poiché questa sarà un'intestazione arrotondata, prova a utilizzare un'immagine con la stessa altezza e larghezza (come 1000px per 1000px).

Quindi aggiorna il resto delle impostazioni di progettazione come segue:

Salva le impostazioni.

Quindi apri le impostazioni della sezione per aggiungere il colore di sfondo e la spaziatura come segue:

Colore di sfondo: #000000
Imbottitura personalizzata: 5vw in alto, 5vw in basso

Ora controlla il progetto finale.

Il mancino misto

Questo design dell'intestazione ha alcune caratteristiche di design uniche. Il modulo di intestazione viene effettivamente ridimensionato e allineato a sinistra per esporre la metà destra dell'immagine di sfondo della sezione. E il contenuto del modulo di intestazione ha un effetto di fusione che espone l'immagine di sfondo attraverso il contenuto. Per riuscirci, avrai bisogno del giusto tipo di immagine di sfondo per la tua sezione. In genere, vorrai che l'immagine abbia elementi più scuri in modo che il contenuto miscelato sia più visibile.

Iniziamo.

Innanzitutto, crea una nuova sezione a larghezza intera con un'intestazione a larghezza intera.

Prima di iniziare ad aggiornare i nostri stili di intestazione, passa prima alle impostazioni della sezione e aggiungi il seguente sfondo:

Aggiungi un'immagine di sfondo con il punto focale dell'immagine a destra.

Colore sfondo sfumato sinistro: rgba(0,0,0,0.54)
Colore di sfondo sfumato a destra: rgba (255,255,255,0)
Direzione gradiente: 90 gradi
Direzione radiale: in basso a destra
Posizione di partenza: 50%
Posizione finale: 0%
Posiziona il gradiente sopra l'immagine di sfondo: S

Lo scopo del gradiente è rendere più scuro il lato sinistro dell'immagine in modo che quando mescoliamo il contenuto del modulo di intestazione sarà più leggibile. Inoltre, non sarai in grado di vedere lo sfondo della sezione in questo momento perché il colore di sfondo dell'intestazione predefinito è ancora attivo. Lo cambieremo dopo.

Apri le impostazioni dell'intestazione e aggiorna il contenuto con un titolo, il testo del collegamento del pulsante n. 1 e un logo scuro.

Ora cambia il colore di sfondo in bianco.

Quindi aggiorna quanto segue:

Peso del carattere del titolo: Ultra grassetto
Colore del testo del titolo: #000000
Testo del titolo Dimensioni: 8vw
Altezza della riga del titolo: 1.1em
Pulsante UN testo Dimensioni: 2.7vw
Colore del testo del pulsante uno: #000000
Pulsante Un bordo Larghezza: 0.2em
Pulsante One Border Color: #edf000
Peso del carattere: Ultra grassetto
Larghezza: 50% (desktop, tablet e smartphone)
Modalità di fusione: schermo

Ecco il disegno definitivo.

Stile n. 5: il tipo a grande scala

Questo design del modulo di intestazione Divi introduce un modo semplice ed efficace per creare testo di grandi dimensioni che si adatta alla finestra del browser senza compromettere il design. Poiché stiamo utilizzando un modulo di intestazione a larghezza intera, avremo bisogno di espandere un po' la nostra area di contenuto. Quindi dobbiamo usare l'unità di lunghezza vw per ridimensionare il nostro testo. Questo design sarebbe ottimo per le intestazioni di sezione.

Per iniziare, crea una nuova sezione a larghezza intera con un'intestazione a larghezza intera.

Nelle impostazioni dell'intestazione a larghezza intera, aggiorna quanto segue:

Titolo: Consultazione
Sottotitolo Testo: Servizi
Testo del collegamento del pulsante n. 1: inizia ora

Elimina il testo predefinito nella casella del contenuto.

Quindi aggiungi un'immagine del logo chiaro.

Successivamente aumenteremo la larghezza massima predefinita del nostro contenitore di intestazione per creare più spazio orizzontale per la tua intestazione. Per fare ciò, vai alla scheda Avanzate e aggiungi il seguente CSS sotto Contenitore intestazione:

width: 100% ;
max-width: 100% ;

Ora aggiorna il resto delle impostazioni di progettazione come segue:

Aggiungi un'immagine di sfondo.
Orientamento del testo e del logo: al centro
Carattere del titolo: Cuprum
Peso del carattere del titolo: grassetto
Stile carattere titolo: TT
Colore del testo del titolo: #bfbfbf
Testo del titolo Dimensioni: 10vw
Spaziatura tra lettere del titolo: 0.1em
Carattere sottotitolo: Cuprum
Allineamento del testo dei sottotitoli: a destra (questo aiuta a centrare il testo con la spaziatura delle lettere)
Dimensione del testo dei sottotitoli: 3vw
Spaziatura delle lettere dei sottotitoli: 7.8vw
Pulsante Un bordo Larghezza: 0px
Carattere pulsante uno: Cuprum
Icona del pulsante uno: vedi screenshot

Il trucco è usare l'unità di lunghezza vw per il testo. Quindi regola la spaziatura delle lettere del sottotitolo per allinearla al testo del titolo nel miglior modo possibile.

Per massimizzare la nostra spaziatura orizzontale, dobbiamo aggiungere una larghezza personalizzata al contenuto dell'intestazione come segue:

Larghezza contenuto: 80%;

Anche se questo è inferiore al valore predefinito 100%, la modifica dell'impostazione sovrascriverà l'impostazione predefinita e si regolerà con il CSS personalizzato che abbiamo aggiunto in precedenza.

Infine, aggiungi un'ombra di scatola per completare il design:

Box Shadow: vedi screenshot
Forza sfocatura ombra scatola: 0px
Forza di diffusione dell'ombra della scatola: 60 px

Ora controlla il risultato finale.

Trasformali in intestazioni a schermo intero!

I disegni sopra possono essere facilmente realizzati a schermo intero con un clic di un pulsante. Questa è una potente funzionalità del modulo di intestazione a larghezza intera. Vai semplicemente alle impostazioni di progettazione dell'intestazione e seleziona l'opzione "Crea schermo intero".

Inoltre, dovrai eliminare l'imbottitura personalizzata per questi design in modo che l'intestazione si adatti perfettamente alla finestra del browser.

Pensieri finali

Queste sono solo alcune delle possibilità di design dell'intestazione disponibili con il modulo Divi Header. E sperimentare con tutte le impostazioni di progettazione può essere molto divertente. Semmai, spero che questi esempi servano da ispirazione per il tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti qui sotto.

Saluti!