Skip to content

Create an ANCHOR LINK

How to set up and use an anchor link for your website pages in HubSpot

maka-icon-anchor

ANCHOR LINKS

An Anchor Tag, or Anchor Link, is an element that you can add to your website page to allow your site visitors to jump to a specific spot on the page without scrolling.

anchor-link-setup-example

FAQ

Why doesn't my anchor link work?

Anchor links have two parts: the target, where you set the location on the page to scroll to; and the link, where the user clicks to go to the target

Setup Instructions

In HubSpot Anchor Links are set up in two steps. First, the anchor link has to be defined (where it goes); then the anchor link has to be linked (where the link is).

Add Anchor Links to Your HubSpot Website Pages

Content → Website Pages

All POWER Sec Modules have an Anchor Link ID that you can define in the settings.

doc-module-anchor-link

The ID must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")

You can separate multiple words in an anchor with hyphens, it is best to keep it short and clear.

Because the ID will be used in your URL it is recommended to be lowercase.

Once you have defined the Anchor Link ID, you can use this ID to create a URL that can be used in many ways.

Anchor Link ID =→ test

Link to External =→ #test

EXAMPLE: If your anchor link is defined as features you can set up links to this location on the page in one of two ways:

1. On the same page, you can use the relative URL by adding #features as an "External" link.

2. On other pages of your website (or externally) you can use the full page URL with the anchor link at the end:

https://www.maka-agency.com/create-an-anchor-link#features

Insert Anchor Link in the Rich Text Editor

To add an anchor link in the rich text editor and set the target, click Insert, then choose Anchor.

rich-text-insert-anchor-hubspot

Then you add a name for your anchor link (without the hashtag).

insert-anchor-name

Once you create an anchor link using this method, it will be visible as an option when you create a Link using the Anchor on this page option shown below in the section about creating an anchor link in the rich text editor.

insert-link-anchor-on-this-page

Creating a Sub-Menu or On-Page Menu with Anchor Links

The POWER Sticky Sub-Menu is a preconfigured layout that allows you to quickly and easily add a sub-menu to your content pages, making it easy to set up anchor links for your pages.

Create Anchor Link in Rich Text Editor

For sections or modules with content using rich text editors, you can also set up anchor links within the text.

This is especially helpful for long-form content and blogs.

HubSpot allows you to select the defined anchor links via Anchor on this page in the Insert Link menu.

doc-anchor-link-rich-text-choices

The list of anchor links will only show the ones you configured within the rich text fields of that page.

This list does not analyze and show all available anchor links, including those set up within the module settings using Anchor Link ID.

You can insert this as Link to "URL" and simply add a # before the id you chose.

doc-anchor-link-URL-module

Using Anchor Links with a Sticky Header

There are some instances when using an anchor link, such as within blog posts, where the sticky header is overlapping the target for the anchor link.

Within the anchor link, if you add class="pwr-anchor vanilla" via the source code, the anchor will account for the height of the header and work as expected.

EXAMPLE: Once you've created your anchor link, edit the source code to include the class:

Note: If your theme version is prior to v26, you will leave off the "vanilla" and only use "pwr-anchor" for the class.

  HubSpot Knowledge Base insert and manage anchor links

Next Steps

Similar to Anchor Links, Filtering allows you to enhance the User Experience for site visitors on your page by creating categories that the site visitor can use to sort content, such as videos, images, resources, and more.

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.