Image de couverture vs. Image mise en avant dans l'éditeur de blocs WordPress (Guide pour débutants)

Lorsque j'ai commencé à utiliser WordPress, je confondais souvent les images mises en avant avec les images de couverture. Par conséquent, certains de mes premiers articles de blog n'ont pas tout à fait atteint leur objectif. Soit ils manquaient de visuels clés, soit les images étaient mal placées, laissant le design un peu décalé.

Heureusement, j'ai rapidement appris que ces deux types d'images jouent des rôles uniques et importants.

Les images de couverture sont utilisées dans votre contenu pour donner le ton et engager les lecteurs. En revanche, les images mises en avant agissent comme un résumé visuel, présentant l'essence de votre article avant même qu'il ne soit ouvert.

Dans ce guide, je partagerai tout ce que j'ai appris sur les images de couverture et les images mises en avant dans l'éditeur de blocs WordPress.

Voici un bref aperçu de ce que je vais couvrir dans ce guide :

• Qu'est-ce qu'une image de couverture ?
• Qu'est-ce qu'une image mise en avant ?
• Image de couverture vs. Image mise en avant dans l'éditeur de blocs WordPress
• Comment ajouter une image de couverture dans WordPress
• How to Add a Featured Image in WordPress
• Questions fréquemment posées sur les images de couverture et les images mises en avant
• Guides d'experts pour l'utilisation des images WordPress

Qu'est-ce qu'une image de couverture ?

Une image de couverture est une image large que vous placez n'importe où dans le contenu d'un article ou d'une page.

C'est un bloc spécifique utilisé pour segmenter de longs textes et créer un début visuel pour une nouvelle section, souvent avec du texte superposé.

Elles sont particulièrement courantes sur les sites Web qui reposent fortement sur la narration ou le contenu visuel, tels que les voyages, le style de vie et les portfolios.

Par exemple, un blogueur pourrait utiliser une image de couverture pour introduire un nouveau chapitre dans un long article. Les spécialistes du marketing les utilisent souvent pour créer des bannières d'appel à l'action pleine largeur, et les photographes peuvent les utiliser pour présenter une pièce de portfolio impressionnante dans une étude de cas.

Le bloc « Couverture » dans WordPress vous permet d'ajouter une image de couverture. Il vous permet également d'ajouter du texte et des superpositions de couleurs à vos images.

Vous pouvez également personnaliser ces superpositions pour qu’elles correspondent aux couleurs de votre site ou définir l’ambiance pour différentes sections de contenu. Plus loin dans l’article, je vous montrerai plus d’informations sur cette option de personnalisation.

Pour un meilleur rendu, je recommande d’utiliser des images de couverture de 1920×1080 pixels. Cette taille garantit que les images sont de haute qualité et remplissent joliment la zone supérieure de vos articles.

Qu'est-ce qu'une image mise en avant ?

Une image mise en avant est comme le visage de votre article de blog, offrant une représentation visuelle qui attire les lecteurs.

Également appelée miniature d’article, elle apparaît sur votre page d’accueil et vos pages d’archives de blog. Elle apparaît également sur les flux de médias sociaux lorsqu’un article est partagé.

Ces images sont conçues pour être visuellement attrayantes, encourageant les lecteurs à cliquer et à explorer votre blog WordPress ou votre site web.

Par exemple, chez WPBeginner, mon équipe et moi-même veillons à ce que chaque image mise en avant soit unique tout en maintenant le style cohérent de notre marque.

Gardez à l’esprit que les images mises en avant dépendent du thème WordPress que vous utilisez, car le thème détermine la meilleure taille pour ces images.

En effet, les thèmes ont des mises en page prédéfinies, comme des grilles ou des listes d'articles sur votre page d'accueil et vos pages d'archives, et ils nécessitent des tailles d'image cohérentes pour maintenir un design propre et professionnel.

Par exemple, de nombreux thèmes optent pour un rapport d’aspect standard de 16:9, utilisant des tailles comme 680×382 pixels. Certains thèmes peuvent même utiliser les images mises en avant comme images d’en-tête, avec des dimensions telles que 1200×675 pixels.

