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

Using Page scroll to id with WPBakery Page Builder

A quick guide for using “Page scroll to id” WordPress plugin with WPBakery Page Builder on your WordPress site.

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

a[href*=#]:not([href=#]):not([data-vc-tabs]):not([data-vc-accordion])

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.

 


3 Comments

Post a comment
  1. Maria
    Posted on December 5, 2018 at 01:22 Permalink

    I have set an scroll-to-id here: http://joy-academy.eu/programs/#formies-program

    Everytime I load it, it leads to me to another place. Also it doesn’t bring me to the place that I have selected.

    Reply
  2. max
    Posted on November 28, 2018 at 16:48 Permalink

    Dear Developer,

    I am trying to integrate hte page scroll to id tool into my wordpress site using the theme ”Partner”. As I use the WP Bakery builder for this theme I fllowed your explenation carefully. But, for some reason the Scroll is not smooth when I use the links in my Navigation Bar. For normal links everything works out perfetly. Any support or hints are highly appreciated. Thank you very much in advance.

    Best regards

    Reply

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>

css.php