Create a customised 'back to top' button in a few clicks!

Published on 30/01/2020 | 25 comments

Displaying aback-to-topbutton on your site is a fairly common practice. It is not there to look pretty, but rather to enhance a user's experience during their visit.

UX(user experience) is very important in web design because it is what makes users feel good and come back.

What if I told you that we could combine the two: UX and DESIGN?

What if I told you that in a few clicks you could insert a custom back to top button positioned where you want it? Simply with Divi, without adding any code or plugin!

This is what I propose in this new tutorial...

Résultat final du bouton "return to top"
Final result of the "return to top" button

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - Create a back to top button using the Summary module

To create your back to top button, a Divi module is particularly suitable, it is the summary module (Blurb Module).

This allows you to easily insert an icon or an image but also a URL (a link). This is exactly what we need to create the famous button!

1.1 - Editing the global footer

I offer this solution because it is the easiest...

If you add your button to your Global Footer, the back to top button will be present on all pages of your site. This will save you a lot of time.

But it also means that you must (or will) use the Divi Theme Builder to achieve this...

If this is not the case for you, that's okay, you can adapt this solution to your own Divi layouts. The only constraint will be that you will have to add it manually in all the pages of your site...

Another solution: customise your button with a few lines of code or plugins. I've included a list of resources at the end of this article.

Editer le Footer Global
Editing the Global Footer

So first, create or edit the global footer from the Divi > Theme Builder tab.

In the screenshot below, the footer already contains some graphic elements...

Module résumé comme bouton retour vers le haut
Insert a Summary Module to create a "back to top" button
  1. Add a new section by clicking on the "+" button. No matter where you insert it, it will have no visual impact.
  2. Choose a normal (blue) section.
  3. Insert a 1/1 line.
  4. Add the Blurb Module.

Don't delay! Discover the Divi theme here !

1.2 - Defining the content of the Summary module

Once the Summary module has been inserted, you can proceed with its configuration and customisation.

Modifier le contenu du Résumé
Modify the content of the Summary
  1. From the "Content" tab , delete the title and body text.
  2. Activate the "Use icons" option.
  3. Choose your favourite icon.
  4. In the Link tab, enter : #return-to-top
  5. Set the link target to open in the same window.

2 - Customise the "back to top" button

Now that the few formalities of setting up the back-up button have been completed, you can define the design of the button.

Still in the Summary module settings, go to the STYLE tab.

Styliser le bouton retour vers le haut
Stylizing the back up button
  1. Set the colour of the icon.
  2. On the 'Transform' tab, you can reduce or enlarge the size of the icon if required.
  3. Move the sliders to change the size.

From the Style tab, you can also (in addition to defining the colour and changing the size of the icon) add an animation, a shadow etc...

3 - Set the "fixed" position

This is the mandatory option for a successful back-up button: the position fixed.

It's funny because this option is brand new in Divi, it appeared since Divi 4.2 and it went unnoticed... What a shame, the position option has so much to offer! Check this out:

Find out more about this feature that brings extra comfort, read the official article on the Divi Position.

Note: these CSS position options are available in all sections, rows and Divi modulesfrom the Advanced tab.

Définir la position Fixed pour le bouton retour vers le haut
Set the Fixed position for the back up button

Still in the Summary module settings, go to the Advanced tab and scroll down to the "Position " option:

  1. In the drop-down menu, choose the "Fixed"option
  2. Determine the position of the back-up button. As a rule, it is placed in the lower right-hand corner.
  3. Play with the margins if necessary.
  4. Add a Z-Index of 9999.
  5. Don't forget to validate...

That's it, your "back to top" button is created and fixed. Now we'll make it work.

4 - Adding a CSS ID to the site header

When you created your return-to-top button, I advised you to enter the #return-to-top link (in chapter 1.2 of this article). This is a anchor link.

For this link to be fully functional and bring the reader to the top of the page, you must enter a CSS ID at the top of your site.

This is why I recommend editing the Global Header of your site this time.

Editer le header global
Editing the Global Header

Go back to the Divi > Theme Builder tab and create or edit the global header for your site.

Ajouter un ID CSS de retour vers le haut
Adding a CSS ID for back to top

