Blog, Website & Page Publishing

Simon_MyLeads
参加者 | Solutions Partner
参加者 | Solutions Partner

Set a module as a page anchor

解決

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件の承認済みベストアンサー
Alex_
解決策
トップ投稿者

Set a module as a page anchor

解決

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

元の投稿で解決策を見る

3件の返信
Alex_
解決策
トップ投稿者

Set a module as a page anchor

解決

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

stefen
キーアドバイザー | Solutions Partner
キーアドバイザー | Solutions Partner

Set a module as a page anchor

解決

@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
natsumimori
コミュニティーマネージャー
コミュニティーマネージャー

Set a module as a page anchor

解決

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 いいね!