Del Intestazione è la parte superiore del tuo sito web WordPress ed è uno dei primi elementi che i visitatori vedono. A seconda del sito web, include ad esempio il tuo logo, la navigazione principale, un'immagine di sfondo, i dati di contatto o un pulsante.
Se tu Modificare l'immagine di intestazione in WordPress tuttavia, questa voce di menu non è presente su ogni sito web. Il percorso esatto dipende dal tema che utilizzi e da come è stato strutturato l'header del tuo sito web.
Nei temi classici di WordPress, la personalizzazione avviene spesso tramite il Personalizzatore. I temi a blocchi moderni utilizzano il Editor di siti web. Altri temi possiedono proprie impostazioni dell'intestazione e nei siti web con Elementor o un altro page builder, l'intestazione potrebbe essere stata creata completamente al di fuori delle normali impostazioni del tema WordPress.
In questa guida ti mostriamo come scoprire quale metodo utilizza il tuo sito Web e come adattare in sicurezza il logo, l'immagine dell'intestazione e altri elementi nella sezione di intestazione.
Breve spiegazione: Se tu sotto Design la voce di menu Personalizzatore trovi, il tuo tema potrebbe essere modificato tramite esso. Nel caso di un block theme, troverai invece solitamente Design → Editor. Se il tuo sito web utilizza un page builder o un tema con un proprio header builder, devi modificare l'intestazione lì.
Cos'è l'intestazione di un sito Web WordPress? #
Come header si intende solitamente la parte superiore di un sito web. Spesso compare su tutte o almeno su molte pagine nella stessa forma o in una forma simile.
Un tipico intestatario di un sito web può contenere i seguenti elementi:
- Logo
- Nome del sito web
- Navigazione principale
- Immagine di intestazione o immagine di sfondo
- Funzione di ricerca
- Informazioni di contatto
- Link ai social media
- Pulsante di invito all'azione
- Selezione della lingua
- Carrello in WooCommerce
Quali elementi siano presenti è determinato principalmente dal tuo tema e dalla progettazione individuale del tuo sito web.
Header, headerbild und beitragsbild non sono la stessa cosa #
Prima di modificare qualsiasi cosa, dovresti distinguere a quale immagine ti riferisci realmente.
Uno Immagine di intestazione l'immagine di sfondo dell'intestazione appartiene all'area di design superiore del sito web. Un Logo è solitamente un elemento separato all'interno dell'intestazione.
Il Immagine in evidenza L'immagine in evidenza appartiene invece a un determinato articolo o a una pagina. A seconda del tema, questa immagine può essere visualizzata in grande anche nella parte superiore della pagina, ma tecnicamente non si tratta necessariamente dell'immagine di intestazione vera e propria.
Tipico errore: Se sostituisci l'immagine in evidenza di una pagina e l'immagine grande nella parte superiore cambia, probabilmente non è stata modificata un'immagine di intestazione globale. In questo caso il tuo tema utilizza l'immagine in evidenza come immagine del titolo o hero per la rispettiva pagina.
Perché la gestione dell'intestazione non è uguale per ogni sito WordPress? #
WordPress fornisce la base tecnica, ma il tema attivo determina gran parte della presentazione.
Nel corso dello sviluppo di WordPress sono inoltre nati diversi sistemi per la progettazione dei temi.
Oggi ti imatti principalmente nelle seguenti varianti:
- temi classici con il Customizer di WordPress
- Temi a blocchi con l'editor di siti web
- Temi con header builder integrato
- Costruttore di pagine come Elementor con le proprie funzioni di tema o intestazione
Perciò una guida con l'affermazione generale „Clicca su Design → Customizer → Immagine dell'intestazione“ sarebbe semplicemente errata per molti siti web WordPress attuali.
Prima scoprire quale tema è attivo #
Prima di cercare le impostazioni dell'intestazione, dovresti sapere quale tema WordPress utilizza il tuo sito web.
Verifica il tema attivo #
- Accedi all'area di amministrazione di WordPress.
- Apri Design → Temi.
- Cerco il tema che come „Attivo“ contrassegnato.
- Prendi nota del nome del tema.
Se non sai ancora come aprire l'area di amministrazione di WordPress, trovi le istruzioni complete su Accesso a WordPress: come effettuare il login nell'area amministrativa.
Metodo 1: Modificare l'intestazione in un tema WordPress classico #
Molti temi classici utilizzano il Personalizzatore di WordPress. Se il tuo tema supporta questa funzione, di solito la trovi sotto Design la voce di menu corrispondente.
Apri:
Design → Personalizzatore
Le impostazioni disponibili dipendono interamente dal tema utilizzato.
A titolo di esempio, le possibili aree potrebbero essere:
- Informazioni sul sito web
- Intestazione
- Immagine di intestazione
- Contenuto multimediale dell'intestazione
- Logo
- Layout
- Menu
Non tutti i temi classici offrono tutte queste opzioni.
Sostituire l'immagine di intestazione tramite il personalizzatore #
Se il tuo tema offre una sezione per l'immagine dell'intestazione nel personalizzatore, di solito puoi sostituire un'immagine esistente o caricarne una nuova.
Modifica l'immagine dell'intestazione nel personalizzatore #
- Apri Design → Personalizzatore.
- Cerca Intestazione, Immagine di intestazione o di un'impostazione con denominazione simile.
- Fai clic sull'immagine esistente o sulla funzione per aggiungere o modificare un'immagine.
- Seleziona un'immagine dalla libreria multimediale di WordPress o caricane una nuova.
- Ritaglia l'immagine se necessario in base alle specifiche del tema.
- Controlla l'anteprima.
- Salva o pubblica la modifica.
La dicitura esatta dei pulsanti può variare leggermente a seconda del tema e della versione di WordPress.
Perché non trovo il customizer sotto Aspetto? #
Se sotto Design non viene visualizzato alcun personalizzatore normale, non si tratta automaticamente di un errore.
Stai probabilmente utilizzando un moderno Tema a blocchi. Tali temi vengono progettati tramite l'editor di siti WordPress.
In questo caso trovi solitamente:
Design → Editor
Invece di configurare singole aree del tema tramite il classico personalizzatore, lì puoi modificare template e parti di template con i blocchi di WordPress.
Metodo 2: Modificare l'intestazione con l'editor del sito di WordPress #
In un tema a blocchi, l'intestazione è solitamente un cosiddetto Sezione del modello.
Apri prima:
Design → Editor
A seconda della versione di WordPress e del tema, lì puoi modificare la grafica del tuo sito web, i template e i modelli o le parti di template.
Apri l'intestazione o un modello che contiene l'intestazione.
Nell'editor puoi quindi modificare i blocchi utilizzati al suo interno.
Un header WordPress moderno può consistere, ad esempio, nei seguenti blocchi:
- Logo del sito web
- Titolo del sito web
- Navigazione
- Immagine
- Copertina
- Gruppo
- Pulsanti
- Icone social
Modificare l'immagine di intestazione in un tema a blocchi #
Se l'immagine di intestazione visibile sopra un Blocco immagine seleziona questo block e sostituisci l'immagine tramite la sua barra degli strumenti o le sue impostazioni.
È stato lo sfondo con un Blocco copertina creato, devi invece cambiare l'immagine di sfondo di questo blocco.
Questa è una differenza importante: nei block-theme non esiste necessariamente un'impostazione centrale denominata „Immagine di testata“. L'immagine può semplicemente fare parte del layout dell'intestazione.
Suggerimento: Se nell'editor del sito non riconosci quale elemento genera l'immagine, apri la vista elenco dell'editor. Lì vedrai la struttura dei blocchi utilizzati e potrai identificare più facilmente i blocchi immagine, copertina o gruppo.
Le modifiche all'intestazione globale si riflettono su più pagine #
Quando si elabora un'intestazione bisogna tenere presente che si tratta spesso di un sezione del sito utilizzata a livello globale agisce.
Se, ad esempio, modifichi il logo o un'immagine nell'intestazione globale, la modifica può apparire automaticamente su tutte le pagine che utilizzano quell'intestazione.
Controlla quindi prima di salvare se desideri davvero modificare l'intestazione globale o semplicemente l'immagine di copertina di una singola pagina.
Metodo 3: Tema con un proprio header builder #
Alcuni temi WordPress forniscono propri strumenti per la progettazione dell'intestazione.
Il funzionamento esatto varia a seconda del tema. Le possibili denominazioni sono, ad esempio:
- Costruttore di intestazioni
- Opzioni tema
- Impostazioni tema
- Layout dell'intestazione
- Costruttore di siti web
In questo caso dovresti usare le impostazioni fornite dal tema e non cercare di modificare l'intestazione tramite una voce di menu pensata per un altro tema.
Di conseguenza, quando cambi tema, anche le impostazioni dell'intestazione disponibili possono cambiare completamente.
Metodo 4: Modifica dell'intestazione con Elementor #
Se il tuo sito WordPress con Elementor è stato creato, bisogna fare una distinzione tra i normali contenuti della pagina e un'intestazione globale creata con Elementor.
Utilizzando le relative funzioni di Elementor, è possibile creare un header come template personalizzato e assegnarlo a determinate aree del sito web.
In un caso del genere, non serve a nulla cercare l'immagine dell'intestazione nel normale customizer di WordPress, se l'intera intestazione visibile è in realtà generata da Elementor.
Apri invece i relativi template di Elementor o il Theme Builder e verifica quale template di intestazione è attivo.
Importante: Non modificare contemporaneamente l'intestazione del tema e un'intestazione creata con un page builder, se non sai quale viene effettivamente visualizzata. Altrimenti, potresti modificare impostazioni che non sono affatto visibili sul sito web.
Modificare il logo in WordPress #
Se in realtà non l'immagine di intestazione, ma Logo desideri sostituire, il percorso dipende anche dal tema.
Nei temi classici trovi spesso l'impostazione del logo nel Customizer in una sezione come:
Informazioni sul sito web
o nelle impostazioni dell'intestazione del tema.
Nei temi a blocchi viene spesso utilizzato il blocco Logo del sito web usato. Puoi selezionarlo nell'editor del sito web e sostituire il logo memorizzato.
Nei temi o nei page builder con un proprio sistema di intestazione, il logo potrebbe trovarsi direttamente all'interno dell'intestazione creata lì.
Non confondere il logo con l'immagine di intestazione #
Il logo rappresenta solitamente il marchio o l'azienda. L'immagine di intestazione, invece, è un elemento di design e può mostrare, ad esempio, un paesaggio, un prodotto, un'illustrazione o uno sfondo.
Dal punto di vista tecnico, perciò, i due elementi vengono spesso gestiti separatamente.
Se desideri semplicemente sostituire il logo della tua azienda, non dovresti sostituire l'intera immagine di sfondo dell'intestazione.
Quali dimensioni dovrebbe avere un'immagine di intestazione di WordPress? #
Non esiste una dimensione di pixel ottimale universale per le immagini di intestazione di WordPress.
Le dimensioni richieste dipendono, tra le altre cose, da:
- del tema utilizzato
- del layout di pagina
- l'altezza dell'intestazione
- della larghezza massima del contenuto
- della visualizzazione sui dispositivi mobili
- del formato utilizzato
- il genere dell'immagine
Un tema potrebbe ad esempio utilizzare un'immagine di intestazione molto ampia e piatta, mentre un altro sito web visualizza una grande immagine hero a tutta larghezza dello schermo.
Pertanto, orientati innanzitutto sulle raccomandazioni o sulla presentazione del tuo tema.
Non caricare semplicemente immagini enormi #
Un problema comune è costituito da file di immagine inutilmente grandi.
Una fotocamera moderna o uno smartphone possono generare immagini larghe diverse migliaia di pixel e con una dimensione di diversi megabyte. Utilizzare un'immagine originale di questo tipo senza controlli come intestazione di un sito web non è solitamente una buona idea.
Un'immagine di intestazione dovrebbe essere grande solo quanto è necessario per la sua effettiva visualizzazione.
I file inutilmente grandi possono:
- aumentare il tempo di caricamento
- trasmettere più dati
- consumare larghezza di banda inutile sui dispositivi mobili
- peggiorare la velocità percepita del sito web
Soprattutto le immagini grandi nella parte superiore visibile della pagina possono essere particolarmente rilevanti per le performance.
Quale formato di file è adatto per le immagini di intestazione? #
La scelta del formato d'immagine più opportuno dipende dal soggetto e dalle funzioni richieste.
I formati tipici sono:
- JPEG/JPG: adatto per fotografie e soggetti con molte sfumature di colore
- PNG: utile quando è necessaria trasparenza o sono disponibili determinate grafiche
- WebP: moderno formato web con una buona compressione per molti tipi di immagini
- AVIF: formato immagine moderno ed efficiente, a patto che sia supportato in modo utile nel tuo specifico flusso di lavoro
- SVG: particolarmente adatto per grafica vettoriale e loghi, ma deve essere usato con cautela per motivi di sicurezza
Per un'immagine d'intestazione fotografica, un PNG enorme non è solitamente una scelta sensata. Per un logo scontornato con sfondo trasparente, invece, il PNG può essere adatto.
Controlla l'immagine dell'intestazione per desktop e smartphone #
Un'immagine di intestazione che appare perfetta su un grande monitor desktop può essere visualizzata in modo problematico su uno smartphone.
Nei layout responsivi la larghezza disponibile varia notevolmente. Perciò, a seconda delle impostazioni CSS, le immagini di sfondo potrebbero essere ritagliate.
Controlla dopo ogni modifica almeno:
- Visualizzazione desktop
- Visualizzazione tablet
- Visualizzazione per smartphone
Gli elementi importanti dell'immagine non dovrebbero essere così vicini al bordo da essere tagliati in caso di visualizzazione più stretta.
Non inserire il testo direttamente nell'immagine di intestazione #
Se nel campo dell'intestazione deve comparire un titolo, un'offerta o un pulsante, normalmente dovresti posizionare questo testo come vero contenuto HTML sopra o davanti all'immagine, anziché incorporarlo direttamente nel file dell'immagine.
Ciò presenta diversi vantaggi:
- Il testo rimane più leggibile su diverse dimensioni dello schermo
- I contenuti possono essere modificati più facilmente
- I motori di ricerca possono rilevare il testo come contenuto
- I lettori di schermo possono elaborare il testo
- Le traduzioni sono molto più semplici
- I pulsanti rimangono veri controlli cliccabili
Un'immagine di intestazione dovrebbe quindi essere principalmente un elemento visivo e non servire come sostituto di importanti contenuti del sito web.
Come usare correttamente il testo alternativo per l'immagine di intestazione #
Se un'immagine necessiti di un testo alternativo e cosa debba contenere dipende dalla sua funzione.
Se l'immagine trasmette informazioni importanti, è opportuno inserire un testo alternativo significativo.
Se invece l'immagine d'intestazione è puramente decorativa e non trasmette informazioni aggiuntive, dal punto di vista dell'accessibilità non dovrebbe essere dotata inutilmente di una descrizione. Le immagini decorative dovrebbero essere integrate in modo tale che le tecnologie assistive possano saltarle.
Inoltre, un testo alternativo non è il posto per un elenco di parole chiave SEO.
Esempio: La foto di un determinato edificio aziendale può richiedere un testo alternativo descrittivo se il soggetto è rilevante per il contenuto. Un gradiente di colore astratto dietro a un titolo H1 già esistente, invece, solitamente non richiede alcuna descrizione testuale aggiuntiva.
Immagine dell'intestazione modificata, ma sul sito web compare ancora la vecchia immagine #
Se hai modificato e salvato l'immagine dell'intestazione ma continui a vedere la versione precedente, la causa potrebbe essere la cache.
L'immagine potrebbe inoltre essere memorizzata nella cache, ad esempio, tramite:
- il tuo browser
- un plugin di cache per WordPress
- caching lato server
- un CDN
- un page builder
Testa prima il sito Web in una finestra di navigazione in incognito o esegui un ricaricamento completo.
Se continua ad apparire la vecchia immagine, controlla i sistemi di cache utilizzati.
L'immagine di intestazione non viene visualizzata su alcune pagine #
Se l'immagine di intestazione manca solo su determinate pagine, il tuo sito web potrebbe utilizzare modelli o intestazioni differenti.
Questo è possibile, ad esempio, presso:
- di uno speciale modello di pagina iniziale
- Pagine di blog e archivi
- Pagine WooCommerce
- Landing page
- Modelli Elementor con diverse condizioni di visualizzazione
- template WordPress personalizzati
Verifica quindi prima se davvero tutte le pagine utilizzano la stessa intestazione.
L'immagine di intestazione viene tagliata #
Con gli sfondi è normale che parti di un'immagine vengano tagliate a seconda del formato dello schermo.
Questo accade spesso quando l'immagine viene ridimensionata in modo da riempire l'intera area disponibile.
Se parti importanti del soggetto scompaiono, a seconda del design utilizzato, puoi ad esempio:
- modificare la posizione dell'immagine di sfondo
- regolare l'altezza dell'area dell'intestazione
- utilizzare un'immagine con un formato più adatto
- inserire un'immagine diversa per i dispositivi mobili
- ritagliare il motivo in modo diverso prima del caricamento
Le possibilità a disposizione dipendono dal tema, dal blocco o dal page builder.
L'immagine di intestazione risulta sfocata #
Un'immagine di intestazione sfocata può verificarsi se il file caricato è troppo piccolo per l'area visualizzata.
Se, ad esempio, un'immagine molto piccola viene ingrandita sull'intera larghezza dello schermo, mancano informazioni sufficienti sull'immagine per una visualizzazione nitida.
Usa quindi una risoluzione che corrisponda alla visualizzazione massima effettiva, senza caricare file originali inutilmente enormi.
L'immagine di intestazione causa scarsi tempi di caricamento #
Una grande immagine nella parte superiore visibile di un sito web può avere un impatto significativo sul tempo di caricamento percepito.
Se la tua immagine di intestazione è grande diversi megabyte, dovresti ottimizzarla.
Verifica in particolare:
- Dimensioni dell'immagine
- Dimensione del file
- Formato file
- Compressione
- output di immagini responsive
Una buona ottimizzazione delle immagini non cerca di ridurre al massimo la qualità dell'immagine, ma di raggiungere un rapporto ragionevole tra qualità visiva e dimensione del file.
Non sottoporre l'immagine hero a un lazy loading sconsiderato #
Le immagini che compaiono solo più in basso in una pagina possono spesso essere caricate in ritardo. Questa procedura viene chiamata Caricamento differito definito.
Nel caso di un'immagine di intestazione o di un hero image grande e centrale nell'area immediatamente visibile, un caricamento ritardato non è invece automaticamente utile.
Se un'immagine importante per la visualizzazione iniziale viene caricata troppo tardi, il tempo di caricamento percepito potrebbe peggiorare.
Le impostazioni delle prestazioni non dovrebbero quindi essere applicate secondo il principio „Lazy loading per ogni immagine“.
Modifica il menu dell'intestazione #
Se non desideri modificare l'immagine, ma la navigazione nell'intestazione, si tratta della Gestione dei menu di WordPress.
A seconda del tema, anche questa operazione avviene in modo diverso nei block theme classici e moderni.
Trattiamo quindi la configurazione completa separatamente nella nostra guida Creare e gestire menu in WordPress.
Non modificare l'header direttamente nei file del tema #
Nei temi classici esistono spesso file PHP come:
header.php
Ciò non significa però che tu debba modificare direttamente questo file per una normale modifica del logo o dell'immagine dell'intestazione.
Le modifiche dirette ai file di un tema padre possono essere sovrascritte durante un aggiornamento del tema.
Inoltre, anche un piccolo errore nel codice PHP può fare sì che parti del sito web non funzionino più.
Utilizza quindi prima le funzioni previste del tema, di WordPress o del page builder.
Se sono effettivamente necessarie modifiche personali ai file del tema, è un Tema figlio di WordPress spesso l'approccio tecnicamente migliore.
Cambiare tema solo perché non è facile modificare l'intestazione? #
Il cambio di tema non dovrebbe essere affrontato alla leggera.
Il tema influisce ben oltre la sola intestazione. Un cambio può avere conseguenze su:
- Layout
- Navigazione
- Widget
- Caratteri
- Colori
- Modelli
- Funzioni specifiche del tema
- Visualizzazione dei contenuti esistenti
Se ti manca semplicemente un'impostazione dell'intestazione, dovresti prima verificare quali opzioni offre il tema esistente.
Spieghiamo come installare correttamente i nuovi temi nella nostra guida su Installazione di un nuovo tema WordPress.
Prima di apportare modifiche importanti all'intestazione, verificare la configurazione esistente #
Per una semplice modifica di un logo di solito non è necessaria una preparazione approfondita.
Se tuttavia desideri ridisegnare completamente l'intestazione, dovresti prima capire come è stata strutturata.
Verifica in particolare:
- quale tema è attivo
- se viene utilizzato un child theme
- se l'intestazione è stata creata tramite il Customizer
- se viene utilizzato un block theme
- che Elementor o un altro Page Builder generi l'intestazione
- se esistono intestazioni diverse per pagine diverse
Solo allora dovresti apportare modifiche maggiori.
Modificare l'intestazione su un ambiente di staging o di test #
In caso di modifiche estese a un sito Web aziendale di produzione o a un negozio online, può essere utile provare prima il nuovo design in un ambiente di test.
In questo modo puoi controllare il layout, la navigazione e la visualizzazione responsive senza che i visitatori vedano un header non finito durante la modifica.
Anche un'installazione di WordPress clonata può essere utile per questo tipo di lavoro. Spieghiamo come copiare un'installazione esistente con Softaculous su Clonare WordPress con Softaculous.
Errori tipici durante la modifica dell'intestazione di WordPress #
- confondere l'immagine di intestazione con l'immagine in evidenza
- cercare nel Customizer nonostante si utilizzi un block theme
- modificare l'intestazione del tema, anche se Elementor genera l'intestazione visibile
- apportare modifiche globali anziché modificarne una sola pagina
- caricare immagini originali grandi diversi megabyte
- controllare l'immagine solo su un PC desktop
- integrare il testo importante direttamente nell'immagine
- Riempire i testi alt di parole chiave
- Modificare direttamente i file del tema
- non considerare la cache dopo una modifica
Nota: Se non trovi l'immagine di testata dove la descrive un'altra guida, WordPress non è automaticamente configurato in modo errato. Molto probabilmente il tuo sito web sta semplicemente utilizzando un tema o un sistema di intestazione diverso.
Quando dovresti contattare il supporto di CURIAWEB? #
Se come cliente di CURIAWEB non riesci a scoprire da cosa viene generato l'intestazione del tuo sito web WordPress, puoi contattare il nostro supporto.
Comunicaci, se possibile:
- quale dominio è interessato
- quale tema usi
- quale elemento desideri modificare
- se Elementor o un altro page builder è installato
- ciò che hai già provato
Ciò consente di determinare molto più rapidamente se l'intestazione è gestita tramite WordPress, il tema o un page builder.
Riepilogo #
Come modificare un'immagine dell'intestazione in WordPress dipende dalla struttura del tuo sito web. I temi classici utilizzano spesso il Personalizzatore di WordPress, mentre i moderni block-theme tramite Design → Editor e l'editor del sito può essere adattato. I temi con il proprio generatore di intestazioni e page builder come Elementor possono a loro volta utilizzare modalità di gestione completamente proprie.
Controlla quindi prima sotto Design → Temi, quale tema è attivo e da cosa viene effettivamente generato il tuo header. Inoltre, non confondere l'immagine di intestazione globale con il logo o l'immagine in evidenza di una singola pagina.
Se desideri modificare anche la navigazione nell'intestazione, troverai le istruzioni corrispondenti su Creare e gestire menu in WordPress. Per le modifiche al codice del tema, non dovresti modificare direttamente il tema padre. Per questo spiegheremo più avanti l'uso di un Tema child di WordPress.
