Back to CMS basics

Here are some written instructions on how to create anchor links on a page, which allow you to link to content on the page itself. There are 2 steps to this: creating the anchor (where you want to link to) and then linking to it.

You can expand the screenshots by clicking on them. Tips are given in italics.

These notes assume you are already logged into the CMS.

Creating the anchor destination

  • Using the WYSIWYG editor, highlight the text where you would like the anchor to go to (e.g a heading, or a paragraph of content).
  • Click on the anchor option in the content editor panel - this is the  button with a flag icon.
Screenshot showing the anchor button with a flat on it in the WYSIWYG editor
  • Add the name of the anchor, following these rules:
    • The name must be unique within the page.
    • It cannot contain any spaces - we recommend only using lowercase letters, numbers and hyphens.
Screenshot showing the dialogue box to enter an anchor name, and the example name of 'this-is-an-anchor'
  • Click 'OK' to save the anchor, and you should then see a dotted border around the it with the flag icon to the left.
Screenshot showing a heading in text being used as an anchor

Linking to the anchor (within the same content block)

If both the anchor and the link to it will be within the same content block, then follow the below instructions:

  • As with creating a normal link, highlight the text you would like to link.
  • Click on the link button in the WYSIWYG editor.
  • In the dropdown box 'Link Type', change it to the option 'Link to anchor in the text'
Screenshot highlighting the 'Link to anchor in text' link type when creating a link in the WYSYWIG editor popup
  • Select the correct anchor by name.
Screenshot showing the correct anchor selected in the WYSYWIG editor popup for adding a link
  • Click on 'OK' to save your changes. When you exit edit mode, your link should now direct the user screen to the anchored section on the page.

Linking to the anchor (within a different block on the same page)

If the anchor and the link to it will be within different content blocks on the same page, then follow the below instructions:

  • As with creating a normal link, highlight the text you would like to link.
  • Click on the link button in the WYSIWYG editor.
  • In the dropdown box 'Link Type', keep it set to the option 'URL'
  • And set the dropdown box 'Protocol' to 'other'
Screenshot showing the link type being set to 'protocol' in the WYSYWIG editor popup for adding a link
  • Then in the 'URL' field, type in the # symbol followed by the name of the anchor you want to link to
Screenshot showing the link URL being set to an anchor name in the WYSYWIG editor popup for adding a link

Click on 'OK' to save your changes. When you exit edit mode, your link should now direct the user screen to the anchored section on the page.