Come creare un Header personalizzato con Divi

Tutorial per progettare un menu di navigazione unico utilizzando il builder visivo

L’intestazione (header) del tuo sito web è molto più di un semplice contenitore per il menu di navigazione. È la prima cosa che i visitatori vedono, il punto di riferimento per l’orientamento e una componente fondamentale della tua identità di marca. Un header standard, uguale a mille altri, può far apparire il tuo sito anonimo e poco professionale.

Fortunatamente, se utilizzi WordPress con il tema Divi, non sei limitato ai layout di menu predefiniti. Grazie al potente Divi Theme Builder, hai il controllo completo sulla progettazione della tua testata, potendo creare un’esperienza di navigazione unica, funzionale e perfettamente allineata al tuo brand, il tutto senza scrivere una riga di codice.

In questo tutorial, esploreremo come sfruttare il builder visivo di Divi per costruire da zero un header personalizzato che farà distinguere il tuo sito web.

Perché abbandonare il menu standard e usare il Divi Theme Builder?

Prima dell’avvento del Theme Builder, modificare l’header in WordPress richiedeva spesso conoscenze di PHP e CSS, o l’uso di plugin esterni che potevano appesantire il sito. Divi ha cambiato le regole del gioco, democratizzando il design web.

Utilizzare il Theme Builder per il tuo header offre vantaggi significativi rispetto alle opzioni standard del tema:

• Controllo Creativo Totale: Non sei più vincolato a una struttura “Logo a sinistra, Menu a destra”. Puoi posizionare gli elementi dove vuoi, creare layout su più righe, e usare qualsiasi modulo Divi (non solo il menu) all’interno della testata.
• Design Coerente (Globale): Puoi creare un “Header Globale” che si applica automaticamente a ogni pagina del tuo sito. Modificalo una volta, e le modifiche si rifletteranno ovunque, garantendo coerenza e risparmiando tempo prezioso.
• Integrazione di Elementi Funzionali: Vuoi aggiungere un pulsante di Call to Action (CTA) evidente, icone social, una barra di ricerca o un numero di telefono cliccabile direttamente nell’header? Con il builder visivo è semplice come trascinare e rilasciare un modulo.
• Personalizzazione Avanzata: Puoi sfruttare tutte le opzioni di design di Divi: sfumature, ombreggiature, bordi, animazioni al passaggio del mouse e controlli avanzati per la tipografia, per creare un menu che non sia solo funzionale ma anche bello da vedere.

Guida passo dopo passo alla creazione del tuo Header personalizzato

Pronto a dare una nuova veste alla navigazione del tuo sito? Segui questi passaggi per costruire il tuo primo header personalizzato con Divi.

Passo 1: Accedere al Divi Theme Builder

Dal tuo pannello di controllo di WordPress, naviga nel menu laterale su Divi > Theme Builder. Questa è l’area di comando dove puoi creare template per diverse parti del tuo sito (header, footer, corpo del post, ecc.).

Vedrai un template predefinito chiamato “Template del sito web predefinito”. All’interno di questo blocco, troverai un’area chiamata “Aggiungi header globale”. Cliccaci sopra e seleziona “Crea header globale”.

Passo 2: Impostare la struttura con il Builder Visivo

Si aprirà l’interfaccia del Divi Builder che già conosci. Ti verrà chiesto come vuoi iniziare; scegli “Costruisci da zero”.

Proprio come quando progetti una pagina, devi iniziare con una Sezione. Per un header moderno e pulito, una struttura comune ed efficace è una riga a tre colonne:

1. Colonna sinistra (piccola): Per il logo.
2. Colonna centrale (larga): Per il menu di navigazione principale.
3. Colonna destra (media): Per un elemento aggiuntivo, come un pulsante CTA o icone social.

Seleziona quindi una struttura di riga con tre colonne (ad esempio, la variante 1/4 – 1/2 – 1/4).

Passo 3: Inserire i Moduli fondamentali

Ora che hai la struttura, popoliamola con i contenuti.

