fbpx

NOTICE  ** Please note our last working day is Monday 16th December 2024 and we’ll re-open again on Monday 6th January 2025 **

How to enable and style Divi back to top button
Home » CSS & Code Snippets » How to enable and style Divi back to top button

This is a very quick tutorial to help you enable and style the back to top button when using Divi.

When you have a page that has lots of content you may want to consider activating the back to top button to help with your user experience.

You can enable the back to top button using the following options:

Divi > Theme Options > Back To Top Button 

Once you have enabled the Back To Top Button you can move onto the next stage below and add in the CSS.

Adding the CSS

Place the below CSS snippet into your child themes Style Sheet or if you are not using a child theme then you can go to Divi > Theme Options > CSS

Place the following snippet.

.et_pb_scroll_top.et-pb-icon {
text-align: center;
background: #ea5428;  /*change background colour*/
color: #151515;  /* change icon colour */
border-radius: 6px;  /*change this to 100px if you want a circle back to top button*/
}
.et_pb_scroll_top.et-pb-icon:hover {
text-align: center;
background: #151515;  /*change background colour on hover */
color: #ffffff;  /*change icon colour on hover */
}

Everything you need to
build the best divi websites

Our premium layout packs and child themes will help save hours of designing websites from scratch. All you need to do is change the colours, images and text to suit your business.

View Themes

0 Comments

Submit a Comment

0
    0
    Your Cart
    Your cart is emptyReturn to Shop