Éditeur Wix : Personnaliser le design de vos boutons | Centre d'Assistance

Éditeur Wix : Personnaliser le design de vos boutons

Temps de lecture : 7 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.

Capture d'écran d'un bouton après avoir été sélectionné. L'icône Design est mise en surbrillance.

Dans cet article, apprenez-en plus sur :

Remarque :

Les options pour les états des boutons varient en fonction du type de bouton sélectionné.

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.

Personnalisez l’état de chaque bouton individuellement pour créer des effets attrayants lorsque les visiteurs naviguent sur votre site. Utilisez des couleurs éclatantes et distinctes pour les états par défaut, de survol et actif de chaque bouton afin d'améliorer l'engagement et de mettre en valeur chacun d'entre eux.

Quelle est la différence entre les états du bouton ?

capture d'écran de plusieurs types de boutons différents.

Remarque :

Les options de personnalisation disponibles dépendent de ce que vous choisissez d'afficher sur votre bouton (texte, icône ou les deux).

Pour personnaliser le design de votre bouton :

Accédez à votre éditeur.
Cliquez sur le type de bouton que vous souhaitez personnaliser parmi les options ci-dessous :

Personnaliser un bouton de texte et d'icône

Personnaliser un bouton d'icône

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 d'icône

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 le design de votre bouton
Glossaire du design
Options de design des boutons
Options de formatage du texte
Options de design d'icône