Create a custom "back up" button in just a few clicks!

Published on 30/01/2020 | 2 comments

Displaying a back-to-top button on your site is a common practice. It's not there to make the weather beautiful, but rather to improve a user's experience during their visit.

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

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

What if I told you that in just a few clicks you'll be able to insert a customised back up button positioned at the desired location? Simply with Divi, without adding any code or plugin!

That's what I'm proposing in this new tutorial...

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

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Create a backspace button using the Summary module

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

It allows you to easily insert an icon or an image but also a URL (a link). These are just the elements we need to create the famous button!

1.1 - Editing the global footer

I'm offering this solution because it's the easiest...

If you add your button within your Global Footer, the back up 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 have to) use the Divi's Builder Theme to get there...

If this is not your case, it doesn't matter, you will be able to adapt this solution to your own needs. Divi layouts. The only constraint will be that you will have to add it manually in all the pages of your site .

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

Editer le Footer Global
Edit 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 up" button
  1. Add a new section by clicking on the "+" button. No matter where you insert it, it won't make any visual impact.
  2. Choose a normal (blue) section.
  3. Insert a 1/1 line.
  4. Add the "Summary" module (Blurb Module).

Don't delay any longer! Discover the Divi theme here !

1.2 - Defining the content of the Summary module

Once you have inserted the Summary module, you can proceed with its parameterization and customization.

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

2 - Customize the "back up" button

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

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

Styliser le bouton retour vers le haut
Stylize the back up button
  1. Set the color of the icon.
  2. In the "Transform" tab, you can reduce or enlarge the size of the icon if necessary.
  3. Move the rulers to change the size.

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

3 - Define the "fixed" position

Here is the mandatory option for a successful backspace button: the fixed position.

It's funny because this option is brand new in Divi, it appeared since Divi 4.2 and it went unnoticed... What a pity, the option position of Divi's modules has so much to offer! Take a look at this:

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 settings of the Summary module, go to the Advanced tab and scroll down to the "Position" option :

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

That's it, 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 back up button, I advised you to enter the link #return-to-top (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 to edit, this time, the Global Header of your site.

Editer le header global
Edit Global Header

Return to the Divi > Theme Builder and create or edit the global header of your site.

Ajouter un ID CSS de retour vers le haut
Add a CSS ID back up

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 made the choice 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 the item you want to change (this is 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 personalized and functional back up button.

5 - Variant of the " back up " 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 favorite vector software. In the capture below, this is Affinity Designer.

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

I quickly created an arrow. She's not great, I'll give you that...

But if you're a designer at heart, you'll know what to do to create a back-to-top button at the TOP 😉

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

5.2 - Inserting the image in the footer

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

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

To do this, repeat step 1.2 of this article and disable the icon to use an image instead.

5.3 - Checking the result

There you have it, you have a completely custom back up button!

Bouton retour avec image
Back up button with custom image

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

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

With Divi, it's child's play to create fully customized sites!

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

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

More resources about customizing the back up button without using the Theme Builder :

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

You should like it too:

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi: how to manage different screen sizes?

Many users are asking the question: how can Divi's Responsive Design be optimized? Many options are available natively in Divi to enhance the design on your various screens. But sometimes you will also have to modify the Media Queries. Find out how in this complete guide!

Parallaxe sur mobile avec Divi : comment le rendre compatible ?

Parallax on mobile with Divi: how to make it compatible?

It's such a shame that parallax sections don't work on a Divi site in a mobile version! Parallax" or "background fixed" designs are so much fun... I have THE solution and it is so simple that even beginners can implement it on their site in only 2 clicks!

2 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 😉

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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

Pin It on Pinterest

Shares
Share This