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.
We may earn a commission when you visit links on our website.
Latest Posts
Hide Navigation Arrows in the Divi Gallery Slider Layout
Create a cleaner, distraction-free gallery by hiding the navigation arrows in Divi’s Gallery module when using the Slider layout. This is ideal when you want images to take center stage, reduce visual clutter, or rely on gesture or keyboard navigation instead of...
Customize Dot Navigation Colors, Size, and Border in the Divi Gallery Slider
Tailor the appearance of the dot navigation in the Divi Gallery module’s Slider layout by defining active and inactive colors, adjusting dot size, and applying a border to match your brand. Fine-tuning these details improves visibility, accessibility, and overall...
Customize Lightbox Title Styling in the Divi Gallery Module
Adjust the appearance of the lightbox title that appears when visitors open images from a Divi Gallery to align with your brand and improve readability. Refining the title’s color, size, and weight enhances visual hierarchy, accessibility, and overall polish. In this...
Center the Lightbox Image Count in the Divi Gallery Module
Centering the image count in a gallery lightbox creates a cleaner, more balanced presentation and makes it easier for visitors to see where they are in the image set. This simple visual tweak can enhance readability, especially with larger images and longer captions,...
Style the Divi Gallery Module Lightbox Image Count
Tailor the appearance of the image counter in the Divi Gallery module lightbox to match your brand and improve readability. By customizing the counter’s color and typography, you ensure it displays clearly and suits your design. In this guide we show you how to style...
0 Comments