WordPress 5.0 est sorti avec le tout nouvel éditeur de blocs Gutenberg et une foule de fonctionnalités intéressantes. L’un d’entre eux est le bloc Bannière, qui vous permet d’ajouter des images de couverture à vos messages et pages.

Cette fonctionnalité a semé la confusion chez certains utilisateurs car elle peut sembler similaire à l’option Image à la une qui se trouve dans WordPress depuis WordPress 2.9.

Dans cet article, je vais vous expliquer les différences entre l’image de couverture et l’image à la une dans l’éditeur de blocs WordPress.

Qu’est-ce qu’une bannière ?

Une image bannière est généralement une image large utilisée comme photo de couverture pour une nouvelle section d’un billet ou d’une page de blog. Cela fait partie de l’article général. Vous pouvez utiliser une image de couverture lorsque vous commencez une nouvelle section ou une nouvelle histoire dans votre article.

Avec le bloc Bannière de WordPress, vous pouvez ajouter du texte et une superposition de couleurs sur votre image de couverture.

Quelle différence entre image à la une et image de couverture dans Gutenberg de Wordpress ?
Bloc de couverture dans l’éditeur de blocs WordPress

En ajoutant une superposition de couleur appropriée qui correspond à la couleur de votre thème ou à l’humeur du contenu, vous pouvez rendre votre article plus attrayant.

De même, l’ajout d’une superposition de texte aide vos utilisateurs à identifier facilement où commence une nouvelle section dans votre article et de quoi il s’agit.

Traditionnellement, les blogueurs utilisent le texte d’en-tête pour séparer les sections d’un billet de blog. Avec les bannières, vous avez maintenant la possibilité de séparer les sections d’une manière plus attrayante sur le plan visuel.

Qu’est-ce qu’une image à la une ?

Une image à la une (aussi connue sous le nom image mise en avant ) est l’image principale de l’article qui représente le contenu. Ils sont affichés en évidence sur votre site Web sur les messages individuels, les pages d’archives de blog, ainsi que sur la page d’accueil des sites Web de nouvelles, de magazines et de blog.

En outre, les images présentées sont également affichées sur les flux des médias sociaux lorsqu’un article est partagé.

Les images à la une sont conçues avec soin afin de les rendre attrayantes. De telles images donnent aux utilisateurs un aperçu rapide de votre contenu et les invitent à lire l’article en entier.

Vous trouverez une méta-boîte dans votre écran de post-édition pour ajouter une image à la une parce que presque tous les thèmes WordPress supportent les images à la une par défaut.

Quelle différence entre image à la une et image de couverture dans Gutenberg de Wordpress ?
Image mise en avant dans WordPress

Le lieu et le mode d’affichage des images sont entièrement contrôlés par votre thème WordPress.

Pour les options d’images avancées, vous pouvez installer des modules spécifiques à la gestion des images mises en avant

Comment ajouter une image bannière dans WordPress ?

Le nouvel éditeur de blocs WordPress (Gutenberg) est livré avec un bloc Bannière pour vous permettre d’ajouter une image de couverture dans WordPress.

Tout d’abord, vous devez créer un nouveau message ou modifier un message existant. Dans l’écran de post-traitement, cliquez sur le bouton Ajouter un nouveau bloc, puis sélectionnez Bloc Bannière.

Quelle différence entre image à la une et image de couverture dans Gutenberg de Wordpress ?
Ajout d’un bloc de bannière dans l’éditeur de blocs WordPress

Vous trouverez le bloc Couverture dans l’onglet Blocs communs.

En cliquant sur le bloc, vous verrez le bloc Couverture ajouté à votre éditeur de contenu avec des options pour ajouter votre nouvelle image de couverture.

Quelle différence entre image à la une et image de couverture dans Gutenberg de Wordpress ?
Bloc de couverture avec options pour télécharger l’image

Vous pouvez simplement glisser-déposer une image ou une vidéo dans la zone de bloc pour télécharger une nouvelle image de couverture. Vous pouvez également cliquer sur le bouton Télécharger, choisir une image sur votre ordinateur et l’ouvrir pour télécharger.

Si vous souhaitez ajouter une image déjà téléchargée dans votre médiathèque, vous pouvez cliquer sur le bouton Médiathèque et sélectionner une image dans votre galerie de médias.

Une fois votre image de couverture ajoutée, vous pouvez facilement la personnaliser en cliquant sur l’image de couverture.

Cela vous montrera une barre d’outils avec des options de personnalisation au-dessus de l’image, un champ Ecriture du titre… au centre de l’image, et des paramètres de bloc incluant la superposition de couleur dans le panneau sur le côté droit.

Quelle différence entre image à la une et image de couverture dans Gutenberg de Wordpress ?
Options du bloc bannière

En plus de l’option d’alignement, le bloc d’image de couverture vous offre les deux choix de largeur : Largeur large et pleine largeur.

L’option de grande largeur donne à l’image un aspect aussi large que votre contenu. L’option pleine largeur permet à votre image de couvrir l’ensemble de l’écran de la fenêtre.

Ensuite, vous pouvez ajouter un titre pour votre image de couverture. Lorsque vous cliquez sur l’image de couverture, vous verrez le champ “Rédigez le titre…” au centre de l’image de couverture.

Cliquez simplement sur cette zone pour ajouter du texte. Vous pouvez écrire le titre de votre image de couverture et la formater en utilisant les options de formatage qui apparaissent en haut du texte ou sur l’image de couverture.

Enfin, il y a les réglages du bloc de couverture sur le panneau latéral droit. Vous pouvez activer Arrière-plan fixe pour créer un effet de parallaxe lorsque les utilisateurs font défiler la page vers le bas.