Whatever elements you have placed in your Header, you will be able to edit it to insert a CSS ID.

In the screenshot above, I have chosen to edit the Divi Menu module but you can edit the line or the section, the result will be the same.

  1. Open the settings of your item to be modified (in this case, the navigation menu).
  2. Go to the Advanced tab and insert "return-to-top". Without the "#" this time.
  3. Save the module and then the Header.
Résultat final du bouton "return to top"
Final result of the "return to top" button

That's it!

Now your site has a customised and functional back to top button.

5 - Variation of the "back to top" button with an image

An even nicer idea: why not use a custom image instead of a Divi icon ?

5.1 - Creating the button design

Use your favourite vector software. In the screenshot below, this is Affinity Designer.

Créez le visuel de votre bouton
Create the visual of your button with your favourite software

I quickly created an arrow. It's not great, I grant you...

But if you have a designer's soul, you will know what to do to create a TOP back-to-top button 😉

Alternatively, you can browse the web for free graphic elements.

5.2 - Inserting the image in the footer

Once you have your image in .png format (transparent background), you can insert it in place of the Summary module icon.

insérer l'image du bouton
Insert the button image in place of the icon

To do this, go back to step 1.2 of this article and deactivate the icon to use an image instead.

5.3 - Check the result

Now you have a fully customised back-up button!

Bouton retour avec image
Back to top button with custom image

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!

6 - In conclusion: a "back up" button in less than 2 minutes!

With Divi, it's a breeze to create fully customized websites!

You will no longer have any design constraints and you can easily satisfy your needs or those of your customers.

To best customize your WordPress site, check out these Divi tutorials who can help you!

More resources on customising the back to top button without using the Theme Builder:

Bouton "Retour vers le haut" personnalisé avec Divi
"Return to top" button
"Return to top" button

1,319 words

5

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

