Follow us

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

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

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!

This website is no longer being updated.

I'd love for you to check out my new site.

All new tutorials, freebies & Divi products.

Take me there

You have Successfully Subscribed!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!