You probably seen these links in our navbar.
When your page is really long, anchor links give people a good overview of the content of a page. And help them to quickly go to that part of the page that interests them most.
What are anchor links?
Anchor links, also called jump links or in-page links, are links that lead to another part of the page. They look like this: #prices. If someone clicks on an anchor link, he doesn't go to a new page but to another part of the same page.
If you are building a one-page website, they are typically fairly long, so having anchor links makes sense.
A common mistake
If you aren’t really sure what an Anchor Link is let me tell you. An anchor link takes you to a specific spot on a page. The content is the “anchor”. The thing that many beginners to website development don’t understand is that they don't work on other pages. People ask me the same question over and over again:
- When I go to another page, let's say to blog, all navigation menus are not working. How to fix this?
Well, the fix is simple. Instead of #nameOfYourAnchor you need to specify the full URL, including page, where this anchor is located:
OR, shorter version:
It's called a relative URL. The second version is more preferable, because it doesn't explicitly specify the protocol (e.g., "
http://" or "
https://") and/or domain (
YourSiteHere.com ). If the the anchor is located on your homepage, you can simply omit the Page-Name:
How to add an anchor link?
- View your page and click Edit Page. You will be brought into the page editor.
- Click the pencil icon at the top-right of the row containing your first section to open the Row Options.
- On the main tab of the current WP Bakery Page Builder you should find the Anchor ID field.
- Enter a unique word into this field to serve as the Anchor ID. This must be lower-case with no spaces and not use common words such as menu, top, gallery, form, etc that are already used by elements of the page. Click Save Changes.
Go to Appearance > Menu, over on the left you should see a Custom Links panel. Open the Links panel and in the URL input box remove anything that is already in there and then add this…
So that’s our link was created. Don’t forget to click Save Menu after you do that. I hope you like my tutorial.