Les boutons sont un moyen simple d'inciter les visiteurs du site à agir. Ils peuvent les rediriger vers une autre page de votre site ou vers une page d'un autre site Web. Ils permettent également d'ouvrir un popup, un formulaire de contact, une réservation en ligne, une adresse e-mail, etc.
-
Saisissez le texte que vous souhaitez afficher sur le bouton dans le champ fourni.
-
Sélectionnez la destination du lien du bouton :
-
Page existante.
-
store lien. Ceci n'apparaîtra que si le site a un store.
-
Adresse du site web.
-
Popup.
-
Ancre.
-
Plan d'adhésion checkout. Elle ne s'affichera que si le site a ajouté la fonction d'adhésion.
-
Blog post. Cette option ne s'affiche que si le site dispose d'un blog.
-
Adresse électronique.
-
Cliquez pour appeler.
-
Fichier à télécharger.
-
Conseil
Pour plus d'informations sur ces options, reportez-vous à la section Sélecteur de liens.
Utilisez l’éditeur de conception pour indiquer si le bouton hérite du style de bouton principal ou secondaire défini dans le panneau de thème. En outre, vous pouvez choisir entre les différentes dispositions des boutons, apporter des modifications au style du bouton (largeur, hauteur) et au texte du bouton (police, taille du texte, couleur, format, alignement et direction) et ajuster l’espacement intérieur et extérieur.
Toutes les modifications que vous apportez dans l'éditeur de design remplaceront les styles définis au niveau des boutons du thème. Si vous souhaitez revenir au style de bouton du thème, cliquez sur Rétablir le style du thème.
-
Si des modifications sont apportées au bouton (ce qui remplacera les styles définis au niveau du bouton thématique), une zone d'indicateurs sera toujours présente sur le style du bouton principal ou secondaire.
-
Si vous cliquez sur le style de bouton qui ne contient pas la zone d'indicateurs, le style défini au niveau du bouton thématique est rétabli.
Remarque
Pour plus d'informations sur les boutons de thème, voir Thème du site.
Les boutons flottants sont visibles en permanence, même lorsqu'un visiteur fait défiler la page vers le bas. Utilisez les boutons flottants pour que vos appels à l'action importants soient toujours fixes, visibles et cliquables sur toutes les pages du site.
Exemples de cas d'utilisation :
-
Contactez-nous
-
S'ABONNER
-
DEMANDER UN DEVIS
Pour rendre un bouton flottant dans l'Éditeur classique ou fixe dans l'Éditeur 2.0 :
-
Dans le panneau latéral, cliquez sur widget. Recherchez le widget Bouton, puis cliquez et faites-le glisser sur le canevas.
-
Cliquez avec le bouton droit sur le bouton, puis cliquez sur Modifier la conception. Si vous êtes dans l'Éditeur 2.0, cliquez sur le bouton pour ouvrir le menu flottant et sélectionnez Éditer le dessin. Le panneau de conception s'ouvre alors sur le côté droit de l'écran. Faites défiler vers le bas jusqu'à la section Position du panneau de conception.
-
Dans l'onglet Style, faites défiler vers le bas et cliquez sur l'option Flottant. Si l'attribut Flottant est désactivé, le bouton apparaît automatiquement sur la première ligne en haut de la page. Si vous êtes dans l'Éditeur 2.0, cliquez sur pour développer le menu Type de position et sélectionnez Fixe. Cela permet de s'assurer que votre bouton reste dans une position fixe lorsque l'utilisateur fait défiler votre site. Cette modification s'applique à toutes les tailles d'écran, mais vous pouvez la remplacer si nécessaire. Une fois que vous avez sélectionné la position, vous ne pouvez pas passer de Fixe à Épinglé. En effet, lorsque vous sélectionnez Fixe, le bouton est retiré de son conteneur d'origine afin qu'il reste visible à l'écran lorsque l'utilisateur fait défiler la page. Si vous passiez de Fixe à Épinglé, l'éditeur ne saurait pas dans quel conteneur placer le bouton. Si vous avez besoin de changer, vous devez d'abord revenir à Défaut. Le bouton sera placé dans la première section de la fenêtre de visualisation.
-
Sélectionnez une position pour le bouton. Changez la vue de l'appareil pour modifier la position sur différents appareils. Si vous êtes dans l'Éditeur 2.0, dans le menu Espacement, utilisez les paramètres Marge pour définir l'emplacement du bouton dans la fenêtre de visualisation. Il est particulièrement important de configurer ce paramètre si vous avez deux boutons fixes à la même position dans la fenêtre.
-
Pour afficher le bouton flottant sur la page actuelle uniquement, activez la case à cocher Afficher sur cette page uniquement.
Remarque
Un bouton flottant peut être configuré pour s'afficher sur des pages spécifiques, mais il apparaîtra sur toutes les pages par défaut (il n'existe actuellement aucun moyen de le désactiver uniquement pour des pages spécifiques).
-
Sur les appareils mobiles, nous vous suggérons de placer le bouton flottant dans un coin inférieur de l'écran afin que les visiteurs puissent facilement cliquer dessus d'une seule main.
-
Vous pouvez afficher une icône plutôt que du texte sur les appareils mobiles en choisissant la disposition qui comporte une icône sur les appareils mobiles.
-
Si un bouton flottant ne s'affiche pas sur mobile, il se peut que vous utilisiez une ancienne mise en page mobile. Pour mettre à jour la mise en page, allez dans l'éditeur de conception et cliquez sur Mise en page du site.
Les boutons épinglés restent collés à leur élément parent (colonne ou colonne intérieure) tant que l'élément parent se trouve dans la fenêtre de visualisation. S'il y a plus d'un bouton épinglé dans la même position, le bouton du dessus sera le premier bouton.
Remarque
L'épinglage n'est pas une option dans les grilles avancées.
Pour activer un bouton épinglé dans l'Éditeur 2.0 :
-
Dans le panneau latéral, cliquez sur widget. Recherchez le widget Bouton, puis cliquez et faites-le glisser sur le canevas.
-
Cliquez sur le bouton pour ouvrir le menu flottant et sélectionnez Modifier le dessin. Cela ouvre le panneau de conception sur le côté droit de l'écran.
-
Dans le panneau de conception, faites défiler la page jusqu'à la section Position.
-
Cliquez sur pour développer le menu Type de position et sélectionnez Épinglé. Cela garantit que le bouton reste collé à son élément parent (colonne ou colonne intérieure) tant que l'élément parent se trouve dans la fenêtre de visualisation. Cette modification s'applique à toutes les tailles d'écran, mais vous pouvez l'ignorer si nécessaire.
-
Dans la section Position, configurez le décalage du bouton. Le décalage correspond à l'endroit où le bouton sera épinglé lors du défilement avant de quitter la fenêtre de visualisation. Si vous choisissez desktop, les autres tailles d'écran auront les mêmes valeurs, mais elles peuvent être modifiées pour chaque taille d'écran si nécessaire. Si l'en-tête collant est activé, le décalage sera basé sur la hauteur de l'en-tête par défaut. Si vous activez un en-tête collant après avoir défini le décalage, il ne sera pas automatiquement mis à jour et vous devrez revenir en arrière et ajuster manuellement le décalage.
Si, à un moment donné, vous déplacez le bouton vers un autre élément parent (colonne ou colonne intérieure), les paramètres du panneau de conception, tels que le décalage, seront conservés.
Une icône d'indicateur épinglé apparaîtra à la fois dans le menu flottant du bouton et dans le panneau de conception.