Enhancing user experience on your website often involves guiding visitors directly to the content they need. Loading a page with a specific tab opened 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 opened, 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 Gear icon
Go to Advanced Tab → CSS ID & Classes → CSS ID and type in dt-tabs
In your WordPress Menu or anywhere else on your website, add the link (this can also be used as the Button module's Link) as https://your-domain-name.com/page-slug/#dt-tabs|1
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 pages, you can also use the following steps to let the browser scroll down to the Tabs module's location in the pages while the selected tab is opened
Go to WordPress Dashboard → Divi → Theme Options → Integrations Tab
Paste in 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:
