Comment concevoir des boutons dans Elementor

Claire

il y a 5 ans

Bien que les boutons puissent avoir différents styles, tailles et couleurs, ils ont tous une fonction commune: inciter les visiteurs du site Web à effectuer certaines actions. Cela peut être enregistrement sur le site, connexion, demande d’informations, adhésion à la liste de diffusion, commande, etc. Néanmoins, le bouton n'est pas simplement l'élément sur lequel appuyer.

Bien conçu, il peut contribuer à une grande facilité d'utilisation et, par conséquent, influencer le comportement des visiteurs. Choisir le bon style pour les boutons est crucial, en particulier si vous souhaitez améliorer la façon dont les utilisateurs interagissent avec votre site Web.

Ici, vous pouvez vous demander quel style de boutons choisir et comment les concevoir pour qu’ils puissent convertir les visiteurs en clients fidèles. Cet article a pour but de vous guider à travers chaque étape de la création de différents types de boutons à l'aide du générateur de pages visuelles Elementor. Lisez la suite pour accéder à 17 styles de boutons Elementor que vous pouvez créer en moins de 5 minutes. Vous pouvez les créer séparément et les ajouter à un site Web personnalisé ou choisir un thème WordPress Elementor déjà fourni avec des éléments d'interface utilisateur par défaut, notamment des boutons.

Sans plus attendre, voyons le guide actuel et apprenons comment concevoir des boutons dans Elementor.

Boutons en tant qu'éléments essentiels de l'interface utilisateur

Les boutons sont conçus pour encourager les visiteurs à effectuer les actions que vous souhaitez qu'ils prennent. Et si les utilisateurs n'appuient pas sur le bouton, quelque chose ne va pas et peut indiquer des raisons de conception, telles que:

Le bouton ne ressemble pas à un bouton standard.
La couleur permet aux utilisateurs de mettre de côté toute action.
Le bouton est placé dans une zone inattendue.
Les utilisateurs n'ont aucune idée de ce à quoi sert le bouton.
Le bouton ne convainc pas les utilisateurs de cliquer dessus, etc.

Au contraire, quelques astuces vous aideront à créer les boutons permettant de réduire la confusion des utilisateurs et d’améliorer considérablement le taux de clics sur le site Web.

Le bouton devrait ressembler à un bouton standard. Assurez-vous que les visiteurs comprennent clairement qu'ils doivent cliquer dessus.
Ne le faites pas trop gros. Le bouton devrait attirer l’attention, mais il ne doit pas ennuyer ou cacher du contenu. Gardez la balance.
Utilisez des couleurs contrastées pour faire ressortir votre bouton sur le site Web. Gardez à l'esprit que la couleur doit être équilibrée avec la dimension - plus le bouton est petit, plus la couleur est contrastée. Il devrait également convenir à la palette de couleurs globale du site Web et être identique pour tous les boutons du site.
Le texte doit être lisible, mais pas trop gros et sophistiqué.
Les éléments décoratifs ne sont nécessaires que s'ils insistent vraiment sur la fonction du bouton, etc.

Comment concevoir des boutons dans Elementor?

Maintenant que vous avez une idée précise de ce à quoi devraient ressembler les boutons de sites Web, il est grand temps de couvrir d’autres sujets, tels que:

Quels styles de boutons sont pris en charge par Elementor?
Comment créer un bouton dans Elementor?

Mais avant cela, voyons ce qu’est Elementor et à quoi vous pouvez vous attendre au début de l’utiliser.

Elementor est un constructeur de pages visuel travaillant en mode glisser-déposer spécialement développé pour WordPress. Cela signifie pour vous que vous avez accès à une interface unique et distincte permettant de créer des pages, des types de publication personnalisés et d'autres éléments d'interface utilisateur. Travailler dans Elementor ne nécessite aucune compétence de codage, car tout peut être fait dans l’interface. De plus, la fonctionnalité drag-and-drop vous permet de jouer avec les éléments - les déplacer dans la mise en page jusqu'à ce que le résultat final vous satisfasse. Parce qu'Elementor fonctionne sur le front-end, le résultat est visible en temps réel, juste après chaque modification appliquée.

Et, bien sûr, le constructeur de pages est compatible avec tous les thèmes WordPress, ce qui en fait un point faible pour tous les utilisateurs de WordPress.

Le principal avantage de l'utilisation d'Elementor réside dans le fait que vous pouvez créer des mises en page ou des éléments d'interface exceptionnels sur simple pression d'un bouton, même si vous n'êtes pas un développeur professionnel et n'avez aucune expérience de la création de sites Web. Cela vous donne un certain nombre de possibilités, en particulier si vous avez un petit budget mais souhaitez tout de même créer un contenu attrayant. Une autre bonne chose à propos de Elementor est que vous n’avez pas à concevoir des mises en page à partir de zéro - l’éditeur de contenu fournit une bibliothèque avec une large gamme de modèles qui ne nécessitent que des ajustements mineurs.

Comme beaucoup d'autres produits numériques, Elementor présente également des inconvénients. Mais heureusement, ils ne le rendent pas moins populaire parmi les internautes qui souhaitent créer du contenu rapidement et sans effort. Et l'interface WYSIWYG idéale, la possibilité de modifier le contenu en détail, ainsi qu'une vaste bibliothèque de modèles prédéfinis, rendent les créateurs de sites novices, les blogueurs débutants et les développeurs WordPress passionnés par Elementor.

Le dernier élément de cette copie, mais non la moindre caractéristique du constructeur de pages, est qu’il prend en charge environ 17 conceptions de boutons. Nous verrons plus loin comment modifier les styles de boutons dans Elementor.

