Come personalizzare l'intestazione di WordPress (Guida per principianti)

Conosci quella sensazione quando visiti un sito WordPress e sembra... generico? Come se provenisse direttamente da un modello, senza nulla di personale o memorabile?

Questa è esattamente l'impressione che dai quando ti attieni all'intestazione predefinita di WordPress, e può costarti credibilità con ogni visitatore.

La tua intestazione è la prima cosa che le persone vedono quando atterrano sul tuo sito, quindi deve fare una forte impressione. Personalizzarla ti consente di aggiungere elementi chiave come collegamenti di navigazione, icone social e una barra di ricerca.

Queste funzionalità rendono il tuo sito più facile da usare e ti aiutano a lasciare un'impressione duratura e professionale. Inoltre, abbiamo visto come un'intestazione personalizzata possa aumentare sia la fiducia che l'engagement.

In questa guida, ti mostreremo esattamente come personalizzare la tua intestazione WordPress, anche se sei un principiante assoluto. Imparerai diversi metodi che non richiedono alcuna codifica, così potrai creare un'intestazione che si distingua e serva meglio i tuoi visitatori. 🌟

Cos'è l'intestazione in WordPress?

L'intestazione del tuo sito web è la sezione superiore di ogni pagina del tuo sito WordPress ed è probabilmente la prima cosa che i visitatori vedono. Spesso visualizza il logo del tuo sito web e il titolo, i menu di navigazione e altri elementi importanti che desideri che gli utenti vedano per primi.

Ad esempio, ecco la nostra area di intestazione su WPBeginner che milioni di lettori vedono mensilmente.

Personalizzando l'intestazione del tuo sito, puoi dargli un tocco unico e renderlo più utile per i tuoi visitatori. Puoi collegarti alle tue pagine più popolari, visualizzare icone social o il tuo numero di telefono aziendale, e mostrare pulsanti di call-to-action per maggiori conversioni.

Nelle sezioni seguenti, ti mostreremo come personalizzare facilmente l'intestazione di WordPress. Puoi utilizzare i seguenti collegamenti per passare alla sezione che desideri leggere:

• Personalizza l'intestazione utilizzando il personalizzatore del tema di WordPress
• Personalizza l'intestazione utilizzando l'editor completo del sito di WordPress
• Crea layout personalizzati per intestazioni e pagine con SeedProd
• Aggiungere un'intestazione personalizzata per ogni categoria
• Aggiungere un'area widget all'intestazione di WordPress
• Aggiungere immagini casuali nell'intestazione del tuo blog WordPress
• Aggiungere codice all'intestazione del tuo sito web (Avanzato)
• Suggerimento bonus: Prova diversi stili di intestazione (utilizzando il test A/B split)
• Domande frequenti: Personalizza la tua intestazione WordPress
• Risorse aggiuntive: Altri suggerimenti per il design e la navigazione di WordPress

Pronto? Iniziamo.

Personalizza l'intestazione utilizzando il personalizzatore del tema di WordPress

I temi WordPress più diffusi ti consentono di utilizzare il personalizzatore del tema di WordPress per apportare modifiche all'area dell'intestazione del tuo sito. Questa funzionalità è talvolta chiamata intestazione personalizzata, ma tieni presente che non tutti i temi la supportano.

Dovresti iniziare navigando su Aspetto » Personalizza nella tua area di amministrazione di WordPress.

Il tuo tema potrebbe includere una sezione 'Intestazione' nel personalizzatore o fornire opzioni di intestazione nella sezione 'Colore'. Tuttavia, questo varia da tema a tema. Ecco alcuni esempi.

Alcuni temi, come Twenty Twenty-One, non offrono affatto opzioni di personalizzazione dell'intestazione. In questo caso, ti consigliamo di utilizzare un plugin per la creazione di temi drag-and-drop come SeedProd, che tratteremo di seguito.

Il tema Twenty Sixteen ti consente di aggiungere un'immagine di sfondo all'intestazione e persino di aggiungere immagini di intestazione casuali.

Alcuni temi WordPress gratuiti e premium offrono ancora più opzioni di personalizzazione del tema.