25 Commentaires

  1. AUDREY GODEREAUX

    Merci Lycia pour l’astuce ! explications claires et précises , ton site et travail m’aident et m’inspirent bcp ^^

    Bonne soirée 🙂

  2. Lycia Diaz

    Merci Audrey 😉

  3. Stéphanie Arlt

    Superbe astuce à nouveau Lycia, merci !

    J’ai tenté l’expérience, mais je suis bloquée.

    Après la création du bouton, j’ai ajouté l’ID CSS dans l’en-tête du site, mais j’ai mon menu qui disparait.
    De base, je n’ai pas d’en-tête global dans le thème builder. Je suis passée par apparence pour le paramétrer.

    Une reco pour gérer ça ?

    D’avance merci pour ton aide.

  4. Lycia Diaz

    Salut Stéphanie, tu as trouvé finalement ? Tu entends quoi par « j’ai ajouté l’ID CSS dans l’en-tête du site » ?

  5. Stéphanie

    Nope Lycia !

    Pour ta question, je parlais de l’étape 4 de ton tuto – Ajouter un ID CSS dans l’en-tête du site. Retournez à l’onglet Divi > Theme Builder et créez ou éditez l’en-tête globale de votre site.

    Chez moi, ce n’est pas comme ça. Mon en-tête n’apparait pas avec mes différents onglets.

  6. naby.freeman

    Merci bcp Lycia pour ce tuto
    Tu es superbe.

  7. Lycia Diaz

    Ah mince, tu as un lien à partager ?

  8. Aline

    Bonjour !
    Merci, le tuto est clair, mais je reviens sur la question de stéphanie : quand on utilise le personnalisateur de theme pour faire son entete et qu’apres on met l’id dans le header via le divi builder, tout l’entete disparait….
    Est-ce que tu as une solution ?
    Je ne vois pas où mettre un id dans le header directement dans le personnalisateur.
    Ou alors il faut faire tout son entete avec le divi builder et plus du tout avec le personnalisateur ? mais dans ce cas, je ne suis pas encore capable de faire ça…

  9. Aline

    j’ai trouvé entre temps…
    enfin j’ai fait mon header global et du coup j’ai pu mettre mon id 🙂

  10. Lycia Diaz

    Salut Aline, oui, si tu veux faire ça, tu dois utiliser le Thème Builder pour pouvoir mettre un ID dans la section qui affiche ton menu.

  11. Jo

    Super astuce !
    Je me demandais par contre s’il y avait la possibilité de ne faire apparaître cette icône que lorsque la page est plus longue que la hauteur de l’écran ?

  12. Lycia Diaz

    Salut Jo, non pas comme ça. Sinon, tu embarques le code seulement dans les pages qui en ont besoin au lieu de pour tout le site 😉

  13. Annabelle

    Bonjour Lycia,

    Déjà merci pour ce tuto ! Par contre j’ai un souci, le lien est bien effectif sur ma flèche, mais il ne renvoie pas vers mon menu. J’ai créé un Menu pleine page via l’éditeur de thème donc je me dis que ça vient peut-être de là ?

  14. Lycia Diaz

    Salut Annabelle, ça vient peut-être de là car je n’ai pas testé avec le menu en pleine page, c’est possible que ça ne marche pas à cause de cela 😉

  15. Floriane

    Bonjour Lycia,

    Après plusieurs tentatives, mon icône « maison » s’affiche en réalité avec la lettre v. Je ne comprends pas d’où peut venir ce problème d’affichage, les codes m’ont l’air bons…
    Lorsque je suis également dans ma structure de menu sur wordpress, mon titre de navigation est « v » et non pas l’icône choisi au préalable.

    Mon menu a été fait directement par le menu plein écran du module divi.

  16. Lycia Diaz

    Salut Floriane ton code est bon, c’est un problème récurrent sur Divi en ce moment, peut-être dû au cache. J’ai pas trouvé de solution. Vide ton cache régulièrement. Ça peut aider.

  17. Meyer Michel

    Bonjour,
    Je remarque que le bug que j’essaie de résoudre est également visible sur cette page … c’est à dire que par exemple l’icône « retour vers le haut » est un chiffre et non pas une flèche et ainsi que dans le menu du haut, il y à le chiffre 3 à la place de la flèche pour dérouler le menu… alors soit c’est mon navigateur qui à un problème sauf que ce soucis je le retrouve en visitant mon site depuis la tablette d’un ami ou sur mon smartphone… à la place des 3 traits désignant le symbole du menu, j’ai la lettre « a »… Auriez vous une idée pour résoudre mon soucis ??? Merci et voyez vous également le bug ici présent sur le site ??

    Bien cordialement

  18. Lycia Diaz

    Hello tu n’es pas le seul. C’est un souci de Divi je pense depuis qu’ils ont optimisé le code pour améliorer la performance. Il faut que je cherche mais pour l’instant je n’ai pas trouvé de solution. As-tu contacté le support ?

  19. Lycia Diaz

    Ok j’ai trouvé une solution. Je publie un article la semaine prochaine ou celle d’après. Inscris-toi à la newsletter si tu veux en être informé.

  20. Meyer Michel

    Rebonjour, je viens de me déconnecter de mon wordpress et le bug ne s’affiche plus ici mais persiste sur mon site…
    Cela fait plusieurs moi que je tourner et retourne sur mon site, impossible à résoudre cette énigme….
    Merci de votre aide !
    Cordialement
    Michel

  21. Meyer Michel

    Ok super merci, je vais m’inscrire alors.

  22. Lycia Diaz

    C’est un souci de cache. Ça va être vite réglé. Soyez patient le temps que je tourne la vidéo et que je publie l’article. Tu utilises WPRocket je suppose ? Si oui, le souci vient de là.

  23. Lucie

    Merci Lycia pour tes astuces toujours bienvenues & pertinentes !!
    Pour pousser la réflexion, j’aimerai que le bouton n’apparaisse qu’au scroll (et non dés l’affichage de la page). Comment faire ? Un bout de code pour ça ?
    Lucie

  24. Lycia Diaz

    Coucou tu as des options de scroll proposées par Divi dans les options avancées. Il suffirait que tu les paramètres pour l’élément souhaité

  25. Elombe

    Grand merci pour votre tuto clair et précis, bravo

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

New Divi training!

55 videos to master the Divi Visual Builder like a pro: ⏱ 3h30 of theory + 👩🏻💻 6h00 of practical application + 🤝 30min. of individual coaching in visio.

(CPF eligible training)

Pin It on Pinterest

Shares
Share This