Quelle différence entre image à la une et image de couverture dans Gutenberg de Wordpress ?
Option d’arrière-plan fixe dans le bloc de couverture à Gutenberg

En dessous, il y a des options de superposition de couleurs. Par défaut, il ajoute la couleur de votre thème comme couleur de superposition avec 50% de transparence, mais vous pouvez changer la couleur de superposition et aussi changer l’opacité en déplaçant le point.

Enfin, vous pouvez ajouter du code CSS et ajouter des styles à votre image de couverture en cliquant sur l’option Avancé.

Et voilà c’est tout !

Vous pouvez répéter cette étape pour ajouter plusieurs images de couverture dans un même article si nécessaire.

Comment ajouter une image mise en avant dans WordPress ?

Le processus d’ajout d’une image à la une est le même qu’auparavant. Si vous avez un blog WordPress depuis un certain temps, alors vous savez déjà comment une image à la une est ajoutée.

Pour ajouter une image à la une, vous devrez ouvrir un écran de post-édition puis naviguer jusqu’à la boîte de métadonnées de l’image à la une sur le côté droit de l’écran.

Vous devrez cliquer sur l’option Définir l’image présentée.

Quelle différence entre image à la une et image de couverture dans Gutenberg de Wordpress ?

Ensuite, vous pouvez télécharger une nouvelle image soit par glisser-déposer, soit en sélectionnant une image dans votre médiathèque existante.

Après cela, vous pouvez ajouter le titre et le texte alt pour votre image, puis cliquez sur l’option Sélectionner.

Vous avez ajouté avec succès une image à la une à votre article.

Si vous voulez des instructions plus détaillées, alors vous pouvez lire notre guide du débutant pour ajouter des images à la une dans WordPress.

Une fois que vous avez ajouté votre image mise en avant, vous pouvez prévisualiser votre message et voir à quoi il ressemble.

Si vous utilisez le nouveau thème par défaut twenty-nineteen ou d’autres thèmes modernes, vous pouvez également voir une superposition de couleurs sur les images présentées.

Vous pouvez le supprimer ou changer la couleur en allant dans le customiseur WordPress.

Cliquez simplement sur le bouton Apparence ” Personnaliser dans votre menu WordPress.

Une fois dans le panneau Personnaliser, vous devez cliquer sur l’option Couleurs à gauche.

Dans cet onglet, vous verrez l’option de couleur principale de votre thème et l’option pour activer ou désactiver le filtre d’image.

Vous pouvez changer la couleur principale de votre thème en sélectionnant l’option Personnaliser et en choisissant une couleur.

Si vous voulez désactiver le filtre de couleur sur vos images en à la une, alors vous pouvez simplement enlever l’option “Appliquer un filtre aux images à la une en utilisant la couleur primaire”.

Veuillez noter que les images présentées sont gérées par thèmes WordPress, vous pouvez donc ne pas trouver cette option dans votre thème s’il ne supporte pas les filtres d’image.

Conclusion – Image bannière par rapport à l’image mise en avant dans WordPress

Maintenant que vous savez comment ajouter une image de couverture et une image à la une, jetons un coup d’œil à quelques pratiques exemplaires.

Les images à la une ont été couramment utilisées par les blogues WordPress, les magazines en ligne, les nouvelles et les sites Web de divertissement comme vignettes ou images d’articles principaux.

Des images à la une bien conçues aident à attirer plus d’utilisateurs pour ouvrir un article. Ils sont parfaits pour rendre votre site Web attrayant et visuellement interactif.

Les images de couverture font en fait partie de votre article. Un utilisateur voit votre image de couverture après avoir ouvert votre article à lire. Ainsi, ils rendent vos articles plus engageants et plus amusants à lire.

La meilleure utilisation des images de couverture est d’ajouter une belle transition entre les sections d’un long article.

Les images de couverture sont uniques par rapport aux images d’un message régulier parce qu’elles ont l’option pleine largeur et que vous avez la possibilité d’y ajouter du texte en surimpression.

En ajoutant correctement des images de couverture, vous pouvez améliorer l’engagement des utilisateurs sur vos messages.

Nous espérons que cet article vous a aidé à comprendre la différence entre une image de couverture et une image à la une dans le nouvel éditeur de blocs WordPress. Vous pouvez également lire notre article sur la façon de mettre à jour vos anciens articles WordPress avec l’éditeur de blocs Gutenberg.


siddhy

Développeur web full stack depuis une 15aine d'année dans une agence web du sud de la France et Geek depuis toujours, l'apprentissage et le partage font parti intégrante de ma philosophie au même titre que l'évolution personnelle et la sagesse bouddhiste.

3 commentaires

Monique Jacquet · 7 décembre 2019 à 9 h 07 min

Merci pour cet article depuis plusieurs jours je cherche à installer la bannière pleine largeur mais l’onglet pleine largeur ne s’affiche pas dans les options de la bannière. Pouvez vous me dire pourquoi.
Monique

    siddhy · 9 décembre 2019 à 13 h 22 min

    Bonjour Monique,

    Entre temps (de l’écriture de l’article à maintenant) Gutenberg a un peu évolué et les “onglets” ne sont plus exactement identiques. Par contre ils sont bien toujours là, sur une banière ou sur un bloc on peut “modifier l’alignement” pour mettre le bloc en “large” ou “pleine largeur” par ex.

    Par contre il se peut que le thème que tu utilises surcharge ça et bloque la mise en page voulue. As tu essayé sur un nouvel article ? Sinon en changeant momentanément de thème ?

      Monique Jacquet · 9 décembre 2019 à 13 h 25 min

      Merci pour la réponse .
      Oui en effet c’est mon thème qui bloque la mise en page pleine largeur de la bannière, dommage!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *