Centre d'assistance Wix
    Accueil
  1. Créer votre site
  2. Éditeur Wix
  3. Ajouter et personnaliser des éléments
  4. Bouton
    5. Éditeur Wix : Personnaliser le design de vos boutons

Éditeur Wix : Personnaliser le design de vos boutons

Temps de lecture : 9 min
Créez de magnifiques boutons attrayants qui correspondent à votre site et incitent vos visiteurs à interagir. 
Cliquez sur l'icône Design  sur votre bouton pour commencer à le personnaliser.
Dans cet article, apprenez-en plus sur :

Personnaliser les états du bouton

Vous pouvez personnaliser les états de chaque bouton de votre site séparément. Cela vous permet de créer de superbes effets que les visiteurs voient lorsqu'ils naviguent sur votre site.
Par exemple, vous pouvez sélectionner une couleur pour la vue normale, une couleur différente pour la vue en survol et une autre pour le cas où vos visiteurs cliquent sur le bouton. Cela met en évidence le bouton pour montrer à vos visiteurs qu'il est interactif.
Important :
Les effets de survol (toucher) sur les boutons d'icône ne sont pas actuellement compatibles sur iOS. Cela signifie que les visiteurs qui consultent votre site sur un appareil iOS ne verront pas apparaître le mode survol s'ils appuient sur le bouton.

Personnaliser le design de votre bouton

De nombreuses options de personnalisation sont disponibles. Selon le type de bouton, vous pouvez ajuster l'arrière-plan, le texte et l'icône. Choisissez les couleurs, les remplissages, les angles, les ombres et plus encore.

Sélectionnez l'action que vous souhaitez effectuer :

En savoir plus sur la personnalisation d'autres types de boutons :

Glossaire du design

Options de design des boutons

Option
Explication
Utilisation
Remplissages d'arrière-plan
Ajoutez différents remplissages tels que des couleurs, des images, des motifs et des dégradés pour créer des effets surprenants et colorés sur votre bouton.
  • Cliquez sur la case de couleur de chaque calque et sélectionnez le type de remplissage, puis faites glisser le curseur pour modifier l'opacité du calque de remplissage.
  • Réorganisez les calques de remplissage en les faisant glisser de haut en bas de la liste. 
Bordures
Personnalisez la bordure du bouton pour le mettre en valeur. Personnalisez tous les côtés du bouton ensemble, ou chaque côté séparément, en cliquant sur les icônes Verrouiller et Déverrouiller. 
  • Cliquez sur le champ Largeur et saisissez la largeur en pixels, ou ajustez le curseur.
  • Cliquez sur la liste déroulante Style et sélectionnez le style de la bordure.
  • Cliquez sur la case Couleur de remplissage pour sélectionner la couleur de la bordure, puis utilisez le curseur pour ajuster l'opacité. 
Angles
Modifiez les angles de votre bouton pour les rendre plus arrondis ou carrés. Modifiez la taille de tous les angles ensemble, ou personnalisez chaque angle séparément, en cliquant sur les icônes Verrouiller et Déverrouiller. 
Cliquez sur le champ de pixels d'un angle et saisissez le nombre de pixels que vous souhaitez y appliquer.
Ombres
Ajoutez des couches d'ombres à votre bouton et personnalisez la couleur, la taille et plus encore.
  • Cliquez sur la case de couleur de chaque calque d'ombre et personnalisez la couleur, le type, l'angle, la taille, la distance et le flou. Ensuite, faites glisser le curseur pour modifier l'opacité de l'ombre.
  • Réorganisez les calques d'ombre en les faisant glisser de haut en bas de la liste. 
Si vous utilisez un bouton de téléchargement :
  • Cliquez sur le curseur pour activer les ombres.
  • Utilisez les curseurs pour modifier l'angle, la distance, la taille et le flou. Ensuite, utilisez le curseur et la case de couleur pour modifier l'opacité et la couleur.
Mise en page

Modifiez l'affichage de votre bouton.
  • Cliquez sur le menu déroulant Choisir ce que vous souhaitez afficher et choisissez si vous souhaitez afficher le texte, l'icône ou les deux.
  • Sélectionnez l'alignement, la position et l'espacement du texte et/ou de l'icône (si nécessaire).
  • Configurez la marge intérieure autour du texte et/ou de l'icône.

Options de formatage du texte

Option
Explication
Utilisation
Afficher le texte
Afficher ou masquer le texte sur votre bouton.
Cliquez sur le curseur pour afficher ou masquer le texte de votre bouton.
Thème
Sélectionnez le thème du texte de votre bouton.
Sélectionnez un thème de texte dans le menu déroulant.
Polices
Sélectionnez la police de caractères pour le texte de votre bouton.
Cliquez sur le menu déroulant et sélectionnez une police.
Taille police
Modifiez la taille du texte sur votre bouton.
Faites glisser le curseur pour augmenter ou diminuer la taille de la police, ou saisissez une valeur.
Formatage du texte
Appliquer le formatage à votre texte.
  • Mettez en forme votre texte à l'aide des options suivantes : gras, italique, souligné, barrer, couleurs, utilisation des majuscules, direction et alignement du texte.
Espacement caractères
Modifiez l'espace entre les caractères du texte.
Faites glisser le curseur pour augmenter ou diminuer l'espacement, ou saisissez une valeur.
Ombres
Créez des ombres pour votre texte. Vous pouvez ajouter plus d'une ombre.
Cliquez sur Ajouter une ombre pour en ajouter une nouvelle. Cliquez sur l'icône Personnaliser l'ombre pour personnaliser son design.

Options de design des icônes

Option
Explication
Utilisation
Afficher l'icône
Afficher ou masquer une icône sur votre bouton.
Cliquez sur le bouton pour afficher ou masquer l'icône de votre bouton.
Taille
Modifiez la taille de votre icône.
Faites glisser le curseur pour augmenter ou diminuer la taille de votre icône, ou saisissez une valeur.
Couleur
Modifiez la couleur de l'icône.
Cliquez sur la case de couleur et sélectionnez une couleur.
Rotation
Ajustez la rotation de l'icône.
Faites glisser la poignée pour personnaliser la rotation de l'icône, ou saisissez les degrés dans la zone de texte.

Cela vous a-t-il aidé ?

|

Dans cet article

  • Personnaliser les états du bouton
  • Personnaliser le design de votre bouton
  • Glossaire du design
  • Options de design des boutons
  • Options de formatage du texte
  • Options de design des icônes