Utilisez le bloc de boutons pour proposer aux visiteurs une action avec un lien de type bouton. Votre bouton peut renvoyer à d’autres pages de votre site ou à une page externe. Cela permet d’attirer l’attention sur la chose la plus importante que vous souhaitez que vos visiteurs fassent.
Dans ce guide
Pour ajouter le bloc de boutons, cliquez sur l’icône de l’Outil d’insertion de bloc + et recherchez « boutons ». Cliquez dessus pour ajouter le bloc à l’article ou à la page. Une fois le premier bouton ajouté, vous pouvez taper le texte qui apparaîtra dessus.
![Ajouter un bloc de boutons](https://en-support.files.wordpress.com/2020/12/adding-a-buttons-block-min.gif)
💡
À l’aide du clavier, vous pouvez également saisir
/boutons
sur une nouvelle ligne et appuyer sur Entrée pour ajouter rapidement un nouveau bloc de boutons.
![Ajouter un bloc de boutons avec l’outil d’insertion de barre oblique](https://en-support.files.wordpress.com/2020/12/add-a-buttons-block-with-slash-inserter.png?w=688)
Des instructions détaillées sur l’ajout de blocs sont disponibles ici.
Le bloc de boutons a deux niveaux :
- le bloc de boutons global contient votre ou vos boutons. C’est le bloc parent ;
- les blocs de bouton individuels dans le bloc de boutons parent.
Lorsque vous cliquez sur le bloc de boutons parent, une barre d’outils d’options s’affiche :
- Remplacer le bloc de boutons par un autre type de bloc
- Poignée pour faire glisser le bloc afin de changer sa position
- Déplacer vers le haut et vers le bas
- Modifier la justification des éléments (plus de détails ci-dessous)
- Modifier l’alignement vertical
- Autres options de la barre d’outils
![Barre d’outils du bloc de boutons parent](https://en-support.files.wordpress.com/2022/04/buttons-block-parent-toolbar-1.png?w=552)
La barre d’outils des blocs de bouton individuels propose les options suivantes :
- Sélectionner le bloc de boutons parent
- Styles des boutons (plus de détails ci-dessous)
- Poignée pour faire glisser le bloc
- Déplacer vers le haut (gauche) et vers le bas (droite)
- Modifier la justification des éléments (plus de détails ci-dessous)
- Modifier l’alignement vertical
- Modifier l’alignement
- Lien
- Gras, italique et autres options de mise en forme du texte
- Autres options de la barre d’outils
![Barre d’outils du bloc de boutons individuels](https://en-support.files.wordpress.com/2022/04/buttons-block-parent-toolbar.png?w=688)
![Barre d’outils du bloc de boutons](https://en-support.files.wordpress.com/2020/12/button-block-toolbar.png?w=688)
Pour ajouter un lien à votre bouton, cliquez sur l’icône Lien dans la barre d’outils flottante qui apparaît lorsque vous cliquez sur le bloc. L’icône ressemble au maillon d’une chaîne métallique. Vous pourrez coller votre lien ou rechercher les pages et articles existants de votre site.
Par défaut, les liens s’ouvrent dans le même onglet, sauf si vous réglez le lien pour qu’il s’ouvre dans un nouvel onglet.
![Lier un bouton](https://en-support.files.wordpress.com/2020/12/linking-a-button-2.gif)
Vous pouvez aligner les boutons à gauche, à droite ou au centre. Tout d’abord, assurez-vous de sélectionner le bloc de boutons parent comme illustré ci-dessous :
![L’option permettant de sélectionner le bloc parent est indiquée par une flèche.](https://en-support.files.wordpress.com/2021/03/slect-parent-button.png?w=577)
Ensuite, sélectionnez l’option d’alignement dans la barre d’outils :
![](https://en-support.files.wordpress.com/2021/06/center-a-button.png?w=370)
Vous pouvez choisir d’aligner les boutons à gauche, au centre ou à droite.
Vous pouvez également choisir Espace entre les éléments pour ajouter automatiquement le même espace entre plusieurs boutons du bloc.
Lorsque vous cliquez sur le bloc, des réglages de bloc supplémentaires apparaissent dans la colonne latérale droite. Si vous ne voyez pas la colonne latérale, vous devrez peut-être cliquer sur l’icône ⚙️ (engrenage) dans le coin supérieur droit pour afficher les réglages.
![Les réglages de bloc sont disponibles dans la colonne latérale droite.](https://en-support.files.wordpress.com/2021/07/block-settings.png?w=399)
Dans les options Styles, vous pouvez choisir que votre bouton soit rempli d’une couleur (Plein) ou qu’il ait une bordure unie (Contour).
![Styles du bloc de boutons](https://en-support.files.wordpress.com/2020/12/buttons-block-styles.png)
![](https://en-support.files.wordpress.com/2021/06/button-block-typography.png?w=260)
Les réglages Typographie contiennent des options pour contrôler la taille du texte affiché sur votre bouton.
L’option de rayon de bordure vous permet de donner une apparence plus arrondie à vos boutons. En définissant le rayon de bordure sur 0, le bouton sera doté d’angles droits.
![Réglage du rayon de bordure du bloc de boutons](https://en-support.files.wordpress.com/2020/12/buttons-block-border-radius-setting.png)
![Réglages des couleurs du bloc de boutons](https://en-support.files.wordpress.com/2020/12/buttons-block-color-settings.png)
Vous pouvez choisir la couleur du texte et de l’arrière-plan de vos boutons.
Choisissez des couleurs qui feront ressortir votre bouton et assurez-vous qu’elles contrastent suffisamment pour que votre bouton soit lisible. Les paramètres d’accessibilité sont intégrés au nouvel éditeur pour vous avertir si le texte risque de ne pas être lisible par les personnes souffrant de déficience visuelle.
La marge interne est un espace vide à l’intérieur de la bordure d’un bloc, ce qui peut apporter de la clarté à votre contenu et ajuster l’équilibre de la mise en page de la page. Vous pouvez trouver l’option pour configurer la marge interne d’un bouton spécifique dans la section Dimensions des réglages de la colonne latérale de votre bloc. Vous pouvez configurer une valeur uniforme pour les quatre bordures ou des valeurs différentes pour les marges internes haut-bas et latérales.
![](https://en-support.files.wordpress.com/2021/09/buttons-padding1.gif?w=600)
Tapez une valeur dans les réglages de la marge interne pour ajouter la même marge interne autour des quatre bordures de votre bouton.
Si vous cliquez sur l’icône de dissociation, vous pouvez ajouter différentes valeurs de marge interne pour les bordures haut-bas et latérales de votre bouton.
![](https://en-support.files.wordpress.com/2021/09/buttons_padding2.gif)
![Pourcentage de largeur du bloc de boutons](https://en-support.files.wordpress.com/2020/12/buttons-block-width-settings.png?w=554)
Les réglages de la largeur vous permettent de définir la largeur de chaque bouton en pourcentage.
![Changer la largeur des boutons](https://en-support.files.wordpress.com/2020/12/changing-buttons-width-min.gif)
La première fois que vous ajoutez des boutons au bloc de boutons parent, ils s’affichent horizontalement. Vous pouvez afficher les boutons verticalement (c.-à-d. empilés dans une colonne) à l’aide du réglage Transformer en variation sur le bloc de boutons.
![Image de la liste déroulante « Transformer en variation » dans les réglages du bloc de boutons pour placer les boutons horizontalement sur une ligne ou empilés verticalement dans une colonne.](https://en-support.files.wordpress.com/2021/03/transform-buttons.png?w=564)
![GIF montrant comment aligner un bloc de boutons.](https://en-support.files.wordpress.com/2021/03/align-buttons-block-1.gif)
![](https://en-support.files.wordpress.com/2021/06/buttons-block-advanced.png?w=266)
Attribut « Rel » du lien contrôle l’attribut rel
du lien du bouton, pour l’ajout de nofollow
entre autres.
Le champ Ancre HTML peut être utilisé pour créer un saut de page vers votre bouton.
Utilisez Classe(s) CSS additionnelle(s) pour écrire un CSS personnalisé et configurer le style du bloc à votre guise. Lire la suite.