Using Page scroll to id with the Divi Builder plugin
In WordPress admin, go to Settings → Page scroll to id. Change the Selector(s) option value to:
Scroll down to “Advanced options” section and enable (check) “Prevent other scripts from handling plugin’s links” option.
and hit Save Changes.
By adding the element selector above, we instructed the plugin to handle all links that have a hash (
#) in their URL.
Divi Builder plugin allows us to enter an id value for each section/module we want (via the CSS ID field). This is very handy as a)we don’t need to create our id targets manually and b)makes links highlighting easier and more precise.
In your post/page editor, click the settings icon for the module you want to add a target id
Switch to Advanced tab
Scroll down to find the CSS ID field and enter the id value you want (e.g.
Click Save & Exit.
When ready, click Update (or Publish) to save your post.
Now, any link you create with URL
#my-id (or any id value you entered in the CSS ID field previously) will scroll smoothly to that target. You can create standard/plain links in the post editor, custom links in your menu, links via “Page scroll to id” toolbar icons or shortcode etc. All kind of links will work as long as they point to an existing target id in your page(s).
Notes & extras
If you use the DIVI theme and you want to disable the theme’s smooth scrolling feature on your menu links, you can add the class
et_smooth_scroll_disabled in your menu links items (“CSS Classes” optional field).
Disclosure:: Please note that this post may contain affiliate links. If you click these links and purchase an item, I may receive a commission (with zero additional cost to you). This website needs compensation to operate (like any other website on the internet), so affiliate links help a lot!