Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V32 released on August 31st 2023 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-mm_faq-2
FAQs

Have questions?
Search for answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7 AM – 7 PM CT US – Get in touch here

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

Marketing  → Website → 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.