Widgets : Button

Les boutons sont le moyen le plus simple d'inciter les visiteurs de votre site à passer à l'action. D'un clic, ils les mènent vers une autre page de votre site ou vers une page d'un autre site web. Un bouton peut aussi ouvrir un pop-up, un formulaire de contact, une réservation en ligne, une adresse e-mail et bien plus encore.

Pour savoir comment ajouter des widgets, consultez « Add Widgets ».

Éditeur de contenu

Cliquez sur l'élément pour ouvrir le menu flottant, puis sur l'option de l'éditeur de contenu.

1. Saisissez dans le champ prévu le texte que vous voulez afficher sur le bouton.
2. Choisissez la cible du bouton parmi les options suivantes :
   • Existing Page.
   • Website address.
   • Popup.
   • Anchor.
   • Back to top.
   • Email Address.
   • Click To Call.
   • File for download.

Conseil : pour en savoir plus sur ces options, consultez « Link Picker ».

Éditeur de design

Cliquez sur l'élément pour ouvrir le menu flottant, puis sur l'option de modification du design.

Dans l'éditeur de design, vous choisissez si le bouton hérite du style de bouton primaire ou secondaire défini dans le panneau Thème. Vous pouvez aussi choisir parmi les différentes mises en page de bouton, modifier le style du bouton (largeur, hauteur) et son texte (police, taille du texte, couleur, format, alignement et orientation), et ajuster l'espacement intérieur et extérieur.

Tout changement effectué dans l'éditeur de design remplace les styles définis au niveau du bouton du thème. Si vous devez revenir au style du bouton du thème, cliquez sur Réinitialiser le style du thème du site.

Pour en savoir plus sur les options de design qui ne sont pas propres à ce widget (par exemple la mise en page, le style ou l'espacement), consultez « Widget Design ».

Boutons de thème primaire et secondaire

• Si vous modifiez le bouton (ce qui remplace les styles définis au niveau du bouton du thème), un cadre indicateur reste visible sur le style de bouton Primary ou Secondary.
• Si vous cliquez sur le style de bouton qui n'a pas le cadre indicateur, le bouton revient au style défini au niveau du bouton du thème.

Remarque : pour en savoir plus sur les boutons de thème, consultez « Site Theme ».

Boutons flottants (boutons fixes dans l'Editor 2.0)

Les boutons flottants gardent un bouton toujours visible, même lorsqu'un visiteur fait défiler la page. Utilisez-les pour que vos appels à l'action les plus importants restent fixes, visibles et cliquables sur toutes les pages du site.

Voici quelques cas d'usage idéaux :

• Nous contacter
• S'abonner
• Demander un devis

Pour rendre un bouton flottant :

1. Dans le panneau latéral, cliquez sur Ajouter, puis sur Éléments.
2. Recherchez le widget Button, puis cliquez dessus et faites-le glisser sur le canvas.
3. Faites un clic droit sur le bouton, puis cliquez sur Modifier le design. Si vous êtes dans l'Editor 2.0 : cliquez sur le bouton pour ouvrir le menu flottant et sélectionnez Modifier le design. Le panneau de design s'ouvre. Descendez jusqu'à la section Position.
4. Dans l'onglet Style, descendez et cliquez sur le bouton Flottant. Si l'attribut Flottant est désactivé, le bouton apparaît automatiquement dans la première rangée, tout en haut de la page.
5. Choisissez une position pour le bouton. Changez la vue d'appareil pour ajuster la position sur les différents appareils.
6. Pour que le bouton flottant apparaisse uniquement sur la page actuelle, activez le bouton Afficher sur cette page uniquement.

Remarque : un bouton flottant peut être configuré pour s'afficher sur des pages précises, mais par défaut il apparaît sur toutes (il n'existe pas encore de moyen de le désactiver uniquement sur certaines pages).

À prendre en compte sur mobile

• Sur mobile, nous vous conseillons de placer le bouton flottant dans un coin inférieur de l'écran, pour que les visiteurs puissent le toucher d'une seule main.
• Sur mobile, vous pouvez afficher une icône plutôt que du texte : choisissez la mise en page qui affiche une icône dans cette version.
• Si un bouton flottant ne s'affiche pas sur mobile, vous utilisez peut-être une ancienne mise en page mobile. Pour la mettre à jour, allez dans l'éditeur de design et cliquez sur Mise en page du site.