This website uses cookies to personalise ads and to analyse traffic ok
web design

Using Page scroll to id with the Divi Builder plugin

A quick guide for using “Page scroll to id” WordPress plugin with the Elegant themes Divi Builder plugin on your WordPress site.

In WordPress admin, go to SettingsPage scroll to id. Change the Selector(s) option value to:


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. my-id)

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).

Divi WordPress Theme

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!


Post a comment
  1. Allen
    Posted on February 3, 2019 at 14:02 Permalink

    Hey so I am currently having issues with the plugin, sometimes it will work for a while and sometimes is stops working right when i insert the anchor id url. once i save and exit the visual builder and view the page, those sections go blank or black, the block elements are there, however it’s blacked out and not viewable.

    Have you had this issue before?

    • malihu
      Posted on February 3, 2019 at 20:17 Permalink

      Haven’t had this issue before. Can you give me an example?

      When you say “when i insert the anchor id url”, what do you mean? Insert the id value in CSS ID field? If yes, what value do you insert?

  2. so jeong
    Posted on November 6, 2018 at 12:06 Permalink

    Divi theme

    Prevention scripts from handballing plugin’s links (if passible)

    Not Applicable


Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>