Ad esempio, potresti essere in grado di modificare lo stile del carattere, il layout, i colori e molto altro dell'intestazione. Ma differirà comunque da un tema all'altro e sarai limitato a ciò che lo sviluppatore del tema ti consente di fare.

Ad esempio, Sydney ha un'opzione dedicata 'Header Builder' nel suo pannello di personalizzazione a sinistra.

Qui troverai diverse impostazioni per modificare l'aspetto e lo stile dell'intestazione. Puoi creare un'intestazione personalizzata aggiungendo blocchi, proprio come quando modifichi un post del blog o una pagina nell'editor di contenuti di WordPress.

Per iniziare, passa semplicemente il mouse sopra un'area vuota nell'intestazione e fai clic sull'icona '+' per aggiungere un blocco di intestazione, sia nella riga superiore, centrale o inferiore.

Successivamente, puoi selezionare qualsiasi blocco che desideri aggiungere alla tua intestazione personalizzata. Ad esempio, puoi aggiungere un blocco widget, un blocco account, un blocco di ricerca e altro ancora.

Il costruttore di intestazioni ti consente anche di trascinare e rilasciare blocchi per posizionarli sopra o sotto l'intestazione.

Quindi, puoi personalizzare ulteriormente ogni blocco che aggiungi all'intestazione.

Ad esempio, selezionando il blocco Titolo del sito e logo ti darà opzioni per caricare un titolo del sito e un logo, cambiare la larghezza del logo, visualizzare una tagline del sito e altro ancora.

Oltre a ciò, puoi anche cambiare il colore di sfondo dell'intestazione o aggiungere un'immagine di sfondo che appaia nell'intestazione.

Quando hai finito di modificare l'intestazione personalizzata, fai semplicemente clic sul pulsante 'Pubblica'.

Per maggiori dettagli, consulta la nostra guida definitiva su come usare il personalizzatore di temi WordPress.

Personalizza l'intestazione utilizzando l'editor completo del sito di WordPress

WordPress ha aggiunto l'editing completo del sito a WordPress nella versione 5.9. Se il tuo tema supporta la nuova funzionalità, allora sostituisce il personalizzatore di temi. Tuttavia, al momento, ci sono solo pochi temi che funzionano con l'editor completo del sito.

Quando utilizzi un tema compatibile, puoi personalizzare la tua intestazione navigando su Aspetto » Editor. Questo avvierà l'editor completo del sito, che è simile all'editor a blocchi che usi per scrivere post e pagine di WordPress.

Quando fai clic sull'intestazione, noterai che il nome del modello in cima alla pagina cambia in 'Intestazione pagina'.

Ora, quando fai clic sull'icona 'Impostazioni' sulla barra degli strumenti, vedrai le opzioni per personalizzare il layout, il colore, il bordo e le dimensioni dell'intestazione.

Come esempio, cambieremo il colore di sfondo dell'intestazione. Per prima cosa, dovrai espandere la sezione 'Colore' e quindi fare clic sull'opzione 'Sfondo'.

Nella finestra popup che appare, selezionerai prima un colore solido o una sfumatura.

Quindi, puoi scegliere tra una serie di colori preimpostati. Quando fai clic su un colore, lo sfondo della tua intestazione verrà modificato immediatamente.

Puoi trovare altre opzioni di personalizzazione facendo clic sull'icona 'Stili' in alto a destra della pagina. Questo ti permetterà di cambiare il carattere, i colori e il layout dell'intestazione.

Per saperne di più su come funziona l'editor completo del sito, consulta la nostra guida per principianti su come personalizzare il tuo tema WordPress.

Crea layout personalizzati per intestazioni e pagine con SeedProd

Vuoi avere il controllo totale su intestazioni, piè di pagina e barre laterali per dare al tuo sito web un design unico? Allora ti consigliamo di utilizzare SeedProd, il miglior plugin per la creazione di temi WordPress.

SeedProd ti permette di creare facilmente un tema WordPress personalizzato senza scrivere codice. Questo include la creazione di intestazioni, piè di pagina e tutto il resto necessario per un tema WordPress accattivante.

