Comment ajouter des flèches de bouton d'angle animées par survol à votre conception avec Divi

La façon dont vous présentez votre CTA dans une page que vous concevez peut avoir un impact important sur la façon dont vos visiteurs agissent. Vous pouvez procéder de la manière la plus fréquemment utilisée, en utilisant le format de bouton avec copie au milieu, mais vous pouvez également faire preuve de créativité. Dans le tutoriel d'aujourd'hui, nous allons vous montrer une manière créative d'inclure un appel à l'action dans votre design Divi. Nous allons inclure des flèches de bouton d'angle animées par survol pour être exact. Une fois qu'une flèche est survolée, la direction de la flèche changera avec le style. Vous pourrez également télécharger gratuitement le fichier JSON de cette conception !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devrez d'abord la 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 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 !

Commençons à recréer !

Ajouter une nouvelle section spécialisée

Ajoutez une nouvelle section de spécialité à la page sur laquelle vous travaillez. Sélectionnez la structure de colonne suivante pour cela :

Fond dégradé

Ouvrez les paramètres de la section et appliquez l'arrière-plan dégradé suivant :

• Couleur 1 : #fff8f5
• Couleur 2: #f9f3ef
• Type de dégradé : Radial
• Direction radiale : en bas à gauche
• Position de départ : 40 %
• Position finale : 40 %

Dimensionnement

Passez à l'onglet de conception de la section et modifiez les paramètres de dimensionnement comme suit :

• Égaliser les hauteurs de colonne : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur intérieure : 90 %
• Largeur intérieure maximale : 1580px

Espacement

Ensuite, accédez aux paramètres d'espacement et ajoutez un rembourrage à droite à la colonne 1.

• Remplissage de la colonne 1 à droite : 6 %

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu H2

Il est temps d'ajouter des modules, en commençant par un module de texte dans la colonne 1. Ajoutez du contenu H2 de votre choix.

Paramètres de texte H2

Stylisez les paramètres de texte H2 du module comme suit :

• Police de titre 2 : Kumbh Sans
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Couleur du texte : #08665c
• Titre 2 Taille du texte :
  • Bureau : 75 pixels
  • Tablette : 60px
  • Téléphone : 45 pixels

Espacement

Ajoutez ensuite une marge supérieure et inférieure.

• Marge supérieure : 50px
• Marge inférieure : 50px

Ajouter le module de texte n° 2 à la colonne 1

Ajouter un contenu de description

Ajoutez un autre module de texte sous le précédent avec un contenu de description de votre choix.

Paramètres de texte

Modifiez les paramètres de texte du module comme suit :

• Police du texte : Kumbh Sans
• Couleur du texte : #08665c
• Taille du texte : 16px
• Hauteur de la ligne de texte : 1,8 em

Espacement

Ajoutez également une marge inférieure sur les tailles d'écran plus petites.

• Marge inférieure :
  • Bureau : /
  • Tablette et téléphone : 50px

Ajouter la ligne 1 à la colonne 2

Structure des colonnes

Passons à la deuxième colonne de la section. Là, ajoutez une première ligne en utilisant la structure de colonne suivante

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 2

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Paramètres de la colonne 1

Couleur de l'arrière plan

Ensuite, ouvrez les paramètres de la colonne 1 et appliquez une couleur de fond de votre choix.

• Couleur d'arrière-plan : #cccccc

Espacement

Passez aux paramètres d'espacement des colonnes et utilisez les valeurs réactives suivantes :

• Rembourrage supérieur :
  • Bureau : 100 pixels
  • Tablette et téléphone : 70 pixels
• Rembourrage gauche :
  • Ordinateur de bureau et tablette : 8 %
  • Téléphone : 10 %
• Rembourrage droit :
  • Ordinateur de bureau et tablette : 8 %
  • Téléphone : 10 %

Frontière

Ajoutez également des coins arrondis aux paramètres de bordure.

• Tous les coins : 10px

Visibilité

Complétez les paramètres de la colonne en définissant les débordements pour qu'ils soient visibles dans l'onglet avancé.

• Débordement horizontal : Visible
• Débordement vertical : visible

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu

Il est temps d'ajouter des modules, en commençant par un premier module de texte dans la colonne 1. Ajoutez du contenu de votre choix.

Paramètres de texte

Modifiez les paramètres de texte du module :

• Police du texte : Kumbh Sans
• Poids de la police de texte : léger
• Couleur du texte : #08665c
• Taille du texte : 30 pixels
• Hauteur de la ligne de texte : 1 em

Espacement

Appliquez également une marge inférieure.

• Marge inférieure : 15px

Ajouter un module diviseur à la colonne 1

Visibilité

Ensuite, ajoutez un module diviseur. Assurez-vous que l'option "Afficher le diviseur" est activée.

• Afficher le diviseur : Oui

Ligne

Passez à l'onglet de conception du module et modifiez la couleur de la ligne.

• Couleur de la ligne : #fff8f5

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Poids du diviseur : 2px
• Hauteur : 2px

Espacement

Ajoutez également une marge inférieure.

• Marge inférieure : 50px

Ajouter le module de texte n° 2 à la colonne 1

Ajouter du contenu H3

Ajoutez un autre module de texte à la colonne 1. Utilisez du contenu H3 de votre choix.

Paramètres de texte H3

Passez à l'onglet de conception du module et modifiez les paramètres de texte H3 comme suit :

• Police de la rubrique 3 : Kumbh Sans
• Titre 3 Poids de la police : gras
• Titre 3 Couleur du texte : #08665c
• Titre 3 Taille du texte :
  • Bureau : 48px
  • Tablette : 38 pixels
  • Téléphone : 32 pixels

Espacement

Utilisez également une marge inférieure.

• Marge inférieure : 15px

Ajouter le module de texte n° 3 à la colonne 1

Ajouter du contenu

Ajoutez le dernier module de texte à la colonne 1 avec le contenu de description de votre choix.

Paramètres de texte

Modifiez les paramètres de texte en conséquence :

• Police du texte : Kumbh Sans
• Couleur du texte : #08665c
• Taille du texte : 16px
• Hauteur de la ligne de texte : 1,8 em

Espacement

Incluez également une marge inférieure.

• Marge inférieure :
  • Bureau : 200px
  • Tablette et téléphone : 150 px

Ajouter le module Blurb à la colonne 1

Laisser les boîtes de contenu vides

Passons au dernier module dont nous avons besoin dans cette colonne, qui est un module Blurb. Laissez les zones de contenu vides.

Icône par défaut

Sélectionnez ensuite l'icône en forme de flèche.

Icône de survol

Changez l'icône au survol.

Ajouter un lien

Utilisez également un lien pour ce module.

Couleur d'arrière-plan du survol

Ensuite, ajoutez une couleur de fond de survol.

• Couleur d'arrière-plan du survol : #08665c

Paramètres d'icône par défaut

Accédez à l'onglet Conception et modifiez les paramètres de l'icône comme suit :

• Couleur de l'icône : #ffffff
• Placement des images/icônes : en haut
• Alignement image/icône : à droite
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 80px

Paramètres de l'icône de survol

Modifiez la taille de la police de l'icône au survol.

• Taille de la police de l'icône de survol : 40 px

Dimensionnement

Ensuite, ajoutez de la largeur aux paramètres de dimensionnement.

• Largeur : 80px

Espacement de survol

Modifiez le rembourrage supérieur et droit au survol.

• Rembourrage supérieur : 25px
• Remplissage de survol à droite : 10px

Frontière

Incluez également des coins arrondis dans les paramètres de bordure.

• Tous les coins : 5px

Échelle de survol

Ensuite, utilisez l'option d'échelle de transformation au survol.

• Survolez les deux : 130 %

Élément principal et image de présentation CSS

Ensuite, accédez à l'onglet avancé et utilisez la ligne de code CSS suivante pour l'élément principal :

cursor: pointer;

Utilisez cette ligne pour la zone css Blurb Image :

margin-bottom: 0px;

Position

Complétez les paramètres du module en le repositionnant dans les paramètres de position :

• Position : Absolu
• Emplacement : En bas à droite

Réutiliser la colonne 1

Supprimer la colonne 2

Une fois que vous avez rempli la première colonne, vous pouvez la réutiliser pour la seconde. Pour ce faire, supprimez d'abord la deuxième colonne.

Cloner la colonne 1

Ensuite, clonez le premier.

Changer la couleur d'arrière-plan de la colonne 2

Bien sûr, vous devrez apporter quelques modifications à la colonne en double, en commençant par la couleur d'arrière-plan.

• Couleur d'arrière-plan de la colonne 2 : #f0c7b1

Ajouter Transformer Traduire à la colonne 2

Nous ajoutons également une valeur de traduction de transformation sur des écrans de plus petite taille.

• Droit:
  • Bureau : /
  • Tablette et téléphone : 50px

Modifier le contenu en double

Assurez-vous de modifier tout le contenu en double.

Modifier le lien du module Blurb

Complétez la colonne dupliquée en modifiant le lien à l'intérieur du module Blurb.

Réutiliser la ligne

Une fois que vous avez terminé la première ligne et ses colonnes, vous pouvez cloner la ligne entière.

Supprimer la colonne 2

Supprimez la deuxième colonne à l'intérieur des paramètres de ligne.

Changer la couleur d'arrière-plan de la colonne

Ensuite, modifiez la couleur d'arrière-plan de la colonne restante.

• Couleur d'arrière-plan de la colonne : #dfe7f2

Ajouter la marge supérieure à la ligne

Revenez aux paramètres de ligne généraux et ajoutez une marge supérieure réactive.

• Marge supérieure:
  • Bureau : 50px
  • Tablette et téléphone : 100 pixels

Modifier le contenu en double

Ensuite, modifiez tout le contenu en double dans la colonne.

Modifier le lien du module Blurb

Terminez le didacticiel en modifiant le lien dans le module Blurb. C'est ça!

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec vos CTA. Plus précisément, nous vous avons montré comment ajouter des flèches de bouton d'angle animées par survol. Cette approche vous aide à conserver une apparence et une convivialité propres lors de la conception d'une section avec plusieurs CTA. Cela ajoute également un niveau d'interaction supplémentaire. Vous avez pu télécharger gratuitement le fichier JSON. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.