Bloc Bannière

Retour à la liste des blocs

Pour donner à votre article ou à votre page un aspect élégant et professionnel, vous pouvez ajouter un bloc Bannière.

Pour connaître la procédure à suivre pour ajouter un bloc, veuillez consulter l’article Ajouter un nouveau bloc.

Lorsque vous avez ajouté un bloc Bannière, vous êtes invité·e à y intégrer une image en la téléversant ou en la choisissant dans votre médiathèque, vous pouvez aussi utiliser un aplat de couleur en choisissant une des couleurs de la palette du thème.

Vous pouvez aussi intégrer le bloc Bannière, puis y glisser-déposer une image, ce qui la téléversera automatiquement dans votre médiathèque.

Capture d’écran montrant les possibilités d’ajout d’image ou de couleur au bloc Bannière

Une fois l’image intégrée ou la couleur choisie, vous êtes invité·e à saisir un texte qui s’affichera sur l’image ou l’aplat de couleur, il s’agit d’un bloc Paragraphe avec l’ensemble de ses outils et réglages, intégré au bloc Bannière. Vous pourrez utiliser tout ou partie de ce texte comme lien, en utilisant l’outil Lien.

Capture d’écran montrant l’ajout de texte au bloc Bannière

Barre d’outils du bloc

Capture d’écran de la barre d’outils du bloc Bannière

Chaque bloc dispose d’une barre d’outils vous permettant de le manipuler directement dans l’éditeur. Parmi ces outils, on distingue les outils communs, présentés dans l’article Barre d’outils des blocs, et d’éventuels outils spécifiques, décrits ci-dessous. 

Haut ↑

Modifier la position du contenu

Par défaut la position du texte est réglée sur Centré et au centre, mais vous avez le choix entre neuf positionnements combinés possibles (3 verticaux : en haut, centré, en bas et 3 horizontaux : à gauche, au centre, à droite).

Haut ↑

Permuter sur toute la hauteur

Cet outil permet à l’image du bloc Bannière d‘occuper toute la hauteur de l’écran du lecteur pour créer une expérience immersive.

Si vous utilisez l’outil Permuter sur toute la hauteur, la Hauteur minimale, dans la section Dimensions de la colonne latérale des réglages, aura pour valeur 100 VH.

Haut ↑

Appliquer un filtre duotone

L’application d’un filtre duotone au bloc Bannière s’effectue de la même manière que pour le bloc Image.

Haut ↑

Remplacer

Cet outil vous permet de sélectionner une nouvelle image pour votre bloc.

Cliquez sur l’outil Remplacer, trois options sont alors proposées :

  1. Ouvrir la médiathèque pour sélectionner une autre image présente dans la médiathèque.
  2. Téléverser pour ajouter une nouvelle image à votre médiathèque puis l’utiliser pour remplacer l’image courante.
  3. Utiliser l’image mise en avant pour l’afficher dans votre bannière.

Vous pouvez là encore glisser-déposer (directement à l’intérieur du bloc) une image pour remplacer l’image déjà présente.

Haut ↑

Réglages du bloc

Selon les blocs, divers réglages sont disponibles dans la colonne latérale des réglages. Parmi ceux-ci, on distingue les réglages communs (à une majorité de blocs) des réglages spécifiques, décrits ci-dessous.

Haut ↑

Réglages des médias

