Le bloc Bouton pose un appel à l’action : un libellé, une destination et, si vous le voulez, une icône de chaque côté. Cette page décrit ses trois variantes, son panneau Lien, ses icônes et ses quatre états.
Ajouter un bouton
- Dans l’éditeur, ouvrez l’inserteur et choisissez Bouton principal, Bouton secondaire ou Bouton tertiaire. Ajouter un bloc détaille les façons d’insérer un bloc.
- Tapez le libellé. Tant que le bouton est vide, il affiche Texte du bouton.
- Dans l’onglet Réglages, panneau Lien, choisissez la destination du bouton.
Écrivez ce que fait le bouton, par exemple « Demander un devis ». Une personne qui parcourt au lecteur d’écran la liste des liens de la page n’entend que ce texte.
Choisir la variante
Les trois entrées de l’inserteur produisent le même bloc. La variante marque l’importance du bouton. Les styles enregistrés proposés au bouton dépendent d’elle.
| Variante | Usage | Style livré |
|---|---|---|
| Bouton principal (par défaut) | L’action principale : demander un devis, acheter ou réserver. | Primaire |
| Bouton secondaire | Une action complémentaire : en savoir plus, comparer ou voir les options. | Secondaire |
| Bouton tertiaire | Une action discrète : annuler, revenir ou suivre un lien auxiliaire. | Tertiaire |
Pour changer la variante d’un bouton posé, sélectionnez-le, puis cliquez sur l’une des trois icônes en haut de l’inspecteur. Le nom de chaque variante s’affiche au survol. Le sélecteur de bloc, première icône de la barre d’outils, propose aussi les deux autres variantes.
Le bouton prend alors le style par défaut de sa nouvelle variante et quitte les styles enregistrés pour l’ancienne. Le libellé, le lien, les icônes et les réglages faits à la main sont gardés.
Un style enregistré depuis un bouton appartient à la variante active à ce moment. Un style créé sur un bouton secondaire n’est proposé que sur les boutons secondaires. Définir par défaut pour, puis Variante, le donne à chaque bouton de cette variante que vous poserez. Enregistrer le style d’un bloc détaille ces gestes.
Onglet Réglages
Choisir la destination
- Dans le panneau Lien, cliquez dans le champ Cherchez ou collez une adresse…. La liste propose d’abord Page d’accueil et l’archive de chaque type de contenu, sous l’étiquette Gabarit.
- Tapez au moins deux caractères pour chercher une page, un article, une composition ou un fichier de la médiathèque. Chaque proposition porte son type.
- Pour une autre destination, tapez son adresse et cliquez sur la proposition marquée Adresse, en bas de la liste.
| Vous tapez | Le bouton |
|---|---|
https://… | Mène à un autre site. Une adresse en http:// n’est pas proposée. |
mailto:contact@votresite.fr | Ouvre la messagerie du visiteur, adresse remplie. |
tel:+33123456789 | Propose d’appeler ce numéro. |
#tarifs | Descend jusqu’au bloc de la page qui porte l’ancre tarifs. |
La cible choisie devient une pastille. Modifier et Retirer le lien vident la cible : tant que vous n’en avez pas choisi une autre, le bouton est sans lien. Un lien vers un contenu du site suit ce contenu si son adresse change.
Régler le lien
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Masquer le lien aux moteurs de recherche | Retire l’adresse en clair du code de la page. Le bouton reste cliquable et utilisable au clavier. | Désactivé |
| Ouverture du lien | Dans une modale, Modale en bas à gauche, Modale en bas au centre, Modale en bas à droite, Sur le côté droit ou Classique (dans l’onglet du navigateur). | Classique (dans l’onglet du navigateur) |
| Nom accessible | Le texte annoncé par les lecteurs d’écran à la place du libellé. | Vide |
| Nofollow | Demande aux moteurs de recherche de ne pas suivre le lien ni de lui transmettre de valeur de référencement. | Désactivé |
| Ouvrir dans un nouvel onglet | Ouvre la cible dans un nouvel onglet. La page reste ouverte derrière. | Désactivé |
Les cinq ouvertures en surimpression affichent la cible par-dessus la page, sans la recharger. Ouvrir une modale ou un panneau latéral explique comment les mettre en forme.
Les réglages qui se grisent
| Situation | Effet sur le panneau |
|---|---|
| Ouverture du lien n’est pas sur Classique | Ouvrir dans un nouvel onglet est décoché et grisé : une surimpression n’ouvre aucun onglet. |
| Masquer le lien aux moteurs de recherche est activé | Nofollow et Ouvrir dans un nouvel onglet sont décochés et grisés. |
| La cible est une composition ou un fichier de la médiathèque | Classique quitte la liste des ouvertures et passe à Dans une modale. Le lien est masqué aux moteurs et marqué Nofollow. |
La cible est un mailto:, un tel: ou une ancre | Ouverture du lien et Ouvrir dans un nouvel onglet disparaissent : ces adresses s’ouvrent sur place. |
| La cible est l’accueil ou une archive | Ouverture du lien disparaît : ces cibles s’ouvrent comme une page. |
Nofollow convient à un lien sponsorisé, à un lien vers un site dont vous ne voulez pas vous porter garant et à un lien de service sans valeur éditoriale. Il ne cache pas l’adresse : seul Masquer le lien aux moteurs de recherche la retire du code.
Onglet Styles
Le bouton se règle dans quatre états : Par défaut, Survol, Focus et Actif. Focus habille le bouton qui a le focus du clavier. Actif habille le bouton marqué comme actif, par exemple quand il sert d’onglet.
Panneau Icônes
Le panneau Icônes se trouve sous la rangée des états. Ses onglets Gauche et Droite placent une icône de chaque côté du libellé, avec le même sélecteur que le bloc Icône : Icônes, Animées et Personnalisées. Le bouton Retirer vide un emplacement.
- Une icône se choisit par état : celle de Survol s’affiche quand le pointeur passe sur le bouton. Un état sans icône garde celle de Par défaut.
- Une icône est la même sur tous les écrans.
- Une icône animée posée sur un bouton bouge au survol. Pour un autre déclencheur, posez un bloc Icône à côté du bouton.
Les autres panneaux
| Panneau | Guide |
|---|---|
| Couleurs | Colorer un bloc. Le bouton est lui-même un lien : il n’a pas de couleur de lien. |
| Typographie | Mettre en forme un texte |
| Taille et espacement, Bordures, Effets, Transitions | Régler la taille, les bordures et les effets |
Les trois styles livrés retirent le soulignement qu’un navigateur met sous un lien. La partie Boutons du catalogue de design donne une allure à tous les boutons du site (Adopter un design du catalogue).
Onglet Animations
L’onglet Animations fait apparaître ou bouger le bouton. Animer un bloc décrit les effets.
Placer un bouton
Un bouton se pose seul ou dans un autre bloc : un Conteneur, une cellule de tableau, un panneau d’onglet, une navigation ou la carte d’une liste. Pour une rangée de boutons, rangez-les dans un Conteneur en Flex et réglez l’écart sur le conteneur.
La diapositive d’un diaporama n’accepte qu’un paragraphe ou un titre. Pour poser un bouton sur une image, mettez l’image en arrière-plan d’un Conteneur et placez le bouton dedans.
Accessibilité
- Un bouton qui n’affiche qu’une icône a besoin d’un Nom accessible. Laissez ce champ vide dès que le bouton porte un libellé visible.
- Les icônes d’un bouton sont décoratives : les lecteurs d’écran ne les annoncent pas.
- Quand Ouvrir dans un nouvel onglet est coché, les lecteurs d’écran annoncent « s’ouvre dans un nouvel onglet ». N’écrivez pas « nouvelle fenêtre » dans le libellé.
Le panneau Accessibilité de l’éditeur signale en erreur un bouton sans texte visible ni nom accessible : Bouton sans texte visible ni nom accessible. Remplissez « Nom accessible » dans le panneau Lien. Vérifier l’accessibilité de vos pages décrit le panneau.
Limites
- Le bouton n’a pas d’ancre HTML : pour viser un bouton, posez l’ancre sur le conteneur qui l’entoure.
- Une ancre seule,
#tarifs, vise la page où le bouton s’affiche. Posé dans un gabarit ou une composition, il mène à#tarifssur chaque page qui porte un bloc avec cette ancre.