1. Documentation
  2. Working in the Classic Unbounce Builder
  3. Working with Text & Fonts

Creating Custom Element IDs for Anchor Links in Classic Builder

Follow
Avatar
Meredith
Last Updated

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

  1. In the Classic Builder, navigate to the Widgets Panel (on the left-hand side of the editor).
  2. Drag the Custom HTML widget onto your page. A new dialog box will appear.
  3. In the new Embed Custom HTML Code dialogue box, paste the code below into the blank field:

    <div id=”custom-ID-here”></div>
  4. Replace the words custom-ID-here with your own custom ID.
  5. Click the Save Code button in the bottom right-hand corner of the dialogue box:
    A landing page with a pink and purple background. The code button within the Widgets panel is clicked, which opens a text box.

Note:

The <div> tag is an HTML element that won't be visible on your page.

  1. You should now see a placeholder on your page:
    Pink and purple landing page in the Unbounce Classic builder, with a grey box on the left-side of the page.
Tip: You can position your Custom HTML placeholder to sit behind your other page elements by using the Send Backward button from the top of the toolbar in the Classic Builder.

  1. 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.  

  1. 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:
    A red arrow pointing to the 'Click Action' section of the Classic Builder on the right-hand side.

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:
    A red arrow pointing to the 'Action' tab of the Classic Builder in the Properties panel.
  1. 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:

On a live landing page, the 'Pricing' button is clicked, and redirects the user to the bottom of the landing page where the Pricing information exists.

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. 

Glossary

Anchor link: A link on a page that brings you to a specific place on the same page.

Related articles