4 metodi facili (3 senza codice)

L'intestazione è il primo elemento del tuo sito Web visualizzato dalla maggior parte dei visitatori. In genere, è qui che vengono posizionati il ​​logo e il menu del tuo sito, ed è parte integrante di ogni pagina. Se non sai come modificare l'intestazione di WordPress, avrai difficoltà a fare una buona prima impressione.

WordPress ti consente di modificare l'intestazione del tuo sito in diversi modi. Quasi tutti i temi sono dotati di un design di intestazione unico, che puoi personalizzare manualmente. In alternativa, puoi utilizzare una serie di strumenti forniti dalla più ampia comunità di WordPress.

In questo articolo, ti mostreremo quattro modi per modificare l'intestazione di WordPress , sia con che senza plug-in. Andiamo a lavorare!

Sommario:

1. Modifica l'intestazione utilizzando il Customizer
2. Usa la modifica completa del sito (e un tema compatibile)
3. Modifica l'intestazione utilizzando un generatore di pagine di WordPress
4. Aggiungi codice personalizzato all'intestazione utilizzando un plug-in

1. Modifica l'intestazione utilizzando il Customizer

Il Customizer di WordPress è uno strumento integrato che ti consente di modificare elementi globali del tuo sito web. Puoi utilizzare il Personalizzatore per modificare l'intestazione, il piè di pagina, la tipografia, i menu e altri aspetti chiave del tuo sito.

Per accedere al Customizer, vai alla tua dashboard e fai clic su Aspetto > Personalizza . Il Customizer visualizzerà un menu di opzioni a sinistra e un'anteprima del tuo sito Web a destra:

Tieni presente che se non vedi l'opzione di personalizzazione di WordPress nella dashboard, potresti utilizzare un tema abilitato ai blocchi. Per modificare l'intestazione per questo tipo di tema, devi utilizzare la modifica completa del sito, di cui parleremo nella prossima sezione.

Nel Customizer, dovresti vedere un'opzione relativa alla tua intestazione. A volte questo potrebbe essere visibile immediatamente, come nell'esempio sopra. Altre volte, potrebbe essere necessario accedere a un sottomenu. Ad esempio, alcuni temi mettono le opzioni di intestazione nelle opzioni di layout o qualcosa di simile.

Una volta trovate le opzioni di intestazione del tuo tema, le scelte che vedrai ora dipenderanno dal tema che stai utilizzando. Ad esempio, il nostro tema Neve include opzioni per modificare il logo, il colore dell'intestazione e quale menu viene visualizzato in questa sezione:

Neve offre anche una selezione di elementi che puoi aggiungere all'intestazione utilizzando la funzionalità di trascinamento della selezione. Seleziona uno qualsiasi degli elementi in Componenti disponibili e trascinali nelle righe di intestazione nella parte inferiore del Personalizzatore. Neve ti consente di aggiungere fino a tre righe di elementi per un'intestazione e posizionare gli elementi in qualsiasi posizione desideri:

Quando sei soddisfatto della configurazione della tua intestazione, salva le modifiche al tuo tema facendo clic sul pulsante Pubblica nella parte superiore del Customizer.

Tieni presente che tutte le modifiche che apporti utilizzando il Customizer si applicheranno solo al tuo tema attivo. Se cambi tema, dovrai modificare nuovamente l'intestazione di WordPress.

2. Usa la modifica completa del sito (e un tema compatibile)

La modifica completa del sito è una funzionalità più recente che consente di modificare i modelli di temi utilizzando l'editor blocchi. Funziona solo per i temi abilitati al blocco, quindi potrebbe essere disponibile o meno sul tuo sito.

Per vedere se il tuo tema supporta la modifica completa del sito, apri il menu Aspetto e cerca l'opzione Editor :

Seleziona quello opzione e si aprirà l'Editor blocchi. Tuttavia, modificherai i tuoi modelli di temi anziché le tue singole pagine o post.

Per impostazione predefinita, l'editor si aprirà sul modello della home page, che dovrebbe includere un elemento Header :

Tieni presente che alcuni blocchi verranno visualizzati come segnaposto solo quando utilizzi la modifica completa del sito. Questo perché questo strumento non serve per modificare singoli blocchi, ma interi layout.

Quando modifichi l'intestazione, ottieni il pieno controllo su quali blocchi ed elementi includere. Se apri lo strumento Visualizzazione elenco , puoi vedere un'analisi dei blocchi attualmente contenuti nell'intestazione:

In questa fase, puoi scegliere di aggiungere o rimuovere blocchi dall'intestazione. Per rimuovere o modificare un blocco esistente, selezionalo e utilizza il menu contestuale che appare sullo schermo quando lo fai:

Quando selezioni un blocco, puoi anche modificarlo usando il blocco menu delle impostazioni sul lato destro dello schermo. Questo menu in genere contiene opzioni di stile e variano a seconda del blocco che stai modificando:

Per aggiungere un nuovo blocco, seleziona l'elemento Header e cerca l'icona del segno più . Quel pulsante aprirà un menu che ti consente di selezionare quale blocco aggiungere:

Un'altra caratteristica utile dell'editor completo del sito è che puoi modificare visivamente i menu. Per farlo, basta selezionare un menu utilizzando il blocco Navigazione . Vedrai l'opzione per aggiungere nuovi collegamenti, creare un nuovo menu e passare da quelli esistenti:

Quando sei soddisfatto delle modifiche all'intestazione, fai clic su Salva . Ciò salverà le modifiche al modello di intestazione del tema e si rifletteranno automaticamente sul tuo sito web.

3. Modifica l'intestazione utilizzando un generatore di pagine di WordPress

Alcuni plugin per la creazione di pagine di WordPress offrono opzioni per modificare l'intestazione di WordPress. Ad esempio, Elementor Pro include uno strumento Theme Builder a cui puoi accedere con una licenza premium.

Se non hai accesso a Elementor Pro, puoi utilizzare un'estensione di terze parti gratuita, come il plug-in Elementor Header & Footer Builder su WordPress.org.

Tuttavia, ti mostreremo come farlo usando Elementor Pro e la sua funzione Theme Builder.

In pratica, Elementor Theme Builder funziona in modo simile alla modifica completa del sito.

Per accedere al Generatore di temi, vai su Modelli > Generatore di temi . Seleziona le opzioni di intestazione in PARTI DEL SITO e cerca i modelli esistenti a destra. Dovrebbe esserci un solo modello di intestazione e puoi fare clic sul pulsante Modifica accanto ad esso:

Questo avvierà l'editor di Elementor. Da qui, puoi scegliere di creare l'intestazione utilizzando i blocchi Elementor o importare modelli già pronti. Se fai clic sull'icona della cartella all'interno del corpo dell'editor, puoi vedere a quali modelli di intestazione hai accesso:

Se stai utilizzando Elementor, ti consigliamo di sfruttare questi modelli. Ciò ti consente di sperimentare più stili di intestazione, che puoi modificare aggiungendo o personalizzando moduli:

Se non hai familiarità con l'utilizzo di Elementor, questo generatore di pagine ti consente di selezionare i moduli utilizzando il menu a sinistra. Puoi trascinare questi moduli sulla tua pagina, che appare in anteprima sul lato destro dello schermo.

Quando utilizzi Theme Builder, stai solo modificando un modello di tema specifico. Tuttavia, puoi comunque utilizzare l'intera gamma di moduli e opzioni di configurazione che Elementor offre.

Dopo aver terminato di modificare il modello di intestazione, salvalo utilizzando il pulsante Pubblica . Quindi, Elementor ti chiederà di scegliere su quali pagine visualizzare il modello:

A meno che tu non stia già pagando per una licenza Elementor premium, lo strumento Theme Builder potrebbe non giustificare l'acquisto da solo. Fa esattamente ciò che fa l'editing completo del sito, ma a un costo aggiuntivo. La differenza principale è che puoi utilizzare la più ampia gamma di moduli di Elementor e, se stai già utilizzando Elementor, sarà più facile assicurarti che il design dell'intestazione sia coerente con il resto del tuo sito.

4. Aggiungi codice personalizzato all'intestazione utilizzando un plug-in

In genere, l'utilizzo dei plug-in è il modo più semplice per implementare le personalizzazioni in WordPress. Tuttavia, di solito non è il caso delle intestazioni. Se desideri un plug-in che ti consenta di modificare visivamente le intestazioni, dovrai utilizzare un generatore di pagine. La maggior parte dei page builder che offrono questa funzionalità hanno un prezzo premium, come discusso nella sezione precedente.

I plugin gratuiti che ti consentono di personalizzare l'intestazione in genere offrono solo un modo più semplice per aggiungere codice personalizzato ad essa. L'alternativa è modificare manualmente i file del tema utilizzando un tema figlio, che può essere intimidatorio (e rischioso) a meno che tu non abbia esperienza di sviluppo web.

Un fantastico esempio di tale plugin è Header Footer Code Manager. Questo strumento ti consente di aggiungere snippet HTML, CSS e JavaScript all'intestazione e/o al piè di pagina e scegliere su quali pagine verranno caricati questi snippet:

Una volta che il plug-in è attivo, vai alla pagina HFCM > Aggiungi nuovi frammenti nella dashboard. Qui puoi selezionare il tipo di snippet che desideri aggiungere, dove deve essere visualizzato e se aggiungerlo all'intestazione o al piè di pagina:

Se prevedi di aggiungere nuovi elementi all'intestazione, dovrai utilizzare HTML. Per cambiare lo stile dell'intestazione e gli elementi che contiene, ti consigliamo di utilizzare i frammenti CSS.

Lo svantaggio principale di questo approccio è che è necessario controllare il codice dell'intestazione per vedere quali classi e ID utilizza, al fine di aggiungervi CSS. Questo può essere un processo che richiede tempo quando aggiungi nuovi frammenti di codice, controlli se le modifiche funzionano e modifichi il codice finché non sei soddisfatto dei risultati.

Personalizza oggi stesso l'intestazione di WordPress

Hai domande su come modificare la tua intestazione in WordPress? Parliamo di loro nella sezione commenti qui sotto!