Vous utilisez le bouton de retour en haut de page sur votre site Divi?

Vous savez, c’est le bouton qui apparait quand on scrolle un peu vers le bas et qui ressemble à ça:

back to top divi community

Il est assez simple et plutôt sobre, n’est-ce pas?

Et bien que diriez-vous de l’intégrer parfaitement et très simplement au design de votre site en utilisant quelques lignes de CSS? Vous pouvez voir le genre de résultat que l’on peut obtenir sur notre site de démo (scrollez vers le bas pour faire apparaitre la flèche):

Pour cela, copiez-collez les lignes de CSS suivante dans Apparence->Personnaliser->CSS additionnel

/*PERSONNALISER LE BOUTON DE RETOUR EN HAUT DE PAGE*/

/*Opacité du bouton et effets d'animation (pour tous les navigateurs)*/
.et_pb_scroll_top.et-visible {
    opacity: 1;
    -webkit-animation: fadeInBottom 1s;
    -moz-animation: fadeInBottom 1s;
    -o-animation: fadeInBottom 1s;
    animation: fadeInBottom 1s;
}
 
/*Positionnement et couleur du bouton*/
.et_pb_scroll_top.et-pb-icon {
    right: 15px; /*distance du bouton par rapport à la droite de la fenêtre*/
    bottom: 85px; /*distance du bouton par rapport au bas de la fenêtre*/
    border-radius: 25px; /*Propriété permettant d'arrondir le bouton, supprimez la si vous voulez un bouton carré*/
    background: #CC6931; /*couleur de fond du bouton. Mettez celle que vous voulez*/
}
 
 /*couleur de fond du bouton au survol*/
.et_pb_scroll_top.et-pb-icon:hover {
    background: grey;
}
 
/*Choix de l'icone et couleur de celui-ci*/
.et_pb_scroll_top:before {
    content: "\42"; /* icone provenant des icones de bases de Divi*/
    color: black; /*couleur de l'icône*/
}

Vous trouverez la liste de toutes les valeurs des icônes de Divi sur le site d’Elegant Theme.

Vous pouvez également utiliser un icône ou une image personnelle en remplaçant content: "\42"; /* icone provenant des icones de bases de Divi*/ par content: url('chemin ou url de votre image ');

Je vous mets une screenshot du résultat obtenu avec ce code:

back to top modifie divi community

Vous pouvez le voir en live :

N’hésitez bien sur pas à jouer avec les valeurs du code CSS pour bien voir à quoi chacune sert et obtenir exactement le résultat que vous souhaitez.

 

D'autres tutoriels pouvant vous intéresser: