Le En-tête est la zone supérieure de votre site web WordPress et fait partie des premiers éléments que les visiteurs voient. Selon le site web, il contient par exemple votre logo, la navigation principale, une image d'arrière-plan, des coordonnées ou un bouton.
Si tu Modifier l'image d'en-tête dans WordPress cependant, cet élément de menu n'est pas présent sur tous les sites web. Le chemin exact dépend du thème que tu utilises et de la structure de l'en-tête de ton site web.
Pour les thèmes WordPress classiques, la personnalisation s'effectue souvent via le Personnalisateur. Les thèmes de blocs modernes utilisent le Éditeur de sites web. D'autres thèmes possèdent leurs propres paramètres d'en-tête, et pour les sites web utilisant Elementor ou un autre constructeur de pages, l'en-tête peut avoir été créé entièrement en dehors des paramètres de thème WordPress habituels.
Dans ce guide, nous vous montrons comment découvrir quelle méthode votre site Web utilise et comment modifier en toute sécurité le logo, l'image d'en-tête et d'autres éléments de la zone d'en-tête.
En bref : Si vous sous Conception l'élément de menu Personnalisateur trouves, ton thème est susceptible d'être ajusté via celui-ci. Avec un thème à blocs, tu trouveras généralement à la place Design → Éditeur. Si votre site Web utilise un constructeur de page ou un thème avec son propre générateur d'en-tête, vous devez y modifier l'en-tête.
Qu'est-ce que l'en-tête d'un site Web WordPress ? #
On appelle généralement header la partie supérieure d'un site web. Il apparaît souvent sur toutes les pages, ou du moins sur un grand nombre d'entre elles, sous une forme identique ou similaire.
Un en-tête de site Web typique peut contenir les éléments suivants :
- Logo
- Nom de site web
- Navigation principale
- Image d'en-tête ou image d'arrière-plan
- Fonction de recherche
- Coordonnées
- Liens vers les réseaux sociaux
- Bouton d'appel à l'action
- Sélection de la langue
- Panier WooCommerce
Les éléments présents sont principalement déterminés par votre thème et la conception individuelle de votre site web.
L'en-tête, l'image d'en-tête et l'image à la une ne sont pas la même chose #
Avant de changer quoi que ce soit, tu dois distinguer de quelle image tu parles réellement.
Un Image d'en-tête ou l'image d'arrière-plan de l'en-tête fait partie de la zone de conception supérieure du site Web. Un Logo est généralement un élément séparé dans l'en-tête.
Das Image à la une En revanche, l'image mise en avant appartient à un article ou à une page spécifique. Selon le thème, cette image peut également être affichée en grand format dans la partie supérieure de la page, mais techniquement, il ne s'agit pas nécessairement de l'image d'en-tête proprement dite.
Erreur fréquente : Si vous remplacez l'image mise en avant d'une page et que la grande image dans la partie supérieure change, il est probable qu'aucune image d'en-tête globale n'ait été modifiée. Dans ce cas, votre thème utilise l'image mise en avant comme image de titre ou image "hero" pour la page concernée.
Pourquoi la gestion des en-têtes n'est-elle pas identique sur tous les sites WordPress ? #
WordPress fournit la base technique, mais le thème actif détermine une grande partie de l'affichage.
Au cours du développement de WordPress, différents systèmes de conception de thèmes ont également vu le jour.
Aujourd'hui, tu rencontres principalement les variantes suivantes :
- thèmes classiques avec le customizer WordPress
- Thèmes de blocs avec l'éditeur de site web
- Thèmes avec constructeur d'en-tête intégré
- Constructeur de pages comment Elementor avec ses propres fonctions de thème ou d'en-tête
C'est pourquoi un guide affirmant de manière générale „ Cliquez sur Design → Personnaliser → Image d'en-tête “ serait tout simplement faux pour de nombreux sites Web WordPress actuels.
Commencer par déterminer quel thème est actif #
Avant de chercher les paramètres d'en-tête, vous devez savoir quel thème WordPress utilise votre site web.
Vérifier le thème actif #
- Connectez-vous à l'espace d'administration WordPress.
- Ouvrir Design → Thèmes.
- Recherche du thème qui, en tant que „Actif“ est caractérisé.
- Note le nom du thème.
Si vous ne savez pas encore comment ouvrir l'espace d'administration WordPress, vous trouverez les instructions complètes sur Connexion WordPress : Comment se connecter à l'espace d'administration.
Méthode 1 : Modifier l'en-tête d'un thème WordPress classique #
De nombreux thèmes classiques utilisent le Personnalisateur de WordPress. Si votre thème prend en charge cette fonctionnalité, vous la trouverez généralement sous Conception l'élément de menu correspondant.
Ouvrir :
Design → Personnalisateur
Les paramètres disponibles dépendent entièrement du thème utilisé.
Les domaines possibles peuvent par exemple s'intituler :
- Informations sur le site web
- En-tête
- Image d'en-tête
- Média d'en-tête
- Logo
- Mise en page
- Menus
Tous les thèmes classiques ne proposent pas toutes ces options.
Remplacer l'image d'en-tête via le personnalisateur #
Si ton thème propose une section pour l'image d'en-tête dans le personnalisateur, tu peux généralement y remplacer une image existante ou en télécharger une nouvelle.
Modifier l'image d'en-tête dans le personnalisateur #
- Ouvrir Design → Personnalisateur.
- Rechercher En-tête, Image d'en-tête ou d'un réglage de nom similaire.
- Cliquez sur l'image existante ou sur la fonction permettant d'ajouter ou de modifier une image.
- Choisissez une image dans la médiathèque WordPress ou téléchargez une nouvelle image.
- Recadrez l'image si nécessaire selon les spécifications du thème.
- Vérifiez l'aperçu.
- Enregistrez ou publiez la modification.
La désignation exacte des boutons peut varier légèrement selon le thème et la version de WordPress.
Pourquoi ne trouvé-je pas le customizer sous Design ? #
Si sous Conception si aucun customizer normal n'est affiché, ce n'est pas automatiquement une erreur.
Vous utilisez peut-être un système moderne Thème à blocs. De tels thèmes sont conçus via l'éditeur de site WordPress.
Dans ce cas, vous trouverez généralement :
Design → Éditeur
Au lieu de configurer des zones de thème individuelles via le personnalisateur classique, vous pouvez y modifier des modèles et des parties de modèles avec des blocs WordPress.
Méthode 2 : Modifier l'en-tête avec l'éditeur de site WordPress #
Dans le cas d'un thème à blocs, l'en-tête est généralement ce qu'on appelle un Partie de modèle.
Ouvrez d'abord :
Design → Éditeur
Selon la version de WordPress et le thème, vous pouvez y modifier la conception de votre site Web, des modèles ainsi que des éléments de modèle.
Ouvrez l'en-tête ou un modèle contenant l'en-tête.
Vous pouvez ensuite modifier les blocs utilisés dans l'éditeur.
Un en-tête WordPress moderne peut par exemple être composé des blocs suivants :
- Logo du site Web
- Titre du site web
- Navigation
- Image
- Couvrir
- Groupe
- Boutons
- Icônes de réseaux sociaux
Modifier l'image d'en-tête dans un thème de blocs #
Si l'image d'en-tête visible dépasse Bloc d'images a été intégré, tu sélectionnes ce bloc et tu remplaces l'image via sa barre d'outils ou ses paramètres.
L'arrière-plan a-t-il été fait avec un Bloc de couverture créé, tu dois à la place changer l'image d'arrière-plan de ce bloc.
Il s'agit d'une différence importante : dans le cas des thèmes de blocs, il n'y a pas nécessairement de réglage centralisé nommé „ Image d'en-tête “. L'image peut simplement faire partie de la mise en page de l'en-tête.
Astuce Si vous ne parvenez pas à identifier dans l'éditeur de site quel élément génère l'image, ouvrez la vue en liste de l'éditeur. Vous y verrez la structure des blocs utilisés et pourrez plus facilement identifier les blocs d'image, de couverture ou de groupe.
Les modifications apportées à l'en-tête global s'appliquent à plusieurs pages. #
Lors du traitement d'un en-tête, vous devez garder à l'esprit qu'il s'agit souvent d'un section de site web utilisée à l'échelle mondiale agit.
Par exemple, si vous modifiez le logo ou une image dans l'en-tête global, la modification peut apparaître automatiquement sur toutes les pages qui utilisent cet en-tête.
Vérifiez donc avant d'enregistrer si vous souhaitez vraiment modifier l'en-tête global ou simplement l'image de titre d'une seule page.
Méthode 3 : Thème avec son propre constructeur d'en-tête #
Certains thèmes WordPress proposent leurs propres outils pour la conception de l'en-tête.
Le fonctionnement exact varie selon le thème. Les désignations possibles sont par exemple :
- Générateur d'en-tête
- Options du thème
- Paramètres du thème
- Mise en page de l'en-tête
- Créateur de sites web
Dans ce cas, vous devez utiliser les paramètres fournis par le thème et ne pas essayer de modifier l'en-tête via un élément de menu conçu pour un autre thème.
Par conséquent, lorsque vous changez de thème, les paramètres d'en-tête disponibles peuvent également changer complètement.
Méthode 4 : Modifier l'en-tête avec Elementor #
Si votre site WordPress avec Elementor a été créé, il faut faire la distinction entre le contenu de page normal et un en-tête global créé avec Elementor.
À l'aide des fonctionnalités correspondantes d'Elementor, un en-tête peut être créé en tant que modèle propre et attribué à des zones spécifiques du site Web.
Dans un tel cas, il est inutile de chercher l'image d'en-tête dans le personnalisateur WordPress habituel si l'en-tête visible complet est en fait généré par Elementor.
Ouvrez plutôt les modèles Elementor correspondants ou le Theme Builder et vérifiez quel modèle d'en-tête est actif.
Important : Ne modifiez pas simultanément l'en-tête du thème et un en-tête créé avec un constructeur de pages si vous ne savez pas lequel est réellement affiché. Vous risqueriez de modifier des paramètres qui ne sont pas visibles sur le site web.
Modifier le logo dans WordPress #
Si vous voulez en réalité non pas l'image d'en-tête, mais Logo tu souhaites remplacer, la méthode dépend également du thème.
Avec les thèmes classiques, vous trouverez souvent le paramètre du logo dans le personnalisateur, sous une section telle que :
Informations sur le site web
ou dans les paramètres d'en-tête du thème.
Avec un thème de blocs, le bloc est souvent Logo du site Web utilisé. Tu peux le sélectionner dans l'éditeur de site web et remplacer le logo enregistré.
Dans le cas des thèmes ou des constructeurs de pages dotés de leur propre système d'en-tête, le logo se trouve éventuellement directement à l'intérieur de l'en-tête qui y a été créé.
Ne pas confondre le logo et l'image d'en-tête #
Le logo représente généralement la marque ou l'entreprise. L'image d'en-tête, en revanche, est un élément de design et peut par exemple montrer un paysage, un produit, une illustration ou un arrière-plan.
C'est pourquoi les deux éléments sont souvent gérés séparément d'un point de vue technique.
Si tu souhaites uniquement remplacer ton logo d'entreprise, tu ne devrais pas remplacer l'image d'arrière-plan complète de l'en-tête.
Quelle taille d'image doit avoir une image d'en-tête WordPress ? #
Il n'y a pas de taille de pixel optimale universelle pour les images d'en-tête WordPress.
Les dimensions requises dépendent entre autres de :
- du thème utilisé
- de la mise en page
- la hauteur de l'en-tête
- de la largeur maximale du contenu
- de l'affichage sur les appareils mobiles
- du format d'image utilisé
- le type d'image
Un thème peut, par exemple, utiliser une image d'en-tête très large et plate, tandis qu'un autre site web affiche une grande image hero sur toute la largeur de l'écran.
Réfère-toi par conséquent d'abord aux recommandations ou à la présentation de ton thème.
Ne pas se contenter de télécharger d'immenses images #
Un problème fréquent est la présence de fichiers d'images inutilement volumineux.
Un appareil photo moderne ou un smartphone peut produire des images de plusieurs milliers de pixels de large et de plusieurs mégaoctets de taille de fichier. Utiliser une telle image originale sans vérification comme en-tête de site web n'est généralement pas une bonne idée.
Une image d'en-tête ne doit être que de la taille nécessaire à son affichage réel.
Les fichiers inutilement volumineux peuvent :
- augmenter le temps de chargement
- transférer plus de données
- consommer une bande passante inutile sur les appareils mobiles
- dégrader la vitesse perçue du site web
Les grandes images situées dans la partie supérieure visible de la page peuvent s'avérer particulièrement importantes pour les performances.
Quel format de fichier convient pour les images d'en-tête ? #
Le format d'image judicieux dépend du sujet et des fonctionnalités requises.
Les formats typiques sont :
- JPEG/JPG : adapté aux photographies et aux motifs comportant de nombreuses nuances de couleurs
- PNG utile si de la transparence est nécessaire ou si certains graphiques sont disponibles en conséquence
- WebP : format Web moderne avec une bonne compression pour de nombreux types d'images
- AVIF : format d'image moderne et efficace, pour autant qu'il soit pris en charge de manière pertinente dans votre flux de travail concret
- SVG particulièrement adapté aux graphiques vectoriels et aux logos, mais doit être utilisé de manière contrôlée pour des raisons de sécurité
Pour une image d'en-tête photographique, un PNG géant n'est généralement pas un choix judicieux. En revanche, pour un logo détouré sur fond transparent, le PNG peut tout à fait convenir.
Vérifier l'image d'en-tête pour ordinateur et smartphone #
Une image d'en-tête qui s'affiche parfaitement sur un grand écran de bureau peut poser des problèmes sur un smartphone.
Dans les mises en page responsives, la largeur disponible varie considérablement. Par conséquent, selon les paramètres CSS, les images d'arrière-plan peuvent être rognées.
Vérifiez après chaque modification au moins :
- Affichage bureau
- Affichage sur tablette
- Affichage sur smartphone
Les éléments importants de l'image ne doivent pas être si près du bord qu'ils soient coupés lors d'un affichage plus étroit.
Ne pas intégrer le texte directement dans l'image d'en-tête #
Si un titre, une offre ou un bouton doit apparaître dans l'en-tête, vous devriez normalement placer ce texte sous forme de véritable contenu HTML au-dessus ou devant l'image et non l'intégrer directement dans le fichier image.
Cela présente plusieurs avantages :
- Le texte reste plus lisible sur différentes tailles d'écran
- Les contenus peuvent être modifiés plus facilement.
- Les moteurs de recherche peuvent indexer le texte comme contenu
- Les lecteurs d'écran peuvent traiter le texte
- Les traductions sont beaucoup plus simples
- Les boutons restent de véritables éléments de commande cliquables
Une image d'en-tête doit donc être avant tout un élément visuel et non servir de substitut à un contenu de site Web important.
Utiliser correctement le texte alternatif pour l'image d'en-tête #
Qu'une image ait besoin d'un texte alternatif et ce qu'il doit contenir dépend de sa fonction.
Si l'image transmet des informations importantes, un texte alternatif significatif doit être fourni.
Si l'image d'en-tête est en revanche purement décorative et ne transmet aucune information supplémentaire, il convient, du point de vue de l'accessibilité, de ne pas l'alourdir inutilement par une description. Les images décoratives doivent être intégrées de manière à ce que les technologies d'assistance puissent les ignorer.
Un texte alternatif n'est par ailleurs pas non plus l'endroit pour une liste de mots-clés SEO.
Exemple : Une photo d'un bâtiment d'entreprise spécifique peut nécessiter un texte alternatif descriptif si le sujet est pertinent pour le contenu. En revanche, un dégradé de couleurs abstrait derrière un titre H1 existant ne nécessite généralement pas de description textuelle supplémentaire.
Image d'en-tête modifiée, mais l'ancienne image apparaît toujours sur le site web #
Si vous avez modifié et enregistré l'image d'en-tête mais que vous voyez toujours l'ancienne version, un cache peut en être la cause.
L'image peut par exemple être mise en cache par :
- ton navigateur
- un plugin de cache WordPress
- mise en cache côté serveur
- un CDN
- un constructeur de pages
Testez d'abord le site web dans une fenêtre de navigation privée ou effectuez un rechargement complet.
Si l'ancienne image apparaît toujours, vérifiez les systèmes de cache utilisés.
L'image d'en-tête ne s'affiche pas sur certaines pages #
Si l'image d'en-tête ne manque que sur certaines pages, votre site Web utilise peut-être des modèles ou des en-têtes différents.
C'est par exemple possible pour :
- d'un modèle de page d'accueil spécial
- Pages de blog et d'archives
- Pages WooCommerce
- Pages de destination
- Modèles Elementor avec des conditions d'affichage différentes
- modèles WordPress individuels
Vérifiez par conséquent d'abord si vraiment toutes les pages utilisent le même en-tête.
L'image d'en-tête est coupée #
Avec les fonds d'écran, il est normal que certaines parties d'une image soient rognées selon le format de l'écran.
Cela se produit souvent lorsque l'image est mise à l'échelle pour remplir toute la zone disponible.
Si des éléments importants du motif disparaissent, vous pouvez, selon la mise en scène utilisée, par exemple :
- modifier la position de l'image d'arrière-plan
- ajuster la hauteur de l'en-tête
- utiliser une image avec un format d'image plus adapté
- utiliser une autre image pour les mobiles
- recadrer le motif différemment avant le téléchargement
Les options disponibles dépendent du thème, du bloc ou du constructeur de page.
L'image d'en-tête semble floue #
Une image d'en-tête floue peut se produire si le fichier téléchargé est trop petit pour la zone affichée.
Si, par exemple, une très petite image est agrandie sur toute la largeur de l'écran, les informations d'image sont insuffisantes pour un affichage net.
Utilisez par conséquent une résolution qui correspond à l'affichage maximal réel, sans télécharger de fichiers originaux inutilement immenses.
L'image d'en-tête provoque de mauvais temps de chargement #
Une grande image dans la partie supérieure visible d'un site Web peut avoir un impact considérable sur le temps de chargement perçu.
Si votre image d'en-tête fait plusieurs mégaoctets, vous devriez l'optimiser.
Vérifie en particulier :
- Dimensions de l'image
- Taille du fichier
- Format de fichier
- Compression
- affichage d'image adaptatif
Une bonne optimisation des images ne cherche pas à réduire au maximum la qualité de l'image, mais à atteindre un juste équilibre entre la qualité visuelle et la taille du fichier.
Ne pas appliquer le lazy loading à l'image principale de manière inconsidérée #
Les images qui n'apparaissent qu'assez bas sur une page peuvent souvent être chargées de manière différée. Ce procédé est appelé Chargement différé qualifié.
En revanche, pour une grande image d'en-tête (header) centrale ou une image principale (hero image) située dans la zone visible immédiatement, un chargement différé n'est pas automatiquement judicieux.
Si une image importante pour le rendu initial est chargée trop tard, le temps de chargement perçu peut se dégrader.
Les paramètres de performance ne doivent donc pas être configurés selon le principe du „ chargement différé pour chaque image “.
Modifier le menu d'en-tête #
Si vous souhaitez modifier non pas l'image, mais la navigation dans l'en-tête, il s'agit de la Gestion des menus WordPress.
Selon le thème, cela se fait également différemment pour les thèmes à blocs classiques et modernes.
Nous traitons donc la configuration complète séparément dans notre guide. Créer et gérer des menus dans WordPress.
Ne pas modifier l'en-tête directement dans les fichiers du thème #
Dans les thèmes classiques, il existe souvent des fichiers PHP tels que :
header.php
Cela ne signifie pas pour autant que tu devrais modifier directement ce fichier pour un simple changement de logo ou d'image d'en-tête.
Les modifications directes apportées aux fichiers d'un thème parent peuvent être écrasées lors d'une mise à jour du thème.
De plus, même une petite erreur dans le code PHP peut faire en sorte que des parties du site Web ne fonctionnent plus.
Utilisez par conséquent d'abord les fonctions prévues du thème, de WordPress ou du page builder.
Si des modifications personnelles des fichiers de thème sont réellement nécessaires, c'est un Thème enfant WordPress souvent l'approche techniquement meilleure.
Changer de thème juste parce qu'on ne peut pas modifier facilement l'en-tête ? #
Un changement de thème ne doit pas être fait à la légère.
Le thème influence bien plus que le seul en-tête. Un changement peut avoir des répercussions sur :
- Mise en page
- Navigation
- Widgets
- Polices de caractères
- Couleurs
- Modèles
- Fonctions spécifiques au thème
- Affichage des contenus existants
S'il vous manque simplement un paramètre d'en-tête, vous devriez d'abord vérifier quelles options le thème existant propose.
Nous expliquons comment installer correctement de nouveaux thèmes dans notre guide sur Installer un nouveau thème WordPress.
Vérifier la configuration existante avant d'apporter des modifications majeures à l'en-tête #
Lors d'une simple modification d'un logo, une préparation approfondie n'est généralement pas nécessaire.
Si vous souhaitez toutefois refondre entièrement l'en-tête, vous devez d'abord comprendre comment il a été construit.
Vérifie en particulier :
- quel thème est actif
- si un thème enfant est utilisé
- si l'en-tête a été créé via le personnalisateur
- si un thème de blocs est utilisé
- que ce soit Elementor ou un autre page builder qui génère l'en-tête
- s'il existe des en-têtes différents pour des pages différentes
C'est seulement après que tu devrais apporter des modifications importantes.
Modifier l'en-tête sur un environnement de staging ou de test #
Lors de modifications importantes apportées à un site Web d'entreprise de production ou à une boutique en ligne, il peut être judicieux d'essayer d'abord le nouveau design dans un environnement de test.
Ainsi, vous pouvez contrôler la mise en page, la navigation et l'affichage adaptatif sans que les visiteurs ne voient un en-tête inachevé pendant la modification.
Pour de tels travaux, une installation WordPress clonée peut également s'avérer utile. Nous expliquons comment copier une installation existante avec Softaculous sur Cloner WordPress avec Softaculous.
Erreurs courantes lors de la modification de l'en-tête WordPress #
- Confondre l'image d'en-tête et l'image mise en avant
- chercher dans l'outil de personnalisation alors qu'un thème de blocs est utilisé
- modifier l'en-tête du thème, bien qu'Elementor génère l'en-tête visible
- apporter des modifications globales alors qu'une seule page devait être modifiée
- télécharger des images originales de plusieurs mégaoctets
- vérifier l'image uniquement sur un ordinateur de bureau
- intégrer directement du texte important dans l'image
- Remplir le texte alternatif de mots-clés
- Modifier directement les fichiers du thème
- ignorer le cache après une modification
Remarque : Si vous ne trouvez pas l'image d'en-tête là où une autre instruction l'indique, WordPress n'est pas mal configuré pour autant. Il est très probable que votre site web utilise simplement un autre thème ou un autre système d'en-tête.
Quand devez-vous contacter le support CURIAWEB ? #
Si, en tant que client de CURIAWEB, vous ne parvenez pas à déterminer par quoi l'en-tête de votre site Web WordPress est généré, vous pouvez contacter notre support.
Veuillez nous faire savoir dans la mesure du possible :
- quel domaine est concerné
- Quel thème tu utilises
- quel élément tu souhaites modifier
- qu'Elementor ou un autre page builder soit installé
- ce que tu as déjà essayé
Cela permet de déterminer beaucoup plus rapidement si l'en-tête est géré par WordPress, le thème ou un page builder.
Résumé #
La façon dont vous changez une image d'en-tête dans WordPress dépend de la structure de votre site Web. Les thèmes classiques utilisent souvent le Personnalisateur de WordPress, tandis que les thèmes à blocs modernes via Design → Éditeur et l'éditeur de site Web peut être adapté. Les thèmes dotés de leur propre constructeur d'en-tête et de page comme Elementor peuvent quant à EUX utiliser des méthodes de gestion entièrement personnalisées.
Vérifiez donc d'abord sous Design → Thèmes, quel thème est actif et ce qui génère réellement ton en-tête. Ne confonds pas non plus l'image d'en-tête globale avec le logo ou l'image mise en avant d'une page individuelle.
Si tu souhaites également modifier la navigation dans l'en-tête, tu trouveras les instructions correspondantes sous Créer et gérer des menus dans WordPress. Pour modifier le code du thème, vous ne devez pas modifier directement le thème parent. Nous expliquerons plus tard l'utilisation d'un Thèmes enfants WordPress.