Si vous avez besoin d'informations plus détaillées, consultez ce guide complet sur les tailles d'images WordPress.

Image de couverture vs. Image mise en avant dans l'éditeur de blocs WordPress

Pour rendre les différences encore plus claires, voici une comparaison rapide côte à côte d'une image de couverture par rapport à une image mise en avant :

Fonctionnalité	Image de couverture	Image mise en avant
Objectif principal	Créer des ruptures visuelles et mettre en évidence des sections à l'intérieur d'un article.	Représenter l'article entier sur les pages d'accueil, les archives et les réseaux sociaux.
Lieu	N'importe où dans le contenu de l'article ou de la page.	Affiché par votre thème sur les pages autres que l'article lui-même.
Comment il est ajouté	Utilisation du bloc « Couverture » dans l'éditeur de contenu.	Utilisation du réglage « Image mise en avant » dans la barre latérale de l'article.
Caractéristiques principales	Peut avoir des superpositions de texte, des effets de parallaxe et des filtres.	L'apparence et la taille sont contrôlées par votre thème WordPress.

Comment ajouter une image de couverture dans WordPress

L'éditeur de blocs WordPress, également connu sous le nom de Gutenberg, permet d'ajouter très facilement des images de couverture à l'aide du bloc pratique « Couverture ».

Pour commencer, vous devez créer un nouvel article en allant dans Articles » Ajouter un article.

Vous pouvez également modifier celui que vous avez déjà en accédant à Articles » Tous les articles, en trouvant l'article que vous souhaitez modifier, et en cliquant sur le titre de l'article pour l'ouvrir dans l'éditeur.

Dans l'éditeur d'article, cliquez sur le bouton « + » pour ajouter un nouveau bloc et sélectionnez le bloc « Couverture » dans la liste.

Vous trouverez le bloc « Couverture » sous l'onglet « Média ». Alternativement, vous pouvez également taper « /couverture » dans le champ de recherche de bloc pour le trouver facilement.

Après avoir sélectionné le bloc « Couverture », vous le verrez apparaître dans l'éditeur de contenu. Vous êtes maintenant prêt à ajouter votre image de couverture.

Faites simplement glisser et déposez votre image ou vidéo préférée dans la zone du bloc. Alternativement, vous pouvez cliquer sur le bouton « Télécharger » pour sélectionner un fichier depuis votre ordinateur.

Et si vous avez déjà quelque chose de génial dans votre médiathèque, cliquez sur le bouton « Médiathèque » pour choisir une image dans votre galerie média.

Cliquez sur le bouton « Sélectionner » pour ajouter votre image à l'article.

Maintenant, il est temps de le personnaliser.

Cliquez simplement sur l'image, et une barre d'outils s'ouvrira pour les ajustements. Le panneau à droite offre encore plus d'options.

Commençons par ajouter un titre. Cliquez simplement sur la zone « Écrire un titre… » au milieu de votre image de couverture et tapez votre texte.

Vous aurez des options de formatage pratiques qui apparaissent au-dessus du texte pour la personnalisation.

Ensuite, consultez le panneau sur le côté droit pour des paramètres supplémentaires.

Ici, vous verrez deux onglets : « Paramètres » et « Styles ».

Dans l'onglet « Paramètres », vous pouvez personnaliser les options de mise en page. Par défaut, la mise en page est définie sur pleine largeur, vous pouvez donc laisser ce paramètre tel quel.

Ensuite, choisissez entre un fond fixe ou répété pour correspondre à votre design. Un fond fixe est parfait pour créer un effet de parallaxe, donnant à votre image une sensation dynamique. Un fond répété est utile lorsque vous utilisez des images en mosaïque.

Ensuite, ajustez le point focal de l'image pour mettre en évidence les parties essentielles. Vous pouvez également définir la résolution pour choisir la netteté et la clarté de vos images.

Passez ensuite à l'onglet « Styles » et ajustez l'opacité de la superposition. Cela fait référence à la transparence d'une couche de couleur sur votre image.

