Personnalisez les boutons de votre site afin qu’ils correspondent à l’image de votre marque.

Utilisez les styles du site pour modifier l’apparence des boutons de votre site. Vous pouvez changer la couleur, la forme et le style du texte, ce qui est un excellent moyen de créer des appels à l’action en concordance avec le style général de votre site. Pour vous aider à assurer un design uniforme sur tout votre site, les modifications de style apportées sont appliquées à la plupart des boutons de votre site.

Regarder une vidéo

Ce guide se concentre sur les options de style des boutons de la version 7.1. Pour le style des boutons de la version 7.0, consultez Boutons de style dans la version 7.0.

Forme et polices des boutons

Lorsque vous créez un style pour les boutons, nous vous recommandons d’ouvrir une page contenant un bouton afin de vérifier les modifications apportées à l’aperçu du site au fur et à mesure de leur application. Pour personnaliser les boutons de votre site :

1. Ouvrez le panneau Styles du site, puis cliquez sur Boutons.
2. Cliquez sur le type de bouton que vous souhaitez personnaliser : principal, secondaire ou tertiaire. Pour en savoir plus, consultez la section Types de boutons.

Vous pouvez définir les réglages suivants pour chaque type :

• Texte : la police et les styles de police pour les boutons dans ce niveau.
• Forme : la forme et si le bouton possède une couleur de remplissage (Remplir) ou uniquement un contour (Pas de remplissage).
• Contour : l’épaisseur du contour du bouton pour les boutons Pas de remplissage. Sur les boutons de type Remplissage, la modification du curseur de contour change la marge intérieure à l’extérieur du bouton.
• Marge intérieure horizontale : la marge intérieure à gauche et à droite du texte du bouton.
• Marge intérieure verticale : la marge intérieure au-dessus et en dessous du texte du bouton. Cet ajustement n’affectera pas les blocs Bouton définis sur Remplir dans les sections de l’Éditeur intuitif. Redimensionnez plutôt les blocs pour ajouter une marge intérieure verticale.

Les modifications sont enregistrées automatiquement. Pour appliquer les paramètres d’un type aux autres types, cliquez sur Appliquer à tous les types de boutons. Pour rétablir les styles d’un type aux paramètres par défaut, cliquez sur Réinitialiser les styles de boutons.

Notez que même si vous pouvez définir des styles de forme et de taille généraux, la taille et la forme de tous les boutons changent pour s’adapter au texte. Si vous incluez beaucoup de texte sur un bouton, il peut apparaître différemment que prévu. Pour contrôler au mieux l’apparence de vos boutons, nous vous recommandons de limiter le texte des boutons à moins de 25 caractères.

Couleur des boutons

Pour s’assurer que vos boutons correspondent au design de votre site, les boutons suivent les couleurs générales de votre site.

• Définissez les couleurs d’arrière-plan et de texte du bouton dans le panneau Couleurs en cliquant sur l’icône en forme de crayon de votre thème.
• Chaque type de bouton possède ses propres réglages pour les couleurs d’arrière-plan et de texte dans chaque thème de couleur, et les blocs ont leurs propres réglages de couleur de bouton.
• Lorsque les boutons sont réglés sur Remplissage, la couleur d’arrière-plan du bouton remplit le bouton. Lorsque les boutons sont définis sur Pas de remplissage, la couleur d’arrière-plan du bouton s’applique au contour et au texte, et remplit le bouton au survol.
• Lorsque vous utilisez la forme Souligné, définissez la couleur du texte du bouton en ajustant l’arrière-plan du bouton. Définissez la couleur d’arrière-plan du bouton à l’aide de l’ajustement du texte du bouton.
• Vous pouvez utiliser différentes couleurs de boutons dans d’autres sections en modifiant le thème de couleur des sections dotées de boutons.

Pour en savoir plus, consultez l’article Modifier les couleurs.

Types de bouton

Le panneau Boutons divise les styles de boutons en trois types : Principal, Secondaire et Tertiaire. Hormis les boutons d’en-tête, les blocs Bouton et les boutons Envoyer des blocs Formulaire, vous ne pouvez pas modifier le type d’un bouton. La plupart des boutons suivent les paramètres de style principaux, mais vous pouvez modifier les styles des blocs Bouton sur l’ensemble de votre site avec des paramètres secondaires et tertiaires.  

C’est un excellent moyen de mettre en avant les appels à l’action les plus importants pour vos visiteurs, ou de faire la distinction entre différents types de liens. Utilisez le tableau ci-dessous pour savoir quels types s’appliquent à quels boutons.

Il peut arriver que certains ajustements n’affectent pas tous les boutons de votre site s’ils risquent de perturber la conception de votre site. Par exemple, pour conserver la disposition du bloc Newsletter, l’ajustement Marge intérieure n’affectera pas les boutons du bloc Newsletter.

Pour savoir comment définir le type d’un bloc Bouton, consultez l’article Blocs Bouton.

Personnaliser les boutons dans la version 7.0

Si votre site utilise la version 7.0, utilisez ces réglages à l’échelle du site pour modifier l’apparence de la plupart des boutons de votre site :

1. Accédez à une page qui utilise des boutons.
2. Revenez dans le panneau Site web, cliquez sur Design, puis sur Styles du site.
3. Faites défiler l'écran jusqu'à Boutons. Dans les blocs Bouton, la section est appelée bloc Bouton (petit), (moyen) ou (grand).

Utilisez les ajustements suivants :

• Style de bouton : choisissez Gras, Contour ou En relief. Si vous choisissez Contour, le texte s’affiche automatiquement en noir ou en blanc en cas de survol, selon la couleur du bouton.
• Forme du bouton : choisissez entre carré, arrondi ou rond.
• Couleur du bouton : changez la couleur d’arrière-plan du bouton.
• Couleur du texte du bouton : changez la couleur du texte.
• Police du bouton : modifiez la police d’écriture. Il n’est pas possible de modifier la taille du texte sur les boutons du bloc Formulaire et du bloc Newsletter.
• Alternative ou (Superposition) - Disponible dans certains templates, définissez des couleurs alternatives pour aider les boutons des images d’arrière-plan ou les couleurs à se démarquer.

Les réglages à l’échelle du site affectent les boutons suivants :

• Boutons Ajouter au panier
• Blocs Bouton
• Boutons des blocs Don
• Boutons Envoyer des blocs Formulaire
• Boutons des blocs Newsletter
• Bouton du bloc Inscription des membres

Quelques types de boutons ont des options de style différentes :

• Les boutons Panier disposent d’options distinctes dans certains templates.
• Les boutons Page de couverture disposent d’options de bouton distinctes.
• Les blocs Image disposent d’options de bouton distinctes.
• Dans la famille Bedford, les boutons de bannière peuvent être personnalisés dans la section Bannière.
• Dans la famille Bedford, le bouton de navigation dans lʼen-tête peut être personnalisé dans la section Navigation du site.
• Dans la famille Brine, les boutons de navigation dans lʼen-tête peuvent être personnalisés dans les sections En-tête : Navigation principale et En-tête : Navigation secondaire.