Les boutons sont un excellent moyen d'encourager les visiteurs à interagir avec un site. Dans l'éditeur de 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.
Dans cet article, apprenez comment :
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 du texte et des icônes, et offrir des options de personnalisation avancées (par exemple, arrière-plans d'images, dégradés de couleurs et plus encore).
En savoir plus sur les boutons basiques ou stylisés
Entre les boutons basiques et stylisés, vous devez noter plusieurs différences :
Fonctionnalités compatibles
Contrairement aux boutons basiques, les boutons stylisés ne prennent pas en charge les actions suivantes :
- Copier le design du bouton sur un autre élément
- Obtenir des suggestions de contenu pour le texte du bouton
Comportement responsive
Sur les écrans plus petits, les deux boutons affichent un comportement responsive différent.
Les boutons basiques renvoi à la ligne automatiquement le texte :
Lorsque les boutons stylisés affichent des points de suspension :
Pour ajouter un bouton :
- Cliquer 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 correspondant.
- 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 mener à d'autres parties de votre site (p. ex. pages, ancres, fenêtres promotionnelles), à des pages Web externes et même à des actions comme envoyer un e-mail à votre client ou passer un appel sur son numéro.
- Cliquez sur l'icône Lien
. - Sélectionnez un type de lien à gauche.
- Ajoutez les informations pertinentes du lien.
- Cliquez sur Terminer.
Personnaliser le design du bouton
Vous pouvez adapter le design de votre bouton basique à 2 états différents : Normal ou Survol. Modifiez des paramètres tels que la couleur d'arrière-plan, la bordure ou la forme des angles du bouton.
- Cliquez sur la flèche 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 : Ajustez la largeur et la couleur des bordures de votre bouton.
- Angles : Ajustez le rayon des angles du bouton (en px) pour les rendre plus ronds ou carrés.
- Ombre : Ajoutez et personnalisez un effet d'ombre sur votre bouton.
- Texte : Ajustez le formatage du texte du bouton.
- Espacement : Ajustez l'espacement entre le texte et les bordures du bouton.
Personnaliser des boutons stylisés
Les boutons stylisés offrent de nombreuses options de personnalisation pour 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 disposition des deux, définissez 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 Modifier le texte et l'icône.
- En fonction de vos besoins, procédez comme suit :
- Choisissez une option sous Choisir ce qui s'affiche:
- Texte et icône
- Texte uniquement
- Icône uniquement
- Modifiez le texte du bouton sous Texte.
- Cliquez sur l'icône Remplacer
pour choisir une icône différente pour le bouton.
Les boutons peuvent mener à d'autres parties du site (ex. pages, ancres, fenêtres promotionnelles), pages Web externes et même des actions comme envoyer un e-mail à votre client ou passer un appel téléphonique sur son numéro.
- Cliquez sur l'icône Lien .
- Sélectionnez un type de lien à gauche.
- Ajoutez les informations pertinentes du lien.
- Cliquez sur Terminer.
Personnaliser le design du bouton
Vous pouvez adapter le design de votre bouton à 3 états différents : Normal, Survol et Désactivé. Modifiez des paramètres tels que la couleur d'arrière-plan, la bordure ou la forme des angles du bouton.
- Cliquez sur la flèche Ouvrir l'inspecteur en haut à droite de l'Éditeur.
- Faites défiler la page jusqu'à Design.
- Sélectionnez l'état correspondant : Normal, Survol ou Désactivé.
- Personnalisez votre bouton en utilisant les options disponibles :
- Remplissage d'arrière‑plan : Choisissez 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 de votre bouton. Vous pouvez également cliquer sur Ombres pour ajouter une ombre au texte.
- Bordures : Choisissez une couleur/un dégradé pour vos bordures et définissez l'épaisseur en px. Vous pouvez appliquer le même design sur tous les côtés ou cliquer sur l'icône Déverrouiller
pour les personnaliser séparément. - Angles : Rendez vos angles plus ronds ou carrés en modifiant le rayon en px. Vous pouvez définir 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 enpage : 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 apparaissant sur votre bouton.
Suggestion :
Ajoutez de la profondeur à l'arrière-plan de votre bouton en appliquant plusieurs calques avec différents niveaux d'opacité.
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 :
- Choisissez ce qui s'affiche : Décidez ce qui est affiché sur votre 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.
- 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).
- 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 cliquant sur Justifier
.
