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 classeset_pb_scroll_top
andet-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 thedisplay
property tonone
, 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.