Enhancing user experience on your website often involves guiding visitors directly to the content they need. Loading a page with a specific tab open can streamline navigation and ensure users find relevant information quickly.
Setting a default open tab can improve engagement and satisfaction if you want to highlight important details, promotions, or specific content sections.
This article will walk you through the steps to configure a page to load with a certain tab open, making your site more intuitive and user-friendly.
Open the page containing the Tabs module and enable the Visual Builder.
Open the Tabs module settings by clicking on the module itself or by clicking on the Gear icon.
Go to the Advanced Tab → Attribute, and add an ID attribute with the value dt-tabs:
Click the + Add Attributes option.
Choose id.
Set dt-tabs for the Attribute Value.
Go to WordPress Dashboard → Appearance → Menus.
Add a new Custom Link menu item and set the following:
Label: any text you want to use.
Note: The number of tabs is zero-based. That means:
https://your-domain-name.com/page-slug/#dt-tabs|1- will open the second tabhttps://your-domain-name.com/page-slug/#dt-tabs|2- will open the third tabetc
Load the page, scroll to the Tabs module, and open the selected Tab
If the Tabs module is somewhere down the page, you can also use the following steps to let the browser scroll down to the Tabs module's location on the page while the selected tab is opened.
Go to WordPress Dashboard → Divi → Theme Options → Integrations Tab.
Paste this JS code
<script>
(function ($) {
$(document).ready(function () {
var hash = document.location.hash;
if (hash) {
var hashLenght = hash.match(/#(.*?)(.*?)(?=\|)/);
if (hashLenght && hashLenght[0]) {
var loggedIn = ($('#wpadminbar').length) ? $('#wpadminbar').outerHeight() : 0;
var diviHeader = ($('#main-header').length) ? $('#main-header').outerHeight() : 0;
var tbHeader = ($('.et-l.et-l--header .et_pb_sticky_module').length) ? $('.et-l.et-l--header .et_pb_sticky_module').outerHeight() : 0;
var headerHeight = loggedIn + diviHeader + tbHeader;
$('html, body').animate({
scrollTop: ($(hashLenght[0]).offset().top - headerHeight)
}, 500);
}
}
});
})(jQuery);
</script>
The result can be seen in the GIF below:
