Bannière

Pour donner à votre article ou à votre page un aspect élégant et professionnel, vous pouvez ajouter un bloc Bannière. Ce bloc permet d’intégrer une image ou un aplat de couleur avec un texte par-dessus.

Vous pouvez ajouter une bannière en insérant d’abord un bloc Bannière puis en y téléversant une image, en en sélectionnant une dans votre médiathèque, ou en déposant directement une image via glisser-déposer. Vous avez également la possibilité d’utiliser un fond coloré en choisissant une couleur dans la palette du thème.

Une fois que l’image ou la couleur est sélectionnée, vous pouvez ajouter un texte qui s’affichera au-dessus. Ce texte correspond à un bloc Paragraphe intégré à la bannière, avec tous ses outils de formatage et réglages. Vous pouvez aussi transformer tout ou partie de ce texte en lien grâce à l’outil Lien.

Barre d’outils du bloc#

Chaque bloc dispose d’une barre d’outils qui permet de le manipuler directement dans l’éditeur. Cette barre contient des outils communs à tous les blocs ainsi que des outils spécifiques au bloc Bannière.

Modifier la position du contenu#

Par défaut, le texte dans la bannière est centré à la fois horizontalement et verticalement. Vous pouvez choisir parmi neuf combinaisons de position :

• Verticalement : en haut, centré, en bas
• Horizontalement : à gauche, au centre, à droite

Cela vous permet de placer précisément le texte à l’endroit souhaité sur la bannière.

Permuter sur toute la hauteur#

Cet outil permet de faire occuper à l’image toute la hauteur de l’écran du lecteur, créant ainsi une expérience immersive. Lorsqu’il est activé, la hauteur minimale du bloc est réglée à 100% de la hauteur de la fenêtre (100 VH).

Appliquer un filtre duotone#

Vous pouvez appliquer un filtre duotone à l’image de la bannière, qui modifie ses couleurs selon un duo de teintes personnalisé. Ce filtre est appliqué de la même manière que pour le bloc Image.

Remplacer#

L’outil Remplacer vous permet de changer l’image de la bannière. Trois options sont disponibles :

1. Ouvrir la médiathèque pour choisir une autre image déjà présente
2. Téléverser une nouvelle image depuis votre ordinateur
3. Utiliser l’image mise en avant de l’article ou de la page en cours

Il est aussi possible de glisser-déposer une image directement dans le bloc pour remplacer celle existante.

Réglages du bloc#

Dans la colonne latérale de réglages, vous accédez aux options spécifiques au bloc Bannière ainsi qu’aux réglages communs aux blocs WordPress.

Réglages des médias#

Dans la section dédiée aux médias, vous pouvez configurer ces options :

• Arrière-plan fixe : Lorsque activé, l’image défile avec la page en créant un effet parallaxe. Si désactivé, l’image reste fixe dans le bloc. En mode arrière-plan fixe, il n’est pas possible de saisir un texte alternatif (alt) car l’image devient purement décorative.
• Arrière-plan répété : Cette option fait se répéter l’image pour former un motif sur toute la surface de la bannière, utile avec des petites images ou textures.
• Sélecteur de point de focalisation : Disponible uniquement si l’option arrière-plan fixe est désactivée. Permet de définir manuellement le point d’intérêt principal de l’image. Vous pouvez cliquer/glisser sur l’image pour déplacer le point ou saisir des valeurs numériques pour le positionner précisément. Cela garantit que l’image sera recentrée sur ce point notamment sur les écrans plus petits (tablettes, mobiles).
• Texte alternatif (alt) : Un champ pour décrire l’image afin d’améliorer l’accessibilité et le référencement SEO. Ce texte sera utilisé dans l’attribut HTML alt de l’image.
• Effacer le média : Un bouton pour enlever rapidement l’image de la bannière.

Couleur#

Selon votre thème, plusieurs options de couleurs sont disponibles dans l’onglet Styles sous la rubrique Couleur.

Ce réglage définit la couleur du texte des blocs contenus dans la bannière.

Vous pouvez définir la couleur de texte et d’arrière-plan des blocs Titre insérés dans la bannière.

Choisissez une couleur unie ou un dégradé comme calque de superposition par-dessus l’image de fond, pour renforcer la lisibilité du texte.

Vous ajustez la transparence du calque de superposition par un curseur ou en saisissant une valeur numérique :

• 100 = calque complètement opaque, image cachée
• 0 = calque invisible, seule l’image est visible

Pour favoriser la lisibilité du texte sur l’image, il est conseillé de rendre ce calque légèrement opaque. Si aucune couleur n’est définie pour la superposition, la couleur noire est utilisée par défaut.

Filtres#

Pour appliquer un filtre duotone personnalisé à l’image de la bannière, vous utilisez le même outil que celui du bloc Image. Il permet de choisir deux couleurs qui seront appliquées en nuances sur l’image, modifiant son rendu esthétique.

Dimensions#

Ce réglage détermine le mode d’affichage de l’image dans la bannière. Vous pouvez choisir parmi les options suivantes :

• Taille d’origine : l’image s’affiche dans ses dimensions naturelles
• Carrée 1:1
• Standard 4:3
• Portrait 3:4

Cette sélection ajuste comment l’image est contenue ou recadrée dans le cadre de la bannière.

Avancé#

L’onglet Avancé donne accès à des réglages supplémentaires comme les marges externes, les classes CSS personnalisées, ou d’autres paramètres avancés selon le thème et les extensions. Ces réglages permettent de personnaliser plus finement l’apparence et le comportement du bloc.

Ajouter un nouveau bloc
Barre d’outils des blocs
Réglages communs des blocs
Appliquer un filtre duotone (bloc Image)
Accessibilité des médias et texte alternatif
Réglages avancés des blocs