Lorsque vous utilisez l’entête plein écran sur votre site, vous pouvez y ajouter une flèche de défilement vers le bas de page de manière à montrer à vos visiteurs qu’il reste du contenu à parcourir.

Malheureusement vos visiteurs ne voient pas forcément tous cette flèche et peuvent rater des informations intéressantes.

Je vous propose aujourd’hui de faire bouger cette flèche de mani§re à attirer l’oeil de vos visiteurs et faire en sorte qu’ils cliquent dessus.

Pour cela, cliquer sur Apparence->Personnaliser->CSS additionnel, ou copiez-collez le code suivant dans le fichier style.css de votre thème enfant :

[pastacode lang=”css” manual=”%2F*%20Fleche%20de%20defilement%20vers%20le%20bas%20bouge%20*%2F%0A%0A%40-webkit-keyframes%20bounce%20%7B%0A0%25%2C%20100%25%20%7B%0A-moz-transform%3A%20translateY(0)%3B%0A-ms-transform%3A%20translateY(0)%3B%0A-webkit-transform%3A%20translateY(0)%3B%0Atransform%3A%20translateY(0)%3B%0A%7D%0A40%25%20%7B%0A-moz-transform%3A%20translateY(-10px)%3B%0A-ms-transform%3A%20translateY(-10px)%3B%0A-webkit-transform%3A%20translateY(-10px)%3B%0Atransform%3A%20translateY(-10px)%3B%0A%7D%0A%7D%0A%40keyframes%20bounce%20%7B%0A0%25%2C%20100%25%20%7B%0A-moz-transform%3A%20translateY(0)%3B%0A-ms-transform%3A%20translateY(0)%3B%0A-webkit-transform%3A%20translateY(0)%3B%0Atransform%3A%20translateY(0)%3B%0A%7D%0A40%25%20%7B%0A-moz-transform%3A%20translateY(-10px)%3B%0A-ms-transform%3A%20translateY(-10px)%3B%0A-webkit-transform%3A%20translateY(-10px)%3B%0Atransform%3A%20translateY(-10px)%3B%0A%7D%0A%7D%0Aspan.scroll-down.et-pb-icon%20%7B%20%0A-webkit-animation-name%3A%20bounce%3B%0Aanimation-name%3A%20bounce%3B%0A-webkit-animation-duration%3A%201s%3B%0Aanimation-duration%3A%201s%3B%0A-webkit-animation-fill-mode%3A%20both%3B%0Aanimation-fill-mode%3A%20both%3B%0A-webkit-animation-iteration-count%3A%20infinite%3B%0Aanimation-iteration-count%3A%20infinite%3B%0A%7D” message=”” highlight=”” provider=”manual”/]

 

Voici le résultat obtenu avec ce petit bout de code:

Bien sur en vrai le mouvement est plus fluide que sur mon GIF.

Vous pouvez voir une Démo ici : https://playground.divi-community.fr/

A vous de jouer maintenant 😉