All Collections
Website Builder
How to add an anchor to slide to a specific section?
How to add an anchor to slide to a specific section?

Add anchor to elements and links to navigate and slide/jump to these elements.

Updated over a week ago

To create unique anchor ID and add navigation button to if, follow these steps:

  1. Select the Section: Navigate to the section of the webpage where you want to add the anchor. Hover on it and click "edit" icon.

  2. Add a Unique ID: Once you've selected the section, you should see an option to add or edit the ID for this section from the right panel. This ID is what you will use to create the anchor link. The ID should be unique and descriptive. For instance, if the section you're linking to is about your company's history, you might name the ID "company-history".

  3. Save Changes: After you've added the ID, make sure to save your changes.

  4. Create the Anchor Link: Now you're ready to create the anchor link. Navigate to the button or text you want to turn into a link. Click on it to select it.

  5. Add the Link: Once you've selected the button or text, you should see an option to add or edit the link. Select "#" link option and enter the ID you created earlier, preceded by a hashtag. For instance, if your ID was "company-history",

    Note: You can also add a link to other pages by combining # unique id with page url.

    This can be useful when you want to direct someone to a specific section of a page from a different page on your site, or even from a different site altogether.

    The format would look like this:

    https://www.yourwebsite.com/yourpage#your-anchor-id

    Here's how you would break it down:

    • https://www.yourwebsite.com/ - This is the root domain of your website.

    • /yourpage - This is the specific page on your website where the anchor link is located.

    • #your-anchor-id - This is the unique ID of the section that you want to link to. The hashtag (#) is crucial here as it tells the browser that what follows is an anchor link.

    For example, if your website is "www.example.com", the specific page is "about", and your unique ID is "company-history", the full URL with the anchor link would be:

    https://www.example.com/about#company-history

    When this URL is visited, the browser will load the "about" page of the "www.example.com" website and automatically scroll to the section with the ID "company-history".

  6. Save Changes: After you've added the link, make sure to save your changes again.

  7. Test the Link: Finally, preview your website to make sure the anchor link works as expected. When you click on the linked button or text, it should automatically scroll to the section with the ID you specified.

Did this answer your question?