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
Welche Möglichkeiten zur Verfügung stehen, hängt von Theme, Block oder Page Builder ab.
Headerbild wirkt unscharf #
Ein unscharfes Headerbild kann entstehen, wenn die hochgeladene Datei für die dargestellte Fläche zu klein ist.
Wird beispielsweise ein sehr kleines Bild über die gesamte Bildschirmbreite vergrössert, fehlen ausreichend Bildinformationen für eine scharfe Darstellung.
Verwende deshalb eine Auflösung, die zur tatsächlichen maximalen Darstellung passt, ohne unnötig riesige Originaldateien hochzuladen.
Headerbild verursacht schlechte Ladezeiten #
Ein grosses Bild im oberen sichtbaren Bereich einer Website kann erheblichen Einfluss auf die wahrgenommene Ladezeit haben.
Wenn dein Headerbild mehrere Megabyte gross ist, solltest du es optimieren.
Verifica in particolare:
- Bildabmessungen
- Dateigrösse
- Dateiformat
- Komprimierung
- responsive Bildausgabe
Eine gute Bildoptimierung versucht nicht, die Bildqualität maximal zu reduzieren, sondern ein vernünftiges Verhältnis zwischen visueller Qualität und Dateigrösse zu erreichen.
Hero-Bild nicht gedankenlos Lazy Loading unterwerfen #
Bilder, die erst weit unten auf einer Seite erscheinen, können häufig verzögert geladen werden. Dieses Verfahren wird als Lazy Loading definito.
Bei einem grossen zentralen Header- oder Hero-Bild im unmittelbar sichtbaren Bereich ist eine verzögerte Ladung dagegen nicht automatisch sinnvoll.
Wenn ein für die anfängliche Darstellung wichtiges Bild zu spät geladen wird, kann sich die wahrgenommene Ladezeit verschlechtern.
Performance-Einstellungen sollten deshalb nicht nach dem Prinzip „Lazy Loading für jedes Bild“ vorgenommen werden.
Header-Menü ändern #
Wenn du nicht das Bild, sondern die Navigation im Header ändern möchtest, handelt es sich um die WordPress-Menüverwaltung.
Je nach Theme erfolgt auch diese bei klassischen und modernen Block-Themes unterschiedlich.
Die vollständige Einrichtung behandeln wir deshalb separat in unserer Anleitung Creare e gestire menu in WordPress.
Header nicht direkt in Theme-Dateien bearbeiten #
Bei klassischen Themes existieren häufig PHP-Dateien wie:
header.php
Das bedeutet aber nicht, dass du für eine normale Änderung des Logos oder Headerbildes direkt diese Datei bearbeiten solltest.
Direkte Änderungen an den Dateien eines Parent-Themes können bei einem Theme-Update überschrieben werden.
Ausserdem kann bereits ein kleiner Fehler im PHP-Code dazu führen, dass Teile der Website nicht mehr funktionieren.
Nutze deshalb zuerst die vorgesehenen Theme-, WordPress- oder Page-Builder-Funktionen.
Wenn tatsächlich eigene Änderungen an Theme-Dateien notwendig sind, ist ein Tema figlio di WordPress häufig der technisch bessere Ansatz.
Theme wechseln, nur weil sich der Header nicht einfach ändern lässt? #
Ein Theme-Wechsel sollte nicht leichtfertig durchgeführt werden.
Das Theme beeinflusst weit mehr als nur den Header. Ein Wechsel kann Auswirkungen haben auf:
- Layout
- Navigazione
- Widget
- Schriftarten
- Colori
- Modelli
- Theme-spezifische Funktionen
- Darstellung bestehender Inhalte
Wenn dir lediglich eine Header-Einstellung fehlt, solltest du zuerst prüfen, welche Möglichkeiten das vorhandene Theme bietet.
Wie neue Themes korrekt installiert werden, erklären wir in unserer Anleitung zum Installieren eines neuen WordPress-Themes.
Vor grösseren Header-Änderungen die bestehende Konfiguration prüfen #
Bei einer einfachen Änderung eines Logos ist normalerweise keine umfangreiche Vorbereitung erforderlich.
Wenn du jedoch den kompletten Header neu gestalten möchtest, solltest du zunächst verstehen, wie dieser aufgebaut wurde.
Verifica in particolare:
- welches Theme aktiv ist
- ob ein Child-Theme verwendet wird
- ob der Header über den Customizer erstellt wurde
- ob ein Block-Theme verwendet wird
- ob Elementor oder ein anderer Page Builder den Header erzeugt
- ob unterschiedliche Header für verschiedene Seiten existieren
Erst danach solltest du grössere Änderungen vornehmen.
Header auf einer Staging- oder Testumgebung ändern #
Bei umfangreichen Änderungen an einer produktiven Unternehmenswebsite oder einem Onlineshop kann es sinnvoll sein, die neue Gestaltung zunächst in einer Testumgebung auszuprobieren.
So kannst du Layout, Navigation und responsive Darstellung kontrollieren, ohne dass Besucher während der Bearbeitung einen unfertigen Header sehen.
Für solche Arbeiten kann auch eine geklonte WordPress-Installation hilfreich sein. Wie du eine bestehende Installation mit Softaculous kopierst, erklären wir unter Clonare WordPress con Softaculous.
Typische Fehler beim Ändern des WordPress-Headers #
- Headerbild und Beitragsbild miteinander verwechseln
- im Customizer suchen, obwohl ein Block-Theme verwendet wird
- den Theme-Header bearbeiten, obwohl Elementor den sichtbaren Header erzeugt
- globale Änderungen vornehmen, obwohl nur eine einzelne Seite geändert werden sollte
- mehrere Megabyte grosse Originalbilder hochladen
- das Bild nur auf einem Desktop-PC kontrollieren
- wichtigen Text direkt in das Bild integrieren
- Alt-Texte mit Keywords vollstopfen
- Theme-Dateien direkt bearbeiten
- nach einer Änderung den Cache nicht berücksichtigen
Nota: Wenn du das Headerbild nicht dort findest, wo eine andere Anleitung es beschreibt, ist WordPress nicht automatisch falsch konfiguriert. Sehr wahrscheinlich verwendet deine Website einfach ein anderes Theme- oder Header-System.
Quando dovresti contattare il supporto di CURIAWEB? #
Wenn du als CURIAWEB-Kunde nicht herausfindest, wodurch der Header deiner WordPress-Website erzeugt wird, kannst du dich an unseren Support wenden.
Teile uns möglichst mit:
- welche Domain betroffen ist
- welches Theme du verwendest
- welches Element du ändern möchtest
- ob Elementor oder ein anderer Page Builder installiert ist
- was du bereits versucht hast
So lässt sich wesentlich schneller feststellen, ob der Header über WordPress, das Theme oder einen Page Builder verwaltet wird.
Riepilogo #
Wie du ein Headerbild in WordPress änderst, hängt vom Aufbau deiner Website ab. Klassische Themes verwenden häufig den Personalizzatore di WordPress, während moderne Block-Themes über Design → Editor und den Website-Editor angepasst werden. Themes mit eigenem Header-Builder und Page Builder wie Elementor können wiederum vollständig eigene Verwaltungswege verwenden.
Prüfe deshalb zuerst unter Design → Temi, welches Theme aktiv ist und wodurch dein Header tatsächlich erzeugt wird. Verwechsle ausserdem das globale Headerbild nicht mit dem Logo oder dem Beitragsbild einer einzelnen Seite.
Wenn du auch die Navigation im Kopfbereich ändern möchtest, findest du die passende Anleitung unter Creare e gestire menu in WordPress. Für Änderungen am Theme-Code solltest du nicht direkt das Parent-Theme bearbeiten. Dafür erklären wir später die Verwendung eines WordPress Child-Themes.
