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
Add a Branded QR Code in Divi
To create a branded QR Code in Divi, you can use the Divi QR Code module and its "Center Image" feature. This lets you add an image / logo in the center of the QR code, perfect for promoting your brand or adding a unique twist to your QR Codes. The image is displayed...
Add Text Before the Number in the Divi Circle Counter
Adding a custom number prefix to your Circle Counter lets you clarify what the value represents—such as currency, units, or labels—without relying on the default percentage format. This helps your counters better match real-world metrics and keeps the design...
Add a Second Line of Text in a Divi Button Module
Adding a second line of text beneath a button’s main label lets you provide extra context, a brief benefit statement, or a supporting call-to-action without cluttering your design. This can improve clarity and increase clicks by making the button’s purpose more...
Top (or Bottom) Align Divi Icon List Module Icons
When Icon List items wrap onto multiple lines, the default icon alignment can make the icon appear vertically centered next to the text, which may look unbalanced or harder to scan. Setting the icons to align at the top creates a cleaner, more consistent...
Make Divi Button Modules Full Width with Centered Content
This configuration makes a Divi button stretch to the full width of its container while keeping its label neatly centered, creating a bold, edge-to-edge call-to-action. You might want this for hero sections, pricing tables, or any layout where a standard-sized button...
About Dan Mossop
News
- Divi QR Code module does branded QR codes
- Divi Copy & Paste now supports Divi 5
- Divi Code Snippet module now supports Divi 5
- Divi QR Code module now supports Divi 5
- Divi Booster now supports Divi 5
0 Comments