Créer des CTA à glisser avec les paramètres d'alignement et d'animation des lignes de Divi

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur. Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment créer des CTA coulissants avec les paramètres d'alignement et d'animation des lignes de Divi à l'aide du pack de mise en page de l'entreprise de nettoyage.

Pour nous aider à y parvenir, nous commencerons par supprimer toutes les animations déjà présentes. De cette façon, nous pouvons mettre en évidence les appels à l'action qui glissent.

Allons-y !

Aperçu

Jetons un coup d'œil aux trois exemples différents que nous allons traiter dans cet article :

Télécharger la page de destination de l'entreprise de nettoyage

Ajouter une nouvelle page et basculer vers Visual Builder

Comme mentionné précédemment, nous allons utiliser le pack de mise en page de l'entreprise de nettoyage pour créer ce didacticiel, mais n'hésitez pas à utiliser cette approche pour tout site Web que vous créez. Ajoutez une nouvelle page, entrez le titre de votre page et passez immédiatement à Visual Builder.

Télécharger la page de destination de l'entreprise de nettoyage

Une fois que vous l'avez fait, vous verrez trois options apparaître sur votre écran. Vous pouvez commencer à créer à partir de zéro, choisir une mise en page prédéfinie ou cloner une page existante. Choisissez la deuxième option.

Recherchez le pack de mise en page de l'entreprise de nettoyage, sélectionnez la mise en page de la page de destination et téléchargez-la sur votre page.

Suppression de tous les paramètres d'animation sur la page

Localiser la section sur la page

Une fois la mise en page téléchargée sur votre page, allez-y et localisez la section suivante.

Supprimer l'animation

Ouvrez ses paramètres et supprimez l'animation déjà présente.

Étendre le style à toutes les sections

Pour gagner du temps, nous allons étendre ce style d'animation à tous les éléments de conception de la page. Nous commencerons par les sections de notre page en cliquant avec le bouton droit de la souris et en sélectionnant « Étendre les styles d'animation ». Faites-le s'appliquer à toutes les sections de la page et cliquez sur « Prolonger ».

Étendre le style à toutes les lignes

Répétez les mêmes étapes, mais appliquez-les plutôt à toutes les lignes de la page.

Étendre le style à tous les modules

Enfin, assurez-vous qu'il s'applique également à tous les modules de la page.

Création du CTA #1

Ajouter une nouvelle ligne

Emplacement

Commençons à créer le premier CTA coulissant ! Ajoutez une nouvelle ligne au bas de la section suivante :

Structure des colonnes

Choisissez la structure de colonne suivante pour la ligne que vous venez d'ajouter :

Alignement des lignes

Nous allons pousser la ligne vers la gauche pour aider à créer l'effet de glissement.

• Alignement des lignes : à gauche

Dimensionnement

Nous allons également diminuer la largeur de notre rangée.

• Utiliser la largeur personnalisée : Oui
• Largeur personnalisée : 500px

Espacement

Et pour vous débarrasser de l'espace blanc inutile, supprimez le rembourrage supérieur et inférieur de la ligne.

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

Ajouter un module d'appel à l'action

Ajouter une copie

Nous pouvons maintenant ajouter notre module d'appel à l'action ! Ajoutez du contenu de votre choix.

Ajouter un lien

Ajoutez ensuite un lien vers votre module CTA. Si vous n'avez pas encore de lien vers lequel rediriger, vous pouvez simplement saisir « # ». Sans ajouter quelque chose à cette boîte, vous ne pourrez pas voir le bouton, alors assurez-vous de ne pas le laisser vide.

Supprimer la couleur d'arrière-plan

Le module CTA a par défaut une couleur d'arrière-plan. Allez-y et supprimez-le dans les paramètres d'arrière-plan.

Copier le dégradé de la section

Ouvrez la section contenant le fond dégradé bleu. Sans rien y changer, faites un clic droit et copiez les paramètres.

Coller le dégradé dans le module CTA

Collez ce fond dégradé sur le module CTA.

Paramètres du texte du titre

Ouvrez à nouveau les paramètres du module CTA, accédez aux paramètres du texte du titre et apportez quelques modifications pour correspondre au pack de mise en page :

