Using Page scroll to id with WPBakery Page Builder
In WordPress admin, go to Settings → Page scroll to id. Change the Selector(s) option value to:
and hit Save Changes.
By changing the element selector above, we instruct the plugin to handle all links that have a hash (
#) in their URL but exclude the page builder tabs and accordions.
WPBakery Page Builder allows us to enter an id value for each row/column/widget/element we want (via the Row ID and Element ID fields). 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 the post/page builder, edit the row/column/element you want (via the pencil icon) to add a target id
Enter the id value you want (e.g.
section-1) in the Row ID or Element ID fields (in the “General” tab)
Click Save changes to save and close it.
When ready, click Update (or Publish) to save your post.
Now, any link you create with URL
#section-1 (or any id value you entered in the Row ID or Element 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” shortcode etc. All kind of links will work as long as they point to an existing target id in your page(s).
In addition to all the method above, you can always use plugin’s shortcodes directly in builder’s text block.