How To Create Anchor Links In Squarespace

Anchor links, sometimes referred to as ‘page jumps’ are links that help your website visitor quickly navigate to a specific place on a web page. They are particularly useful on long pages where a website visitor is looking for a particular section but doesn’t want to scroll through everything to find the content relevant to them. It might seem like a small way but it creates a much better experience for visitors to your blog.


While anchor links aren’t a feature offered within the Squarespace platform, you can add still add them in with just a few steps. In this article, I’ll show you how.

 
Chloe Forbes-Kindlen How To Create Anchor Links in Squarespace.png
 


To create your anchor link, you will need to use the code content block and a small piece of code but before you panic, it’s super simple. I promise!

 
giphy.gif
 

01 Add Your Anchor Link Code

Start by choosing where on the page you want to link your visitors to. This is where you want your anchor to appear and the place visitors will ‘jump to’ on the page.

For example, you might want to link visitors to ‘pricing’ as this is one of the first things potential customers check but is often located at the bottom of a sales page.

Insert add a code content block.

Now copy and paste the following piece of code replacing ‘anchor-name’ with a relevant name you want people to click. If you are using multiple words, be sure to add a hyphen in between.

<div id="anchor-name"></div>

 
How To Create Anchor Links In Squarespace 1.png
 

Using our pricing example, it would look like this:

<div id="pricing"></div>

02 Link your anchor

The second step is to create a link for your visitors to ‘jump-to’. To do this, you create a link that attaches to text, an image or a button depending on your preference.

Create A Text Anchor Link

To link to text, highlight the text and click the ‘link’ icon to make it a link. In the url space, add “#anchor-name.” Add link to save. Now every time a visitor clicks on the text, it will link to section you add your code to.

 
How To Create Anchor Links In Squarespace 2.png
 

Create An Image Anchor Link

If you would prefer to link an image instead of text, you can do that too. To do this, add your image via an image content block, navigate to the ‘Design’ image tab and where you would link your image, add #anchor-name and hit save. Refresh your page to see it in action.

 
 


Now hit Apply. Every time a visitor clicks the image, it will link to section you add your code to.

Create A Button Anchor Link

To link a button, it’s the exact same process.

 
How To Create Anchor Links In Squarespace 4.png
 


This is a great option for adding a ‘Get Started’ link to your header content to a contact form at the bottom of your page.

Remember to save and refresh before testing out your new anchor link.

How To Use Anchor Links On Your Website

Aside from the pricing example shared above, there are lots of ways you can use anchor links to create an enhanced experience for your website visitors. Here’s just a few ideas to get you started.

  • Create a ‘Get Started’ button that links to the contact form at the bottom of your web page.

  • Create a one page website using anchor links in your menu to help visitors navigate the right section.

  • Create an FAQ page with a list of frequently asked questions as anchor links helping visitors locate the answer to their specific question without having to scroll through every answer to every questions.

Now it’s your turn to get creative. You can now add anchor links throughout your Squarespace website with ease. If you have any questions at all, let me know in the comments below.


More Squarespace Tutorials