Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.
Personnaliser les boutons

Utilisez le panneau Styles du site pour modifier le style des boutons sur votre site. Vous pouvez changer la couleur, la forme et le style du texte, ce qui est un excellent moyen d’aligner les appels à l’action sur le design visuel de votre site.

Pour faciliter la cohérence de votre design, toute modification apportée au style des boutons est appliquée sur la plupart des boutons de votre site.

Pour découvrir comment ajouter des boutons à votre site, consultez l’article Utiliser le bloc Bouton.

Ces étapes concernent la version 7.0. Si votre site utilise la version 7.1, consultez l’article Options de style et de design de la version 7.1 pour en savoir plus.

Avant de commencer

Consultez la section Personnaliser les boutons de site pour modifier les boutons suivants :

  • Boutons Ajouter au panier
  • Les Blocs Bouton
  • Boutons des blocs Don
  • Boutons Envoyer des blocs Formulaire
  • Boutons des blocs Newsletter 

Consultez la section Personnaliser les autres boutons pour modifier les boutons suivants :

  • Page de couverture
  • Blocs Image
  • Panier
  • Boutons de bannière ou de navigation spécifiques au modèle

Personnaliser les boutons de site

Pour modifier le style de la plupart des boutons de votre site : 

  1. Dans le panneau Pages, sélectionnez une page sur laquelle se trouvent des boutons.
  2. Dans le Menu principal, cliquez sur Design, puis sur Styles du site.
  3. Faites défiler l’écran vers le bas jusqu’à Boutons. Dans les blocs Bouton, la section s’appelle Bloc Bouton (petit), (moyen) ou (grand).

Style du bouton. Choisissez un style :

  • Solide
  • Contour
  • En relief

Screen_Shot_2018-01-30_at_4.17.13_PM.png

Forme du bouton. Choisissez une forme :

  • Carrée
  • Arrondi
  • Pilule

Screen_Shot_2018-01-30_at_4.18.21_PM.png

  • 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 : changez la police. Vous ne pouvez pas changer la taille du texte des boutons des blocs Formulaire et des blocs Newsletter.
Astuce : pour le style Contour, le texte s’affiche automatiquement en noir ou en blanc en cas de survol, selon la valeur définie pour Couleur du bouton.

Personnaliser les autres boutons

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

Modifier le texte du bouton

Pour créer vos propres appels à l’action, vous pouvez modifier le texte par défaut de la plupart des boutons de votre site.

Bloc Formulaire et bloc Newsletter

  1. Double-cliquez sur un bloc Formulaire ou Newsletter pour ouvrir l’éditeur de bloc.
  2. Dans l’onglet Avancé, modifiez le texte dans le champ Texte du bouton d’envoi.

Bouton Ajouter au panier

  1. Double-cliquez sur un produit pour ouvrir l’éditeur de produit.
  2. Dans l’onglet Options, cochez Utiliser un libellé personnalisé pour le bouton Ajouter, puis modifiez le texte.

Bloc Bouton

  1. Cliquez sur un point d’insertion pour ajouter un bloc Bouton.
  2. Dans la zone Texte, saisissez le libellé.

Boutons de navigation

Avec les familles de modèles Brine et Bedford, vous pouvez modifier le texte du bouton de navigation en changeant le titre de la navigation.

Personnaliser le bouton Panier

Tous les modèles sont dotés d’un bouton Panier qui indique le nombre d’articles présents dans le panier du client et qui le redirige vers la page de paiement. Si vous ne voyez pas le panier, consultez nos conseils de résolution des problèmes.

Vous pouvez personnaliser le style du panier dans les familles de modèles suivantes :

Famille de modèles Étapes

Brine

  1. Dans le panneau Styles du site, sous Position du panier, choisissez n’importe quelle option, à l’exception de Masquer.
  2. Utilisez la section En-tête : Panier pour modifier la police, la couleur et le style (texte, panier ou sac).
  3. L’ajustement Icônes permet de modifier l’épaisseur des icônes sac et panier.

Farro

  1. Dans le panneau Styles du site, sous Position du panier, choisissez n’importe quelle option, à l’exception de Masquer.
  2. Utilisez la section En-tête : Panier pour modifier le style (texte, panier ou sac), la police et la couleur.
  3. L’ajustement Icônes permet de modifier l’épaisseur des icônes sac et panier.

Pacific

  1. Ajoutez au moins un produit sur une page Produit, puis ajoutez-le à votre panier. Les options de personnalisation apparaissent uniquement à partir du moment où le panier contient au moins un produit. Vous pourrez toujours le retirer ultérieurement.
  2. Ouvrez le panneau Styles du site.
  3. Utilisez les ajustements Couleur d’arrière-plan du bouton Panier et Couleur de la police du bouton Panier pour changer les couleurs du bouton.
  4. Utilisez l’ajustement Police des liens pour changer la police. Notez que cet ajustement change la police de tous les liens de navigation.

Skye

  1. Le panier s’affichera toujours sous forme d’icône sac une fois que vous aurez ajouté une page Produits à votre site. Vous ne pouvez pas le masquer.
  2. Dans le panneau Styles du site, les ajustements Couleur de l’icône de l’interface et Épaisseur de l’icône de l’interface permettent de modifier l’icône.

York

  1. Dans le panneau Styles du site, sous Position du panier, choisissez n’importe quelle option, à l’exception de Masquer.
  2. Utilisez la section Site : En-tête pour modifier le style (texte, panier ou sac), la police et la couleur.
  3. L’ajustement Épaisseur de l’icône permet de modifier l’épaisseur des icônes sac et panier.

Couleurs de remplacement du bouton

Selon le modèle choisi et la configuration de votre site, un ajustement Alternatif ou (Superposition) peut apparaître dans la section Styles du site. Ces options apparaissent pour les boutons qui sont affichés par-dessus :

  • des images d’arrière-plan (bannières de section d’index, par exemple) ;
  • des zones d’arrière-plan avec des couleurs différentes de l’arrière-plan principal (pieds de page standard ou secondaires, par exemple).

Utilisez cette option pour que les boutons soient plus visibles sur ces arrière-plans uniques. Selon le style de votre bouton, d’autres ajustements Alternatif et (Superposition) peuvent également être disponibles.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 28 sur 187