Le bloc Boutons permet d’ajouter un ou plusieurs boutons qui redirigent vers d’autres pages de votre site ou vers des pages externes. Ce bloc est constitué d’un bloc parent appelé Boutons, contenant un ou plusieurs blocs enfants appelés Bouton.
Lorsque vous ajoutez un bloc Boutons, un premier bloc Bouton (enfant) est inséré automatiquement. Vous pouvez personnaliser le texte du bouton en cliquant sur le texte « Ajouter du texte… » et en saisissant le contenu souhaité.
Pour ajouter un bouton supplémentaire :
- Sélectionnez le bloc parent Boutons en cliquant sur l’icône du bloc Boutons située à gauche de la barre d’outils du bloc enfant Bouton.
- Cliquez ensuite sur l’icône « + » en bas à droite du bloc parent.
- Un nouveau bloc enfant Bouton sera créé, et le curseur s’y positionnera automatiquement pour que vous puissiez saisir le texte du nouveau bouton.
Barre d’outils du bloc parent Boutons#
Chaque bloc Gutenberg dispose d’une barre d’outils spécifique dans l’éditeur, permettant de le configurer rapidement. Outre les outils communs partagés avec d’autres blocs, la barre d’outils du bloc parent Boutons offre des options particulières pour gérer l’ensemble des boutons contenus.
Modifier la justification des blocs#
Cette fonctionnalité modifie l’alignement horizontal des boutons enfants dans le bloc parent Boutons. Vous disposez de quatre options :
- Justifier les blocs à gauche : tous les boutons sont alignés sur le bord gauche du conteneur.
- Justifier les blocs au centre : les boutons sont centrés horizontalement.
- Justifier les blocs à droite : les boutons sont alignés sur le bord droit.
- Répartir les blocs : les boutons sont répartis uniformément sur toute la largeur du bloc parent.
Ces options sont aussi accessibles dans la section Mise en page des réglages du bloc (colonne latérale).
Modifier l’alignement vertical#
Cet outil permet de contrôler la position verticale des boutons enfants au sein du bloc parent Boutons. Quatre choix sont disponibles :
- Aligner en haut : les boutons sont alignés en haut du bloc parent.
- Aligner au milieu : les boutons sont centrés verticalement.
- Aligner en bas : les boutons s’alignent sur le bord inférieur.
- Étirer pour remplir : chaque bouton est étiré pour occuper toute la hauteur du bloc parent.
Barre d’outils du bloc enfant Bouton#
Le bloc Bouton individuel dispose d’une barre d’outils dédiée pour configurer ses caractéristiques et son comportement.
Lien#
L’outil Lien vous permet de définir l’adresse URL vers laquelle le bouton redirigera les visiteurs. Les étapes sont les suivantes :
- Saisissez une URL complète (ex. https://exemple.com) ou entrez un mot-clé pour rechercher une page ou un article existant sur votre site.
- Validez l’URL en cliquant sur le bouton Envoyer.
- (Optionnel) Cochez la case Ouvrir dans un nouvel onglet pour ouvrir le lien dans une nouvelle fenêtre/onglet du navigateur.
Si aucun protocole (http:// ou https://) n’est spécifié dans l’URL, le protocole http:// sera automatiquement ajouté.
Réglages du bloc parent Boutons#
Dans la colonne latérale des réglages, le bloc parent Boutons propose principalement des options communes à de nombreux blocs. Il ne présente pas de réglages spécifiques supplémentaires en dehors de ces options générales.
Avancé#
L’onglet Avancé donne accès à des options supplémentaires destinées aux utilisateurs expérimentés, telles que l’ajout de classes CSS personnalisées pour styliser le bloc avec votre propre code.
Réglages du bloc enfant Bouton#
Réglages de largeur#
Dans l’onglet Réglages de largeur, vous pouvez définir la largeur de chaque bouton enfant en pourcentage de la largeur totale du bloc parent Boutons.
Cela permet de contrôler précisément la taille relative de chacun des boutons, particulièrement utile lorsque plusieurs boutons sont affichés côte à côte.
Avancé#
L’onglet Avancé contient les réglages avancés du bloc, incluant la possibilité d’ajouter des classes CSS personnalisées.
Attribut REL#
Dans la section Avancé, un réglage nommé Attribut REL vous permet de définir l’attribut HTML rel pour chacun des liens des boutons.
L’attribut rel spécifie la relation entre la page du bouton et la page actuelle, ce qui peut influencer le référencement (SEO) et la sécurité (exemple : nofollow, noopener, noreferrer, etc.).
Pour plus d’informations sur l’attribut REL :
https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel