Vous pouvez ajouter une image principale à n'importe quel site WordPress en moins de 15 minutes, et elle s'affichera correctement sur mobile sans codage supplémentaire.
Une image principale est la grande bannière en haut de votre page d'accueil ou de votre page de destination avec du texte et un bouton superposé. C'est la première chose que les visiteurs voient, donc lorsqu'elle est bien faite, elle communique votre message instantanément.
Lorsque j'ai commencé avec les sites WordPress, mes images principales étaient parfaites sur ordinateur mais plantaient sur mobile. Le texte se superposait, des parties importantes étaient coupées et la mise en page semblait désordonnée.
Après avoir créé des dizaines de pages de destination, j'ai appris ce qui fonctionne réellement. Dans ce guide, je vais vous montrer trois méthodes simples basées sur votre type de thème, et chaque option est adaptée aux mobiles sans nécessiter de compétences techniques.
- Préparez d'abord votre image principale
- Méthode 1 : Utilisation des paramètres de votre thème (le plus simple pour les thèmes classiques)
- Méthode 2 : Utilisation du bloc Couverture WordPress (Idéal pour les thèmes basés sur des blocs)
- Méthode 3 : Utiliser un constructeur de pages comme SeedProd (fonctionne avec n'importe quel thème)
- Dépannage des problèmes courants d'images principales
- FAQ sur l'ajout d'images principales WordPress
Préparez d'abord votre image principale
La bonne taille d'image et le bon format de fichier évitent les mises en page cassées et les chargements lents.
Je l'ai appris à mes dépens après avoir téléchargé des images principales beaucoup trop volumineuses qui ont ralenti ma page. Maintenant, je prépare toujours les images avant de les télécharger.
Utilisez 1920 × 1080 pixels pour la plupart des thèmes. Si vous souhaitez une section principale plus courte, utilisez plutôt 1600 × 900 pixels. Gardez la taille de votre fichier sous 250 Ko en utilisant TinyPNG.
| Dimension | Cas d'utilisation |
|---|---|
| 1920 × 1080 pixels | Héro pleine largeur standard (recommandé) |
| 1600 × 900 pixels | Section principale plus courte |
Utilisez JPG pour les photos et PNG pour les graphiques avec du texte.
Choisissez des images avec de l'espace négatif où le texte peut être placé. Les images sombres fonctionnent mieux avec du texte clair. D'après ce que j'ai vu, de nombreux débutants choisissent de belles images qui rendent les titres impossibles à lire. Maintenant, je recherche des images avec un espace vide clair où le texte peut respirer.
Les bases étant posées, voyons comment ajouter votre image principale.
Méthode 1 : Utilisation des paramètres de votre thème (le plus simple pour les thèmes classiques)
De nombreux thèmes WordPress incluent une option de section principale dans le personnalisateur qui ne nécessite aucun plugin ni constructeur de page.
Lorsque je travaille sur un projet sur lequel un thème est déjà installé, je vérifie toujours d'abord cette option. C'est le moyen le plus rapide d'ajouter une image principale si votre thème le prend en charge.
Tous les thèmes n'ont pas cette fonctionnalité, donc si vous ne la voyez pas, passez à la méthode 2 ou 3. Cette méthode ne fonctionne que sur la page désignée par votre thème, qui est généralement la page d'accueil.
Étape 1 : Ouvrez le personnalisateur WordPress
Dans votre tableau de bord WordPress, allez dans Apparence → Personnaliser.
Le personnalisateur s'ouvre dans un nouvel écran avec un aperçu de votre site à droite.
Étape 2 : Trouvez les paramètres de la section principale
Recherchez des sections intitulées Principale, En-tête, Page d'accueil, ou similaire.
Vous verrez une barre latérale à gauche avec différentes options de personnalisation. Les paramètres de la section principale peuvent se trouver sous une section telle que « Paramètres de la page d'accueil » ou « Options d'en-tête ».
J'ai remarqué que les développeurs de thèmes nomment ces sections différemment, vous devez donc parfois chercher un peu. Si vous ne voyez rien d'évident, vérifiez d'abord dans les sections « Page d'accueil » ou « Page d'accueil ».
Étape 3 : Téléchargez votre image principale
Cliquez sur l'option de section principale et recherchez un bouton de téléchargement d'image.
Cliquez sur Sélectionner une image ou Télécharger, puis choisissez votre image principale préparée sur votre ordinateur.
Étape 4 : Ajoutez votre titre et le texte du bouton
Entrez votre titre dans le champ de texte prévu à cet effet.
Ajoutez le texte de votre bouton et l'URL vers laquelle le bouton doit pointer. La plupart des thèmes vous fournissent des champs pour l'étiquette du bouton et le lien de destination.
Étape 5 : Publier les modifications
Cliquez sur le bouton Publier en haut de la barre latérale du personnalisateur.
Votre image principale est maintenant en ligne sur votre page d'accueil. Visitez votre site dans un nouvel onglet pour la voir.
Méthode 2 : Utilisation du bloc Couverture WordPress (Idéal pour les thèmes basés sur des blocs)
Le bloc Couverture est une fonctionnalité de l'éditeur de blocs WordPress qui vous permet d'ajouter une image principale pleine largeur avec superposition de texte sur n'importe quelle page sans plugins. Ajouter une image principale pleine largeur.
J'utilise souvent cette méthode car elle me donne la flexibilité d'ajouter des images principales à n'importe quelle page, pas seulement à la page d'accueil. J'ai créé des pages de destination avec le bloc Couverture où chaque page a sa propre section principale unique.
Le bloc Couverture est responsive par défaut sur mobile, ce qui m'évite d'avoir à tester et corriger les mises en page mobiles plus tard.
Étape 1 : Ouvrir l'éditeur de page
Accédez à la page où vous souhaitez placer l'image principale et cliquez sur Modifier.
Pour la plupart des gens, il s'agit de la page d'accueil. Vous verrez l'éditeur de blocs WordPress avec le contenu de votre page.
Étape 2 : Ajouter un bloc Couverture en haut
Cliquez sur l'icône + tout en haut de la page et recherchez « Couverture ».
Sélectionnez le bloc Couverture dans les résultats. Un bloc Couverture de remplacement apparaît en haut de votre page.
Étape 3 : Téléchargez votre image principale
Cliquez sur Télécharger dans le bloc Couverture et sélectionnez votre image principale sur votre ordinateur.
L'image remplit le bloc Couverture en arrière-plan. Vous verrez une invite de texte par défaut au centre du bloc.
Étape 4 : Ajouter votre titre
Cliquez à l'intérieur du bloc Couverture et commencez à taper votre titre.
Pour changer le texte en titre, cliquez sur le menu déroulant de paragraphe dans la barre d'outils du bloc et sélectionnez Titre. Choisissez H1 ou H2 en fonction de la structure de votre page.
Étape 5 : Ajouter un bloc Bouton
Appuyez sur Entrée après votre titre pour créer une nouvelle ligne, puis tapez /bouton et appuyez à nouveau sur Entrée.
Un bloc bouton apparaît sous votre titre. Tapez le texte de votre bouton et ajoutez l'URL du lien dans la barre d'outils qui apparaît lorsque le bouton est sélectionné.
Étape 6 : Ajuster la couleur du texte et la superposition
Avec le bloc Couverture sélectionné, regardez le panneau des paramètres du bloc sur le côté droit de l'écran.
Faites défiler vers le bas pour trouver le curseur d'opacité de la superposition. Faites-le glisser pour assombrir ou éclaircir l'arrière-plan derrière votre texte.
Je règle généralement l'opacité de la superposition entre 30 % et 50 % pour un bon contraste. Si je travaille avec une image principale sombre, je peux opter pour une superposition plus claire. Si l'image est lumineuse et chargée, j'ajoute une superposition plus sombre pour que le texte ressorte.
Pour changer la couleur du texte, sélectionnez votre titre ou votre bouton, puis choisissez une couleur dans les paramètres de texte du panneau de droite.
Étape 7 : Mettre à jour la page
Cliquez sur le bouton Enregistrer ou Mettre à jour dans le coin supérieur droit, puis visitez votre page pour voir votre image principale en ligne.
Vous pouvez ajouter un effet de parallaxe plus tard si vous le souhaitez (l'image reste fixe pendant que le contenu défile) en activant le bouton « Arrière-plan fixe » dans les paramètres du bloc Couverture. Je l'utilise avec parcimonie car cela peut rendre certaines images de héros peu attrayantes sur mobile.
Méthode 3 : Utiliser un constructeur de pages comme SeedProd (fonctionne avec n'importe quel thème)
Les constructeurs de pages WordPress vous donnent un contrôle par glisser-déposer sur les sections d'en-tête et fonctionnent souvent quel que soit le thème WordPress que vous utilisez.
J'utilise cette méthode lorsque je veux plus de contrôle que ce qu'offre le bloc Couverture, ou lorsque je travaille avec un thème qui n'a pas de paramètres d'en-tête. L'aperçu en direct facilite la visualisation exacte de l'apparence des espacements et des couleurs avant la publication.
SeedProd est un constructeur de sites Web WordPress par glisser-déposer, approuvé par plus d'un million de sites Web. Vous pouvez l'utiliser pour créer des thèmes WordPress personnalisés, des pages de destination personnalisées et des boutiques WooCommerce personnalisées sans aucun code.
Je l'utilise régulièrement sur mes propres sites, et l'aperçu en direct a permis de détecter des problèmes d'espacement que je n'aurais pas remarqués avant la publication. Ce retour visuel me fait gagner beaucoup de temps.
Étape 1 : Installer SeedProd
Pour commencer, installez et activez SeedProd sur votre site Web WordPress. Il existe une version gratuite qui fonctionne pour les sections d'en-tête de base, mais pour ce guide, j'utiliserai SeedProd Pro car il offre plus d'options de personnalisation.
Vous pouvez suivre ces instructions pour obtenir de l'aide sur l'installation de SeedProd.
Étape 2 : Créer une nouvelle page de destination
Dans votre tableau de bord, accédez à SeedProd → Pages de destination.
Cliquez sur le bouton Ajouter une nouvelle page de destination. Vous verrez un écran vous demandant d'entrer le nom de votre page, puis de choisir un modèle.
Étape 3 : Choisir un modèle avec une section d'en-tête
Parcourez les modèles et choisissez-en un qui présente une mise en page de section d'en-tête qui vous plaît.
Les modèles permettent de gagner du temps de configuration car la section d'en-tête est déjà structurée. Vous remplacerez simplement l'image et le texte de remplacement par les vôtres.
Je commence généralement par un modèle plutôt que par construire à partir de zéro. Même si je finis par modifier la mise en page, le modèle me donne un point de départ solide avec un espacement approprié et une hiérarchie des éléments déjà définis.
Cliquez sur l'icône de coche sur le modèle que vous souhaitez, puis cliquez sur Utiliser ce modèle.
Étape 4 : Ouvrir la section d'en-tête pour la modification
L'éditeur visuel SeedProd s'ouvre avec votre modèle choisi chargé.
Cliquez sur la section d'en-tête en haut de la page. Des poignées colorées apparaissent autour de la section lorsqu'elle est sélectionnée.
Étape 5 : Télécharger votre image d'en-tête
Dans le panneau des paramètres à gauche, recherchez les paramètres d'arrière-plan de la section.
Sélectionnez l'image existante, puis cliquez sur l'icône d'image pour choisir une image dans votre bibliothèque de médias.
L'image apparaît immédiatement en arrière-plan de la section d'en-tête. C'est ce que je veux dire par l'utilité de l'aperçu en direct. Vous pouvez voir immédiatement si l'image fonctionne avec le texte existant ou si vous devez ajuster la superposition.
Étape 6 : Modifier le titre et le bouton
Cliquez sur le texte du titre dans la section d'en-tête et commencez à taper votre nouveau titre.
Dans cet exemple, je remplace le bloc optin-form par un bloc bouton. Pour ce faire, supprimez simplement le bloc existant en cliquant sur l'icône de la corbeille.
Ensuite, depuis la barre latérale des blocs, faites glisser et déposez le bloc bouton sur votre page.
Étape 7 : Ajuster le calque et les couleurs
Avec la section principale sélectionnée, faites défiler vers le bas dans le panneau de gauche pour trouver les commandes de calque.
Vous pouvez choisir une couleur de calque personnalisée, puis atténuer l'arrière-plan afin que votre texte et vos boutons se détachent clairement de votre image principale.
Pour modifier la taille ou la couleur du texte, cliquez sur le titre ou le bouton et ajustez les paramètres dans le panneau de gauche.
Étape 8 : Prévisualiser sur mobile
Cliquez sur les icônes du sélecteur d'appareils en bas de l'éditeur (ordinateur, tablette, mobile).
Passez à la vue mobile pour voir à quoi ressemble votre image principale sur l'écran d'un téléphone. Vous pouvez ajuster la taille du texte et l'espacement spécifiquement pour le mobile si nécessaire.
Je vérifie toujours la vue mobile avant de publier, car ce qui est beau sur ordinateur ne se traduit pas toujours bien. J'ai déjà rencontré des titres trop grands qui sortaient de l'écran, ou des boutons qui semblaient minuscules et difficiles à toucher sur mobile.
Pour un guide complet sur la personnalisation du reste de votre page, consultez notre tutoriel sur comment créer une page de destination dans WordPress.
Étape 9 : Publier la page
Lorsque vous êtes satisfait de la section principale, cliquez sur Enregistrer dans le coin supérieur droit. Cliquez ensuite sur la flèche déroulante à côté de Enregistrer et sélectionnez Publier.
Si vous souhaitez des calques dégradés, des effets de particules ou des séparateurs de formes, ces options sont disponibles dans les paramètres de la section principale. Elles ne sont pas nécessaires, mais j'ai utilisé des calques dégradés lorsque j'avais besoin d'un contraste supplémentaire pour du texte clair sur une image lumineuse.
Une fois votre page publiée, affichez-la dans votre navigateur pour voir votre nouvelle section principale en direct.
Dépannage des problèmes courants d'images principales
La plupart des problèmes d'image principale sont dus à des dimensions incorrectes, un faible contraste ou des conflits CSS de thème.
J'ai rencontré tous ces problèmes à un moment donné. Voici comment les résoudre.
| Problème | Cause | Solution |
|---|---|---|
| L'image est floue ou pixellisée | Dimensions de l'image trop petites | Ré-téléchargez avec un minimum de 1920x1080 pixels. Les petites images étirées sur toute la largeur perdent en qualité. |
| Le texte est difficile à lire | Manque de contraste | Ajoutez un calque sombre (opacité de 30 à 50 %) dans les paramètres de votre bloc ou de votre constructeur, ou changez la couleur du texte en blanc. |
| L'image principale ne s'étend pas sur toute la largeur | Le thème restreint la largeur ou l'alignement n'est pas défini | Activez l'alignement pleine largeur dans les paramètres du bloc Couverture. Si vous utilisez un constructeur de page, définissez la section sur pleine largeur. |
| L'image se coupe étrangement sur mobile | Le point focal est décentré | La bonne image héroïque avec un texte lisible et un appel à l'action clair incite les visiteurs à passer à l'étape suivante. J'ai vu des sections héroïques simples surpasser des sections élaborées parce qu'elles se concentraient sur la clarté plutôt que sur la complexité. |
FAQ sur l'ajout d'images principales WordPress
Quelle taille doit avoir une image héroïque dans WordPress ?
1920×1080 pixels convient à la plupart des thèmes et s'affiche bien sur mobile. Si vous souhaitez une section héroïque plus courte, utilisez plutôt 1600×900 pixels. Gardez la taille du fichier inférieure à 250 Ko après compression afin qu'elle ne ralentisse pas le chargement de votre page.
Puis-je utiliser une vidéo comme arrière-plan héroïque au lieu d'une image ?
Oui, le bloc Couverture et la plupart des constructeurs de page prennent en charge les arrière-plans vidéo. Gardez les fichiers vidéo en dessous de 5 Mo et incluez toujours une image de secours pour les utilisateurs mobiles, car les arrière-plans vidéo ne se lisent souvent pas sur les téléphones pour économiser les données.
Les images héroïques ralentissent-elles mon site web ?
Seulement si la taille du fichier est trop grande. Compressez votre image héroïque à moins de 250 Ko avant de la télécharger. Les grandes images héroïques de plus de 1 Mo retarderont le chargement de la page et nuiront au référencement. Utilisez un outil comme TinyPNG pour compresser sans perdre en qualité.
Comment changer une image héroïque existante sur mon site WordPress ?
Cela dépend de la méthode que vous avez utilisée pour l'ajouter. Pour les paramètres du thème, allez dans Apparence → Personnaliser. Pour le bloc Couverture, modifiez la page et sélectionnez le bloc. Pour les constructeurs de page, ouvrez la page dans le constructeur et cliquez sur la section héroïque.
Quelle est la différence entre une image héroïque et une bannière héroïque ?
Les termes signifient la même chose. Les deux font référence à la grande image en haut d'une page avec du texte et un bouton superposés. Certaines personnes disent « bannière héroïque » lorsque l'image s'étend sur toute la largeur, mais il n'y a pas de différence technique.
Une image héroïque rend votre page d'accueil plus attrayante lorsqu'elle communique un message clair avec un visuel fort. Choisissez la méthode qui convient à votre thème, testez-la sur mobile, et ne réfléchissez pas trop à la conception.
La bonne image principale avec un texte lisible et un appel à l'action clair incite les visiteurs à passer à l'étape suivante. J'ai vu des sections principales simples surpasser des sections élaborées car elles privilégiaient la clarté à la complexité.
Guides associés :
- Meilleures pratiques pour les pages de destination afin d'obtenir des taux de conversion incroyables
- Comment masquer les images en vue mobile sur WordPress
- Meilleures pratiques d'appel à l'action pour des pages de destination à forte conversion
- Comment ajouter facilement un bouton à l'en-tête de votre WordPress
- Comment estomper une image d'arrière-plan dans WordPress sans CSS
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