Par défaut, elle est réglée sur 50 % de transparence, mais vous pouvez l'ajuster pour correspondre à l'ambiance de votre article. Cela permet de s'assurer que le texte reste facile à lire tout en vous permettant de contrôler la quantité de couleur affichée.

Enfin, vous pouvez expérimenter avec les filtres pour changer le style de votre image. Essayez-en différents pour trouver celui qui convient le mieux à votre article.

Pour ceux qui aiment faire preuve de créativité, plongez dans les paramètres Avancés pour ajouter du CSS personnalisé et donner à votre image de couverture une touche unique.

Et voilà ! N'hésitez pas à répéter ces étapes pour ajouter d'autres images de couverture si votre article en a besoin, créant ainsi une expérience de lecture dynamique et engageante.

Une fois que vous avez terminé, n'hésitez pas à prévisualiser et à publier votre article pour vous assurer que tout est beau sur le front-end.

Comment ajouter une image mise en avant dans WordPress

Ajouter une image mise en avant à votre article WordPress est un moyen simple de le faire ressortir. Le processus est presque identique à celui de l'ajout d'une image de couverture.

Que vous soyez novice en matière de blogging ou que vous ayez besoin d'un rappel rapide, voici comment procéder.

Pour commencer, ouvrez l'article que vous souhaitez modifier. La boîte méta de l'image mise en avant se trouve sur la droite.

Cliquez simplement sur l’option « Définir l’image mise en avant » pour commencer.

Maintenant, ajoutons votre image mise en avant.

Vous pouvez télécharger une nouvelle image en utilisant l’outil de glisser-déposer ou en sélectionnant une image dans votre médiathèque.

