How to Set Up Anchor Links on Squarespace
You know when you’re on a website, and you click on a link on the page, and then it scrolls to another section on that same page? That’s an anchor link!
In this post, I’ll walk you through how to create anchor links on Squarespace. These types of links can be extremely useful when creating an enticing user flow on your website, so it’s a useful thing to know how to do.
I’ll walk you through the entire process so you know exactly how to set them up.
Where to Begin
First things first. Before we even jump into creating anchor links, we need to figure out what version of Squarespace your website is built on. This is really easy. All you do is head to the Help panel when you log into Squarespace and it will tell you which version you are using. Most likely, you are using either Squarespace 7.1 or 7.0. If you need more help figuring this out, here’s a guide from Squarespace to walk you through it.
Creating Anchor Links in Squarespace 7.1
My favorite way to create anchor links in Squarespace is using page section links. I know this sounds like it’s going to be complicated, but I promise, once you get the hang of it, it’s pretty easy.
Something to know about Squarespace 7.1 is that its pages are built using different sections. These sections are broken up using different IDs, which are unique for each section.
So, what we’ll need to do is find the ID of the section we want to link to and then create a link out of it. Easy!
I like using the Squarespace ID-Finder Chrome Extension to find section links on Squarespace 7.1. I highly recommend you download it and add it to your browser. Why? It’s as easy as clicking a button on your browser and then all your section links pop up. This is so much easier than having to sift through a bunch of code.
Once you find the section ID that you need, all you need to do is copy it. With the extension you’re using, it’s as simple as clicking on the ID you’re looking for, and then it’ll automatically be copied. You should end up copying something with a similar structure to this:
section[data-section-id="611fe7f033c81814d9df34d5"].
From there, my recommendation is to open up your favorite text editor of choice. It can be TextEdit, Pages, Microsoft Word, it doesn’t really matter. Once you have that open, paste in what you just copied.
Next, you’ll want to delete everything that you just pasted in except the unique string of numbers. From our example above, you should end up with something like:
611fe7f033c81814d9df34d5
Then, you’ll add #page-section- in front of that string of numbers. That will now become your unique anchor link. Copy that phrase you’ve created and you’re ready to paste it in wherever you need to on your website. So, for our example we’ve been working with, the final syntax of our anchor link will be:
#page-section-611fe7f033c81814d9df34d5
You can paste this link in a button, image, text link, or even a navigation link. You can add your anchor link anywhere you can paste a normal link. Amazing!
And that’s it. That’s how you add anchor links to Squarespace 7.1.
Creating Anchor Links in Squarespace 7.0
In Squarespace 7.0 there are two different ways you can add anchor links to your site. I’ll walk you through them both, starting with the more general method of the two.
Method 1: Using Code to Create Anchor Links
This method requires a little bit of code, but I promise it’s easy. If you follow my instructions, you’ll mostly be copying and pasting and shouldn’t have an issue managing this on your own.
First, you need to add a code block to the place where you want your anchor link to land.
Add the following code inside the code block:
<div id="YOUR-ID-GOES-HERE"></div>
Feel free to change the ID inside the quotation marks. It does not have to be YOUR-ID-GOES-HERE. It can be absolutely anything. For example, if you’re linking to an about section on your home page, you could name your ID “about-me”. This will help you stay organized and remember what you anchor link is.
<div id="about-me"></div> <div id="get-in-touch"></div>
Once you have your ID set up, you simply need to add a link with your unique ID like before. Use the following format when pasting it into your link:
#YOUR-ID-GOES-HERE
Method 2: Using Index Pages
If your Squarespace 7.0 website is made up of Index Pages, setting up anchor links is a breeze. Index pages break up pages into sections, similar to Squarespace 7.1. You don’t have to add any additional code to set up anchor links on these pages either, which is an extra bonus.
The first thing you’ll need to do is find the URL of the section you are wanting your anchor link to land on. From the Pages panel of your website, use the sidebar to locate the link to your section. All you’ll have to do is click on the gear icon associated with the section you’re wanting to link to. From there, you’ll need to copy your URL Slug. For example, a slug you might be working with could be /home-blog.
Now, go to where you’d like to paste your anchor link and add a link. When you add the link you’ll paste the URL Slug you copied and then switch the / to a #. So, for the example I shared above, your new anchor link would be #home-blog.
Apply your changes and that’s it!
Troubleshooting & Additional Tips
Be aware that Squarespace can sometimes be finicky. If you’re not seeing your changes take effect when you publish them, check your site on a fresh browser tab as opposed to viewing it on the backend editor. The editor can be a bit funky at times and doesn’t always load changes properly, especially when they’re first implemented.
Another thing to keep in mind is that you can have multiple anchor links on a website. Simply ensure that you create a unique ID for each link that you’re working with. No matter which method you’re following, you’ll find that if you follow my instructions, you should already be doing that!
Conclusion
Easy peasy right? I hope this post was helpful and empowers you to take control of your website and manage it yourself. If you run into any issues feel free to reach out and I’m always happy to help.
Take care and talk soon,
Alex
