Add anchors to jump to a specific location on a page. In the editor, it is possible to create anchors on rows, making them accessible from the main navigation or giving you the possibility to link specific elements to your anchors. Find the anchor settings by hovering your mouse on a specific row until you find the gold Row Menu on the upper right corner.
1. Enable Anchor
If you want to transform a row into an anchor, simply toggle on in the right side of the option.
2. Position Anchor on same level as page
When enabling anchor on a row, it is possible to decide whether you want it to be on the same level as a page or if you want it to behave like a subpage. To position the anchor on the same level as a page, simply toggle on in the right side. Follow the example below to understand the difference between the two options.
Please note that when added as a subpage, the anchors will only be visible in the Menu when the visitor is on the page where the anchors are. For example, on a site with the pages Home, About, Services and Contact, it was added anchor navigation under the Services page - Anchor 1 and Anchor 2. When under the Home, About and Contact page, the visitor won't be able to see any anchors - they will only be visible, where the visitor is under the Services page.Learn how to make your anchors visible, no matter the page where the visitor is, here!
3. Hide Anchor From Navigation
By default, when enabling an anchor on a row, the editor will automatically add it to the navigation. However, it is also possible to enable an anchor and hide it from navigation. To do so, simply toggle on in the right side. You can now link specific elements to the anchor, placing users in an exact location.
3.1. Link to anchor in the same page
If both the anchor and the element you are linking are in the same page, all you must do is add #anchorlabel in the external link field. For example, if you have named your anchor "Testimonials" and you wish to link a button to that anchor, simply type down #testimonials in the external link field under the Button Module Settings. Watch the example below for a visual representation of this example.
3.2. Link to anchor in different page
If the anchor and the element you are linking are in different pages, you must add the complete URL of the page where the anchor is followed by #anchorlabel. For example, if you have placed an anchor called "Testimonials" under your About page and you wish to link a button to that anchor, simply type down the URL of the About Page followed by #testimonials, i,e. http://yoururl.com/about#testimonials. Watch the example below for a visual representation of this example.
4. Anchor Label
In the Anchor Label field you can decide the Anchor name. Simply type it in and finish by clicking Save. Keep in mind that since the anchor will be added in the URL, you should simplify your anchor label to contain only letters, numbers, dashes (-) or underscores (_).
5. Good to Know
When using anchor navigation, the navigation action is added to the browser history API, making it possible to use the Back/Forward buttons between anchors and also to copy a direct link for the section. Please note that this feature has limited support for legacy browsers.