Follow us

Styling the back to top button tutorial for Divi | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

Here is the first of the Divi Soup Quick Snacks –  Styling the back to top button and including an image.

So let’s get cooking!

Ingredients

 

The Divi Theme from Elegant Themes
A suitable PNG image 30px by 30px

 

Cooking time

 

This should take you around 5 minutes max.

 

Preparation

 

The first thing we need to do is create a transparent PNG file containing the image we want to use in our back to top button. I am using part of the Divi Soup logo as you can see here.

backtotop

Once you have that ready, upload it to your media library within WordPress and make a note of the path.

 

Method

 

Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.

/*Back to top button styling*/

/*This section adds the image*/
.et_pb_scroll_top:before { 
    content: url(YOUR IMAGE URL HERE) !important;  
}

/*This section changes the shape to a circle and moves the button in from the edge of the screen*/
.et_pb_scroll_top.et-pb-icon {
    padding: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    right: 20px;
}

If you would like to retain the default icon and just style the shape then use this CSS instead.

/*Back to top button styling*/

.et_pb_scroll_top:before {
    content: "2";
}

/*This section changes the shape to a circle and moves the button in from the edge of the screen*/
.et_pb_scroll_top.et-pb-icon {
    padding: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    right: 20px;
}

 

And that’s it, now you should have a custom back to top button.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!