Setting the Show / Hide Button Link URL

|

Divi Show / Hide Button includes an option to make the button link to a target URL, similar to a standard Divi button module. 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

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 hidden, by default the browser will scroll to the location of the element since it is visible at the moment the button is clicked.

This may to be undesirable as it will scroll the page to an element that promptly disappears. A workaround for this 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.

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *