Créer un menu CTA collant en faisant défiler la page vers le bas

Traditionnellement, lorsque la page est chargée, un menu permanent est visible en haut (ou en bas) de la page. Cependant, lorsque l’utilisateur fait défiler la page vers le bas, la création d’un menu CTA permanent peut être un moyen créatif et efficace de garder ces CTA importants toujours cliquables. D’une certaine façon, c’est le meilleur des deux mondes. Elle permet à l’OTC de conserver sa position privilégiée dans le dessin ou modèle original. Et il rend la version simplifiée du CTA (bouton) visible dans la structure de menu collante familière à l’utilisateur.
Dans ce tutoriel, nous vous montrerons comment créer un menu CTA permanent lorsque vous faites défiler une page dans Divi. Il offrira aux utilisateurs de bureau et mobiles un moyen intuitif et unique d’attirer les visiteurs. Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et accéder au paquet Layout
Afin que les fonctions des boutons permanents soient correctement alignées.
Ouvrez les paramètres de ligne et mettez à jour ce qui suit: largeur de fente: 1 largeur: 100% largeur maximale: 1400 Px (bureau), 100% (tablette) Ajoutez le bouton invitation à l’action dans la nouvelle ligne, ajoutez le formulaire invitation à l’action. Mise à jour comme suit: Nous n’avons besoin que des éléments de bouton dans ce module afin que nous puissions supprimer le titre et le corps du texte. Assurez – vous d’ajouter une URL de lien de bouton (\ Dans l’onglet conception, mettre à jour les styles de boutons suivants: taille du texte du bouton: 14 Px (bureau), 11 Px (telephone) button text color: # 1b1f50 button Background color: # 09d5fe button Border width: 0px button letter Spacing: 2px button Characters: tillium Web button font Weight: bold button font style: tt button fill: 1EM top, 1EM bottom Continuer la mise à jour de la conception comme suit: largeur: 33,33% alignement du module: remplissage intermédiaire: 0px en haut, 0px en bas lorsque le bouton est en position fixe, 33,33% de la largeur du bouton permettra au bouton d’occuper exactement un tiers de la fenêtre du navigateur. La combinaison de ce bouton avec les deux autres boutons (même largeur pour chaque bouton, 33,33%) produira une barre de menu CTA avec des boutons. Dans l’onglet avancé, ajoutez le clip CSS personnalisé suivant à la description de la promotion (il a des espaces inutiles dont nous n’avons pas besoin): display: none;
Puis ajoutez un autre clip au bouton promo: display: block; Rendre pulsan
Pour rendre les boutons permanents, nous utiliserons l’option de position permanente pour attacher les boutons ainsi que le haut et le bas de la fenêtre du navigateur. Nous ajouterons également des décalages pour l’en – tête Divi fixe par défaut. Mise à jour comme suit: coller en haut et en bas décalages permanents du Haut: 54 Px (bureau), 0 Px (tablette) décalages par rapport aux éléments collants environnants: Non Avec la position permanente, nous pouvons maintenant cibler les styles de boutons dans l’état permanent. Dans ce cas, nous voulons déplacer le bouton à gauche pour faire place à un bouton plus permanent plus tard. Lorsque le bouton est collé en haut ou en bas de la page, il se déplace à une distance égale (33,33%) à la largeur exacte du bouton. Construction du CTA # 2 maintenant que nous avons une section complète avec le bouton CTA de travail permanent, nous pouvons copier la section précédente et apporter de petits changements au bouton.
D’abord, copiez la section. Ouvrez les paramètres du module d’action d’appel dans la nouvelle section et mettez à jour les options de transformation comme suit: Transform move x axis (collant): 0px en fait, il suffit de le restaurer à l’état par défaut parce que nous ne voulons pas déplacer ce bouton parce qu’il doit rester au Centre. CTA Construction # 3 pour créer une troisième section CTA, copiez la section précédente. Ensuite, ouvrez les paramètres du module d’action d’appel dans la nouvelle section et mettez à jour les options de conversion comme suit: convertir déplacer l’axe des X (collant): 100% une fois que le bouton est collé au haut ou au bas de la page, il déplace le bouton vers la droite à une distance égale à la largeur exacte du bouton (33,33%). Mettre à jour le texte et les couleurs des boutons pour optimiser
Redessiner, mettre à jour le texte et les couleurs des boutons CTA pour correspondre à la conception du site. Voici les paramètres de cet exemple: pour invoquer l’action 2… Texte du bouton: voir notre texte du bouton plan couleur: # FFFFFF couleur de fond du bouton: # 1b1f50 pour l’invitation à l’action no 3… Texte du bouton: discutez avec nous couleur du texte du bouton: # FFFFFF couleur de fond du bouton: # 4328b7 Ajouter des marges temporaires en haut et en bas pour tester la fonctionnalité sur un site Web normal, ces OTC sont situés quelque part au centre de la page, de sorte qu’il y a plus d’espace pour faire défiler la page vers le haut et vers le bas. Nous pouvons maintenant ajouter des marges temporaires en haut et en bas de la page. Ajouter une marge supérieure de 90vh en haut. Dans la moitié inférieure, ajouter une marge inférieure de 90vh. Résultats finaux examinons maintenant les résultats finaux. Ce tutoriel vous montre une façon créative de garder ces CTA importants au premier plan afin que les utilisateurs puissent les cliquer à tout moment. Il ajoute également une micro – interaction subtile qui attire plus d’attention sans distraire le contenu principal de la page. Espérons que cela aidera à couler ces jus créatifs afin que vous puissiez essayer plus de design pour le rendre meilleur. J’ai hâte d’entendre vos commentaires. Bonjour!