Puoi persino creare più stili di intestazione personalizzati per diverse pagine e sezioni del tuo sito web.

Alcuni dei nostri marchi partner utilizzano SeedProd per costruire i loro siti web e sta facendo un lavoro incredibile per loro. Per saperne di più, puoi consultare la nostra recensione completa di SeedProd.

Innanzitutto, ti consigliamo di seguire la nostra guida su come creare facilmente un tema WordPress personalizzato senza alcun codice. Una volta fatto questo, puoi iniziare a personalizzare la tua intestazione nell'editor di SeedProd.

Per accedere all'editor, tutto ciò che devi fare è fare clic sul link 'Modifica Design' che si trova sotto l'intestazione.

Questo aprirà l'intestazione nell'editor drag-and-drop di SeedProd.

Da qui, puoi facilmente personalizzare la tua intestazione aggiungendo nuovi blocchi.

Ci sono blocchi per tag di template come il logo del sito o qualsiasi widget di WordPress, e blocchi avanzati come un contatore, menu di navigazione o pulsanti di condivisione social.

La parte migliore è che puoi personalizzare ulteriormente ogni blocco utilizzando il theme builder. Ad esempio, puoi cambiare le dimensioni e l'allineamento del tuo logo o scegliere quali pagine mostrare nel menu di navigazione. Ti permette persino di aggiungere un'immagine nell'intestazione.

Con SeedProd, puoi anche aggiungere una sezione completa all'intestazione del tuo tema.

Le sezioni sono gruppi di blocchi che puoi utilizzare per diverse aree del tuo sito web. Queste includono intestazioni, piè di pagina, funzionalità, testimonianze, call to action e altro ancora.

Per utilizzare una sezione di intestazione, dovrai passare alla scheda 'Sezioni' nel pannello 'Design'.

Dopodiché, scegli una sezione di intestazione che desideri utilizzare per il tuo sito web. SeedProd offre modelli di sezioni multiple che puoi utilizzare.

Procedi e inizia a personalizzare la sezione di intestazione.

Una volta che sei soddisfatto della tua intestazione personalizzata, assicurati di fare clic sul pulsante 'Salva' per memorizzare le tue modifiche.

Ora sei pronto per pubblicare la tua intestazione personalizzata.

Vai semplicemente su SeedProd » Theme Builder dalla tua bacheca di WordPress e fai clic sull'interruttore accanto all'opzione ‘Abilita tema SeedProd’ su ‘Sì’.

Una volta abilitata l'opzione, SeedProd sostituirà il tuo tema WordPress predefinito con un nuovo tema e intestazione personalizzati.

Ora puoi visitare il tuo sito web per vedere la nuova intestazione personalizzata in azione.

Crea intestazioni personalizzate diverse per ogni pagina

Inoltre, SeedProd rende super facile progettare intestazioni personalizzate per pagine specifiche del tuo sito.

Il theme builder ti consente di aggiungere intestazioni personalizzate per ogni pagina del tuo sito web WordPress. In questo modo, puoi mostrare un'intestazione personalizzata per diverse categorie, tag, tipi di post, tipi di pagina e altro ancora.

Per iniziare, dovrai andare su SeedProd » Theme Builder dalla tua bacheca di WordPress e fare clic sul pulsante ‘Aggiungi nuovo modello di tema’.

Apparirà una nuova finestra pop-up in cui dovrai inserire i dettagli del modello di tema.

Procedi e inserisci un nome per il tuo modello di tema. Successivamente, scegli semplicemente 'Intestazione' come tipo di modello dal menu a discesa. Puoi lasciare vuoto il campo 'Priorità'.

Successivamente, dovrai inserire le condizioni di visualizzazione per la tua intestazione personalizzata. Ad esempio, abbiamo utilizzato le condizioni in cui sarebbe stata visualizzata su tutti i post e pagine che appartengono alla categoria tutorial.

Non dimenticare di fare clic sul pulsante 'Salva' quando hai finito.

