Comment créer un menu CTA collant lorsque vous faites défiler la page

Traditionnellement, les menus collants sont visibles en haut (ou en bas) d'une page au moment où la page se charge. Cependant, créer un menu CTA collant lorsque l'utilisateur fait défiler la page peut être un moyen créatif et efficace de garder ces CTA importants cliquables à tout moment. À certains égards, c'est le meilleur des deux mondes. Il permet au CTA de conserver sa place de choix dans la conception originale. Et, il garde une version minifiée du CTA (le bouton) visible dans une structure de menu persistante avec laquelle les utilisateurs sont familiers.

Dans ce tutoriel, nous allons vous montrer comment créer un menu CTA collant lorsque vous faites défiler la page dans Divi. Cela fonctionnera très bien pour les utilisateurs de bureau et mobiles en ajoutant un moyen intuitif, mais unique, d'inciter les visiteurs à agir.

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 !

https://youtu.be/kpjbG8frPTQ

Abonnez-vous à notre chaîne Youtube

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 « Construire à partir de zéro ».

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

Comment créer un menu CTA collant lorsque vous faites défiler une page dans Divi

Bâtiment CTA #1

Pour commencer à créer notre premier CTA, nous allons utiliser un module de présentation avec un bouton CTA personnalisé qui restera en haut et en bas de la page pendant que l'utilisateur fait défiler.

Pour commencer, créez une nouvelle ligne à une colonne dans la section normale.

Ajouter une présentation

À l'intérieur de la colonne de la ligne, ajoutez un module de présentation.

Ouvrez les paramètres de présentation et ajoutez une image de votre choix à la place de l'icône par défaut. J'utilise une image du Cryptocurrency Layout Pack.

Sous l'onglet Conception, mettez à jour les styles de texte comme suit :

• Titre Titre Niveau : H2
• Police du titre : Titillium Web
• Poids de la police du titre : semi-gras
• Alignement du texte du titre : Centre
• Taille du texte du titre : 36 px (ordinateur de bureau), 28 px (téléphone)
• Hauteur de la ligne de titre : 1,5 em
• Hauteur de la ligne du corps : 2 em

Ajouter une ligne pour le bouton CTA

Sous la ligne contenant le texte de présentation que nous venons de créer, ajoutez une nouvelle ligne à une colonne.

Il est important que les paramètres de ligne soient corrects pour que la fonctionnalité des boutons collants s'aligne correctement.

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

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 1400px (ordinateur de bureau), 100 % (tablette)

Ajouter un bouton d'appel à l'action

Dans la nouvelle ligne, ajoutez un appel au module d'action. La mise à jour suivante :

• Nous n'aurons besoin que de l'élément button dans ce module afin de pouvoir nous débarrasser du titre et du corps du texte.
• Assurez-vous d'ajouter une URL de lien de bouton ('#' fera l'affaire pour l'instant) afin que le bouton soit visible lors de la conception de la mise en page. Vous pouvez toujours le mettre à jour plus tard.
• Désactivez l'option "Utiliser la couleur d'arrière-plan".

