Les boutons sont un excellent moyen d'encourager les visiteurs à interagir avec un site. Dans l'Éditeur Studio, vous pouvez ajouter des boutons qui affichent du texte, une icône ou les deux. Vous avez le contrôle total du design et de la mise en page afin de créer l'aspect dont vous avez besoin.
Ajouter un bouton
Lorsque vous ajoutez un nouveau bouton, vous pouvez choisir un design dans deux catégories :
- Boutons basiques : Ces boutons affichent uniquement du texte et ont un aspect plus « minimal ».
- Boutons stylisés : Ces boutons peuvent afficher à la fois du texte et des icônes, et offrent des options de personnalisation avancées (ex. arrière-plans d'images, dégradés de couleurs et plus encore).
Pour ajouter un bouton :
- Cliquez sur Ajouter des éléments
à gauche de l'éditeur. - Cliquez sur Bouton.
- Faites défiler les designs et faites glisser un Bouton Basique ou Bouton stylisé sur la page.
Personnaliser les boutons de base
Après avoir ajouté un bouton basique, modifiez son texte et choisissez son lien. Une fois que cela est configuré, vous pouvez commencer à personnaliser le design - sélectionnez une couleur de remplissage différente, ajoutez une ombre et ajustez d'autres paramètres comme l'espacement et le formatage du texte.
Pour personnaliser un bouton basique :
- Sélectionnez le bouton dans votre Éditeur.
- Choisissez ce que vous souhaitez personnaliser :
- Cliquez sur Modifier le texte.
- Saisissez votre nouveau texte sous Texte.
Suggestion : Les boutons basiques n'ont pas la possibilité d'afficher une icône, mais vous pouvez saisir des symboles (ex. X, +, >) pour créer un effet similaire.
Les boutons peuvent diriger vers d'autres parties du site (ex. pages, ancres, fenêtres promotionnelles), des pages Web externes et même des actions comme l'envoi d'un e-mail à votre client ou l'appel à son numéro.
- Cliquez sur l'icône Connecter
. - Sélectionnez un type de lien à gauche.
- Ajoutez les informations pertinentes du lien.
- Cliquez sur Terminer.
Personnaliser le design du bouton
Vous pouvez personnaliser le design d'un bouton basique pour deux états différents : Normal ou Survol. Modifiez les paramètres tels que la couleur d'arrière-plan, la bordure ou la forme des angles du bouton.
- Cliquez sur l'icône Ouvrir l'Inspecteur
en haut à droite de l'éditeur. 
- Faites défiler la page jusqu'à Design.
- Sélectionnez l'état que vous souhaitez concevoir: Normal ou Survol.
- Concevez le design du bouton en utilisant les options disponibles :
- Couleur de remplissage et opacité : Modifiez la couleur d'arrière-plan de votre bouton et ajustez son opacité.
- Bordure : Sélectionnez une couleur pour la bordure et configurez son opacité et sa largeur (en px*).
- Angles : Paramétrez le rayon des angles du bouton (en px*) pour les rendre plus arrondis ou plus carrés. Vous pouvez configurer le même rayon pour tous les angles, ou cliquer sur l'icône Débloquer
pour les personnaliser séparément. - Ombre : Ajoutez et personnalisez une ombre pour donner au bouton un effet 3D.
- Texte : Ajustez l’apparence et la mise en forme du texte du bouton.
- Espacement : Configurez l'espacement entre le texte et les bordures du bouton.
Ajuster la mise en page du bouton
Modifiez l'alignement, le positionnement et l'espacement du bouton pour que le texte et/ou l'icône soient exactement comme vous le souhaitez.
- Cliquez sur l'icône Mise en page
. - Ajustez les paramètres si nécessaire :
- Direction : Choisissez si le bouton se lit de gauche à droite ou de droite à gauche.
- Alignement : Alignez le texte à gauche, au centre ou à droite du bouton. Vous pouvez paramétrer un retrait sur le texte avec les options Gauche ou Droite .
Personnaliser des boutons stylisés
Les boutons stylisés offrent de nombreuses options de personnalisation afin que vous puissiez les personnaliser dans les moindres détails. Modifiez le texte et l'icône pour qu'ils correspondent à l'action souhaitée, choisissez la façon dont les deux doivent être disposés, configurez un dégradé ou une image comme arrière-plan, et bien plus encore.
Pour personnaliser un bouton stylisé :
- Sélectionnez le bouton correspondant.
- Choisissez ce que vous souhaitez personnaliser :
Modifier le texte et/ou l'icône
- Cliquez sur Paramètres.
- Sélectionnez une option sous Choisir ce qui s'affiche, et modifiez les paramètres :
- Texte et icône : Utilisez le champ Texte pour modifier le texte, et cliquez sur l'icône Remplacer
pour choisir une autre icône. - Texte uniquement : Modifiez le texte du bouton sous Texte.
- Icône uniquement : Cliquez sur l'icône Remplacer pour choisir une icône différente pour le bouton. Vous pouvez également ajouter un nom d'accessibilité pour décrire la fonction du bouton aux visiteurs à l'aide de technologies d'assistance.
Remarque : Si vous sélectionnez Rien sous Choisir ce qui s'affiche, le bouton est vide. Vous pouvez toujours ajouter un nom d'accessibilité et le connecter à ce que vous voulez.
Les boutons peuvent diriger vers d'autres parties du site (ex. et ancres), des pages web externes et des informations exploitables telles que l'adresse e-mail de votre client.
- Cliquez sur l'icône Connecter .
- Sélectionnez un type de lien à gauche.
- Ajoutez les informations pertinentes du lien.
- Cliquez sur Terminer.
Ajouter des animations d'icône
Apportez le facteur wown supplémentaire au site de votre client en ajoutant un effet d'animation sur l'icône de votre bouton. Choisissez une option prédéfinie de Wix pour une modification rapide, ou créez une touche personnelle avec vos propres icônes personnalisées.
- Cliquez sur Paramètres.
- Cliquez sur Animation sous Type d'icône.
- Choisissez l'animation que vous souhaitez appliquer et configurez-la :
- Animations prédéfinies : Sélectionnez parmi une variété d'icônes animées de Wix et ajustez la durée à l'aide du curseur.
- Animations personnalisées : Importez vos propres fichiers ou combinez-les avec des icônes de Wix pour un effet personnalisé.
Personnaliser le design du bouton
Vous pouvez personnaliser le design d'un bouton stylisé pour 2 états différents : Normal ou Survol. Modifiez les paramètres tels que l'arrière-plan, la bordure ou la forme des angles du bouton.
- Cliquez sur l'icône Ouvrir l'Inspecteur en haut à droite de l'éditeur.
- Faites défiler la page jusqu'à Design.
- Sélectionnez l'état concerné : Normal ou Survol.
- Personnalisez le bouton à l'aide des options disponibles :
- Remplissage d'arrière‑plan : Sélectionnez une couleur, un dégradé ou une image pour l'arrière-plan de votre bouton.
- Texte : Ajustez la police, la mise en forme et l’espacement du texte du bouton. Vous pouvez également cliquer sur Appliquer une ombre pour ajouter de l'ombre au texte.
- Bordures : Sélectionnez une couleur / un dégradé pour les bordures et configurez l'épaisseur en px. Vous pouvez appliquer le même design de tous les côtés, ou cliquer sur l'icône Débloquer
pour les personnaliser séparément. - Angles : Rendez les angles plus ronds ou plus carrés en modifiant le rayon en px. Vous pouvez configurer le même rayon pour tous les angles ou cliquer sur l'icône Déverrouiller
pour les personnaliser séparément. - Ombres : Ajoutez une ombre intérieure / extérieure, ou plusieurs couches d'ombre, tout en définissant la couleur, l'angle, la distance, la taille, etc.
- Mise en page : Choisissez ce que vous souhaitez afficher sur votre bouton (texte, icône ou les deux) et comment ils doivent être organisés et alignés.
- Icône : Ajustez la couleur, la taille et l'angle de l'icône qui apparaît sur le bouton.
Ajuster la mise en page du bouton
Modifiez l'alignement, le positionnement et l'espacement du bouton pour que le texte et/ou l'icône soient exactement comme vous le souhaitez.
- Cliquez sur l'icône Mise en page .
- Ajustez l'un des paramètres suivants :
- Éléments à afficher : Décidez ce qui est affiché sur le bouton : Texte et icône, Texte uniquement, Icône uniquement, ou Rien.
- Position de l'icône : Lorsque vous choisissez d'afficher à la fois du texte et une icône, vous pouvez décider comment les positionner : côte à côte ou l'un sous l'autre.
- Alignement : Alignez le texte et l'icône à gauche, au centre ou à droite du bouton. Vous pouvez également les aligner sur les deux marges du bouton en sélectionnant justifier
. - Espacement entre le texte et l'icône : Lorsque vous choisissez d'afficher à la fois le texte et une icône, vous pouvez faire glisser le curseur pour définir l'espacement entre eux (en px).
- Direction : Choisissez si le contenu du bouton se lit de gauche à droite ou de droite à gauche.
