How to Add Anchors to Your Web Page on a Refari built website

Created by Aaron Refari, Modified on Tue, 18 Mar at 6:47 PM by Ritesh WebDev

Anchors are useful navigation tools that allow you to direct visitors to specific sections of your web page. This guide will show you how to implement anchors using Elementor.




What is an Anchor?


An anchor is a URL query string that, when added to your page URL, automatically scrolls visitors to a specific position on your webpage. It's particularly useful for:

    - Email campaigns

    - Email signatures

    - Directing users to specific content on long pages

    - Improving navigation on content-heavy pages



Step-by-Step Guide


1. Accessing the Anchor Tool

a) Sign in to your website

b) Open the Elementor editor

c) Search for "menu anchor" in the elements panel


2. Adding the Anchor

a) Locate the section where you want visitors to land

b) Add the menu anchor element to your desired position

c) Assign a unique ID to your anchor (e.g., "vidtop")

   - Avoid using spaces or special characters in your ID


3. Positioning Your Anchor

a) Place the anchor above or below the target content, depending on your needs

b) You may need to experiment with placement to achieve the desired scrolling position


4. Testing Your Anchor

a) Publish your changes

b) View the page

c) Add your anchor to the URL by appending a hash (#) followed by your anchor ID

       - Example: `www.yourwebsite.com/page#vidtop`

d) Test the link in:

       - A new tab

       - Incognito mode

       - Different browsers


5. Troubleshooting

If your anchor isn't working as expected:

    - Clear your browser cache

    - Perform a hard reload of the page

    - Verify the anchor ID matches exactly in both the element and URL

    - Try repositioning the anchor element



Best Practices

    - Use descriptive, memorable anchor IDs

    - Test anchors thoroughly before sharing links

    - Consider the user experience when choosing anchor positions

    - Ensure content is fully loaded before testing anchor functionality


For further assistance with anchors or other website features, please contact our support team.


Other articles that could be useful to your wordpress editing are: Changes you make not appearing on the live site or Troubleshooting Login Issues in WordPress with Wordfence

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article