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 Widgets Panel (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.
Next, you will need to create the anchor link. This is the element on your page that visitors will click, then be directed to the custom ID you created in the earlier steps.
Locate the element on your page you'd like to create an anchor link for. For example, a button or text element.
To add an anchor link to a button element,
- Single-click the button; the Properties panel will appear on the right-hand side of the Classic Builder.
- Scroll down the Click Action section; in the URL field, enter the '#' symbol, followed by your custom element ID:
To add an anchor link to a text element,
- Double-click the text; the Properties panel will appear on the right-hand side of the Classic Builder.
- Select the Action tab; in the URL field, 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.