Comment booster votre CTA avec un effet de défilement « Winning Spin »

C'est toujours amusant de gagner un prix. C'est pourquoi les entreprises commercialisent leurs produits et services en ligne en distribuant des articles gratuits. Il peut s'agir d'un coupon pour un dessert gratuit lors de votre première commande ou d'un livre électronique gratuit lorsque vous vous abonnez à une liste de diffusion. Mais parfois, même les cadeaux peuvent être ignorés sur le Web. L'ajout d'un élégant effet de défilement « tournant gagnant » peut être un excellent moyen de donner à votre CTA l'attention qu'il mérite tout en créant une interaction engageante pour les visiteurs.

Dans ce tutoriel, nous allons vous montrer comment booster vos CTA avec un effet de défilement « gagnant spin » dans Divi. Lorsqu'un utilisateur fait défiler la page, le prix gagnant apparaît pour révéler l'offre gratuite d'une manière unique. Et vous pouvez l'utiliser pour promouvoir presque toutes les offres gratuites auxquelles vous pouvez penser.

Commençons.

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

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 !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Choisir une mise en page prédéfinie ».
   
4. Sélectionnez la présentation de la page d'accueil de la boulangerie et cliquez pour utiliser la présentation.
   

Après cela, vous serez prêt à commencer à créer le CTA avec un effet de défilement « tour gagnant » dans Divi.

Partie 1 : Création de l'effet de défilement « Winning Spin »

Pour commencer, déployez la vue des calques à partir du menu des paramètres inférieur dans Divi Builder. Cela aidera à mieux gérer nos éléments de conception.

Ajouter la section, la ligne et les colonnes

La mise en page prédéfinie est livrée avec plusieurs sections avec déjà du contenu. Nous allons ajouter une nouvelle section à la page où nous voulons que le CTA réside. Pour ce tutoriel, ajoutez une nouvelle section régulière directement sous la section intitulée « Services ».

À l'intérieur de la section, ajoutez une ligne à deux colonnes.

Paramètres de ligne

Avant d'ajouter des modules, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Largeur : 94%
• Rembourrage : 10 pixels en haut, 10 pixels en bas
• Largeur de la bordure : 1px
• Couleur de la bordure : rgba(0,0,0,0.12)

Sous l'onglet avancé, ajoutez le CSS personnalisé suivant à l'élément principal :

display:flex;
align-items: center;

Bordure de la colonne 1

Une fois les paramètres de ligne définis, ouvrez les paramètres de la colonne 1 et ajoutez une bordure droite comme suit :

• Largeur de la bordure droite : 1px
• Couleur de la bordure droite : rgba(0,0,0,0.12)

Création de la flèche et du texte Spinner à l'aide d'un module de présentation

Ensuite, nous allons créer la flèche et le texte qui serviront de flèche pointant vers la sélection gagnante.

Ajouter un module de présentation

Ajoutez un nouveau module de présentation dans la colonne de gauche.

Contenu de présentation

Mettez ensuite à jour le contenu du texte de présentation avec un nouveau titre et une nouvelle icône.

