Divi Show / Hide Button includes an option to make the button link to a target URL, similar to a standard button module in the Divi builder. However, there are a few differences in behavior compared to the standard button module. The option and it's behavior are described in this post.
Setting the Button Link URL
You'll find the option to set the Button Link URL in the module settings at:
Show / Hide Button Settings > Content > Link > Button Link URL
The option is available in Divi Show / Hide Button v1.2.1 onwards.
Linking to a Visible (or soon-to-be-visible) On-Page Element
If you set the Button Link URL to a CSS Id / URL hash such as '#element1' then, when clicking on the Show / Hide button would cause the element with ID 'element1' to be revealed, the browser will scroll to that element.
Linking to a (soon-to-be-hidden) On-Page Element
This is fixed in v1.2.7. A workaround for this in earlier versions is to set the Show / Hide Button's Transition Duration option to '0ms'. This will hide the target element immediately, and prevent the browser from scrolling to the element's former position.
Leaving the Button Link URL Field Empty
If the Button Link URL is left empty then no new page is loaded and no scrolling occurs. This differs from the standard Divi button module, which reloads the page when its URL is empty.
About Dan Mossop
We may earn a commission when you visit links on our website.
Latest Posts
Hide the Page Title in the Hello Elementor Theme
Hiding the page title in the Hello Elementor theme allows you to create a cleaner and more customized page layout, free from default headings that may not fit your design. This is particularly useful for landing pages or custom content layouts where the default page...
How to Hide a Divi Module When Scrolling Up or Down
In this quick tutorial, I’ll show you how to hide a Divi module when scrolling in a specific direction (up or down), so that the module only shows when you want it to. This is especially useful when using Divi’s Scroll Effects feature and you have a effect you want to...
Fade a Divi Image Module Edge into the Background
Want to create a stylish fade effect on your Divi image module—where one side fades smoothly into the background? With a bit of CSS, you can make any edge (or corner) of the image fade out: top, bottom, left, right, or even diagonally.Fade a Divi Image Module Edge...
Hide the Header and Footer in the Hello Elementor Theme
Removing the default header and footer from your Hello Elementor theme allows for a streamlined and distraction-free website design. This is especially useful when creating unique landing pages, full-width layouts, or custom headers and footers with a page builder. In...
Setting up the Divi Password Box Module
Setting up password protection on a page can help you control access to sensitive or private content in WordPress, allowing only authorized visitors to view certain sections. With the Divi Password Box module, you can replace the plain Divi password form with a fully...
0 Comments