Search

How to Disable Back to Top Button on a Specific Page in Divi

Divi Builder, a flagship WordPress plugin developed by Elegant Themes, is known for its versatile page builder full of customization options. One of the features is a Back to Top button. This feature is a simple but helpful design element that has grown popular across several platforms, allowing users to quickly navigate to the top of a page with just one click. To activate this feature, go to the Divi Theme Options, and you will find the option to enable it.

However, once you activate the Back to Top button, this feature will display whole pages on your website, and by default, Divi doesn’t allow us to disable the Back to Top button on a specific page. Some pages might benefit from the absence of the Back to Top button.

This article will show you how to disable the Back to Top button on a specific page in Divi Builder.

How to Disable Back to Top Button on a Specific Page in Divi

Disabling the Back to Top button on a specific page in Divi is very easy; you only need to add the simple custom CSS to your page settings.

Go to your Divi Builder editor by creating new content (page/post) or selecting the existing one. By default, the Back to Top button will appear on your page when you scroll down.

Next, navigate to Page Settings (⚙️) -> Advanced tab. Afterward, copy the simple CSS snippet below and paste it into the Custom CSS input field.

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

The Code Explanation:

  • .et_pb_scroll_top.et-pb-icon: This CSS selector targets elements with both the classes et_pb_scroll_top and et-pb-icon. Divi uses these classes to style and position the Back to Top button.
  • display: none !important;: This CSS property and value is applied to the Back to Top button element. display: none; is a common CSS property that hides the Back to Top button from the page. The !important rule prioritizes this style over other styles that might be defined elsewhere in the CSS. By setting the display property to none, the Back to Top button will not be visible or accessible on the selected page, effectively disabling it.

That’s it. As you can see from the GIF above, once you add the custom CSS to the Page Settings, a Back to Top button is disabled on your selected page. Don’t forget to save your project or publish it if you want to.

The Bottom Line

This article shows how easily you can disable the Back to Top button on a specific button in Divi. Remember, the absence of the Back to Top button is only necessary for short pages (less than four screens) to keep the best user experience and easy navigation for your users.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.

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

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.