Support > Designing and Building Your Website > Adding Your Content
Anchor links are used to direct a website user to a section of a page, as opposed to directing them to another page of your site. They are set up using simple HTML code that allows you to reference the position of the page in your URL.
They typically look like this:
https://www.yourwebsite.co.uk/#page-section
This article actually uses anchor links to allow you to jump to a section you are interested in. Try any of the links in the above section to see how they work.
Using Anchor Links can greatly improve the user experience of your site. Especially if you have longer pages with a number of different sections. One example could be your privacy policy. Having a list of anchor links at the top of the page can help your users navigate to the section of the policy they are most interested in.
You can also use them outside of your website as well. This can be especially helpful when you need to reference a specific section of your site, for example, when in a discussion on Social Media. Simply provide your anchor link and the user will be taken to that specific section of your page.
Please note that you will need to create a new and unique anchor link for each different section of your page you would like to link to. You will also need to have purchased a domain name in order to create anchor links.
For best results when creating an anchor link, we recommend turning off the Sticky Header setting.
Select Content on the Top Menu.
Click HTML Fragments from the left-hand menu.
Click on the New HTML Fragment button at the top of the screen.
Give the HTML Fragment a description for reference (e.g. contact anchor).
In the HTML Code box, use the following code with the name of your anchor in between the apostrophes
<a id="your-anchor-name"></a>
In the Type section, select the Manual option.
Click Add HTML Fragment to save your code.
The name you give your anchor will be used on the end of your URL. It can be whatever you would like it to be but we recommend keeping it short for ease of use and separating words using hyphens. Using the example from step 6 above, this would create the anchor link:
https://www.example.co.uk/#your-anchor-name
Please note, if you are adding anchor links to a page that isn't your homepage, you will need to use the file name for that page, for example:
https://www.example.co.uk/pagename.html/#your-anchor-name
You have now successfully created your anchor. Now, your anchor needs to be positioned on the page. This section refers to selecting the position of the page you would like to direct your users to.
Select Content on the Top Menu
Find the page you would like to add the anchor to and click Edit this page (pencil icon)
Click the +Add Block button
From the Add Block filters, select the Custom filter in the 'Blocks that include...' category and select the Custom Single Element Block
Drag this Block onto your page and place it just above the Block you would like to direct your users to (below, we have placed the anchor above the “Made For You” section on the website. The anchor link will therefore take users straight to this Block.)
Move your cursor over the Custom Element Placeholder and click Add Custom Element
Select HTML Fragment from the drop-down box and click Done
Move your cursor over the HTML Fragment and click Settings
Select the anchor HTML Fragment you created from the drop-down box and click Done
Click Block Settings from the right-hand side of your Block (toggles icon)
Reduce the Block Padding to as low as it will go
This will make your Custom Single Element Block invisible when you publish your site.
Save your changes and publish your site
Congratulations, you now have a fully functioning anchor link on your website. To use it, simply enter your page url and add /# followed by the name of your anchor. For example:
https://www.yourwebsite.co.uk/#your-anchor
Anyone that uses the link you have created will be taken straight to the block you have chosen.
If you are adding this link anywhere on your Create site, you will need to add this as an external link.
If you have any further questions, please get in touch and we will be happy to help.
Get in Touch