8 animations de boutons retardées pour votre CTA d'en-tête Divi personnalisé
Publié: 2020-01-23L'ajout d'animations de boutons retardées à n'importe quel CTA peut être un moyen efficace d'attirer l'attention des visiteurs et, à son tour, d'augmenter la probabilité d'obtenir un clic. Dans ce tutoriel, nous allons vous montrer comment utiliser Divi pour créer une animation de 8 boutons retardés pour un CTA d'en-tête personnalisé. Pour ce faire, nous combinerons les paramètres d'animation d'une manière que vous n'auriez peut-être jamais envisagée. De plus, ces animations peuvent être appliquées à presque tous les boutons CTA de votre site.
Commençons.
Aperçu
Voici un aperçu des 8 animations de boutons retardées que nous ajouterons au CTA d'en-tête personnalisé dans Divi :
Téléchargez GRATUITEMENT la mise en page des 8 animations de boutons d'en-tête différés
Pour mettre la main sur les 8 animations de boutons différés de ce tutoriel, vous devrez d'abord le télécharger à l'aide du 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 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.
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 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 devrez installer et activer le thème Divi. Assurez-vous d'avoir la dernière version de Divi.
Vous devrez télécharger le Second Theme Builder Pack car nous utiliserons l'en-tête personnalisé sur le modèle de page 404 de ce pack pour ce didacticiel.
Après cela, vous êtes prêt à partir.
Importation du modèle à partir du deuxième pack de création de thèmes
Depuis le tableau de bord WordPress, accédez à Divi > Générateur de thèmes. Dans le générateur de thème, sélectionnez l'icône de portabilité en haut à droite de la page. Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation, choisissez le fichier theme-builder-pack-2-404-page-template.json et cliquez sur le bouton d'importation. (Ce fichier d'importation se trouvera dans le dossier Second Theme Builder Pack)
Vous pouvez également sélectionner l'option pour importer l'en-tête et le pied de page globaux en tant que mises en page statiques.
Une fois le modèle importé, cliquez sur l'icône pour modifier la zone d'en-tête personnalisée.
Cela vous mènera à l'éditeur de mise en page du modèle de corps où nous ajouterons les animations retardées au bouton de l'en-tête prédéfini.
8 animations de boutons retardées pour votre CTA d'en-tête personnalisé
Les 8 animations de boutons retardées ci-dessous incluent une combinaison unique d'options d'animation Divi intégrées et de la propriété CSS perspective. La propriété perspective ajoute un effet 3D lorsque l'animation du bouton inclut un effet de retournement ou de pliage. Pour la plupart de ces animations, nous ajouterons une animation à la fois au bouton et à sa colonne parent afin d'obtenir un mouvement plus complexe.
Les voici…
#1 Rebond déroulant
Paramètres des boutons :
L'animation du bouton retardé du rebond déroulant est simple et efficace. Pour le construire, ouvrez les paramètres du module de boutons et mettez à jour les éléments suivants :
- Style d'animation : Rebond
- Direction de l'animation : vers le bas
- Durée de l'animation : 1100 ms
- Délai d'animation : 1500 ms
- Opacité de démarrage de l'animation : 100 %
#2 Flip vertical 3D
Pour créer l'animation de bouton retardé de retournement vertical 3D, vous devez d'abord ajouter la propriété perspective à la colonne parent du bouton (colonne 2).
Paramètres de colonne
Pour ajouter une perspective à la colonne, ouvrez les paramètres de ligne, puis cliquez pour modifier les paramètres de la colonne 2. Sous l'onglet avancé, ajoutez le CSS personnalisé suivant à l'élément principal :
perspective: 150px
Paramètres des boutons :
- Style d'animation : Retourner
- Direction d'animation : Centre
- Durée de l'animation : 1500 ms
- Délai d'animation : 1000 ms
- Intensité de l'animation : 400%
- Opacité de démarrage de l'animation : 100 %
#3 Retournement horizontal 3D
L'animation du bouton retardé de retournement horizontal 3D est similaire au retournement vertical. La seule vraie différence est la direction de l'animation.
Paramètres de colonne :
Tout d'abord, assurez-vous d'avoir ajouté la perspective à la colonne 2 en ajoutant le CSS personnalisé suivant à l'élément principal :
perspective: 150px
Paramètres des boutons :
Ouvrez les paramètres du module de boutons et mettez à jour les éléments suivants :
- Alignement des boutons : Centre
Cela garantit que le retournement horizontal est centré avec la propriété de perspective parent.
- Style d'animation : Plier
- Direction d'animation : Centre
- Durée de l'animation : 1000 ms
- Délai d'animation : 2000 ms
- Intensité de l'animation : 400%
- Opacité de démarrage de l'animation : 100 %
- Courbe de vitesse d'animation : Linéaire
#4 Rebond déroulant + Flip vertical 3D
Cette animation de bouton retardée est réalisée en combinant une animation de rebond (ajoutée à la colonne) et une animation de retournement (ajoutée au bouton).
Voici comment le construire.
Paramètres de colonne :
Ouvrez les paramètres de ligne et mettez à jour les paramètres de la colonne 2 avec les éléments suivants :
- Style d'animation : Rebond
- Direction de l'animation : vers le bas
- Délai d'animation : 2000 ms
- Opacité de démarrage de l'animation : 100 %
Ajoutez ensuite la perspective css à l'élément principal comme suit :
perspective: 150px;
Paramètres des boutons :
Une fois les paramètres de colonne en place, mettez à jour les paramètres du module de boutons comme suit :
- Style d'animation : Retourner
- Direction d'animation : Centre
- Durée de l'animation : 1500 ms
- Délai d'animation : 1000 ms
- Intensité de l'animation : 400%
- Opacité de démarrage de l'animation : 100 %
L'astuce ici est de vous assurer de retarder le début du retournement une fois l'animation de la colonne terminée.
#5 Descendre (glisser vers le bas + faire pivoter)
Pour obtenir l'animation « swoop down » pour ce prochain, nous devrons combiner une animation de diapositive (ajoutée à la colonne) et une animation de roulement (ajoutée au bouton).
Faisons le.
Paramètres de colonne :
Ouvrez les paramètres de ligne et mettez à jour les paramètres de la colonne 2 comme suit :
- Style d'animation : diapositive
- Direction de l'animation : vers le bas
- Délai d'animation : 1000 ms
- Opacité de démarrage de l'animation : 100 %
Ajoutez ensuite le css personnalisé suivant à l'élément principal :
perspective: 150px
Paramètres des boutons :
Mettez ensuite à jour les paramètres des boutons comme suit :
- Style d'animation : Rouleau
- Direction de l'animation : vers le bas
- Durée de l'animation : 1500 ms
- Délai d'animation : 1000 ms
- Opacité de démarrage de l'animation : 100 %
#6 Agrandir (zoom + échelle de transformation)
Cette animation de bouton retardée est unique en ce qu'elle implique la mise à l'échelle du bouton à l'aide de l'échelle de transformation. Ensuite, nous ajoutons l'animation de zoom au bouton.
Voici comment procéder.
Paramètres des boutons :
Ouvrez les paramètres du module de boutons et mettez à jour les éléments suivants :
- Échelle de transformation : 175%
- Style d'animation : Zoom
- Direction d'animation : Centre
- Durée de l'animation : 1500 ms
- Délai d'animation : 1000 ms
- Opacité de démarrage de l'animation : 100 %
#7 Pulse (zoom avant + zoom arrière)
Cette animation d'impulsion retardée est créée en combinant une animation de zoom arrière (ajoutée à la colonne) et une animation de zoom avant (ajoutée au bouton).
Faisons le.
Paramètres de colonne :
Ouvrez les paramètres de ligne et mettez à jour les paramètres de la colonne 2 comme suit :
- Style d'animation : Zoom
- Direction d'animation : Centre
- Durée de l'animation : 1000 ms
- Délai d'animation : 2000 ms
- Intensité de l'animation : -100 %
- Opacité de démarrage de l'animation : 100 %
Notez que nous avons ajouté une valeur négative (-100 %) pour l'intensité de l'animation. Cela provoque l'effet inverse de la colonne, ce qui réduira la colonne/le bouton (ou effectuera un zoom arrière).
Paramètres des boutons :
Mettez ensuite à jour les paramètres des boutons comme suit :
- Style d'animation : Zoom
- Direction d'animation : Centre
- Durée de l'animation : 1500 ms
- Délai d'animation : 1000 ms
- Intensité de l'animation : 50 %
- Opacité de démarrage de l'animation : 100 %
Notez que le délai d'animation est défini pour se produire 1000 ms avant l'animation de la colonne afin que le bouton effectue un zoom avant avant d'effectuer un zoom arrière.
#8 Spirale (glisser vers la gauche + tourner)
Cette dernière animation de bouton retardée combine une animation de diapositive (ajoutée à la colonne) et une animation de retournement à 720 degrés (ajoutée au bouton).
Voici comment procéder.
Paramètres de colonne :
Tout d'abord, ouvrez les paramètres de ligne et mettez à jour les paramètres de la colonne 2 comme suit :
- Style d'animation : diapositive
- Direction de l'animation : Gauche
- Durée de l'animation : 2000 ms
- Délai d'animation : 2000 ms
- Intensité de l'animation : 100 %
- Opacité de démarrage de l'animation : 100 %
Paramètres des boutons :
Mettez ensuite à jour les paramètres du module de boutons comme suit :
- Style d'animation : Retourner
- Direction d'animation : Centre
- Durée de l'animation : 2000 ms
- Délai d'animation : 2000 ms
- Intensité de l'animation : 800%
- Opacité de démarrage de l'animation : 100 %
Notez ici que l'intensité de l'animation est définie sur 800%. Cela fera tourner le bouton trois fois pour créer l'effet de rotation.
Résultats finaux
Jetons un dernier coup d'œil aux 8 animations de boutons retardées.
Dernières pensées
J'espère que ces 8 animations de boutons retardées aideront à augmenter les conversions pour vos CTA d'en-tête personnalisés. Vous pouvez également utiliser ces exemples pour vous inspirer et explorer d'autres conceptions et applications pour votre propre site Web !
Vous avez un favori ?
J'ai hâte de vous entendre dans les commentaires.
À votre santé!