Set a module as a page anchor

SOLVE
Simon_MyLeads
Participant | Partner

I'm using the Atomic template by GiantFocal to create our HubSpot website and would like to make use of anchors on every page to aid navigation, directing prospects to information that's of most use to them.

 

I'm well aware of how anchors work and within other website builders the process is pretty straightforward. I don't want to create an anchor within a module, but what I'd like is for the top of the module to act as the anchor. My ability to code is a little rusty, so any assistance would be appreciated.

 

(I've already cloned the original template so it can be edited as some modifications have already been made).

1 Accepted solution

Accepted Solutions
Alex_
Solution
Top Contributor

@Simon_MyLeads 

 

This should be something you can do quickly:

 

  • Right-click on a section of the page you want to link to and click Inspect
  • Locate the ID for that section
    • As an example, I pulled this third section from the template you stated using:

Screenshot 2020-10-14 130707.png

 

  • Example: the ID for this section is hs_cos_wrapper_dnd_area-module-2 (you'll need to copy this)
  • Link whatever you're wanting to as you would normally do but, instead of copy and pasting the link, paste the ID with a # in front of the ID so it should look something like this:

 

<a href="#hs_cos_wrapper_dnd_area-module-2" rel="noopener" target="_blank>Text</a>

 

OR (if it's being linked from another page)

 

<a href="https://demo.giantfocal.com/atomic/lite/page/home#hs_cos_wrapper_dnd_area-module-2" rel="noopener" target="_blank>Text</a>

 

  • In the last example, you'll need to add in the entire link just as it is directly above

After doing that, make sure to save whatever changes you've made and you should be good to go. You can click here to see how the anchor should work.

View solution in original post

3 Replies 3
natsumimori
Community Manager

Hi @Simon_MyLeads ,

 

Thank you for sharing your query in the Community.

I wanted to tag in some subject matter experts here: @SandyG1 and @stefen , would you be able to share your advice for @Simon_MyLeads ?

0 Upvotes
stefen
Key Advisor | Partner

@Simon_MyLeads good news and bad news... first the good: each module has a unique ID added to them when you add it to your page. To find it, right click and inspect the module and look for an id that looks like "hs_cos_wrapper_widget_123123123" where 123123 is the unique number given to it.

 

So the bad news: obviously it's not a great looking anchor link since it doesn't provide any context. If you want a pretty anchor link you'll want to make it inside your module yourself. Hope that helps!

Stefen Phelps, Community Champion, Kelp Web Developer
Alex_
Solution
Top Contributor

@Simon_MyLeads 

 

This should be something you can do quickly:

 

  • Right-click on a section of the page you want to link to and click Inspect
  • Locate the ID for that section
    • As an example, I pulled this third section from the template you stated using:

Screenshot 2020-10-14 130707.png

 

  • Example: the ID for this section is hs_cos_wrapper_dnd_area-module-2 (you'll need to copy this)
  • Link whatever you're wanting to as you would normally do but, instead of copy and pasting the link, paste the ID with a # in front of the ID so it should look something like this:

 

<a href="#hs_cos_wrapper_dnd_area-module-2" rel="noopener" target="_blank>Text</a>

 

OR (if it's being linked from another page)

 

<a href="https://demo.giantfocal.com/atomic/lite/page/home#hs_cos_wrapper_dnd_area-module-2" rel="noopener" target="_blank>Text</a>

 

  • In the last example, you'll need to add in the entire link just as it is directly above

After doing that, make sure to save whatever changes you've made and you should be good to go. You can click here to see how the anchor should work.

View solution in original post