How to Disable Back to Top Button on the Homepage in Divi

Last updated on
Jan 29, 2024

Back to top button is one of the features available in Divi. With the feature, you can allow your site visitors to jump to the top section of the page they are currently on. The back to top button itself is a useful feature if you often write long articles on your website.

Unfortunately, Divi offers no options to set where the back to top button to show up. If you enable the feature, the back to top button will show up on every single page and post on your website. If you want to disable the button on a certain page, say homepage, this post will show you how.

Disabling Back to Top Button on the Homepage in Divi

First thing first, make sure the back to top button is enabled. You can enable it from Divi Theme Options. Go to Divi -> Theme Options on your WordPress dashboard. On the General tab, scroll down to the Back to Top Button option and enable it.

Enabling Back to Top Button in Divi.

Once the back to top button is enabled, you should see a back to top button on every page and post on your WordPress.

Next, edit the homepage (or any page you want to disable the back to button on) with Divi. On the Divi Builder editor, click the gear icon on the bottom bar to show the page settings panel.

On the appearing panel, go to the Advanced tab and open the Custom CSS block. Paste the following CSS snippet to the available CSS editor. Don’t forget to click the green checklist icon to apply the code.

The CSS snippet:

.et_pb_scroll_top.et-pb-icon {
    display: none !important;
}

Click the Save button on the bottom-right corner to apply changes you made. From now on, you should see on back to top button on the homepage.

Summary

Divi is the most popular premium WordPress theme. It comes with a bunch of handy features, including a back to button. When you enable the feature, the back to top button will be visible to all pages and posts on your website as Divi offers no option to disable it on specific pages or posts.

Fortunately, Divi Builder — the built-in page builder of Divi — allows you to add custom CSS to a page so that you can hide the back to button using the CSS snippet we provided above. Divi itself can run on most WordPress hosting services, including WP Engine and other WP Engine alternatives like Kinsta, Rocket.net, to Pressable.

This page may contain affiliate links, which help support the project. Read our affiliate disclosure.

Aliko Sunawang

Aliko is a professional blogger and web creator. He has been blogging with WordPress since 2012. In his spare time, he loves going out to take some photos. More

Want to turn your WordPress knowledge into a passive income machine?