Anchor links are a quick and easy way to direct users to a specific page section. In our documentation on Adding Smooth Scrolling Links and Buttons for Anchor Links, we explained how to locate the unique identifier (ID) assigned to native page elements within the Classic Builder.
This article will explain how to create custom element IDs with your anchor links in the Classic Builder.
Creating a Custom Element ID
- In the Classic Builder, navigate to the object toolbar (on the left-hand side of the editor).
- Drag the Custom HTML widget onto your page. A new dialog box will appear.
- In the new Embed Custom HTML Code dialogue box, paste the code below into the blank field:
- Replace the words
‘custom-ID-here’with your own custom ID.
- Click the Save Code button in the bottom right-hand corner of the dialogue box:
The <div> tag is an HTML element that won't be visible on your page.
- You should now see a placeholder on your page:
Drag the placeholder to the section of your page that you want your anchor link to point visitors towards.
Locate the element on your page you'd like to create an anchor link for, and select it to open the element's Properties panel on the right-hand side of the builder.
Locate the URL field under the section titled Click Action, and enter in the '#' symbol, followed by your custom element ID:
- Click Save and be sure to Publish/Republish your page.
To test your anchor link, navigate to the Preview mode, or visit your live landing page:
If you want to add a 'smooth scroll' effect to your anchor links, you can follow our step-by-step guide within our documentation: Add 'Smooth Scrolling' to Anchor Links.
Anchor link: A link on a page that brings you to a specific place on the same page.