• Titre : Vous gagnez un
• Icône : Flèche droite (voir capture d'écran)

Conception de présentation

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Couleur de l'icône : #a06d51
• Placement des images/icônes : à gauche
• Taille de la police de l'icône : 80 px (ordinateur de bureau), 50 px (tablette), 40 px (téléphone)
• Police du titre : Patua One
• Poids de la police du titre : gras
• Taille du texte du titre : 40 px (ordinateur de bureau), 25 px (tablette), 20 px (téléphone)
• Espacement des lettres du titre : 1px
• Hauteur de la ligne de titre : 2 em

CSS personnalisé

Ensuite, changez l'ordre du contenu du texte de présentation de sorte que la flèche soit à droite au lieu de gauche en ajoutant le CSS personnalisé suivant à l'élément principal :

direction: rtl !important;

Retirez ensuite le remplissage par défaut sous le titre du texte de présentation en ajoutant ce CSS personnalisé au titre du texte :

padding-bottom: 0px

Création des sélections de prix avec plusieurs présentations

Dans la colonne de droite, nous allons ajouter nos sélections de prix qui tourneront et finiront par choisir un gagnant. Pour ce faire, nous allons créer et positionner 4 modules de présentation avec un titre et une image.

Création de la présentation 1

Pour créer notre premier texte de présentation dans la colonne 2, dupliquez le texte de présentation de la colonne 1 et faites-le glisser dans la colonne 2.

Ouvrez les paramètres du texte de présentation en double dans la colonne 2 et retirez le CSS personnalisé pour l'élément principal :

Cela ramènera notre icône vers la gauche.

Mettre à jour le titre et l'image

Mettez ensuite à jour le titre et l'image comme suit :

• Titre : Cookie GRATUIT !
• Image : importer une image (environ 100 pixels sur 100 pixels)

Conception graphique 1

Mettez ensuite à jour les paramètres de conception comme suit :

• Largeur de l'image : 80px (ordinateur de bureau), 50px (tablette), 40px (téléphone)
• Largeur du contenu : 92 %
• Largeur : 100 %

Origine de la transformation

Nous allons faire pivoter les textes de présentation à l'aide de l'option de rotation de transformation, il est donc important de choisir une origine de transformation qui a du sens pour la façon dont les textes de présentation doivent être pivotés. Nous n'allons pas faire pivoter le premier, mais cela servira de bon modèle pour l'avenir.

Mettez à jour le transform-origin pour le texte de présentation comme suit :

• Origine de la transformation : centre droit

Vous devez également supprimer l'animation image/icône.

Position absolue

Sous l'onglet Avancé, indiquez le texte de présentation et la position absolue comme suit :

• Position : Absolu
• Localisation : centre droit

Création de Blurb 2

Pour créer le deuxième texte de présentation, dupliquez le texte de présentation 1.

Rotation Blurb 2

Ajoutez ensuite une rotation de transformation comme suit :

• Axe Z de rotation de transformation : 25 deg

Vous verrez que le texte de présentation est maintenant pivoté hors de la zone d'affichage de la ligne.

Création et rotation de Blurb 3

Pour créer le troisième texte de présentation, dupliquez le texte de présentation 2. Mettez ensuite à jour la rotation de transformation comme suit :

• Axe Z de rotation de transformation : 50 deg

Création et rotation de Blurb 4

Pour créer le quatrième texte de présentation, dupliquez le texte de présentation 3. Mettez ensuite à jour la rotation de transformation comme suit :

• Axe Z de rotation de transformation : 75 deg

Mettre à jour le titre et les images du Blurb

Une fois que vous avez terminé d'ajouter les 4 textes de présentation, revenez en arrière et mettez à jour le titre et l'image pour chacun selon vos besoins.

Rotation de défilement de colonne

Pour ajouter l'effet de défilement, nous allons faire pivoter toute la colonne qui contient les 4 textes de présentation pivotés.

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

• Origine de la transformation : centre droit

Sous l'onglet Avancé, ouvrez l'onglet Effet de défilement rotatif et mettez à jour les éléments suivants :

• Activer la rotation : OUI
• Rotation de départ : -75% (à 15%)

Ensuite, mettez à jour le déclencheur d'effet de mouvement sur « Top of Element ».

Mettre à jour la ligne avec un débordement masqué

Revenez maintenant aux paramètres de ligne et masquez le débordement du contenu en mettant à jour le paramètre de ligne suivant :

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

Partie 2 : Création du prix CTA

Pour cette dernière partie du tutoriel, nous allons créer un CTA qui affichera des informations sur le prix et un bouton. Et nous allons ajouter un effet de défilement pour afficher le CTA une fois l'animation « tour gagnant » terminée. Cela imitera un type d'effet surprenant.

Ajouter la ligne

Pour commencer, ajoutez une ligne à une colonne directement sous la ligne que nous venons de créer.

Ajouter un module de texte

Pour ajouter le contenu de notre CTA, nous allons copier un module de texte à partir de la mise en page prédéfinie sur la page. Recherchez et copiez le module de texte avec le titre « Shop Online ».

Collez-le ensuite dans la ligne que vous venez de créer.

Mise en forme du texte

Mettez à jour la conception du texte comme suit :

• Police du texte : PT Sans
• Poids de la police de texte : gras
• Taille du texte du texte : 16px
• Hauteur de la ligne de texte : 2 em
• Alignement du texte : Centre

Ajouter un bouton CTA

Recherchez ensuite le bouton en haut de la mise en page prédéfinie et copiez-le.

Collez-le ensuite directement sous le module de texte.

Effet de défilement de ligne

Pour afficher le CTA après que le « tour gagnant » a sélectionné le prix, ouvrez les paramètres de la ligne et mettez à jour l'effet de défilement suivant :

Sous l'onglet Entrée et sortie en fondu…

• Activer les fondus entrants et sortants : OUI
• Opacité de départ : 0% (à 50%)
• Opacité moyenne : 100 % (à 55 %)

Résultat final

Dernières pensées

Espérons que cet effet de défilement « tournant gagnant » vous donne de nouvelles idées sur la façon de concevoir un CTA plus attrayant sur votre propre site. Sa construction demande un peu de finesse en utilisant les options de transformation et les effets de défilement de Divi. Mais une fois terminée, la mise en page est vraiment facile à mettre à jour avec votre propre contenu unique.

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

À votre santé!