Comment créer un CTA accrocheur dans Divi avec quelques effets de survol simples

Des interactions subtiles et des effets de survol peuvent être utiles pour créer un CTA (Call to Action) accrocheur. L'astuce consiste à utiliser des effets qui rendent votre CTA plus attrayant et intuitif afin que les utilisateurs soient plus susceptibles d'agir. Et puisque l'objectif final de la plupart des CTA est de cliquer sur un lien ou un bouton, il est important d'optimiser votre CTA de manière à mettre ces éléments cliquables au premier plan.

Dans ce tutoriel, je vais vous montrer comment utiliser Divi pour optimiser la visibilité des CTA en utilisant plusieurs effets de survol. Je vais vous montrer comment ajouter des arrière-plans de séparation de section en survol pour mettre en scène vos CTA pour un meilleur contraste et une meilleure lisibilité. Et je vais vous montrer comment agrandir et déplacer le CTA au centre de la page en survol afin qu'il devienne l'objectif principal. Ces effets de survol seront utiles pour faire ressortir tout appel à l'action et, espérons-le, améliorer l'expérience utilisateur.

Commençons.

Aperçu

Voici un aperçu des effets de survol CTA accrocheurs que nous allons construire dans ce didacticiel.

Téléchargez GRATUITEMENT la mise en page des effets de survol CTA accrocheur

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Abonnez-vous à notre chaîne Youtube

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous aurez besoin des éléments suivants :

1. Le thème Divi installé et actif
2. Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
3. Une image d'arrière-plan à utiliser dans la construction de la conception. J'en utiliserai un du Veterinarian Layout Pack pour ce tutoriel.

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Implémentation des effets de survol CTA accrocheurs dans Divi

