Come personalizzare header e footer in WordPress con il Site Editor

Come personalizzare header e footer in WordPress con il Site Editor

L’header e il footer sono le due aree più importanti di un sito WordPress: l’header contiene il logo, il menu di navigazione e spesso una call to action, mentre il footer include link utili, informazioni di contatto e i crediti. Con l’introduzione del Site Editor (editor del sito) in WordPress, puoi personalizzare entrambe le aree visivamente, senza toccare codice. Ecco come farlo.

Cos’è il Site Editor e come accedervi

Il Site Editor è l’evoluzione del Customizer di WordPress. È disponibile con i temi a blocchi (block theme) come Twenty Twenty-Five e altri temi compatibili con il Full Site Editing. A differenza del vecchio Customizer, il Site Editor ti permette di modificare ogni parte del sito usando i blocchi di Gutenberg.

Per accedere al Site Editor:

1. Vai su Aspetto → Editor nel pannello admin.
2. Si apre l’editor visuale del sito con una vista della homepage.
3. Nel menu laterale, clicca su Template parts (Parti del template) per trovare Header e Footer.
4. In alternativa, clicca direttamente sull’header o il footer nella preview per selezionarli e modificarli.

Nota: se usi un tema classico (non a blocchi), il Site Editor non è disponibile. In quel caso, dovrai personalizzare header e footer tramite il Customizer, i widget o modificando i file del tema.

Personalizzare l’header

Seleziona l’header nel Site Editor e potrai modificarlo come qualsiasi altro contenuto a blocchi. Le personalizzazioni più comuni:

Cambiare il logo:

1. Clicca sul blocco del logo nell’header.
2. Seleziona Sostituisci per caricare un nuovo logo.
3. Nelle impostazioni del blocco (pannello destro), imposta la larghezza massima del logo.
4. Attiva l’opzione “Link alla homepage” se non è già attiva.

Modificare il menu di navigazione:

1. Clicca sul blocco Navigazione nell’header.
2. Per aggiungere voci, clicca il + all’interno del blocco navigazione.
3. Puoi aggiungere link a pagine, categorie, URL personalizzati o sottomenu.
4. Per riordinare le voci, trascinale nella posizione desiderata.
5. Nelle impostazioni del blocco, puoi configurare il menu mobile (hamburger menu) con opzioni per il punto di rottura e lo stile dell’overlay.

Aggiungere elementi all’header:

• Barra di ricerca: aggiungi il blocco “Cerca” per permettere ai visitatori di cercare nel sito direttamente dall’header.
• Icone social: il blocco “Icone social” aggiunge link ai tuoi profili con le icone ufficiali dei social network.
• Pulsante CTA: aggiungi un blocco “Bottone” con un link alla tua pagina di contatto o al servizio principale.

Personalizzare il footer

Il footer è spesso trascurato, ma è un’area strategica. Selezionalo nel Site Editor e personalizzalo:

Struttura tipica di un footer professionale:

• Colonne informative: usa il blocco “Colonne” per creare 3-4 sezioni affiancate (Chi siamo, Link utili, Contatti, Social).
• Link di navigazione: aggiungi un blocco “Navigazione” con link a pagine importanti come Privacy Policy, Cookie Policy, Termini e Condizioni.
• Informazioni di contatto: indirizzo, email, telefono in un blocco Paragrafo.
• Copyright: aggiungi un blocco Paragrafo con il testo del copyright. Puoi usare il shortcode dell’anno corrente per mantenerlo aggiornato automaticamente.

Aggiungere widget al footer:

Nel Site Editor, i widget tradizionali sono sostituiti dai blocchi. Puoi aggiungere qualsiasi blocco nel footer: articoli recenti, form di iscrizione alla newsletter, mappa di Google, orari di apertura e altro.

Usare i pattern per header e footer

WordPress offre una libreria di pattern (modelli predefiniti) per header e footer. Invece di costruire da zero, puoi partire da un pattern e personalizzarlo:

1. Nel Site Editor, seleziona l’header o il footer.
2. Clicca sull’icona + per aggiungere un blocco.
3. Cerca “pattern” o naviga nella tab Pattern.
4. Filtra per “Header” o “Footer” per vedere i pattern disponibili.
5. Inserisci il pattern che preferisci e personalizzalo.

Puoi anche trovare pattern aggiuntivi nella Pattern Directory di WordPress.org, dove la community condivide design pronti all’uso.

Personalizzare header e footer con temi classici

Se usi un tema classico (non a blocchi), hai queste opzioni:

• Customizer: vai su Aspetto → Personalizza per modificare logo, titolo del sito, menu e widget nelle aree del footer.
• Widget: vai su Aspetto → Widget per aggiungere widget nelle aree del footer definite dal tema.
• Menu: vai su Aspetto → Menu per creare e assegnare menu alle posizioni definite dal tema (header, footer, sidebar).
• CSS personalizzato: per modifiche estetiche, aggiungi CSS nel Customizer → CSS aggiuntivo.
• Tema child: per modifiche strutturali, crea un tema child e sovrascrivi i file header.php e footer.php.

Errori da evitare

Quando personalizzi header e footer, evita questi errori comuni:

• Header troppo alto: un header che occupa troppo spazio verticale spinge il contenuto in basso, peggiorando l’esperienza utente soprattutto su mobile.
• Troppi elementi nel menu: un menu con 15+ voci è confuso. Raggruppa le voci in sottomenu o usa un mega menu.
• Footer senza link legali: Privacy Policy e Cookie Policy sono obbligatori per legge in Europa. Assicurati che siano linkati nel footer.
• Dimenticare il mobile: testa sempre l’aspetto di header e footer su smartphone. Il Site Editor ha un’anteprima mobile integrata.

Serve assistenza?

Se vuoi un header e un footer professionali per il tuo sito WordPress, o hai bisogno di personalizzazioni avanzate che vanno oltre il Site Editor, il team di SoccorsoWP può creare il design perfetto per te. Apri un ticket e migliora l’aspetto del tuo sito.