• Modulo Immagine (Logo): Nella prima colonna a sinistra, inserisci un modulo Immagine. Carica il tuo logo. Nelle impostazioni di design del modulo, assicurati di regolare la larghezza e l’allineamento per farlo apparire proporzionato. Consiglio Pro: Nella scheda “Contenuto” > “Link”, inserisci l’URL della tua home page in “URL collegamento immagine”, così cliccando sul logo si tornerà sempre alla pagina iniziale.
• Modulo Menu (Navigazione): Nella colonna centrale, aggiungi il modulo Menu. Seleziona dal menu a tendina quale menu di WordPress vuoi visualizzare (devi averlo precedentemente creato in Aspetto > Menu). Qui puoi anche decidere se mostrare o nascondere il logo (che abbiamo già inserito separatamente) e l’icona di ricerca.
• Modulo Pulsante (CTA): Nella terza colonna, per dare una spinta alle conversioni, inserisci un modulo Pulsante. Scrivi un testo accattivante come “Richiedi Preventivo” o “Contattaci” e collegalo alla pagina di destinazione appropriata.

Passo 4: Personalizzazione e Styling

Questa è la fase in cui il tuo header prende vita. Utilizza le schede Design di ciascun modulo, della riga e della sezione per definire l’estetica.

• Sfondo e Spaziatura: Seleziona la Sezione principale (quella blu) e imposta un colore di sfondo che si adatti al tuo brand. Nelle impostazioni di “Spaziatura”, riduci il “Padding” superiore e inferiore (prova con 10px o 20px) per rendere l’header compatto e non sprecare spazio prezioso sullo schermo.
• Stile del Menu: Apri le impostazioni del modulo Menu. Vai su Design > Testo menu. Qui puoi cambiare il font, la dimensione, il colore dei link e, molto importante, il colore del “Link attivo” (la pagina in cui si trova l’utente) per migliorare l’orientamento. Sperimenta con le opzioni di stile al passaggio del mouse (hover) per rendere la navigazione interattiva.
• Allineamento Verticale: Per assicurarti che il logo, il menu e il pulsante siano perfettamente allineati orizzontalmente al centro, vai nelle impostazioni della Riga (quella verde) > Design > Ridimensionamento e attiva l’opzione “Pareggia altezze colonne”. Poi, nelle impostazioni avanzate di ogni colonna, puoi usare CSS personalizzato (come display: flex; align-items: center;) o, più semplicemente, giocare con il padding superiore dei moduli per allinearli visivamente.

Passo 5: Salvare e Pubblicare

Una volta soddisfatto del risultato, clicca sui tre puntini viola in basso al centro dello schermo e poi sul pulsante verde “Salva” nell’angolo in basso a destra.

Attenzione: Non hai ancora finito. Chiudi l’editor visivo cliccando sulla “X” in alto a destra per tornare alla dashboard del Theme Builder. Vedrai che il blocco “Header globale” ora è verde. Per rendere effettive le modifiche sul tuo sito live, devi cliccare sul pulsante blu “Salva i cambiamenti” in alto a sinistra nella schermata principale del Theme Builder.

Consigli avanzati per un menu di navigazione professionale

Ora che hai un header personalizzato, ecco alcuni accorgimenti per portarlo al livello successivo:

• Ottimizzazione Mobile: Il tuo header deve essere perfetto su smartphone. Usa le icone di visualizzazione responsive (tablet e telefono) all’interno del builder per controllare come appare. Potrebbe essere necessario regolare le dimensioni del testo o nascondere il pulsante CTA sui dispositivi più piccoli per evitare disordine, lasciando solo il menu “hamburger”.
• Header “Sticky” (Fisso): Vuoi che il menu rimanga visibile mentre l’utente scorre la pagina? Nelle impostazioni della Sezione principale del tuo header, vai su Avanzate > Effetti di scorrimento e imposta la “Posizione appiccicosa” su “Incolla all’inizio”. Puoi anche cambiare lo stile (ad esempio, il colore di sfondo o la dimensione del logo) quando l’header diventa “sticky” per un effetto visivo dinamico.
• Less is More: Non sovraccaricare l’header. L’obiettivo principale è la navigazione. Troppi elementi creano confusione. Mantieni il design pulito, i link chiari e la Call to Action evidente.

Conclusione

Creare un header personalizzato con Divi è un passo fondamentale per elevare la qualità percepita del tuo sito web e migliorare l’esperienza utente. Il Theme Builder ti offre la libertà di progettare una testata che non solo guida i tuoi visitatori, ma comunica efficacemente l’identità del tuo brand fin dal primo secondo.

Sperimenta con diverse strutture e moduli per trovare la combinazione perfetta per le tue esigenze.

Se desideri un sito web realizzato con WordPress e Divi che sfrutti al massimo queste potenzialità, ma non hai il tempo o le competenze per farlo da solo, noi di sitiwebok.eu siamo qui per aiutarti. Contattaci oggi stesso per discutere del tuo progetto e realizzare una presenza online professionale e su misura per te.