Pour créer de tels boutons, nous utilisons le Thème Divi. Divi est un thème WordPress premium que j’utilise. Je l’utilise également directement sur ce blog.

Le premier bouton CTA (celui avec l’icône de flèche coulissante à droite lorsque vous survolez le bouton) est le module de boutons standard de Divi. C’est aussi mon style préféré que j’utilise pour la plupart. Il n’est pas nécessaire de continuer à jouer avec les paramètres de style du bouton au cas où c’est ce que vous recherchez.

Cependant, vous voudrez peut-être obtenir un effet d’animation différent, donc dans ce cas, vous pouvez explorer toutes les options de style de ce module Divi. J’expliquerai brièvement ci-dessous comment obtenir l’effet de design du deuxième bouton (le violet) que vous pouvez voir ci-dessus.

Tutoriel sur la création d’un bouton CTA animé avec Divi

Remarque: Le thème Divi contient à la fois les modules « Bouton » et « Appel à l’action ». Le module d’appel à l’action peut être utilisé lorsque vous devez ajouter du texte supplémentaire avec un titre au-dessus du bouton CTA, ainsi que des informations de base.

Module d'appel à l'action Divi

Module d’appel à l’action Divi

Dans ce tutoriel, cependant, je vais parler du module Divi Button, pas du module Call To Action.

La première chose que vous devez faire (après avoir ajouté un nouveau module de boutons à votre page ou à votre article Divi) est de définir le texte et le lien de votre bouton (l’url vers laquelle vous voulez que votre bouton soit lié).

Paramètres de texte et de lien du bouton

Nous pouvons maintenant travailler avec les paramètres de conception. Dans les paramètres de « Bouton », activez l’option « Utiliser des styles personnalisés pour le bouton ».

Utiliser des styles personnalisés pour le bouton

Ensuite, jouez simplement avec toutes les options qui apparaissent lorsque vous activez cette option. Dans mon cas, je recruterai:

J’ai changé la couleur d’arrière-plan du bouton en violet, défini la couleur du texte du bouton sur blanc et défini le rayon de la bordure sur 35 pixels. J’ai changé la police du bouton en Allerta. J’ai également ajouté du rembourrage dans les paramètres d’espacement.

Paramètres des boutons

Certaines des options ici ont également des options de survol. Avec ces fonctions, vous pouvez concevoir l’effet d’animation que vous souhaitez que votre bouton ait lors du survol. Par exemple, dans mon cas, j’ai mis en place ce qui suit:

J’ai changé la couleur d’arrière-plan du bouton en bleu lors du survol.

Paramètres du survol du bouton

Dans les paramètres avancés du bouton sous Transitions, vous pouvez spécifier la durée d’exécution de l’effet d’animation. Vous pouvez jouer avec la valeur «Durée de transition» et également définir le «Délai de transition» – si, par exemple, vous B. veulent attendre 150 millisecondes avant le début de l’animation.

Paramètres des transitions de boutons

Enfin, je veux vous donner un conseil utile: si vous utilisez les boutons Divi sur vos liens d’affiliation, vous voudrez peut-être les ouvrir dans une nouvelle fenêtre et leur ajouter une balise nofollow. Vous pouvez choisir que votre bouton ne suive plus les attributs dans les paramètres avancés du module de boutons. Cochez simplement les options dont vous avez besoin. Pour l’ouvrir dans une nouvelle fenêtre, vous pouvez le définir sous Paramètres de contenu> Lien> Cible du lien du bouton.

Module de bouton d'attribut

Si vous aimez ces boutons d’appel à l’action animés spécifiques à Divi, je vous recommande d’obtenir une copie du thème Divi. De plus, avec Divi, vous avez accès à d’autres excellents plugins premium de Elegant Themes monarque (pour les boutons de partage social) et floraison (pour les champs de connexion par e-mail).

Enfin, vous pouvez également consulter mon tutoriel sur la façon d’ajouter un 3. Bouton CTA vers le module Divi de l’en-tête avec pleine largeur.



Source link

Recent Posts