All Collections
Customize Your Site
Custom Formatting Tips
Add anchor links
Add anchor links

Make content easy to navigate with anchor links!

Alli Pierpont avatar
Written by Alli Pierpont
Updated over a week ago

If you're interested in adding anchor links, it's important to learn the basics of how to code in HTML. If you're unsure of how to add elements to your HTML code, send a message to support@gouconnect.com and we'd be happy to help setup some anchor links for you. If you're eager to give it a try yourself, read on!

First, let's briefly discuss how anchor links work. 

Let's say you have a tag page called 'Prepare for an Interview'. Within that page, you have 4 sections of content, titled:

  • 'Update Your Resume'

  • 'Pick out a Professional Outfit'

  • 'Research the Company'

  • 'Practice with a Peer'

Each section has quite a bit of content in it. Rather than forcing a student to scroll through paragraphs of content just to get to the section they want, you can provide 'Anchor Links' at the top of the page, that automatically transport users to the relevant section within the same page. 

Check out an example of how to add anchor links using the traditional legacy editor below:

Note that if you're using the block editor, the only difference when adding code will be that you will not have a 'text' tab, and instead will just want to add any code by inserting a custom HTML block, like the below:

To add the custom HTML block, select the '+' sign when adding new content to a page, and then once adding the block, type in any code you'd like to include.

In addition to the video and instructions above, we've added written instructions below: 

Adding anchor links

  • First, select the 'text' version of the editing window if you have the legacy editor, or add a custom HTML block if using the block editor

  • Locate the section of content you want a user to jump to (the section farther down the page)

  • At the top of that section, add in an id tag for 'sectionone', so that the end result looks like:

<p id="sectionone">Section One!</p>

  • Next, locate the text you want to embed the link into, so that when users click on it, they jump to the section you just ID'd. 

  • Embed a hyperlink, by plugging in the following format: 

<a href="#sectionone">View Section One</a>.

  • The text within <a> </a> will be the linked text (the </a> ends the link). 

  • Save, and check out your handiwork to see it in action!

Note: the 'p' in the ID'd section stands for 'paragraph'. It's possible to see different character identifiers here depending on the format of the text you're editing. For instance, headers could appear as 'h1' or 'h2'. 

Did this answer your question?