How to Create Anchor Links in Squarespace
Adding links to your Squarespace site is easy. But what if you want to link to a specific point on a page? Links that lead to a specific points are called anchor links and in this tutorial, I’ll show you two ways to add anchor links in Squarespace.
Adding Anchor Links to Index Pages (Method One)
This method works on Bedford, Brine, and pacific family templates.
It’s super easy to add a link that takes you to a specific index page section in Squarespace 7.0.
Just grab the URL slug of the index page and the URL of the index page section and combine them like so:
https://yoursite.com/index-page-slug/#section-slug
Adding Anchor Links to Index Pages (Method Two)
This method works on Avenue, Flatiron, and Montauk family templates.
Grab the URL slug of the index page and the URL slug on the index page section and combine them like so:
https://yoursite.com/index-page-slug/#/section-slug
There is one issue that I’ve found with using either of these methods. They often link to the index page section isolated from all the other sections. Meaning it won’t jump to a point on the index page so much as take you to a totally new page with only the content of that section. This is, to say the least, really annoying, which is why I prefer the HTML method (below).
Adding Anchor Links to Any Page with HTML
This method of adding anchor links is a little bit more time-consuming but it works really well and it allows you total flexibility. It’s how I add tables of contents to some of my longer blog posts. (See an example here.)
First, we need to add the anchor point, which tells the anchor link where to go. To do that, you’ll have to add the header or paragraph you’re jumping to in a code block instead of a regular text block.
Here’s the code you would add to link to a specific paragraph:
<p id="anchor-id">The paragraph you're jumping to goes here.</p>
Swap out “anchor-id” for a unique ID of your choice to identify that particular anchor point. (I usually just use section1, section2, etc.)
It’s almost the same thing if you’re jumping to a specific header.
<h1 id="anchor-id">The header you're jumping to goes here.</h1> <h2 id="anchor-id">The header you're jumping to goes here.</h2> <h2 id="anchor-id">The header you're jumping to goes here.</h2>
Once you’ve added in the anchor text, you can add the anchor link. Here’s how you would format it:
https://yoursite.com/page-slug/#anchor-id
And voila! You now have a functioning anchor link. You can add anchor links using this method to any page on your site—index page, blog post, or any page in Squarespace 7.1.
Like this post? Pin it on Pinterest!