Dopodiché, procedi e modifica l'intestazione personalizzata utilizzando il costruttore di temi drag-and-drop di SeedProd.

Una volta terminata la modifica dell'intestazione personalizzata, fai semplicemente clic sul pulsante 'Salva' in alto.

Puoi trovare altre idee su come personalizzare la tua intestazione utilizzando SeedProd nella nostra guida per principianti su come creare facilmente un tema WordPress personalizzato utilizzando il costruttore di temi SeedProd.

Aggiungere un'intestazione personalizzata per ogni categoria

La maggior parte dei siti web visualizza la stessa intestazione su tutti i post, pagine, categorie e pagine di archivio. Tuttavia, puoi visualizzare un'intestazione diversa per ogni categoria di WordPress.

Questo può essere fatto aggiungendo codice ai file del tuo tema, ma avrai più controllo utilizzando un costruttore di temi.

In precedenza ti abbiamo mostrato come personalizzare l'intestazione utilizzando il plugin theme builder di SeedProd. Ora, SeedProd ti consente anche di creare più intestazioni personalizzate e visualizzarle per diverse categorie utilizzando la logica condizionale.

Per creare una nuova intestazione, devi navigare su SeedProd » Theme Builder e fare clic sul pulsante arancione 'Aggiungi nuovo modello di tema'. In alternativa, puoi duplicare la tua intestazione corrente e usarla come punto di partenza.

Apparirà una finestra popup, dove puoi dare un nome al modello di tema e selezionare 'Intestazione' dal menu a discesa Tipo.

Devi anche inserire una priorità. Quindi, se più di un'intestazione soddisfa le condizioni per una determinata pagina, verrà visualizzata l'intestazione con la priorità maggiore.

L'intestazione predefinita ha una priorità di 0, quindi assicurati di inserire 1 o superiore.

Dopodiché, dovrai impostare una o più condizioni. Questo dice a SeedProd quando visualizzare una determinata intestazione. Selezioni semplicemente le condizioni dai menu a discesa.

Nei primi due menu, dovrai selezionare 'Includi' e poi 'Ha categoria'. Nell'ultimo campo, dovresti digitare il nome della categoria in cui desideri che venga visualizzata l'intestazione.

Puoi facilmente visualizzare la stessa intestazione per più categorie facendo clic sul pulsante 'Aggiungi condizione' e includendo un'altra categoria. Al termine, assicurati di fare clic sul pulsante 'Salva' per salvare la nuova intestazione.

Ora, puoi personalizzare il design di ogni nuova intestazione utilizzando l'editor drag-and-drop di SeedProd, come ti abbiamo mostrato in precedenza.

Per saperne di più, incluso come farlo usando il codice, consulta la nostra guida su come aggiungere un'intestazione, un piè di pagina o una barra laterale personalizzati per ogni categoria.

Aggiungere un'area widget all'intestazione di WordPress

Se stai creando un tema personalizzato da zero usando il codice, potresti voler aggiungere un widget di WordPress alla tua intestazione per catturare l'attenzione dei tuoi visitatori.

I widget ti consentono di aggiungere facilmente blocchi di contenuto a sezioni specifiche del tuo tema, ma tieni presente che non tutti i temi includono un'area widget nell'intestazione.

Abbiamo menzionato in precedenza quanto sia semplice aggiungere widget alla tua intestazione usando il costruttore di temi SeedProd. Ma cosa succede se desideri aggiungere un widget all'intestazione di un tema WordPress normale?

Alcuni temi, come il tema Sydney, ti consentono di farlo utilizzando il personalizzatore del tema di WordPress. Sydney aggiunge un'opzione chiamata 'Costruttore di intestazioni' per personalizzare completamente l'intestazione, inclusa l'aggiunta di widget.

Se il tuo tema WordPress non dispone attualmente di un'area widget nell'intestazione, dovrai aggiungerla manualmente.

Mentre l'approccio generale consiste nell'aggiungere snippet di codice al file functions.php, l'approccio più semplice e sicuro è utilizzare WPCode. È il miglior plugin per aggiungere snippet di codice senza interrompere il tuo sito.

