Les boutons sont un excellent moyen d'encourager les visiteurs à effectuer les actions que vous souhaitez. Dans Editor X, vous pouvez ajouter des boutons qui affichent du texte, une icône ou les deux si nécessaire. Vous avez le contrôle total du design et de la mise en page afin de créer l'apparence exacte dont vous avez besoin.
Dans cet article, découvrez comment tirer le meilleur parti de vos boutons :
Ajouter un bouton
Lorsque vous ajoutez un nouveau bouton, vous pouvez choisir un design parmi 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 (par exemple, arrière-plans d'images, dégradés de couleurs et plus encore).
Pour ajouter un bouton :
- Cliquez sur Ajouter
en haut à gauche de l'Editor X. - Cliquez sur Bouton.
- Faites défiler les designs et faites glisser un bouton basique ou un bouton stylisé sur votre page.
En savoir plus sur les boutons basiques et les boutons stylisés
Entre les boutons basiques et les boutons stylisés, il y a plusieurs différences que vous devez noter :
Fonctionnalités prises en charge
Contrairement aux boutons basiques, les boutons stylisés ne prennent pas en charge les actions suivantes :
Comportement réactif
Sur les écrans plus petits, les deux boutons affichent un comportement réactif différent.
Les boutons basiques renvoient le texte à la ligne automatiquement :
Alors que les boutons stylisés affichent une icône avec des points de suspension :
Personnaliser les boutons basiques
Après avoir ajouté un bouton basique à votre site, modifiez son texte selon vos besoins et choisissez où il renvoie. 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 tels que l'espacement et le formatage du texte.
Cliquez ci-dessous pour savoir comment personnaliser les boutons de base :
- Sélectionnez le bouton.
- Cliquez sur Modifier le texte.
- Saisissez votre nouveau texte sous Que dit ce bouton ?
Suggestion : Les boutons basiques n'ont pas la possibilité d'afficher une icône, mais vous pouvez saisir des symboles (par exemple, X , + , > ) pour créer le même effet.
Les boutons peuvent mener à d'autres parties de votre site (par exemple, des pages, des ancres, des fenêtre promotionnelle), des pages web externes et même des actions comme vous envoyer un e-mail ou passer un appel téléphonique à votre numéro.
Pour connecter le bouton :
- Sélectionnez le bouton.
- Cliquez sur l'icône Lien
. - Sélectionnez un type de lien sur la gauche.
- Ajoutez les informations pertinentes sur le lien.
- Cliquez sur Terminer.
Vous pouvez adapter le design de votre bouton de base en trois états différents : Normal, Survol et Désactivé. Modifiez les paramètres comme la couleur d'arrière-plan, la bordure ou la forme des angles du bouton.
Pour personnaliser le design du bouton :
- Sélectionnez le bouton.
- Cliquez sur l'icône Inspecteur
en haut à droite de l'Editor X. - (Dans le panneau inspecteur) Cliquez sur l'onglet Design
. - Sélectionnez l'état correspondant : Normal , Survol ou Désactivé.
- Personnalisez votre 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 rectangulaires.
- 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 les 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 comment les deux doivent être disposés, définissez un dégradé ou une image comme arrière-plan et bien plus encore.
Cliquez ci-dessous pour savoir comment personnaliser les boutons stylisés :
Modifier le texte et/ou l'icône
- Sélectionnez le bouton.
- Cliquez sur Modifier le texte et l'icône.
- En fonction de vos besoins, procédez comme suit :
- Choisissez une option sous Qu'affiche le bouton ? :
- Texte et icône
- Texte uniquement
- Icône uniquement
- Modifiez le texte du bouton sous Que dit ce bouton ?
- Cliquez sur l'icône sous Choisir une icône pour la remplacer.
Les boutons peuvent mener à d'autres parties de votre site (par exemple, des pages, des ancres, des fenêtre promotionnelle), des pages web externes et même des actions comme vous envoyer un e-mail ou passer un appel téléphonique à votre numéro.
Pour connecter le bouton :
- Sélectionnez le bouton.
- Cliquez sur l'icône Lien .
- Sélectionnez un type de lien sur la gauche.
- Ajoutez les informations pertinentes sur le lien.
- Cliquez sur Terminer.
Vous pouvez adapter le design de votre bouton stylisé en trois états différents : Normal, Survol et Désactivé. Modifiez les paramètres comme la couleur d'arrière-plan, la bordure ou la forme des angles du bouton.
Pour personnaliser le design du bouton :
- Sélectionnez le bouton.
- Cliquez sur l'icône Inspecteur en haut à droite de l'Editor X.
- (Dans le panneau inspecteur) Cliquez sur l'onglet Design .
- Sélectionnez l'état correspondant : Normal , Survol ou Désactivé.
- Personnalisez votre bouton en utilisant les options disponibles :
- Remplissage de l'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, le formatage 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 paramétrez 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 rectangulaires 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 en page : Choisissez ce que vous souhaitez afficher sur votre bouton (texte, icône ou les deux) et la manière dont ils doivent être disposé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é.
Glossaire du design
Option | Explication | Comment l'utiliser |
|---|
Remplissage de l'arrière-plan | Ajoutez différents remplissages tels que des couleurs, des images, des motifs et des dégradés pour créer des effets étonnants et colorés sur votre bouton. |
- Cliquez sur la case de couleur de chaque calque et choisissez le type de remplissage, puis faites glisser le curseur pour modifier l'opacité du calque de remplissage.
- Réorganisez les calques de remplissage en les faisant glisser de haut en bas de la liste.
|
Bordures | Personnalisez la bordure du bouton pour le faire ressortir. Personnalisez tous les côtés du bouton ensemble, ou chaque côté séparément, en cliquant sur l'icône de verrouillage et de déverrouillage. |
- Cliquez sur le champ Largeur et saisissez la largeur en pixels, ou ajustez le curseur.
- Cliquez sur le menu déroulant Style et sélectionnez le style de bordure.
- Cliquez sur la case couleur de remplissage et sélectionnez la couleur de la bordure, puis utilisez le curseur pour ajuster l'opacité.
|
Angles | Modifiez les angles de votre bouton pour les rendre plus arrondis ou carrés. Modifiez la taille de tous les angles ensemble, ou personnalisez chaque angle séparément, en cliquant sur l'icône de verrouillage et de déverrouillage. | Cliquez sur le champ de pixels dans un angle et saisissez le nombre de pixels que vous souhaitez y appliquer. |
Ombres | Ajoutez des couches d'ombres à votre bouton et personnalisez la couleur, la taille et plus encore pour chacune d'entre elles. |
- Cliquez sur la case de couleur pour chaque calque d'ombre et personnalisez la couleur, le type, l'angle, la taille, la distance et le flou. Ensuite, faites glisser le curseur pour modifier l'opacité de l'ombre.
- Réorganisez les calques d'ombre en les faisant glisser de haut en bas de la liste.
Si vous utilisez un bouton de téléchargement :
- Cliquez sur le curseur pour l'activer.
- Utilisez les curseurs pour modifier l'angle, la distance, la taille et le flou. Ensuite, utilisez le curseur et la case de couleur pour modifier l'opacité et la couleur.
|
Mise en page
| Modifiez la mise en page de votre bouton. |
- Cliquez sur le menu déroulant Choisir ce que vous souhaitez afficher et choisissez si vous souhaitez afficher le texte, l'icône ou les deux.
- Sélectionnez l'alignement, la position et l'espacement du texte et/ou de l'icône (le cas échéant).
- Définissez la marge autour du texte et/ou de l'icône.
|
Options de formatage du texte
Option | Explication | Comment l'utiliser |
|---|
Afficher le texte | Affichez ou masquez le texte de votre bouton. | Cliquez sur le curseur pour afficher ou masquer le texte de votre bouton. |
Thème | Sélectionnez le thème du texte de votre bouton. | Sélectionnez un thème de texte dans le menu déroulant. |
Polices | Choisissez la police du texte de votre bouton. | Cliquez sur le menu déroulant et sélectionnez une police. |
Taille de la police | Modifiez la taille du texte de votre bouton. | Faites glisser le curseur pour augmenter ou diminuer la taille de la police, ou saisissez une valeur. |
Formatage du texte | Appliquez une mise en forme à votre texte. |
- Mettez en forme votre texte en utilisant les options suivantes : gras, italique, souligné, barré, couleurs, majuscules et direction et alignement du texte.
|
Espacement des caractères | Modifiez l'espacement entre les caractères du texte. | Faites glisser le curseur pour augmenter ou diminuer l'espacement, ou saisissez une valeur. |
Ombres | Créez des ombres pour votre texte. Vous pouvez avoir plusieurs ombres. | Cliquez sur Ajouter une ombre pour en ajouter une nouvelle. Cliquez sur l'icône Personnaliser l'ombre pour la personnaliser. |
Options de design des icônes
Option | Explication | Comment l'utiliser |
|---|
Afficher l'icône | Affichez ou masquez une icône sur votre bouton. | Cliquez sur le curseur pour afficher ou masquer l'icône de votre bouton. |
Taille | Modifiez la taille de votre icône. | Faites glisser le curseur pour augmenter ou diminuer la taille de votre icône, ou saisissez une valeur. |
Couleur | Modifiez la couleur de l'icône. | Cliquez sur la case de couleur et sélectionnez une couleur. |
Rotation | Ajustez la rotation de l'icône. | Faites glisser la poignée pour personnaliser la rotation de l'icône, ou saisissez les degrés dans la zone de texte. |
