Bouton Wix Studio : design, liens et bonnes pratiques 🔘

Un bouton sert à guider le visiteur vers une action précise : prendre rendez-vous, réserver, acheter, en savoir plus. Sur Wix Studio, c’est souvent l’élément le plus important d’une page, même s’il est tout petit.

En bref : ajoutez un bouton depuis « Ajouter des éléments », puis Bouton. Choisissez un bouton stylisé ou animé, reliez-le à une page, une ancre, une popup, un e-mail ou un numéro de téléphone, puis réglez son design (normal et survol) dans l’Inspecteur.

Les types de boutons sur Wix Studio

Comment ajouter un bouton sur Wix Studio

1. Cliquez sur « Ajouter des éléments », puis sur Bouton.

2. Choisissez un bouton stylisé ou animé et glissez-le sur la page.

3. Cliquez sur l’icône de lien et choisissez la destination.

4. Réglez le texte, l’icône et la mise en page : texte seul, icône seule, ou texte et icône.

Où peut mener un bouton ?

Un bouton Wix Studio peut renvoyer vers une page du site, une ancre Wix Studio (une section précise), une URL externe, une lightbox ou popup, une adresse e-mail, un numéro de téléphone ou un document. Il peut aussi déclencher une action personnalisée avec du code Velo.

Personnaliser le design d’un bouton

Tout se règle dans l’Inspecteur Wix Studio : fond (couleur, dégradé ou image), texte, bordures, coins arrondis et ombres, pour l’état normal et l’état survol. Pour un site cohérent, gardez les couleurs et typographies de vos styles du site.

Pensez aussi à l’accessibilité : le champ « nom accessible » décrit l’action du bouton aux lecteurs d’écran, indispensable quand le bouton n’affiche qu’une icône.

Astuce : rendre cliquable un élément qui ne l’est pas

Vous voulez rendre toute une carte cliquable (image, titre et texte) ? Placez un bouton par-dessus, réglez sa taille à 100 % de l’élément, choisissez de n’afficher ni texte ni icône et rendez-le invisible. Le visiteur clique sur la carte, c’est le bouton qui réagit. Très pratique dans un répéteur ou sur une page dynamique.

Mon avis de webdesigner

Un bon bouton dit ce qui va se passer : « Prendre rendez-vous » est plus clair que « Cliquez ici ». Gardez une seule action principale par section, avec un bouton bien contrasté, et laissez les autres liens plus discrets. Les boutons animés sont efficaces pour l’action clé, mais un site où tout bouge fatigue vite.

Si vous préparez une page qui doit faire agir le visiteur, voyez mon offre de création de landing page.

Questions fréquentes sur les boutons Wix Studio

Comment mettre un lien sur un bouton Wix Studio ?

Sélectionnez le bouton, cliquez sur l’icône de lien, puis choisissez la destination : page, ancre, URL, popup, e-mail, téléphone ou document.

Peut-on mettre une icône dans un bouton ?

Oui, avec les boutons stylisés ou animés : texte seul, icône seule, ou les deux, côte à côte ou empilés.

Comment ouvrir une popup avec un bouton ?

Choisissez Popup comme destination du lien, puis la fenêtre voulue. Désactivez l’affichage automatique de la popup si elle ne doit s’ouvrir qu’au clic.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Aide Wix, Studio Editor : Adding and Customizing Buttons