Personnaliser le bouton de retour en haut de page

par Julien Guiard | 30 octobre 2017 | Tutoriels Divi | 16 commentaires

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:

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):

Voir la démo

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:

Vous pouvez le voir en live :

Voir la démo

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.

Ces tutoriels pourraient vous intéresser

Comment ?!
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie

20% sur la licence annuelle

16 Commentaires

Guy Sagne sur 8 novembre 2017 à 07h01 am

bonjour
et un grand merci pour ce tuto
Ou se trouvent les valeurs des différents icônes ?
Merci d’avance
Guy
Julien sur 8 novembre 2017 à 07h15 am

Bonjour, sur cette page :https://www.elegantthemes.com/blog/resources/elegant-icon-font
Descends un peu et tu vas voir tous les icones avec des valeurs genre “"” il te suffit simplement de remplacer “&#x” par “\”
Guy Sagne sur 11 novembre 2017 à 10h45 am

merci
gGuy
jonathan.jovine sur 7 janvier 2019 à 15h53 pm

Bonjour j’ai une petite question s’il vous plait.
Ma flèche de retour ne scroll pas mon site jusqu’en haut et je ne sais plus quoi faire (sur mobile en version bureau elle scroll comme il faut)…

Avez vous une idée ? ça remonte à 97% mais pas à 100%.
Fleche de divi / plugin etc rien n’y fait…

Cordialement

Jonathan
Julien sur 14 janvier 2019 à 23h15 pm

Bonjour, tu as appliqué des marges particulières sur ton site?
Julien sur 2 février 2019 à 22h45 pm

Merci pour ce super tuto, comme dab!

Comment faire en sorte que le bouton ait le même aspect sur la version mobile du site?

Votre bouton est très stylé : comment on fait cette animation sous la fusée?!
Pierre sur 7 février 2019 à 10h27 am

Avec les conseils du tuto, le bouton de retour en haut de page est censé avoir le même aspect sur toutes les largeurs d’écrans.
L’image de fusée de Divi Community est un simple GIF animé que j’ai fait dans Photoshop. 😉
Antoine sur 16 avril 2019 à 17h33 pm

Bonjour,

Pour moi le code ne marche absolument pas…

Je suis sur Extra de Elegant Thème.

Pouvez vous m’aider svp ^^
Pierre sur 17 avril 2019 à 19h48 pm

C’est parce que sur Extra les classes ne sont pas les mêmes. 😉
Par exemple, .et_pb_scroll_top est à remplacer par #back_to_top.
Utilise les outils de développement de ton navigateur pour inspecter le bouton et identifier les bonnes classes.
Francisco MARTINEZ sur 25 mai 2019 à 09h41 am

bonjour,
Comment faire apparaitre le bouton de base tel que la capture d’écran plus haut ?.
J’ai un macBook avec Divi sur lequel ce bouton apparait sur un site en local pour faire des tests et j’ai un site en ligne avec Divi également mais pas configuré à l’identique. Je n’arrive pas à faire apparaitre la flèche de base sur la version en ligne. Ou se trouve elle ?.
Merci d’avance
Francisco MARTINEZ sur 25 mai 2019 à 09h45 am

J’ai trouvé !!….Désolé pour le dérangement et merci pour ce site et toutes ces infos !!!
Vincent sur 1 septembre 2019 à 23h18 pm

Bonjour,

Je souhaiterais rajouter une image à la place du logo de scroll mais je ne sais pas comment mettre le chemin dans la partie CSS à la place de:

content: “\42”; /* icone provenant des icones de bases de Divi*/

Merci d’avance,

Cordialement,
Pierre Bichet sur 2 septembre 2019 à 13h47 pm

Tout simplement content: url(https://www.tonsite.fr/etc/);
C’est ce qu’on a fait sur Divi Community par exemple pour intégrer la petite fusée en gif animé. 😉
Jalele sur 27 mars 2020 à 00h40 am

Bonjour à tous, merci pour le super tuto 🙂 J’ai une petite question. Peut on avoir une taille plus petite de l’icone sur mobile ou tablette ou le bouton doit être de la même tailler sur les trois support ?
Jalele sur 27 mars 2020 à 00h41 am

Merci d’avance pour votre aide !
Julien Guiard sur 31 mars 2020 à 22h22 pm

Bonjour, tu peux adapter la taille comme tu le souhaites. Fais cependant attention que le bouton ne soit pas trop petit sur téléphone.