Blocs

Blocs »Bloc de bannière

Pour conférer à votre article ou page une apparence soignée et professionnelle, vous pouvez ajouter un bloc de bannière.

Ajouter le bloc de bannière

Commencez par cliquer sur l’icône d’insertion. Pour un ajout rapide dans un nouveau bloc de paragraphe, saisissez /bannière et appuyez sur Entrée.

Utilisez la commande /bannière pour insérer une image de bannière.
Utilisez la commande /bannière pour insérer une image de bannière.

Des instructions détaillées sur l’ajout de blocs sont disponibles ici.


Ajouter une image

Une fois le bloc créé, vous disposez de deux options : Charger et Bibliothèque de médias. L’option Charger vous permet de charger une nouvelle image à partir de votre appareil tandis que l’option Bibliothèque de médias vous permet de sélectionner une image que vous avez déjà chargée dans la Bibliothèque de médias de votre site.


Ajouter du texte et d’autre contenu

Maintenant que votre image de bannière est sélectionnée, vous pouvez y ajouter un titre. Utilisez cette option, par exemple, pour ajouter un titre à une nouvelle section d’un article ou d’une page. Vous pouvez également ajouter d’autres blocs à afficher au-dessus du bloc de bannière, comme un bloc de bouton ou un bloc paragraphe.


Barre d’outils du bloc

Chaque bloc est accompagné d’icônes de barre d’outils uniques et de contrôles utilisateur spécifiques du bloc qui vous permettent de manipuler le bloc directement dans l’éditeur.

Le bloc de bannière propose plusieurs options de barre d’outils.
Le bloc de bannière propose plusieurs options de barre d’outils.
Alignement

Comme de nombreux autres blocs, vous pouvez aligner le bloc de bannière à gauche, à droite et au centre à partir de la barre d’outils. Lors de l’utilisation de l’alignement à gauche ou à droite, vous pouvez ajouter un autre bloc à côté du bloc de bannière.

Le bloc de bannière intègre également les options d’alignement Large et Pleine largeur, utiles pour créer des en-têtes uniques et des effets d’écran large. Ces deux options sont uniquement disponibles si votre thème prend en charge ce type d’alignement.

L’alignement Large s’étend simplement au-delà de la limite de la colonne tandis que l’alignement Pleine largeur couvre toute la largeur de la page.
L’alignement Large s’étend simplement au-delà de la limite de la colonne tandis que l’alignement Pleine largeur couvre toute la largeur de la page.
Position du contenu

Utilisez l’option Position du contenu pour ajuster l’emplacement du texte et d’autre contenu sur l’image :

Bloc de bannière - Option Position du contenu
Déplacement du contenu dans le bloc à l’aide de Position du contenu
Remplacer l’image

Il s’agit d’une autre option de la barre d’outils du bloc de bannière. Choisir Remplacer vous permet de sélectionner un nouveau fichier d’image pour votre bloc. Utilisez-la si vous devez remplacer le fichier d’image dans votre bloc de bannière.


Réglages du bloc

Pour chaque bloc, la colonne latérale de l’éditeur contient des options spécifiques en plus de celles disponibles dans la barre d’outils du bloc. Si la colonne latérale ne s’affiche pas, cliquez sur l’icône en forme de pignon en regard du bouton Publier.

Les réglages du bloc sont accessibles depuis la colonne latérale.
Les réglages du bloc sont accessibles depuis la colonne latérale.
Styles

Utilisez les styles dans les réglages du bloc de bannière pour ajouter un effet de vague en haut ou en bas de l’image de bannière.

Arrière-plan fixe

Dans les réglages du bloc de la colonne latérale, vous voyez une commande permettant de configurer un arrière-plan fixe. Un arrière-plan fixe signifie que l’image de bannière défile avec votre page. La désactivation de cette option insère l’image à son emplacement de sorte qu’elle ne défile pas.

Transformez votre bloc de bannière en image fixe.
Transformez votre bloc de bannière en image fixe.
Sélecteur focal

Si l’option d’arrière-plan fixe est désactivée, vous verrez le sélecteur focal. Cet outil vous permet d’identifier le point d’intérêt principal de la photo et de le mettre en évidence. Cliquez sur le sélecteur pour le faire glisser sur le point de votre choix ou utilisez les pourcentages de position horizontale et verticale dessous pour le définir manuellement.

Dimensions

Vous pouvez régler la hauteur minimale de l’image de bannière (en pixels), ce qui garantit qu’elle sera toujours affichée au moins à la hauteur que vous définissez, quelle que soit la taille d’écran utilisée pour voir la page.

Couleur de superposition

Utilisez les options de couleur de superposition pour superposer une couleur sur l’image de bannière. Par défaut, la couleur de superposition est grise et transparente. Grâce aux options de couleur de superposition, vous pouvez la remplacer par la couleur de votre choix.

Ajoutez une superposition de couleur et définissez son opacité.
Ajoutez une superposition de couleur et définissez son opacité.
Opacité

Ce curseur vous permet de configurer l’opacité de la superposition de l’image de bannière. Régler ce curseur sur 100 permet d’obtenir une superposition plus sombre et opaque tandis qu’en le configurant sur 0, la superposition est plus lumineuse et transparente. Sur 100, la superposition est complètement opaque et l’image de bannière n’est plus visible. Sur 0, la superposition disparaît complètement ne laissant que votre image visible.

Si vous ajoutez un titre à votre image de bannière, nous vous recommandons de définir une superposition assez opaque pour qu’il soit plus facile à lire.


Vidéo dans le bloc de bannière

Votre site dispose-t-il du plan Premium, Business ou eCommerce ? Vous pouvez utiliser une vidéo dans le bloc de bannière ! Cela fonctionne mieux avec les vidéos au format .mp4, mais vous pouvez charger des vidéos dans d’autres formats. Une liste des formats acceptés se trouve dans nos FAQ VideoPress.

Insérez le bloc de bannière normalement et, au lieu de choisir une image, vous pouvez choisir d’ajouter une vidéo que vous avez déjà chargée (ou bien sûr chargez une vidéo directement) :

Enregistrement : insertion d’un bloc de bannière, insertion d’une image depuis la bibliothèque de médias et sélection de l’onglet vidéo dans la fenêtre contextuelle de la bibliothèque de médias.

Ensuite, vous pouvez sélectionner la vidéo que vous voulez insérer et ajuster les paramètres de largeur du bloc :

Enregistrement : sélection d’une vidéo à insérer dans le bloc et ajustement de la largeur du bloc.

Vous êtes ensuite prêt à ajouter le texte ou les boutons de votre choix au-dessus de votre vidéo de bannière !


Avancé

L’onglet Avancé vous permet d’ajouter une classe CSS à votre bloc. Vous pouvez ainsi écrire un CSS personnalisé et configurer le style du bloc à votre guise. En savoir plus.

La section Avancé vous permet d’ajouter une classe CSS à votre bloc.
La section Avancé vous permet d’ajouter une classe CSS à votre bloc.