Un bouton par défaut obtient des clics ; un bouton avec un peu de mouvement en obtient plus Le gratuit Widget Bouton Créatif dans Modules complémentaires principaux pour Elementor distribue une bibliothèque de préréglages d'effets de survol, depuis des balayages d'arrière-plan subtils jusqu'aux animations d'échange de texte, afin qu'un appel à l'action puisse se déplacer sans que vous écriviez une ligne de CSS.
Vous choisissez un préréglage, tapez le texte, ajoutez une icône si vous en voulez une et stylisez les états normal et de survol Ce guide couvre l'ensemble du widget, glisser vers le bouton fini.
Ce que fait le widget Creative Buttons #
Le widget rend un bouton d'appel à l'action avec une animation de survol prédéfinie Les animations sont fournies sous forme de 21 préréglages nommés, 6 gratuits et 15 avec Master Addons Pro, chacun avec son propre mouvement : arrière-plans qui glissent, bordures qui se dessinent, texte qui bascule vers un message alternatif Tout le reste fonctionne comme un bouton Elementor normal : texte, lien, icône, alignement et contrôle des couleurs complet par état.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Le widget Boutons créatifs activé dans le panneau d'options des modules complémentaires principaux, sous Widgets de base.
Comment ajouter le widget Boutons créatifs #
Dans l'éditeur Elementor, recherchez le Éléments panneau pour Boutons Créatifs et faites glisser le widget sur la page Un bouton sombre lisant “Ajouter votre contenu CTA” apparaît, déjà câblé avec l'effet Par défaut.
Choisissez un préréglage d'effet de bouton #
Ouvrir Préréglage et commandes du bouton dans l'onglet Contenu. Le Effets de bouton dropdown est le cœur du widget : Default, Winona, Ujarak, Wayra, Tamaya et Rayen sont libres. Pipaluk, Moema, Isi, Aylen, Saqui, Wapasha, Nina, Nanuk, Nuka, Antiman, Itzel, Naira, Quidel, Sacnite et Shikoba ont besoin Maître Addons Pro.
Chaque nom est une animation de survol différente Passez le bouton sur la toile après chaque choix et l'éditeur joue l'effet en direct, donc auditionner des préréglages prend des secondes Les noms ne font pas allusion à ce qu'ils font, donc essayer quatre ou cinq est le moyen le plus rapide de trouver le bon. Alignement des boutons et Alignement du texte du bouton asseyez-vous juste en dessous, chacun avec une bascule réactive pour les paramètres par appareil.
Définissez le texte, le lien et le texte alternatif #
Le Contrôles Bouton le groupe couvre le contenu. Texte du bouton est l'étiquette, et URL du lien pointe le bouton quelque part, avec l'icône d'engrenage pour les options new-tab et nofollow.
Les préréglages peuvent échanger l'étiquette contre un deuxième message en vol stationnaire. Choisissez tout effet autre que par défaut et un Texte de bouton alternatif le champ apparaît ; la démo le définit sur“Cliquez MAINTENANT !” pour que le bouton indique “Ajouter votre contenu CTA” au repos et bascule en vol stationnaire.
Ajouter une icône #
Le Icône control ouvre la bibliothèque d'icônes Elementor, avec Font Awesome et chaque jeu d'icônes que vous avez installé.
Après en avoir choisi un, Position d'icône le place avant ou après l'étiquette, et Espacement des icônes définit l'écart ; la démo le fait passer à 12 pixels pour que l'icône et le texte respirent.
Style le bouton #
Passer au Style onglet et ouvrez Styles de boutons. Le groupe supérieur gère la forme : Largeur, Typographie, Rembourrage de boutons, Type de frontière, Rayon Frontière (8 dans la démo, pour des coins légèrement arrondis), Ombre de boîte, et Taille de l'icône.
En dessous, Normal et Survole les onglets portent chacun trois couleurs : Couleur du texte, Couleur d'arrière-plan, et Couleur d'icône. La démo donne le texte blanc à l'état normal en bleu :
Retourne ensuite l'état de survol sur du texte sombre sur le vert, de sorte que l'effet anime entre deux looks clairement différents :
UN Modèles la section en bas provient de l'extension gratuite Patterns et ajoute des motifs décoratifs en arrière-plan.
Le résultat sur la page #
Sur la page en direct, le bouton se trouve dans ses couleurs normales jusqu'à l'arrivée du curseur Ensuite, le préréglage est joué : l'arrière-plan passe à la couleur du survol, l'icône et le texte changent, et le texte alternatif apparaît si le préréglage en utilise un.
Cas d'utilisation courants #
- CTA de la section héros où l'animation attire le regard sur l'action principale.
- Boutons de page de tarification avec un échange de texte comme “Get Started” vers “It's Free !” en vol stationnaire.
- Boutons de téléchargement et d'inscription jumelé à une icône pour la reconnaissance instantanée.
- Sections de la page d'atterrissage il faut un bouton pour se démarquer des valeurs par défaut du thème.
Conseils pour de meilleurs boutons créatifs #
- Préréglages d'audition sur la toile. Passez le bouton après chaque choix d'effets ; l'animation est jouée dans l'éditeur, aucun aperçu n'est nécessaire.
- Faites le contraste de l'état de vol stationnaire. L'animation se lit mieux lorsque les couleurs normales et planantes diffèrent clairement, comme la démo bleu-vert.
- Gardez le texte alternatif court. Les préréglages d'échange de texte semblent propres lorsque les deux messages ont à peu près la même longueur.
- Un bouton créatif par section. Le mouvement attire l'attention ; trois boutons mobiles d'affilée s'affrontent.
- Vérifiez le comportement des prises sur mobile. Les écrans tactiles n'ont pas de vol stationnaire, alors assurez-vous que l'état normal se lit comme cliquable tout seul.
Tutoriel Vidéo #
Vous pouvez également regarder la vidéo ci-dessous si vous souhaitez voir le bouton créatif en action, depuis le choix d'un préréglage d'effet jusqu'à l'animation de survol terminée sur la page en direct.
Foire aux questions #
Qu'est-ce que le widget Creative Buttons dans Master Addons ?
Il s'agit d'un widget Elementor pour les boutons d'appel à l'action avec des animations de survol prédéfinies Vous choisissez parmi 21 préréglages d'effets nommés (6 gratuits, 15 avec Pro), définissez le texte, le lien et l'icône et stylisez les états normal et de survol séparément du panneau Elementor.
Combien d'effets de boutons sont inclus ?
Le dropdown Button Effects répertorie 21 préréglages Default, Winona, Ujarak, Wayra, Tamaya et Rayen sont gratuits, et les autres ont besoin de Master Addons Pro, y compris Winona, Ujarak, Wayra, Tamaya, Rayen, Moema, Naira et Shikoba. Chacun applique une animation de vol stationnaire différente, et le canevas de l'éditeur joue l'effet en direct lorsque vous passez le bouton.
Qu'est-ce que le champ Texte du bouton alternatif ?
Les effets peuvent échanger l'étiquette du bouton contre un deuxième message en vol stationnaire Lorsque vous choisissez un effet autre que par défaut, le champ Texte du bouton alternatif apparaît afin que vous puissiez définir le message de survol, comme changer “Commencez par” en “C'est gratuit !”.
Puis-je ajouter une icône au bouton créatif ?
Oui. Le contrôle Icône ouvre la bibliothèque d'icônes Elementor. Après avoir choisi une icône, Icon Position la place avant ou après le texte, Icon Spacing définit l'espace, et Icon Size et Icon Color live dans l'onglet Style.
Puis-je styliser l'état de vol stationnaire séparément ?
Oui. Les styles de boutons ont des onglets normaux et de survol, chacun avec sa propre couleur de texte, sa propre couleur d'arrière-plan et sa propre couleur d'icône. Le préréglage anime entre les deux états, donc les couleurs contrastées rendent l'effet plus visible.
Envelopper #
Le widget Boutons créatifs transforme un CTA simple en un CTA animé sans code personnalisé : choisissez un préréglage dans la liste déroulante Effets, définissez le texte et l'icône et donnez aux états normal et stationnaire des couleurs qui méritent d'être animées. Il se marie bien avec le widget Liens créatifs pour les liens de texte animé Parcourir l'ensemble complet de Widgets et extensions Master Addons& voir le Page du widget Creative Button pour les démos et une comparaison avec le widget Elementor Button.