(REMARQUE : vous ne pourrez pas encore voir le bouton blanc sur un fond blanc, mais cela changera à l'étape suivante)

Sous l'onglet Conception, mettez à jour les styles de boutons suivants :

• Taille du texte du bouton : 14px (bureau), 11px (téléphone)
• Couleur du texte du bouton : #1b1f50
• Couleur d'arrière-plan du bouton : #09d5fe
• Largeur de la bordure du bouton : 0px
• Espacement des lettres des boutons : 2px
• Police des boutons : Titillium Web
• Poids de la police du bouton : gras
• Style de police des boutons : TT
• Rembourrage des boutons : 1 em en haut, 1 em en bas

Continuez à mettre à jour la conception comme suit :

• Largeur : 33,33 %
• Alignement du module : centre
• Remplissage : 0px en haut, 0px en bas

La largeur de 33,33 % du bouton permettra au bouton d'occuper exactement 1/3 de la fenêtre du navigateur lorsqu'il est en position collante. La combinaison de cela avec deux autres boutons (chacun avec la même largeur de 33,33 %) donnera une barre de menu CTA complète de boutons.

Sous l'onglet Avancé, ajoutez l'extrait de code CSS personnalisé suivant à la description de la promotion (il a un espacement inutile dont nous n'avons pas besoin) :

display:none;

Ajoutez ensuite un autre extrait du bouton Promo :

display:block;

Rendre le bouton collant

Pour rendre le bouton collant, nous allons utiliser l'option de position collante pour coller le bouton et le haut et le bas de la fenêtre du navigateur. Nous allons également ajouter un décalage pour l'en-tête fixe Divi par défaut.

Mettez à jour les éléments suivants :

• Position collante : coller en haut et en bas
• Sticky Top Offset : 54 px (ordinateur de bureau), 0 px (tablette)
• Décalage des éléments collants environnants : NON

Avec notre position collante en place, nous pouvons maintenant cibler le style du bouton dans l'état collant. Dans ce cas, nous voulons déplacer le bouton vers la gauche pour faire de la place pour des boutons collants supplémentaires plus tard.

Mettez à jour le style de transformation suivant dans l'état persistant :

• Transformer l'axe X de translation (collant) : -100 %

Cela déplacera le bouton sur une distance égale à la largeur exacte du bouton (qui est de 33,33 %) une fois qu'il sera collé en haut ou en bas de la page.

Bâtiment CTA #2

Maintenant que nous avons une section complète avec un bouton CTA collant qui fonctionne, nous pouvons dupliquer la section précédente et apporter des ajustements mineurs au bouton.

Tout d'abord, dupliquez la section.

Ouvrez les paramètres du module Call to Action dans la nouvelle section et mettez à jour les options de transformation comme suit :

• Transformer Traduire l'axe X (Sticky): 0px

Il s'agit en fait de le restaurer à son état par défaut, car nous ne voulons pas déplacer ce bouton car il doit rester au centre.

Bâtiment CTA #3

Pour créer la troisième section CTA, dupliquez la section précédente.

Ouvrez ensuite les paramètres du module Call to Action dans la nouvelle section et mettez à jour les options de transformation comme suit :

• Transformer l'axe X de translation (Sticky): 100%

Cela déplacera le bouton vers la droite d'une distance égale à la largeur exacte du bouton (qui est de 33,33 %) une fois qu'il sera collé en haut ou en bas de la page.

Mettre à jour le texte et les couleurs du bouton

Pour peaufiner la conception, mettez à jour le texte et les couleurs du bouton CTA pour qu'ils correspondent à la conception de votre site. Voici les paramètres de cet exemple :

Pour le CTA #2…

• Texte du bouton : voir nos plans
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #1b1f50

Pour le CTA #3…

• Texte du bouton : discutez avec nous
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #4328b7

Ajouter une marge temporaire aux sections supérieure et inférieure pour tester la fonctionnalité

Sur un site Web normal, ces CTA résideraient quelque part au milieu de la page, de sorte qu'il y a un espace supplémentaire pour faire défiler la page vers le haut et vers le bas. Pour l'instant, nous pouvons ajouter une marge temporaire aux sections supérieure et inférieure de la page.

Sur la partie supérieure, ajoutez une marge supérieure de 90vh.

Dans la section inférieure, ajoutez une marge inférieure de 90vh.

Résultat final

Voyons maintenant le résultat final.

Dernières pensées

Ce didacticiel vous montre une manière créative de garder ces CTA importants au premier plan afin que les utilisateurs puissent cliquer dessus à tout moment. Il ajoute également une micro-interaction subtile qui attire encore plus l'attention sur eux sans détourner l'attention du contenu principal de la page. Espérons que cela aidera à faire circuler ces jus créatifs afin que vous puissiez expérimenter avec plus de conceptions pour le rendre encore meilleur.

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

À votre santé!