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...
- 1 - Create a back to top button using the Summary module
- 2 - Customise the "back to top" button
- 3 - Set the "fixed" position
- 4 - Adding a CSS ID to the site header
- 5 - Variation of the "back to top" button with an image
- 6 - In conclusion: a "back up" button in less than 2 minutes!
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
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.
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...
- Add a new section by clicking on the "+" button. No matter where you insert it, it will have no visual impact.
- Choose a normal (blue) section.
- Insert a 1/1 line.
- 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.
- From the "Content" tab , delete the title and body text.
- Activate the "Use icons" option.
- Choose your favourite icon.
- In the Link tab, enter : #return-to-top
- 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.
- Set the colour of the icon.
- On the 'Transform' tab, you can reduce or enlarge the size of the icon if required.
- 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.
Still in the Summary module settings, go to the Advanced tab and scroll down to the "Position " option:
- In the drop-down menu, choose the "Fixed"option
- Determine the position of the back-up button. As a rule, it is placed in the lower right-hand corner.
- Play with the margins if necessary.
- Add a Z-Index of 9999.
- 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.
Go back to the Divi > Theme Builder tab and create or edit the global header for your site.
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.
- Open the settings of your item to be modified (in this case, the navigation menu).
- Go to the Advanced tab and insert "return-to-top". Without the "#" this time.
- Save the module and then the Header.
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.
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.
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!
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:
- 5 Ways to Style the Divi Back to Top Button
- Styling the Back to Top Button
- How to Create Custom Sticky "Back to Top" Designs with Divi
- Free Divi Extension: Alternate Back To Top Button Styles & Animations