Pour cet exemple de conception, nous allons commencer par un module d'appel à l'action aligné à gauche ou à droite. Ensuite, nous amènerons le module au centre de la page et le redimensionnerons (ou l'agrandirons) en survolant la ligne. Pour que l'appel à l'action se démarque encore plus dans l'état de survol de ligne, nous allons le mettre en scène en ajoutant des diviseurs de section qui se fermeront derrière le module pour un meilleur contraste.

Voici comment procéder.

Création de la section et de la ligne

Tout d'abord, créez une section régulière avec une ligne à une colonne.

Avant d'ajouter un module, ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Ajoutez une image de fond avec le point focal de l'image sur le côté droit afin qu'il reste visible lors de l'ajout de notre module sur la gauche.

• Largeur maximale : 1080px
• Alignement de la section : centre

Cela prend en charge la section pour le moment. Nous reviendrons plus tard sur les paramètres de la section pour ajouter les effets de survol du diviseur de section.

Ensuite, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• largeur: 100%
• largeur maximale : 100 %
• Rembourrage : 5 % en haut, 5 % en bas, 35 % à droite

Le rembourrage droit est la clé de cette conception car il pousse le contenu vers la gauche. Nous reviendrons plus tard pour ajouter nos options de survol pour déplacer le contenu de la ligne au centre plus tard.

Ajout du module d'appel à l'action

Nous sommes maintenant prêts à créer le module d'appel à l'action qui sera l'objectif principal de notre CTA accrocheur.

Allez-y et ajoutez un module d'appel à l'action à la ligne d'une colonne.

Mettez ensuite à jour les paramètres du module d'appel à l'action comme suit :

Teneur

• Titre : Remise sur la première visite
• Bouton : Prendre rendez-vous
• URL du lien du bouton : #

Concevoir

• Couleur d'arrière-plan : #ffffff
• Couleur du texte : foncé
• Police du titre : Nunito
• Poids de la police du titre : gras
• Taille du texte du titre : 36px

• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #154c87
• Largeur de la bordure du bouton : 0px
• Largeur maximale : 500 px
• Alignement du module : centre
• Coins ronds : 10px

Une caractéristique clé de cette conception est la largeur maximale de 500px. Cela garantira que le module ne change pas de largeur chaque fois que nous ajustons le bon rembourrage de la ligne en survol plus tard.

• Box Shadow : voir capture d'écran
• Position verticale de l'ombre de la boîte : 30 px
• Force de flou d'ombre de boîte : 100px
• Force de propagation de l'ombre de la boîte: -30px

Mise à l'échelle et centrage de l'appel à l'action lors du survol de la ligne

Nous sommes maintenant prêts à commencer à ajouter nos effets de survol CTA accrocheurs. À ce stade, nous voulons accomplir deux choses lorsque nous survolons la ligne. Premièrement, nous voulons déplacer le CTA au centre. Et puis nous voulons augmenter l'échelle du module (le rendre plus grand) pour le rendre encore plus visible.

Pour ce faire, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Remplissage (survol): 0% à droite

Ajustez ensuite le rembourrage pour l'affichage mobile :

• Rembourrage (tablette): 0% à droite
• Rembourrage (téléphone) : 5 % à gauche, 5 % à droite

Pour agrandir le CTA, ajoutez la propriété de transformation suivante à la ligne au survol :

• Échelle de transformation (survol): 110%

Même si la propriété transform scale est appliquée à la ligne, cela s'applique également indirectement à tous les éléments enfants à l'intérieur de la ligne, y compris le module. Par conséquent, le module s'adaptera à 110% lors du survol de la ligne.

Mise en scène du CTA en survol avec des diviseurs de section

Enfin, nous sommes prêts à ajouter des diviseurs de section pour mettre en scène le CTA lorsque vous survolez la section/ligne. La clé ici est de s'assurer que la section et la rangée ont la même hauteur et la même largeur afin que l'utilisateur survole simultanément la section et la rangée sans aucun espace. Nous devons donc supprimer tout rembourrage de section. Ensuite, nous devons créer un séparateur de section supérieur et inférieur qui augmente en hauteur lorsque vous survolez la section.

Voici quoi faire.

Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Remplissage : 0px en haut, 0px en bas

• Style de diviseur supérieur (bureau) : voir capture d'écran
• Top Divider Style (tablette et téléphone) : aucun
• Couleur du séparateur supérieur : rgba(21,76,135,0,61)
• Hauteur du séparateur supérieur (par défaut) : 0 %
• Hauteur du diviseur supérieur (survol) : 120 %
• Haut diviseur Flip: horizontal

• Style de séparateur inférieur (bureau) : voir capture d'écran
• Style de séparateur inférieur (tablette et téléphone) : aucun
• Couleur du séparateur inférieur: rgba (21,76,135,0,61)
• Hauteur du séparateur inférieur (par défaut) : 0 %
• Hauteur du diviseur inférieur (survol) : 120 %
• Bas diviseur Flip: horizontal

Pour vous assurer que les séparateurs ne s'affichent pas en dehors de la section, mettez à jour l'option de débordement vertical et horizontal sur masqué.

• Débordement horizontal : masqué
• Débordement vertical : caché

Voyons maintenant le résultat final.

Résultat final

Et voici le design sur tablette et téléphone.

Changer la position du CTA

Si vous souhaitez modifier la position initiale du module d'appel à l'action avant l'état de survol, vous pouvez facilement mettre à jour l'espacement des lignes.

Du côté droit

Disons que vous voulez que le module commence à droite avant le survol. Mettez simplement à jour les paramètres de ligne comme suit :

• Rembourrage : 35 % restants
• Rembourrage (survol): 0% Gauche

Vous voudrez mettre à jour l'image pour avoir un point focal gauche. Après cela, voici le résultat.

Du fond

Ou, si vous le souhaitez, vous pouvez faire apparaître le CTA en bas de la ligne. Pour ce faire, vous devrez ajouter une hauteur fixe à la section, puis abaisser le module avec un rembourrage supérieur.

Ouvrez les paramètres de la section et donnez à la section une hauteur maximale et définissez le débordement sur masqué.

• Hauteur maximale (bureau): 415px
• Débordement horizontal : masqué
• Débordement vertical : masqué

Ensuite, ouvrez les paramètres de ligne et mettez à jour le rembourrage pour pousser le module partiellement hors de vue sous la section. Retirez ensuite le rembourrage supérieur en survol pour le remonter.

• Rembourrage (bureau) : 25 % en haut, 5 % en bas
• Rembourrage (survol): 5% haut

Voici le résultat…

Dernières pensées

Divi rend amusant et facile l'ajout de toutes sortes d'effets de survol à vos conceptions de pages Web. Les meilleurs effets de survol sont ceux qui sont utiles et améliorent réellement l'expérience utilisateur. Les quelques effets de survol simples abordés dans cet article devraient aider à créer des CTA accrocheurs qui ont fière allure, améliorent l'expérience utilisateur et, espérons-le, conduisent à plus de conversions.

Pour plus d'idées, consultez notre article sur 3 façons dont vous pouvez utiliser les options de survol pour mettre l'accent sur les CTA dans Divi et notre article sur la création de CTA coulissants.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!