topic Re: Add anchor links to page in CMS Development

Add anchor links to page

EWright44 — Tue, 09 Jul 2024 10:22:51 GMT

Is there a way I can make the format buttons on the page below have an an anchor tag so I can link directly to specific formats of resources?

I want to include a link directly to our guides.

https://www.sunrisesoftware.com/resources

The page is using custom code and custom module for these buttons.

Re: Add anchor links to page

Anton — Tue, 09 Jul 2024 17:56:15 GMT

Hey @EWright44,

by default you should be able to set the button to "External" and just type "#MY-ANCHOR" as the URL. HubSpot might display that there's an error, but it will work 🙂

To add a Jumpmark to the page add a rich-text(if you're in the drag&drop), switch to the source-code view and type:

Another possibility might be to create a simple custom module with two text inputs(not rich-text) like this:

<a href="{{ module.anchor|lower|replace(" ", "-") }}" class="btn btn-primary"> {# You might want to change the button classes to the ones from your theme #} {{ module.anchor_label }} </a>

quick tip for editor experience: add this to the custom module if you'd like to show the used anchor while being in the page-editor

<a href="{{ module.anchor|lower|replace(" ", "-") }}" class="btn btn-primary"> {# You might want to change the button classes to the ones from your theme #} {{ module.anchor_label }} </a> {# show the anchor in the page editor #} {% if is_in_page editor %} <strong style="padding:.5rem; background:#E8E8E8;color:#878787; text-align:center"> {# feel free to modify the colors #} {{ module.anchor|lower|replace(" ", "-") }} </strong> {% endif %}

best,

Anton

Re: Add anchor links to page

stacy_jenkins — Tue, 05 Nov 2024 18:00:09 GMT

Here is another option, but works off of what you said. If you look at the source code for any HubSpot page, I happen to be using a themed page, you can get the div id. Then, the same as you suggest, use the # to link to that div id on your page. Now I can link to other sections on my webpage. Thank you for putting me on the right path to a solution!!