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 héroïque est la grande bannière située en haut de votre page d'accueil ou de votre page de destination, sur laquelle sont superposés du texte et un bouton. C'est la première chose que voient les visiteurs. Lorsqu'elle est bien conçue, elle communique instantanément votre message.
Lorsque j'ai commencé à utiliser les sites WordPress, mes images principales s'affichaient parfaitement sur ordinateur, mais étaient déformées sur mobile. Le texte se chevauchait, des parties importantes étaient coupées et la mise en page semblait désordonnée.
Après avoir créé des dizaines de pages d'atterrissage, j'ai appris ce qui fonctionne réellement. Dans ce guide, je vais vous présenter trois méthodes simples en fonction du type de thème que vous utilisez. Toutes les options sont compatibles avec les appareils mobiles et ne nécessitent aucune compétence technique particulière.
- Préparez d'abord votre image principale
- Méthode 1 : Utilisation des paramètres de votre thème (plus simple pour les thèmes classiques)
- Méthode 2 : Utilisation du bloc Couverture WordPress (idéal pour les thèmes à blocs)
- Méthode 3 : Utilisation d'un constructeur de pages tel que SeedProd (fonctionne avec n'importe quel thème)
- Dépannage des problèmes courants liés aux images principales
- FAQ sur l'ajout d'images WordPress Hero
Préparez d'abord votre image principale
Une taille d'image et un format de fichier adaptés permettent d'éviter les mises en page déformées et les chargements lents.
J'ai appris cela à mes dépens après avoir téléchargé des images trop volumineuses qui ralentissaient considérablement ma page. Désormais, je prépare toujours mes images avant de les télécharger.
Utilisez une résolution de 1920 × 1080 pixels pour la plupart des thèmes. Si vous souhaitez une section d'en-tête plus courte, utilisez plutôt une résolution de 1600 × 900 pixels. Veillez à ce que la taille de votre fichier reste inférieure à 250 Ko à l'aide de TinyPNG.
| Dimension | Cas d'utilisation |
|---|---|
| 1920 × 1080 pixels | Héroïne standard pleine largeur (recommandé) |
| 1600 × 900 pixels | Section héros plus courte |
Utilisez le format JPG pour les photos et le format PNG pour les graphiques contenant du texte.
Choisissez des images comportant des espaces négatifs où le texte peut s'insérer. Les images sombres fonctionnent mieux avec un texte clair. D'après ce que j'ai pu constater, de nombreux débutants choisissent de belles images qui rendent les titres illisibles. Je recherche désormais des images comportant des espaces vides clairs où le texte peut respirer.
Maintenant que les bases sont posées, voyons comment ajouter concrètement votre image principale.
Méthode 1 : Utilisation des paramètres de votre thème (plus simple pour les thèmes classiques)
De nombreux thèmes WordPress incluent une option de section hero dans le Customizer qui ne nécessite aucun plugin ni constructeur de page.
Lorsque je travaille sur un projet qui dispose déjà d'un thème installé, je vérifie toujours cette option en premier. C'est le moyen le plus rapide d'ajouter une image principale si votre thème le prend en charge.
Tous les thèmes ne disposent pas de cette fonctionnalité. 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 dansApparence → Personnaliser.
Le Customizer s'ouvre dans un nouvel écran avec l'aperçu de votre site à droite.
Étape 2 : Trouvez les paramètres de la section Hero
Recherchez les sections intitulées «Hero »,« Header », «Front Page » ou similaires.
Vous verrez une barre latérale à gauche avec différentes options de personnalisation. Les paramètres du héros peuvent se trouver dans une section intitulée « 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, il faut donc parfois chercher un peu. Si vous ne voyez rien d'évident, vérifiez d'abord dans les sections « Page d'accueil » ou « Page principale ».
Étape 3 : Téléchargez votre image principale
Cliquez sur l'option « Section héros » et recherchez le bouton « Télécharger une image ».
Cliquez surSélectionner une imageouTélécharger, puis choisissez l'image principale que vous avez 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 il doit renvoyer. La plupart des thèmes vous proposent des champs pour le libellé du bouton et le lien de destination.
Étape 5 : Publier les modifications
Cliquez sur le boutonPublieren haut de la barre latérale du personnalisateur.
Votre image principale est désormais visible sur votre page d'accueil. Rendez-vous sur votre site dans un nouvel onglet pour la voir.
Méthode 2 : Utilisation du bloc Couverture WordPress (idéal pour les thèmes à blocs)
Le bloc Cover est une fonctionnalité de l'éditeur de blocs WordPress qui vous permet d'ajouter une image hero pleine largeur avec superposition de texte sur n'importe quelle page sans avoir recours à des plugins.
J'utilise souvent cette méthode, car elle me permet d'ajouter des images principales à n'importe quelle page, et pas seulement à la page d'accueil. J'ai créé des pages d'accueil à l'aide du bloc Couverture, où chaque page dispose de sa propre section principale unique.
Le bloc Couverture est adapté aux appareils mobiles par défaut, ce qui m'évite d'avoir à tester et à corriger les mises en page mobiles par la suite.
Étape 1 : Ouvrez l'éditeur de page.
Accédez à la page où vous souhaitez insérer l'image principale et cliquez surModifier.
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 de 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 temporaire 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 depuis votre ordinateur.
L'image remplit le bloc Couverture en tant qu'arrière-plan. Vous verrez une invite de texte par défaut au centre du bloc.
Étape 4 : Ajoutez votre titre
Cliquez à l'intérieur du bloc Couverture et commencez à saisir votre titre.
Pour transformer le texte en titre, cliquez sur le menu déroulant du paragraphe dans la barre d'outils du bloc et sélectionnezTitre. 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/buttonet appuyez à nouveau sur Entrée.
Un bloc de bouton apparaît sous votre titre. Saisissez le texte du 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
Une fois le bloc Couverture sélectionné, regardez le panneau des paramètres du bloc situé à droite 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 obtenir un bon contraste. Si je travaille avec une image principale sombre, je peux alléger la superposition. Si l'image est claire et chargée, j'ajoute une superposition plus sombre afin que le texte ressort mieux.
Pour modifier 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 boutonEnregistrer ou Mettre à jourdans le coin supérieur droit. Ensuite, rendez-vous sur votre page pour voir votre image principale en direct.
Vous pouvez ajouter un effet de parallaxe ultérieurement si vous le souhaitez (l'image reste fixe pendant que le contenu défile) en activant l'option « Arrière-plan fixe » dans les paramètres du bloc Couverture. Je l'utilise avec parcimonie, car cela peut rendre certaines images principales peu esthétiques sur mobile.
Méthode 3 : Utilisation d'un constructeur de pages tel que SeedProd (fonctionne avec n'importe quel thème)
Les constructeurs de pages WordPress vous permettent de contrôler les sections d'en-tête par glisser-déposer et fonctionnent souvent quel que soit le thème WordPress que vous utilisez.
J'utilise cette méthode lorsque je souhaite avoir plus de contrôle que ne le permet le bloc Couverture, ou lorsque je travaille avec un thème qui ne dispose pas de paramètres héros. L'aperçu en direct permet de voir facilement à quoi ressemblent exactement l'espacement et les couleurs avant la publication.
SeedProdest un constructeur de sites Web WordPress par glisser-déposer auquel font confiance plus d'un million de sites Web. Vous pouvez l'utiliser pour créer des thèmes WordPress personnalisés, des pages d'accueil 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 m'a permis de détecter des problèmes d'espacement que je n'aurais remarqués qu'après la publication. Ce retour visuel me fait gagner beaucoup de temps.
Étape 1 : Installer SeedProd
Pour commencer, installez et activez SeedProd sur votre site WordPress. Il existe une version gratuite qui fonctionne pour les sections hero basiques, mais pour ce guide, j'utiliserai SeedProd Pro car il offre davantage 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 d'atterrissage
Dans votre tableau de bord, allez dansSeedProd → Pages d'atterrissage.
Cliquez sur le boutonAjouter une nouvelle page de destination. Un écran s'affiche alors, vous invitant à saisir le nom de votre page, puis à choisir un modèle.
Étape 3 : Choisissez un modèle avec une section Hero
Parcourez les modèles et choisissez celui dont la mise en page de la section principale vous plaît.
Les modèles permettent de gagner du temps de configuration, car la section principale est déjà structurée. Il vous suffit de remplacer l'image et le texte par défaut par les vôtres.
Je commence généralement par utiliser un modèle plutôt que de partir de zéro. Même si je finis par modifier la mise en page, le modèle me fournit un point de départ solide avec un espacement adéquat et une hiérarchie des éléments déjà définie.
Cliquez sur l'icône en forme de coche sur le modèle souhaité, puis cliquez surUtiliser ce modèle.
Étape 4 : Ouvrez la section Hero pour la modifier
L'éditeur visuel SeedProd s'ouvre avec le modèle que vous avez choisi.
Cliquez sur la section héros 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échargez votre image principale
Dans le panneau des paramètres situé à gauche, recherchez la section « Paramètres d'arrière-plan ».
Sélectionnez l'image existante, puis cliquez sur l'icône image pour choisir une image dans votre bibliothèque multimédia.
L'image apparaît immédiatement en arrière-plan de la section principale. C'est ce que j'entends par « l'aperçu en direct est utile ». Vous pouvez voir immédiatement si l'image s'harmonise 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 principale et commencez à saisir votre nouveau titre.
Dans cet exemple, je remplace le bloc optin-form par un bloc bouton. Pour ce faire, il suffit de supprimer le bloc existant en cliquant sur l'icône corbeille.
Ensuite, dans la barre latérale des blocs, faites glisser et déposez le bloc bouton sur votre page.
Étape 7 : Ajuster la superposition et les couleurs
Une fois la section héros sélectionnée, faites défiler le panneau gauche vers le bas pour trouver les commandes de superposition.
Vous pouvez choisir une couleur de superposition personnalisée, puis assombrir l'arrière-plan afin que votre texte et vos boutons ressortent 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 : Aperçu sur mobile
Cliquez sur les icônes de changement d'appareil en bas de l'éditeur (ordinateur de bureau, tablette, mobile).
Passez en mode mobile pour voir à quoi ressemble votre image principale sur un écran de téléphone. Vous pouvez ajuster la taille et l'espacement du texte spécifiquement pour les appareils mobiles si nécessaire.
Je vérifie toujours l'affichage mobile avant de publier, car ce qui rend bien sur un ordinateur de bureau ne rend pas toujours aussi bien sur un appareil mobile. J'ai déjà vu des titres trop grands qui dépassaient de l'écran, ou des boutons trop petits et difficiles à cliquer sur un appareil mobile.
Pour obtenir un guide complet sur la personnalisation du reste de votre page, consultez notre tutoriel sur la création d'une page d'accueil dans WordPress.
Étape 9 : Publier la page
Lorsque vous êtes satisfait de la section héros, cliquez surEnregistrerdans le coin supérieur droit. Cliquez ensuite sur la flèche déroulante à côté de Enregistrer et sélectionnezPublier.
Si vous souhaitez utiliser des superpositions dégradées, des effets de particules ou des séparateurs de formes, ces options sont disponibles dans les paramètres de la section héros. Elles ne sont pas indispensables, mais j'ai utilisé des superpositions dégradées 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 d'en-tête en direct.
Dépannage des problèmes courants liés aux images principales
La plupart des problèmes liés aux images principales sont dus à des dimensions incorrectes, un contraste insuffisant ou des conflits CSS liés au thème.
J'ai déjà été confronté à tous ces problèmes à un moment ou à un autre. Voici comment les résoudre.
| Problème | Pourquoi cela se produit-il ? | Comment y remédier |
|---|---|---|
| L'image est floue ou pixélisée. | Dimensions de l'image trop petites | Ré-enregistrez-les avec une résolution minimale de 1920 × 1080 pixels. Les petites images étirées sur toute la largeur perdent en qualité. |
| Le texte est difficile à lire. | Contraste insuffisant | Ajoutez un calque sombre (opacité de 30 à 50 %) dans les paramètres de votre bloc ou de votre constructeur, ou remplacez le texte par du blanc. |
| L'image principale ne couvre pas toute la largeur. | Le thème limite 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 pages, définissez la section sur pleine largeur. |
| L'image est recadrée bizarrement sur mobile | Le point focal est décentré. | Utilisez des images avec des sujets centrés ou ajustez le réglage du point focal dans votre éditeur de page. |
FAQ sur l'ajout d'images WordPress Hero
Quelle doit être la taille d'une image principale dans WordPress ?
Une résolution de 1920 × 1080 pixels convient à la plupart des thèmes et s'adapte bien aux appareils mobiles. Si vous souhaitez une section d'en-tête plus courte, utilisez plutôt une résolution de 1600 × 900 pixels. Veillez à ce que la taille du fichier reste inférieure à 250 Ko après compression afin de ne pas ralentir le chargement de votre page.
Puis-je utiliser une vidéo comme arrière-plan principal à la place d'une image ?
Oui, le bloc Couverture et la plupart des constructeurs de pages prennent en charge les arrière-plans vidéo. Veillez à ce que les fichiers vidéo ne dépassent pas 5 Mo et incluez toujours une image de secours pour les utilisateurs mobiles, car les arrière-plans vidéo ne sont souvent pas lus sur les téléphones afin d'économiser les données.
Les images héroïques ralentissent-elles mon site web ?
Uniquement si la taille du fichier est trop importante. Compressez votre image principale à moins de 250 Ko avant de la télécharger. Les images principales de plus de 1 Mo ralentissent le chargement de la page et nuisent au référencement. Utilisez un outil tel que TinyPNG pour compresser sans perte de qualité.
Comment modifier une image principale 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 pages, ouvrez la page dans le constructeur et cliquez sur la section héros.
Quelle est la différence entre une image hero et une bannière hero ?
Ces termes ont la même signification. Ils désignent tous deux la grande image située en haut d'une page, sur laquelle sont superposés du texte et des boutons. Certaines personnes utilisent le terme « bannière héroïque » lorsque l'image occupe toute la largeur, mais il n'y a aucune 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 correspond à votre thème, testez-la sur mobile et ne réfléchissez pas trop au design.
Une image d'en-tête appropriée, avec un texte lisible et un appel à l'action clair, incite les visiteurs à passer à l'étape suivante. J'ai constaté que les sections d'en-tête simples étaient plus efficaces que les sections élaborées, car elles privilégiaient la clarté plutôt que la complexité.
Guides connexes :
- Les meilleures pratiques de la page d'atterrissage pour des taux de conversion incroyables
- Comment masquer les images en vue mobile sur WordPress
- Meilleures pratiques en matière d'appel à l'action pour les pages d'atterrissage à fort taux de conversion
- Comment ajouter facilement un bouton à votre en-tête WordPress
- Comment atténuer une image de fond dans WordPress sans CSS
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à participer à la conversation sur YouTube, X et Facebook pour obtenir d'autres conseils et contenus utiles pour développer votre entreprise.
