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.
Highlights
Highlights
Adding a coding block to the section you want to add your anchor link.
Copy and paste the following <div id="anchor-name"></div> replacing ‘anchor-name’ with a relevant name you want people to click.
Add a link where you want visitors to navigate too. Where you would normally place the URL, paste #anchor-name (or whatever you decided to name it).
Save and refresh your page to test.
How To Add Anchor Links In Squarespace
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!
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>
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.
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 the section you add your code to.
Create A Button Anchor Link
To link a button, it’s the exact same process.
Button anchor links are 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.
Use Anchor Links to Jump to a Section on Different Page
Instructions
Step One: Create a hyperlink to jump to another page
Add a button or hyperlink and paste in the following:
/pagename#anchorname
Replace 'pagename' with the page you are trying to link to.
Replace #anchorname with an identifying name.
Step Two: Add code to connect hyperlink to the right section on a different page
Now, navigate to the section on a *different* page that you want to link to and add a code block.
Now paste in the following into the code block:
<div id=”anchorname”></div>
The 'anchorname' must match that included in the link/button in step one.
Hit save and refresh.
Keep in mind that you must be on a Squarespace business plan (or higher) to use the code block feature.
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.
I hope you found this video valuable. If you did, subscribe for more good vibes or leave a comment below. I’ll see you there! :)