Alcuni dei nostri marchi partner utilizzano WPCode per aggiungere e gestire i propri snippet di codice personalizzato. Sentiamo grandi cose sul plugin, e puoi anche leggere la nostra recensione dettagliata di WPCode per saperne di più.

Per iniziare, assicuriamoci che il plugin per snippet di codice WPCode sia installato e attivato sul tuo sito WordPress. Se hai bisogno di aiuto, non esitare a consultare la nostra guida su come installare un plugin WordPress.

Dopo l'attivazione, dovrai navigare su Snippet di codice » + Aggiungi snippet.

Ora, la prima cosa che dovrai fare è creare il titolo dello snippet. Ad esempio, noi lo chiamiamo 'Aggiungere un Widget di WordPress all'Area Header'. Il secondo passaggio è espandere il menu a discesa del tipo di codice e scegliere 'PHP Snippet'.

Una volta fatto, copia semplicemente il seguente codice e incollalo nella sezione 'Anteprima Codice'.

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Questo codice registrerà una nuova area header o un'area pronta per i widget per il tuo tema.

Ecco come potrebbe apparire nel tuo editor WPCode:

Per attivare lo snippet, puoi spostare l'interruttore accanto al pulsante blu 'Salva Snippet' su 'Attivo'. Quindi, non dimenticare di fare clic sul pulsante 'Salva Snippet' per salvare le tue modifiche.

Una volta attivato l'interruttore e salvate le modifiche, l'editor dovrebbe apparire così:

Ora, se vai su Aspetto » Widget, vedrai una nuova area widget etichettata 'Area Widget Header Personalizzato'.

È qui che aggiungerai i tuoi widget. Se hai bisogno di aiuto, puoi consultare la nostra guida su come aggiungere e usare i widget in WordPress.

A seconda del tuo tema, potresti anche dover aggiungere CSS a WordPress per controllare come viene visualizzata l'area widget.

Per istruzioni dettagliate, puoi consultare la nostra guida su come aggiungere un widget di WordPress all'header del tuo sito web.

Aggiungere immagini casuali nell'intestazione del tuo blog WordPress

Un altro modo per rendere più attraenti gli header di WordPress è aggiungere immagini casuali alla sezione header.

Mostrare immagini che cambiano casualmente aiuta a catturare l'attenzione dei tuoi visitatori e a rendere i tuoi contenuti più coinvolgenti.

Per aggiungere immagini casuali nell'intestazione al tuo blog WordPress, puoi utilizzare il personalizzatore del tema e caricare immagini nella sezione intestazione. Questa opzione può variare a seconda del tema WordPress che stai utilizzando.

Successivamente, procedi e seleziona l'opzione 'Casuale intestazioni caricate'.

Se desideri un maggiore controllo e flessibilità nel mostrare immagini casuali nella sezione intestazione, puoi anche utilizzare un plugin WordPress.

Per maggiori dettagli, consulta la nostra guida su come aggiungere immagini casuali nell'intestazione al tuo blog WordPress.

Aggiungi codice all'intestazione del tuo sito web (Avanzato)

Infine, se desideri aggiungere codice personalizzato alla sezione header del tuo sito web, puoi farlo facilmente dalla tua bacheca di WordPress. Questo metodo è consigliato per utenti avanzati e potrebbe non essere adatto ai principianti perché implica la modifica del codice e richiede conoscenze tecniche.

Puoi trovare i file header del tuo tema andando su Aspetto » Editor del file del tema dal pannello di amministrazione di WordPress. Nei file del tema 'style.css', puoi scorrere fino alla sezione dell'header del sito e aggiungere o rimuovere codice.

Un modo più semplice per aggiungere codice personalizzato per modificare l'header del tuo sito è utilizzare WPCode, il miglior plugin per snippet di codice sul mercato.

Innanzitutto, installa e attiva il plugin gratuito WPCode. Per maggiori dettagli, consulta la nostra guida su come installare un plugin WordPress.

