Support prioritaire
Help Center > Editor V4 > Elements > Élément bouton

Élément bouton

Dernière mise à jour : septembre 3, 2025

Ce post est une traduction automatique, il peut donc contenir des imprécisions ou des variations stylistiques par rapport au texte source. Nous vous prions de nous excuser pour tout inconvénient que cela pourrait causer. Veuillez nous contacter si vous avez besoin que nous vous apportions des précisions.

Qui peut utiliser cette fonctionnalité :
Cet article est destiné aux utilisateurs de l’Éditeur v4. Si vous utilisez l’Éditeur v3, consultez l’article correspondant ici : Widget Bouton

Ajouter et supprimer l'élément

Pour accéder et utiliser un widget :

  1. Dans l’éditeur Elementor, cliquez sur +.
    Tous les éléments disponibles sont affichés.

  2. Cliquez ou faites glisser l’élément sur le canevas. Pour plus d’informations, consultez Ajouter des éléments à une page.

Pour supprimer le widget :

  1. Sur le canevas, sélectionnez l’élément en cliquant dessus.
  2. Appuyez sur la touche de suppression de votre clavier. Pour plus d’informations, consultez Supprimer des éléments d’une page.

Qu'est-ce que l'élément bouton ?

Les boutons sur un site web sont cruciaux pour guider les actions des utilisateurs, fournir des appels à l’action clairs et améliorer l’engagement global des utilisateurs. Les boutons vous permettent d’ajouter des boutons interactifs et visuellement attrayants sur votre site.

Cas d'utilisation courant

Blair construit un site web pour une salle de sport. En haut de la page d’accueil, ils veulent ajouter un bouton à la section Hero. Les visiteurs cliquant sur le bouton iront sur une page d’inscription. Un bouton frappant qui attirera l’attention des clients potentiels.

Au lieu d’utiliser des étoiles pour leurs évaluations, Jaime décide d’utiliser des signes dollar pour l’évaluation de la valeur et des cœurs pour leur évaluation de réaction. De plus, ils décident que la valeur sera classée de 1 à 5, tandis que la réaction sera classée de 1 à 10.

Cas d’utilisation supplémentaires

  • Utilisez l’élément Bouton pour créer une superbe galerie de portfolio. Chaque Bouton peut être lié à une page de projet ou à une vue détaillée.
  • Si vous organisez un événement ou un webinaire, l’élément Bouton peut vous aider à créer des bannières ou des affiches visuellement attrayantes.
  • Utilisez les Boutons pour afficher les transformations avant et après pour les rénovations de maison, les progrès de fitness ou tout autre parcours de transformation.

Ajouter un élément bouton : étape par étape

  1. Ajoutez l’élément Bouton au canevas. Pour plus de détails, consultez Ajouter des éléments à une page.

    Les options pour l’élément Bouton apparaissent dans le panneau de gauche.

  2. Dans l’onglet Général, dans le champ Texte du bouton, saisissez Commencer.
    Nous voulons que le bouton renvoie vers une page d’inscription.
  3. Cliquez sur le signe plus à côté de Lien.
  4. Dans la zone de texte Lien, ajoutez l’URL de la page vers laquelle vous souhaitez créer un lien.
    Le bouton est un peu grand pour notre design, alors réduisons-le.

  5. Ouvrez le champ Taille.
  6. Définissez la largeur à 200 et la hauteur à 50.

  7. Cliquez sur l’onglet Style.
    Changeons le style du texte pour qu’il corresponde au reste du site.

  8. Ouvrez le champ Typographie.
  9. Utilisez le menu déroulant Famille de police pour sélectionner Sora. Pour plus de détails, consultez Onglet Style – Typographie.
  10. Utilisez le menu déroulant Graisse de police pour sélectionner 600.
  11. Utilisez le champ Taille de police pour sélectionner 16.
    Le design nécessite un arrière-plan transparent.

  12. Ouvrez la section Arrière-plan.
  13. Cliquez sur l’échantillon de couleur pour ouvrir le sélecteur de couleurs. Pour plus de détails, consultez Utiliser le sélecteur de couleurs.

  14. Réglez l’opacité à 0 %.
    Maintenant, donnons une forme au bouton. Dans ce cas, nous voulons un bouton arrondi avec une bordure blanche.

  15. Ouvrez la section Bordure.
  16. Cliquez sur l’icône Ajuster les bordures.

  17. Saisissez 50 dans le champ numérique pour tous les coins.

  18. Cliquez sur le signe plus à côté de Bordure.

  19. Utilisez le champ numérique pour augmenter la Largeur de bordure à 2.

  20. Définissez la couleur comme #FFFFFF.
    Pour aider le bouton à se démarquer, nous pouvons changer son apparence lorsque les utilisateurs le survolent. Le survol est appelé un état et les éléments peuvent être modifiés pour changer d’apparence en fonction de leur état. Pour plus de détails, consultez États des éléments.

  21. Dans le champ de texte Classes, cliquez sur les points de suspension à côté du mot local.
  22. Sélectionnez hover dans le menu déroulant.
    Remarquez que le mot hover apparaît dans la zone de texte Classes et est coloré en rose. Cela indique que nous modifions maintenant l’apparence du bouton lorsque les visiteurs le survolent avec la souris.

  23. Cliquez sur l’échantillon à côté de Couleur pour ouvrir le sélecteur de couleurs.
  24. Changez le numéro de couleur Hex en #FFFFFF et l’opacité à 100 %.
    Lorsque les utilisateurs survolent le bouton avec la souris, il devient blanc.

    Le bouton est prêt.

Paramètres de l'élément bouton

Vous pouvez personnaliser vos éléments en utilisant le contenu et le style, vous offrant une grande flexibilité pour les adapter à vos besoins. Cliquez sur les onglets ci-dessous pour voir tous les paramètres disponibles pour cet élément.

Onglet Général

Le texte qui apparaît sur le bouton.

Cliquez sur le signe plus pour entrer un lien. Les visiteurs cliquant sur le bouton ouvriront le lien.

Ouvrir dans un nouvel onglet : Si le Bouton contient un lien, activez cette option si vous souhaitez que le lien s’ouvre dans un nouvel onglet.

Permet d’étiqueter des éléments individuels sur une page. De cette façon, vous pouvez créer un lien vers cet élément spécifique.

Onglet Style

Consultez les articles individuels sur les options de Style :

Sur cette page

Partager cet article

Hosted with