Finora abbiamo preparato il sito, imparato a orientarci nel builder e costruito variabili e preset. Ora arriva una parte che si vede sempre, in tutte le pagine, e che proprio per questo non può essere trattata come una decorazione messa lì alla fine: l’header.

In questa parte della guida costruiamo un header personalizzato in Divi 5 usando il Theme Builder. Dentro ci metteremo una barra informativa, il logo, il menu principale, i collegamenti social e un pulsante. Poi sistemeremo il comportamento responsive, perché un header perfetto su desktop che su telefono diventa un armadio a tre ante non ci serve a molto.

Il vantaggio è che non ripartiamo da zero. Useremo le variabili di design create nella parte 3 e i preset preparati nella parte 4. Se stai seguendo il percorso, qui inizi a vedere perché abbiamo fatto tutto quel lavoro prima. Se invece sei arrivato direttamente a questo capitolo, puoi comunque seguirlo, ma qualche impostazione dovrai adattarla al tuo sistema.

Perché costruire l’header nel Theme Builder

L’header predefinito e il modulo Menu possono essere sufficienti per un sito molto semplice. Quando però vuoi controllare davvero struttura, spaziature, comportamento sticky e priorità degli elementi, il Theme Builder ti lascia molta più libertà. Puoi creare un’intestazione globale e applicarla a tutto il sito, oppure prepararne una diversa per sezioni specifiche.

Apri la bacheca di WordPress e vai in Divi → Theme Builder. Nel template predefinito del sito scegli Aggiungi header globale e poi costruiscilo da zero. Si aprirà il Visual Builder su un’area dedicata. Se l’interfaccia ti sembra ancora un po’ affollata, prima puoi ripassare la guida completa all’interfaccia di Divi 5.

Qui inseriamo anche il collegamento richiesto: se non hai ancora il tema, puoi acquistare Divi dalla sezione presente in questa pagina. Fatto questo, torniamo alla struttura, che è la parte che farà funzionare davvero il resto.

Partiamo dalla base.

Aggiungi una sezione e, al suo interno, due righe a colonna singola. La prima ospiterà la barra informativa; la seconda conterrà la navigazione vera e propria. Nella prima riga applica il colore principale come sfondo, imposta la larghezza al 100% e rimuovi il limite di larghezza massima. Centra il contenuto e usa una variabile di spaziatura piccola per il padding verticale.

Inserisci un modulo Titolo nella prima riga e applica il preset destinato ai sottotitoli o agli annunci. Usa un testo breve: una promozione, un’informazione di servizio o un avviso realmente utile. Se scrivi un romanzo lì dentro, non hai più una barra informativa; hai costruito un secondo header sopra al primo.

Nella sezione principale imposta un gap verticale coerente e assegna uno z-index elevato. Poi, nelle opzioni degli effetti di scorrimento, scegli la posizione sticky in alto. Lo z-index serve a evitare che l’intestazione finisca dietro altri elementi durante lo scroll.

Costruire logo, menu, social e pulsante

Nella seconda riga aggiungi un Gruppo. Inserisci al suo interno un modulo Immagine e usa il contenuto dinamico Logo del sito. Imposta un’altezza massima ragionevole, per esempio 50 pixel, invece di caricare un logo enorme e sperare che si comporti bene da solo.

Aggiungi poi il modulo Menu e seleziona il menu WordPress corretto. Se usi un modulo Immagine separato per il logo, elimina il logo interno del Menu. Nel Gruppo imposta la direzione orizzontale, la distribuzione Space Between, l’allineamento centrale e il wrapping. Attiva inoltre la crescita del contenitore, così può occupare lo spazio disponibile senza costringere gli altri elementi.

Fuori dal Gruppo puoi aggiungere il modulo Social Media Follow e un pulsante CTA. Applica i preset già definiti, poi controlla che i link social siano reali e che il pulsante porti a un’azione sensata. Un bottone nell’header pesa visivamente parecchio: se non sai dove mandarlo, meglio non inserirlo solo perché “ci sta bene”.

Ora viene la parte responsive.

Su desktop possiamo mostrare menu, social e CTA. Su tablet e telefono lo spazio cambia, quindi conviene decidere cosa resta essenziale. In questo esempio nascondiamo icone social e pulsante quando entriamo nel breakpoint tablet, lasciando logo e navigazione.

Seleziona il modulo Social, apri Avanzate → Interazioni e crea un’interazione con trigger “Breakpoint Enter”, breakpoint Tablet ed effetto “Hide Element”. Aggiungine una seconda per mostrare nuovamente il modulo quando si entra nel breakpoint Desktop. Ripeti lo stesso schema sul pulsante.

Se vuoi capire meglio il rapporto fra evento, azione e modulo coinvolto, trovi un approfondimento su trigger, effetti e target nelle interazioni di Divi 5. Il principio è semplice: non basta nascondere un elemento una volta; devi anche definire quando deve tornare visibile.

Controllare l’header prima di salvarlo

Apri l’Editor Responsive e prova tutti i breakpoint attivi. Verifica che il menu mobile si apra, che il dropdown abbia abbastanza spazio, che il logo non schiacci l’icona hamburger e che il contenuto della pagina non passi sopra l’header sticky.

Controlla anche l’header sopra pagine reali, non soltanto sul canvas vuoto. Dal Builder puoi attivare la visualizzazione dei layout del Theme Builder nel loro contesto. È il modo più rapido per accorgerti se il contrasto funziona, se l’altezza è eccessiva o se una pagina con una hero particolare richiede un header diverso.

Quando tutto funziona, salva il layout e poi salva anche le modifiche del Theme Builder. Infine esporta il template come backup. Fai anche una prova con tastiera e menu aperto, perché la navigazione deve restare utilizzabile oltre che ordinata. Nella prossima parte costruiremo il footer globale con lo stesso sistema, così la parte superiore e quella inferiore del sito parleranno finalmente la stessa lingua.

Questo articolo è una rielaborazione originale in italiano basata sull’articolo originale di Elegant Themes, a cui va il credito per il tutorial di partenza.