Dopo l'attivazione, puoi andare su Snippet di codice » Header e Footer dalla tua bacheca di WordPress. Successivamente, inserisci semplicemente il codice personalizzato nella sezione 'Header'.

Dopo aver inserito il codice, fai clic sul pulsante 'Salva modifiche'.

Per maggiori dettagli, puoi consultare la nostra guida su come aggiungere codice nell'intestazione e nel piè di pagina in WordPress.

Tutto qui!

Suggerimento bonus: Prova diversi stili di intestazione (utilizzando il test A/B split)

Dopo aver personalizzato la tua intestazione, è del tutto normale chiedersi: "È questa la versione migliore per i miei visitatori?" È qui che entra in gioco il test A/B split.

Ti permette di confrontare diverse versioni della tua intestazione, che si tratti di una modifica al layout, al colore di un pulsante o all'aggiunta di un elemento come una barra di ricerca, e vedere quale funziona effettivamente meglio.

Sarai in grado di prendere decisioni di design basate sul comportamento reale degli utenti, non solo su congetture.

Non preoccuparti, non devi essere uno sviluppatore per farlo.

Con strumenti facili da usare per i principianti come Thrive Optimize e Nelio AB Testing, testerai come un professionista in pochissimo tempo. Questo approccio aiuta la tua intestazione a migliorare con ogni modifica.

Per tutti i dettagli, consulta la nostra guida su come fare test A/B split in WordPress.

Domande frequenti: Personalizza la tua intestazione WordPress

Hai ancora domande sulla personalizzazione dell'intestazione di WordPress? Non preoccuparti; ti abbiamo coperto! Ecco alcune domande comuni che i principianti pongono spesso:

Cos'è un'intestazione di WordPress e perché è importante?

L'intestazione è la sezione superiore del tuo sito WordPress ed è la prima cosa che i visitatori vedono. Di solito include il logo del tuo sito, il menu di navigazione e altri elementi chiave. Un'intestazione ben progettata ti aiuta a fare una buona prima impressione e guida le persone alle parti più importanti del tuo sito.

Devo sapere come programmare per personalizzare l'intestazione del mio WordPress?

Assolutamente no! Non hai bisogno di alcuna competenza di programmazione. Molti temi WordPress e plugin (come SeedProd) ti permettono di personalizzare la tua intestazione con un semplice builder drag-and-drop, perfetto per i principianti.

Quali sono i vantaggi di utilizzare un plugin come SeedProd per le intestazioni?

SeedProd rende facile progettare intestazioni personalizzate senza toccare alcun codice. Hai il pieno controllo sull'aspetto e sul layout, oltre a opzioni avanzate per adattare lo stile del tuo sito e migliorare l'esperienza utente complessiva.

Come può l'aggiunta di un widget alla mia intestazione migliorare il mio sito?

Aggiungere widget alla tua intestazione, come una barra di ricerca, icone social o informazioni di contatto, rende le funzionalità chiave più facili da trovare. Questo aiuta i visitatori a navigare nel tuo sito più velocemente e conferisce al tuo sito un aspetto più curato e professionale.

Posso avere intestazioni diverse per pagine o post diversi?

Sì! Con gli strumenti giusti, come SeedProd, puoi aggiungere intestazioni personalizzate a diverse pagine, post, categorie o persino tag. Questo ti dà un maggiore controllo sull'aspetto del tuo sito in diverse sezioni.

Risorse aggiuntive: Altri suggerimenti per il design e la navigazione di WordPress

Speriamo che questo tutorial ti abbia aiutato a imparare come personalizzare la tua intestazione di WordPress. Successivamente, potresti anche voler consultare le nostre guide su:

• Come aggiungere correttamente immagini in WordPress
• Come aggiungere un ridimensionatore di font in WordPress per l'accessibilità
• Come stilizzare ogni post di WordPress in modo diverso
• Come creare un menu laterale collassabile in WordPress
• Come visualizzare barre laterali diverse per ogni post e pagina di WordPress
• Come creare una landing page virale per lista d'attesa in WordPress
• Elementi chiave di design per un sito web WordPress efficace
• Guida definitiva: Come cambiare correttamente un tema WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.