Dans la section Réglages des médias, les réglages suivants vous sont proposés :

  • Arrière-plan fixe – Si cette option est activée, l’image de la bannière défile en même temps que votre page (effet parallaxe). Si vous désactivez cette option, l’image est simplement intégrée à la page et ne défile donc pas. Si l’option est activée, vous ne pouvez pas saisir de texte pour le champ alt de la balise HTML <img> car l’image n’a alors qu’un objectif décoratif.
  • Arrière-plan répété – Cette option vous permet de répéter la même image pour former un motif dans le bloc Bannière. Par exemple, si vous avez une petite image et que vous souhaitez qu’elle se répète plusieurs fois dans le bloc, vous pouvez activer cette option.
  • Sélecteur de point de focalisation – Cette option n’est disponible que lorsque l’option d’Arrière-plan fixe est désactivée. Cet outil vous permet d’identifier le principal point d’intérêt de la photo et de le mettre en évidence. Cliquez sur le sélecteur pour le faire glisser à l’endroit souhaité, ou saisissez des valeurs pour les champs Gauche et Haut pour le définir manuellement. Il est important de bien placer ce point, car l’image sera recentrée dessus en particulier pour les affichages sur tablette et mobile.
  • Texte alternatif (alt) – Ce champ texte vous permet de saisir un texte décrivant l’objet de l’image, essentiel pour l’accessibilité et le référencement naturel (SEO), qui sera utilisé dans le champ alt de la balise HTML <img>. En savoir plus sur l‘accessibilité des médias.
  • Effacer le média – Ce bouton vous permet d’effacer l’image du bloc Bannière en un clic.

La vidéo ci-dessous montre l’impact du réglage Arrière-plan fixe :

Vidéo montrant l’impact d’un arrière plan fixe pour le bloc Bannière

La vidéo ci-dessous montre le réglage Arrière-plan répété :

Vidéo montrant le réglage Arrière-plan répété

Haut ↑

Couleur

Haut ↑

Calque de superposition

Dans la section Couleur de l’onglet Styles, vous pouvez choisir une couleur pour le Calque de superposition et en diminuer ou en augmenter l’Opacité. Par défaut, cette dernière est définie à 50 % appliquée à une couleur noire implicite, d’où la couleur grise du calque.

Pour choisir une couleur, cliquez sur Couleur de superposition, puis dans la fenêtre qui s’affiche choisissez une couleur Unie ou un Dégradé.

Haut ↑

Opacité de la superposition

Pour définir la valeur de l’Opacité du calque de superposition, vous pouvez faire glisser le sélecteur vers la gauche ou la droite ou saisir une valeur dans le champ, ou encore utiliser les flèches vers le haut ou vers le bas pour ajuster la valeur. À la valeur 100, le calque est totalement opaque et l’image n’est plus visible. À la valeur 0, le calque de superposition disparaît complètement, et seule l’image apparaît.
Si vous avez ajouté du texte à votre bloc Bannière, nous vous recommandons de rendre le calque de superposition un peu opaque afin d’en faciliter la lecture.

Haut ↑

Avancé

L’onglet Avancé vous permet d’accéder aux réglages avancés des blocs.

Traduit par Jenny Dupuy
Relu par Patrick Olivaud, Thomas Piron et Marie Comet
Dernière mise à jour le 22 décembre 2023

Contribuer à la documentation en français de WordPress

Journal des modifications

22 décembre 2023 Jenny Dupuy – Modification de la description de l’outil Permuter sur toute la hauteur, qui n’était pas correcte, remplacement du paragraphe sur les filtres duotone par un lien vers la même fonctionnalité décrite dans l’article Bloc Image, suppression du paragraphe Dimensions, puisque les fonctionnalités sont déjà décrites dans l’article Réglages communs.
29 novembre 2023Marie Comet :
– Suppression du GIF et du paragraphe « Calque de superposition » qui étaient obsolètes.
– Mise à jour du descriptif de « Calque de superposition » (Opacité => Opacité de la superposition).
– Ajout de Marges externes et Espacements des blocs dans « Dimensions ».
31 janvier 2023Jenny Dupuy – Modifications liées à la version 6.1 : mise à jour de la capture montrant les options d’ajout d’une image au bloc et de celle de la barre d’outils du bloc, ajout de l’option Utiliser l’image mise en avant dans l’outil Remplacer, correction du nom de la section Calque de superposition nommé Couleur. Remplacement de « image mise en avant » par « image » dans le paragraphe Appliquer un filtre Duotone.