Après cela, vous pouvez ajouter un titre et un texte alternatif (important pour le référencement et pour les utilisateurs de lecteurs d'écran) pour votre image mise en avant, puis cliquez sur le bouton « Définir l'image mise en avant ». Vous avez ajouté avec succès une image mise en avant à votre article !

Pour des instructions plus détaillées, vous pouvez lire notre guide pour débutants sur l'ajout d'images mises en avant dans WordPress.

Après avoir ajouté votre image mise en avant, vous pouvez la personnaliser. Cependant, les options de personnalisation dépendront du type de thème WordPress que vous utilisez.

Dans cette étape, j'explorerai deux méthodes pour personnaliser vos images mises en avant : l'utilisation d'un personnalisateur de thème et de l'éditeur de site complet (FSE).

Utilisation du personnalisateur de thème

Cette méthode fonctionne généralement pour les thèmes classiques, mais j'utiliserai le thème Sydney pour cet article. Sydney offre des options de conception conviviales qui facilitent l'amélioration de l'apparence de votre site.

Pour commencer, vous devez d'abord installer et activer le thème. Si vous avez besoin d'aide, lisez le guide de mon équipe sur l'installation d'un thème WordPress.

Ensuite, commencez par naviguer dans votre tableau de bord WordPress et allez dans Apparence » Personnaliser. Cela ouvrira le personnalisateur.

Ici, vous pouvez ajuster de nombreux aspects de la présentation visuelle de votre site, y compris votre image mise en avant.

Dans le personnalisateur, vous pouvez également explorer des sections comme « En-tête » pour accéder aux paramètres liés à vos images mises en avant.

Vous pouvez également ajuster les préréglages de l'en-tête et la mise en page mobile. Une fois que vous êtes satisfait des modifications, cliquez sur « Publier » en haut à gauche pour les enregistrer.

Pour plus de détails, n'hésitez pas à consulter ce guide sur l'utilisation du personnalisateur de thème.

Utilisation d'un éditeur de site complet (FSE)

Pour ceux qui utilisent des thèmes basés sur des blocs, l'Éditeur complet du site (FSE) vous permet de personnaliser vos images mises en avant. Les étapes ci-dessous montrent comment modifier le style global, pour l'ensemble du site, de toutes vos images mises en avant.

Gardez à l'esprit qu'il s'agit d'un réglage global. Pour des ajustements plus spécifiques, vous pouvez également modifier des modèles individuels comme le modèle « Article unique ».

Commencez par aller dans Apparence » Éditeur depuis votre panneau d'administration WordPress. Cela ouvrira l'éditeur de site. Une fois dans l'éditeur, allez dans Navigation » Styles.

Ensuite, faites défiler vers le bas et choisissez « Blocs » dans la liste.

Cela ouvrira la liste des blocs que vous pouvez personnaliser dans l'éditeur.

Ensuite, recherchez le bloc « Image mise en avant ». Pour le trouver plus rapidement, vous pouvez taper « image mise en avant » dans la barre de recherche.

Ici, vous verrez les options de personnalisation pour votre image mise en avant, y compris la modification des dimensions (remplissage et marge).

Vous pouvez également ajouter une bordure, une ombre et un rayon à l'image. N'hésitez pas à expérimenter avec ces paramètres et à voir comment ils affectent l'apparence de votre image mise en avant.

Une fois que vous êtes satisfait des modifications, prenez un moment pour les prévisualiser avant de publier. Cela garantit que tout est parfait sur tous les appareils.

Si vous avez besoin de plus d'informations, consultez notre guide complet pour débutants sur l'édition complète de site WordPress.

Questions fréquemment posées sur les images de couverture et les images mises en avant

Voici les réponses à certaines questions fréquentes que notre équipe reçoit concernant l'utilisation des images de couverture et des images mises en avant dans WordPress.

Puis-je utiliser la même image pour l'image de couverture et l'image mise en avant ?

Oui, absolument. Il est courant de définir votre image mise en avant, puis d'utiliser cette même image dans un bloc de couverture en haut de votre article. Cela crée une expérience visuelle cohérente pour vos lecteurs dès le moment où ils cliquent sur le lien jusqu'à ce qu'ils commencent à lire.

Pourquoi le texte sur mon image de couverture est-il difficile à lire ?

Cela se produit généralement parce qu'il n'y a pas assez de contraste entre la couleur de votre texte et l'image qui se trouve derrière. Vous pouvez résoudre ce problème en ajustant la superposition de couleur dans les paramètres du bloc de couverture.

Une superposition plus foncée avec un texte clair (ou vice versa) le rend beaucoup plus lisible.

Que se passe-t-il si je ne définis pas d'image mise en avant pour mon article ?

Si vous ne définissez pas d'image mise en avant, votre article peut apparaître comme un espace vide sur la page d'accueil ou les pages d'archives de votre blog.

Lorsque l'article est partagé sur les réseaux sociaux, la plateforme peut extraire une image aléatoire de la page ou ne montrer aucune image, ce qui peut nuire à l'engagement.

Le texte que j'ajoute sur une image de couverture affecte-t-il mon référencement ?

Le texte que vous placez sur un bloc de couverture est traité comme un paragraphe ou un titre normal par Google, il est donc indexé et peut contribuer au référencement de votre article. Cependant, le titre principal de votre page et les titres dédiés (H2, H3) ont un impact beaucoup plus important.

Un article peut-il avoir plus d'une image mise en avant ?

Par défaut, WordPress n'autorise qu'une seule image mise en avant par article. Cependant, vous pouvez utiliser un plugin comme All in One SEO pour définir une image différente spécifiquement pour les plateformes de réseaux sociaux.

Cela vous permet d'avoir une image mise en avant standard pour votre site et une image personnalisée optimisée pour Facebook ou Twitter.

Guides d'experts pour l'utilisation des images WordPress

Découvrez ces outils et astuces pratiques pour améliorer encore vos images WordPress :

• Meilleurs plugins et outils d'images mises en avant pour WordPress (comparatif)
• Comment recadrer et modifier les miniatures d'articles WordPress
• Comment créer des tailles d'images supplémentaires dans WordPress
• Comment ajouter une image héros dans WordPress (fonctionne pour tous les thèmes)
• Texte alternatif d'image vs Titre d'image dans WordPress – Quelle est la différence ?
• Comment optimiser les images pour les performances web sans perdre en qualité
• Façons d'empêcher le vol d'images dans WordPress

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.