Help Centre

Jump To Section

 

What Is An Anchor Link?

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. 

 

Why Use Anchor Links?

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. 

 

How To Create An Anchor Link

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

  1. Log in to your Create account

  2. Select Content on the Top Menu.

  3. Click HTML Fragments from the left-hand menu.

  4. Click on the New HTML Fragment button at the top of the screen.

  5. Give the HTML Fragment a description for reference (e.g. contact anchor).

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

How to set up the HTML for your anchor link

  1. In the Type section, select the Manual option.

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

 

How To Position Your Anchor

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. 

  1. Select Content on the Top Menu

  2. Find the page you would like to add the anchor to and click Edit this page (pencil icon)

  3. Select Add Block in the bottom-left of the page (+ icon)

  4. Select Custom from the drop-down box and find the Custom Single Element Block

Add A Custom Single Element To Your Page

  1. 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.)

Custom Single Element Placed On A Page

  1. Move your cursor over the Custom Element Placeholder and click Add Custom Element

  2. Select HTML Fragment from the drop-down box and click Done

  3. Move your cursor over the HTML Fragment and click Settings

  4. Select the anchor HTML Fragment you created from the drop-down box and click Done

Custom Anchor HTML Fragment Added To The Page

  1. Click Block Settings from the right hand side of your Block (toggles icon)

  2. Reduce the Block Padding to as low as it will go 

Anchor Block Padding Settings

           This will make your Custom Single Element Block invisible when you publish your site.

  1. Save your changes and publish your site

 

How To Link To Your Anchor

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.

More Questions?

If you have any further questions, please get in touch and we will be happy to help.

Get in Touch