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
Set Custom CSS IDs for Individual Divi Accordion Items
Assigning unique CSS IDs to specific Divi Accordion items allows for precise control over styling, targeting, and linking within your page content. This ability is particularly useful when you want to apply custom designs or create anchor links to particular accordion...
Enable Swipe Navigation in the Divi Gallery Lightbox
Enabling swipe navigation in the Divi Gallery module's lightbox allows users to seamlessly browse through gallery images by swiping left or right, creating a more interactive and mobile-friendly experience. This functionality can significantly improve user engagement...
Disable Slide-In Animation for Divi Gallery Grid Images
Control how images appear in your Divi Gallery module by toggling the slide-in animation effect for grid layouts. Disabling the slide-in animation allows gallery images to load instantly and appear statically, providing a faster and distraction-free browsing...
Control Image Count Display in Divi Gallery Lightbox
Displaying or hiding the image count in the Divi Gallery module’s lightbox can help customize the user experience, depending on whether you want to give visitors an indication of gallery progress or prefer a cleaner, distraction-free view. The ability to toggle this...
Hide Gallery Image Titles in the Divi Lightbox Overlay
Displaying image titles in the lightbox overlay of the Divi Gallery module can sometimes be distracting or unnecessary, depending on your website’s design and user experience goals. Hiding these titles creates a cleaner and more focused viewing experience for visitors...
0 Comments