• Police du titre : Ubuntu
• Poids de la police du titre : gras
• Taille du texte du titre : 24 px (ordinateur de bureau et tablette), 16 px (téléphone)
• Hauteur de la ligne de titre : 1,2 em

Paramètres du corps du texte

Modifiez également le poids de la police du corps.

• Poids de la police de caractères : semi-gras

Paramètres des boutons

Modifiez ensuite les paramètres des boutons.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 18px
• Couleur du texte du bouton : #557df3
• Couleur d'arrière-plan du bouton : #FFFFFF
• Largeur de bordure de bouton : 10px
• Couleur de la bordure du bouton : #FFFFFF
• Rayon de la bordure du bouton : 0px
• Police des boutons : Ubuntu
• Poids de la police : gras

Espacement

Augmentez également le rembourrage du module.

• Rembourrage supérieur : 80px
• Rembourrage inférieur : 80px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Frontière

Ensuite, ajoutez un rayon de bordure en haut à droite et en bas à droite dans les paramètres de bordure.

• En haut à droite : 100 pixels
• En bas à droite : 100 pixels

Boîte ombre

Pour créer plus de profondeur, nous allons ajouter une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 71px
• Force de propagation de l'ombre de la boîte: -5px

Animation

Enfin, donnez à votre module CTA un effet d'animation.

• Direction de l'animation : à droite
• Intensité de l'animation : 100 %
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation : Linéaire

Création du CTA #2

Cloner la ligne CTA #1 et apporter des modifications

Cloner la ligne

Pour créer le deuxième exemple, allez-y et clonez la première ligne.

Faire glisser vers la section

Faites défiler la page et placez le doublon ici :

Supprimer le rembourrage supérieur de la section

Ouvrez les paramètres de la section dans laquelle vous avez placé la ligne et supprimez le rembourrage supérieur.

• Rembourrage supérieur : 0px

Supprimer la section Rayon de la bordure supérieure gauche

Accédez ensuite aux paramètres de bordure et supprimez également le rayon de la bordure supérieure gauche.

Supprimer le rayon de la bordure supérieure droite du CTA

Ensuite, ouvrez le module CTA et supprimez le rayon de bordure supérieur droit pour permettre à la section et au module de se fondre.

Modifier l'animation

Pour ce CTA coulissant, nous allons utiliser une animation différente. N'hésitez pas à jouer avec d'autres options d'animation également.

• Direction d'animation : Centre
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation : Linéaire

Création du CTA #3

Cloner la ligne CTA #1 et apporter des modifications

Cloner la ligne

Pour créer le dernier exemple, nous allons à nouveau cloner la ligne.

Faire glisser vers la section

Placez le doublon dans la section suivante :

Modifier l'alignement des lignes

Ouvrez les paramètres de ligne du module et modifiez l'alignement à droite.

• Alignement des lignes : à droite

Supprimer l'arrière-plan du dégradé CTA

Supprimez également le fond dégradé du module.

Utiliser la couleur d'arrière-plan à la place

Utilisez plutôt une couleur d'arrière-plan.

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

Changer la couleur du texte du bouton

Pour faire correspondre la couleur d'arrière-plan, modifiez également la couleur du texte du bouton.

• Couleur du texte du bouton : #f2835a

Supprimer le rayon de la frontière CTA

Nous transformons le module CTA en carré en supprimant tout le rayon de bordure qui lui a été donné.

Modifier l'animation

Modifiez ensuite les paramètres d'animation.

• Direction de l'animation : vers le bas
• Intensité de l'animation : 100 %
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation : Linéaire

Supprimer le rembourrage inférieur de la section

Enfin, nous allons pousser le module vers le bas de la section en enlevant le rembourrage inférieur de la section dans laquelle il est placé et le tour est joué !

• Rembourrage inférieur : 0px

Aperçu

Jetons un dernier coup d'œil aux trois exemples de CTA coulissants que nous avons créés.

Dernières pensées

Dans cet article, nous vous avons montré comment créer des CTA coulissants à l'aide du pack de mise en page de l'entreprise de nettoyage de Divi. Nous avons commencé par supprimer les animations déjà présentes sur la page. Après cela, nous avons créé trois CTA coulissants pour attirer l'attention. Cet article de blog fait partie de notre initiative de conception Divi où nous essayons de mettre quelque chose dans votre boîte à outils de conception chaque semaine. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!