BOUTON SIMPLE

Ouvrez l'éditeur Elementor et trouvez Button widget en utilisant la barre de recherche. Une fois cela fait, faites-le glisser sur la mise en page.
Allez à l'onglet Content pour choisir le type et le texte du bouton, ainsi que l'insertion d'un lien dans le champ approprié. Pour que le lien fonctionne correctement, appuyez sur le bouton situé à côté du lien. Ici, vous pouvez également jouer avec l'alignement et la taille du bouton.
Passez à l'onglet Style où vous pouvez changer la couleur du texte et du fond, choisir la typographie et sa taille, importance et style, ainsi que jouer avec le rembourrage.

BOUTON GRADIENT

Si vous souhaitez ajouter un dégradé au bouton, conservez les paramètres utilisés pour le bouton simple. La seule chose quevousdevez changer c'est la couleur du Background.

Puis, passez à l'onglet Style > Box Shadow.

Change Position à Insert et appliquez des modifications aux options Spread, Horizontal et Vertical.

Choisissez la couleur dans la section Box Shadow et configurez Blur pour appliquer un effet de dégradé.

Dans la section Text Shadow, sélectionnez Hover et choisissez une Background Color contraste de sorte que le bouton changera de couleur au survol de souris.

BOUTON À COINS ARRONDIS

Pour changer la forme du bouton, allez dans l'onglet Style et définissez le Border Radius sur 50 pour gauche, droite, haut et bas.

En sélectionnant l'option Hover, vous pouvez changer Hover Animation à Shrink pourque le bouton devient plus petit en survol. Ici, vous pouvez également essayer la couleur d’arrière-plan du bouton, la typographie et d’autres paramètres en fonction de vos besoins.

BOUTON AVEC DES COINS NETS

Pour ceux d’entre vous qui souhaitent utiliser un bouton pointu, les étapes seront les suivantes.

Allez à l'onglet Style, changez la Color Background et modifiez Padding.

Définissez Border Type à Solid et mettez Width à 3 pour le bas.

Changez pour l'option Hover, choisissez la même couleur pour Text et Border en laissant le Background blanc.

COIN NETS + ICÔNE

Commencez dans l'onglet Content. Dans l’option Icon, sélectionnez l’icône que vous souhaitez appliquer en regard du texte du bouton.

Définissez la Icon Position et changez le Icon Spacing. Allez à l'onglet Style. Ici, vous pouvez modifier la typographie, la couleur d'arrière-plan, le remplissage et l'espacement des lettres.

L'option Hover permet de changer Border Type à Solid, définir Width à 2 pour le haut, le bas, le côté gauche et droite, ainsi que choisir la même couleur pour Text et Border en laissant Background blanc.

BOUTON BLANC AVEC OMBRE

Dans l'onglet Style, jouez avec la typographie, sa taille, son poids, son importance et ses paramètres de transformation.

Choisissez Text Color contrastante en laissant Background blanc.

Allez à Box Shadow et changez la couleur en gris. Laissez Position telle quelle (Outline) et appliquez les modifications aux paramètres Vertical et Blur.

En sélectionnant l'option Hover, changez Text Color et définissez Hover Animation à Bob.

BOUTON GRAS ET MODERNE

Allez dans l'onglet Style, jouez avec la typographie et changez l'espacement des lettres.

Modifiez les paramètres Padding puis choisissez la couleur contrastante pour Text.

Définissez le Border Type à Solid et ajustez la largeur.

Passez sur Box Shadow et choisissez la même couleur que pour le Text. Laissez la Position telle quelle tout en appliquant des modifications aux paramètres Vertical et Horizontal.

BOUTON GRAS ET MINIMAL

Dans l'onglet Style, changez Border Type à Solid tout de suite et changez la largeur. Définissez la couleur de la bordure et du texte sur le noir et l'arrière-plan sur le blanc. Vous pouvez également vouloir définir une autre police et configurer Padding.

ILLUSION DE BOUTON 3D

Pour obtenir un effet 3D, vous devez d'abord créer un bouton standard et appliquer des modifications mineures à l'onglet Style.

Voici ce que vous devez faire: choisissez le Background Color, définissez Border Type à Solid et changez la largeur du fond en 4. Après cela, allez à Border Color et choisissez une nuance plus foncée de la couleur choisie pour un arrière-plan. Cela donnera un effet 3D au bouton.

Avec des techniques assez classiques à l’esprit, vous êtes déjà censé avoir une idée de la création d’un bouton dans Elementor. Maintenant, vous pouvez simplement jouer avec les paramètres, tels que la couleur, la forme et l’animation de survol, et également créer davantage de boutons Elementor:

Tiny and Fresh;
Black and Blue;
Green and Purple;
Tender Purple;
Blue and Buzzing;
Green Tea;
Orange and Rounded;
Round and Simple.

Conclusion

Le bouton n'est pas simplement un autre élément de l'interface utilisateur. Il s’agit d’un instrument efficace visant à améliorer l’interaction des utilisateurs avec votre site Web. Correctement conçu, il contribue à une utilisation sans faille du site, détermine le comportement des utilisateurs et augmente considérablement le taux de conversion.

Le bouton doit permettre aux visiteurs d'effectuer l'action que vous souhaitez qu'ils effectuent sans hésiter. De plus, une fois correctement dimensionné, le bouton incite facilement les utilisateurs à cliquer. Et au contraire, quand il est trop gros et que les visiteurs n’ont aucune idée en quoi cela sert, ils risquent davantage de quitter le site Web ou de ne rien faire. Ce ne sont là que quelques-unes des principales raisons pour lesquelles vous ne devriez pas ignorer la conception des boutons de votre site Web.