Create a custom "back to top" button in just a few clicks!

Show a "Back Up" button (back-to-top button) on its site is a fairly common practice. He's not here to be beautiful but rather for improve user experience during his visit.

UX (User experience) is very important in the design of sites because this is because users feel good and come back.

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

And if I told you that in a few clicks you will be able to insert a button back to the custom top and positioned at the desired location? Simply with Divi, without adding any code or plugin!

That's what I suggest in this new tutorial...

1 – Create a button back up using the Summary module

To create your button back up, a Divi module is particularly ready, it is the Summary module (Blurb Module).

This allows easy insertion of an icon or image but also a URL (a link). It's just the elements we need to create the famous button!

1.1 – Edit Global Footer

I propose this solution because it's the easiest...

If you add your button within your Global Footer, Back button up will be present on all pages of your site. You will then save a lot of time.

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

If this is not your case, it is no big deal, you will be able to adapt this solution within your own Divi layouts. The only constraint will be that you will need to add manually to all pages of your site...

Another solution: customize your button with a few lines of code or plugins. I propose a list of resources at the end of the article.

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

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

1. Add a new section by clicking the "+" button. No matter where you insert, it won't have any visual impact.
2. Choose a normal (blue) section.
3. Insert a 1/1 line.
4. Add it Summary module (Blurb Module).

Don't delay! Discover the theme Divi here !

1.2 – Set the contents of the Summary module

Once the Module Summary you can set it up and customise it.

1. From the tab "Content"delete the title and body of the text.
2. Activate option "Use icons".
3. Choose your favorite icon.
4. In the tab Link, type: #return-to-top
5. Set the link target so that it opens in the same window.

2 - Customize the "Back Up" button

Now that the few adjustment formalities button back up have been done, you will be able to define the design of the button.

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

1. Set the icon color.
2. On the "Transform" tab, you can reduce or enlarge the size of the icon if needed.
3. Move the rules to change the size.

From the tab Style, you can also (in addition to setting the color and changing the size of the icon) add animation, shadow etc...

3 – Set fixed position

Here is the mandatory option for a Back button up successful: the fixed positiond.

It's funny because this option is all new in Divi, it has appeared since version 4.2 of Divi and it has gone unnoticed... What a pity, the option position Divi modules have so much to offer! Look at this.

To learn more about this feature that brings additional comfort, Read the official article on Divi Position.

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

Always in the settings of Module SummaryGo to the tab Advanced and go down to the option Post (= Position):

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

Here's your Back Up button is created and fixed. We will then make it functional.

4 - Add a CSS ID in the site header

When you created your button back up, I advised you to enter the link #return-to-top (in Chapter 1.2 of this article). It is a question of 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.

That's why I recommend editing, this time, the Global Header of your site.

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

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

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

1. Open the settings of your item to change (here is the navigation menu).
2. Go to tab Advanced and insert Return-to-top. Without the # this time.
3. Save the module and then the Header.

That's it!

Now your site is in possession of a button back up custom and functional.

5 - Variation of the "back up" button with an image

Another even more nice idea: why not use a personalized image instead of a Divi icon ?

5.1 – Create button design

Use your favorite vector software. On the capture below, it is Affinity Designer.

I quickly created an arrow. She's not great.

But if you have a soul of designer, you will know what to do to create a Back-to-top button at the TOP

Otherwise, you can browse the web searching free graphical elements.

5.2 - Insert image in footer

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

To do this, take step 1.2 of this article and turn off the icon to use an image instead.

5.3 - Check Result

There, you are in possession of a button back up completely custom!

Need more resources on Divi? Visit ElegantThemes blog full of ideas and tutos!

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

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

You will have no more design constraints and you can easily meet your needs or those of your customers.

To best customize your WordPress site, consult these divi tutos who can help you!

More resources related to customization of Back button up without using Theme Builder:

• 5 Ways to Style the Divi Back to Top Button
• Styling the Back to Top Button
• How to Create Custom Sticky
• Free Divi Extension: Alternate Back To Top Button Styles & Animations