Choisir les styles de boutons qui guident les visiteurs.
Vous décidez de l’insistance de chaque bouton. Un bouton plein marque l’action voulue avant tout, et un bouton contourné à côté propose l’alternative sans concurrencer. Cette page montre comment styliser une telle paire et quel réglage change quoi. Pour ajouter un bouton et définir son lien, voir Ajouter un bouton.
La vidéo suit les étapes ci-dessous : elle fait de Apply now le bouton principal et ajoute un second bouton contourné.
Styliser un bouton principal et un second bouton
Commencez avec un bouton sur la page, comme Apply now.
- Survolez le bouton et ouvrez More > Settings.
- Réglez Type sur Primary.
- Réglez Size sur Large et cliquez sur Save.
- Survolez de nouveau le bouton et ouvrez More > Clone. La copie apparaît juste sous l’original.
- Ouvrez More > Settings sur la copie. Changez son Title, par exemple en
Download brochure, et son Link. - Activez Outline style et cliquez sur Save.
- Cliquez sur Save sur la barre d’outils.
Choisir un style par action
| Action | Style | Exemple |
|---|---|---|
| L’action voulue avant tout | Bouton uni Primary | Apply now |
| Une alternative | Outline style dans le même Type | Download brochure |
| Une action mineure | Link, qui ressemble à un lien de texte | Read the terms |
| Un avertissement ou une étape finale | Danger ou Warning | Cancel my booking |
Utilisez un bouton plein par section, pour que les visiteurs voient aussitôt où cliquer. Écrivez des libellés qui disent ce qui se passe : « Get started » plutôt que « Click here », « Send message » plutôt que « Submit ».
Ce que vous voyez
Deux grands boutons s’empilent dans la colonne : un plein avec la couleur primaire de votre thème et un contourné avec une bordure et du texte de la même couleur. Le plein attire l’œil en premier. Les liens ne s’ouvrent pas pendant la modification. Pour les tester, enregistrez la page, ouvrez le menu d’affichage (l’icône en forme d’œil) et choisissez Preview.
Paramètres
| Paramètre | Rôle | Valeur par défaut |
|---|---|---|
| Type | Le style de couleur : Primary, Secondary, Success, Info, Warning, Danger, Link, Light ou Dark. Les couleurs viennent de votre thème. | Primary |
| Outline style | Une bordure et du texte colorés sans remplissage | Off |
| Size | Normal, Large ou Small | Normal |
| Block button | Étire le bouton sur toute la largeur de sa colonne | Off |
| Link target | Same window ou New window. S’affiche une fois que Link a une valeur. | Same window |
Pour les intégrateurs : chaque Type ajoute la classe Bootstrap btn-<type>, comme btn-primary. Avec Outline style activé, elle devient btn-outline-<type>, sauf pour Link, qui reste toujours btn-link. Large ajoute btn-lg, Small ajoute btn-sm et Block button ajoute btn-block.
Si vous ne voyez pas le style
- Le bouton contourné ne montre aucune bordure. Type vaut Link, qui ressemble toujours à un lien de texte, donc Outline style est sans effet. Choisissez un autre Type pour un bouton contourné.
- Le bouton disparaît presque. Light est proche du blanc, donc il se fond dans une section blanche. Choisissez un Type plus sombre, ou donnez une couleur d’arrière-plan à la section.
- Le lien s’ouvre dans le même onglet. Link target vaut Same window, et il ne s’affiche qu’une fois que Link a une valeur. Renseignez d’abord Link, puis choisissez New window.
Et ensuite ?
- Ajouter un bouton : chaque réglage de bouton, avec une vidéo.
- Effets de survol : assombrir un bouton ou ajouter une ombre quand le pointeur l’atteint.
- Couleur et image de marque : garder les couleurs des boutons alignées sur votre marque.