Ajout d’un appel à l’action bouton pour le menu de navigation conduit à plus de clics et de meilleurs taux de conversion. Donc, il est important de faire comprendre aux visiteurs, “ce bouton est destiné à être cliqué et c’est précieux”. Une mouche dans l’animation est un excellent moyen d’attirer l’attention sur un bouton sur votre site web. Pour un simple “fly-in” de l’action sur un bouton d’en-tête, un peu de CSS est tout ce dont vous avez besoin.

Découvrez notre guide complet sur la création de la CTA boutons dans le menu d’en-tête, avec 5 gratuit de conception de bouton extraits de code que vous pouvez insérer dans de configurer rapidement votre menu CTA.

Pour ce tutoriel, vous allez apprendre un peu simple de CSS pour la création de l’ajout d’un fly-in de l’animation à votre appel à l’action de bouton et affichage uniquement sur la page d’accueil de votre site. Nous allons ajouter un “magasin” bouton avec des styles personnalisés. Dans cet exemple, vous pouvez voir le bouton apparaît en effet à partir de la gauche de la scène que vous faites défiler la page.

https://divi.space/wp-content/uploads/2016/02/slider_button.mp4

Comme notre première partie est dédiée à l’espace boutique du site, j’ai choisi de n’activer cette option de menu une fois que l’utilisateur a l’intention de faire défiler passé. Cette technique utilise WordPress & Divi fonctionnalités pour obtenir cet effet.

Le ciblage de la page d’accueil uniquement

Préfixe le sélecteur de créer avec le .la maison de la classe. Cela va ajouter à votre style personnalisé à n’importe quelle page est défini comme à la maison sur votre site WordPress.

L’Animation passe sur de défilement

Divi ajoute une classe de .et-fixe-d’en-tête de la #main-d’en-tête ID sur-défilement. C’est la façon dont vous êtes en mesure d’utiliser le customizer pour faire de votre en-tête fixe se comporter différemment après vous avez fait défiler (par défaut, il vient se rétrécit un peu). Vous pouvez pirater cette fonctionnalité pour créer des “avant-scroll” et ” après-faites défiler la liste des états pour votre nouveau CTA bouton.

La Création De Votre Bouton De Styles

Ce code s’applique à vos styles de bouton vers le premier élément de votre menu de navigation. Vous pouvez ajuster la couleur d’arrière-plan et du remplissage, mais assurez-vous que la marge négative égale à la marge intérieure supérieure afin de ne pas compenser tous les autres éléments de menu.

#main-d’en-tête #et-haut-navigation nav > ul > li:first-child > a { background: #FF9B04; padding: 10px 12px; border-radius: 4px; margin-top: -10px; }

Avant De Défilement

Ce morceau de code ajoute le bouton vers la gauche et le rend invisible, de sorte que lorsque vous faites défiler, il semble voler à partir de la gauche.

.la maison #main-d’en-tête #et-haut-navigation nav > ul > li:first-child > a { margin-right: 120px; transition: 1s ease tous; opacity: 0; }

Après De Défilement

Maintenant, utilisez ce fragment de code à rendre le bouton de nouveau visible par revenir à la position initiale. On Note l’apparition de la”.et-fixe-d’en-tête de la classe.

.la maison #main-d’en-tête.et-fixe-d’en-tête #et-haut-navigation nav > ul > li:first-child > a { margin-right: 0; opacity: 1; }

Ça y est! Trois mignons bouts de CSS créer un bon élément de menu de l’animation. Nous avons utilisé le premier enfant de la pseudo-classe pour cible le premier élément, mais vous pouvez facilement utiliser le menu ID de l’élément ou de dernière enfant ” pseudo-classe à venir dans le côté droit.

En savoir plus sur le CTA boutons sur le blog ainsi que d’obtenir une tonne de gratuit le style CSS des extraits de code de le gratuit Divi Extraits de la bibliothèque. Permet de transformer rapidement le style de votre site avec le copier-coller le code tweaks. Il est assez grand. Et comme toujours, n’oubliez pas d’envoyez-nous un message dans les commentaires ci-dessous si vous avez des commentaires ou des questions.

Profitez-en!

Source