How to Link to a Section in Squarespace Using Anchor Links
Got a lengthy page that you want people to read? Anchor links are a fantastic way to improve the navigation and readability of your content.
An anchor link (also known as a ‘jump link’ or ‘hash link’) is a link that takes users to another location on the same page.
For example, let’s say you have a 4,000-word blog post with many different sections. You can set up anchor links so viewers can quickly jump to the part they’re most interested in reading without having to scroll through the whole thing. Alternatively, you might want to direct people towards a lead generation form below the fold of your landing page.
Anchor links aren’t just great for usability. They can help search engines like Google understand the structure of your website, giving you a potential boost in the search engine rankings!
The good news is that Squarespace anchor links are relatively easy to set up; you just need to know a little HTML code. Here’s how to create text anchor links in Squarespace in two simple steps.
Creating a Squarespace anchor link in two simple steps
Step 1: Create your ‘anchor’
An anchor link consists of two parts – the hyperlink that page visitors click on, and the ‘anchor,’ which is where the link will take them.
Go to where you want to add your anchor and add a code block directly above it. In the code field, add the following HTML code:
<p id="anchorID">The text that will be your anchor</p>
The ‘anchorID’ is the word, phrase or number that identifies your anchor link. When creating your unique ID, bear in mind that:
It can’t be used anywhere else on your page
It’s case sensitive
You can use any text or numbers in your unique ID, but you can’t use spaces. If you want to separate individual words, use a dash (-)
If you’re using multiple anchor links on a page, a good way to manage your IDs is to number them. So ‘anchor1’, ‘anchor2’, ‘anchor3’, and so on. Make a note of the ID you use, as you’ll need it later on.
Step 2: Build your link
It’s now time to set up the hyperlink that will direct web users to your anchor text. Create your link text, highlight it and click the link icon.
In the web address field, enter the full URL of the page. Add a slash mark and a hashtag to the end of the URL, and the ID you created earlier. So your URL should look a little like this:
https://mysquarespacesite.com/longblogpost/#anchor1
Click save and apply, and you’re done. Test your link to make sure it works and if it does, congratulations! You’ve created a cool new Squarespace link to section!
Squarespace anchor links - additional things to know
Creating a Squarespace jump to section is a great way to make your page easier to read. Here are some of my top tips for optimizing your anchor links.
Plan your anchor links carefully
There isn’t a limit to how many anchor links you can add to your page, but I recommend not having too many. Customers may find a page that’s covered in anchor links confusing to read!
Make sure the text in your link matches up with the text in your anchor. While they don’t have to be precisely the same, they must have the same context. Otherwise, you run the risk of frustrating your web users.
Save your page HTML before you begin
As you’re delving deep into the HTML of your page, you want to be careful when adding anchor links. One misplaced anchor link or unclosed tag could have a significant effect on the rest of your page content.
Save your page HTML before adding Squarespace jump to sections to your page. That way if something goes wrong, you can rollback your existing HTML code and start again.
Customize your HTML code to suit your needs
We’ve looked at text anchor links, but you can use images and other page elements as anchor links too; it’s just a case of changing your HTML code. For example, you can have a heading as your anchor – replace the ‘p’ in the HTML code with ‘H2’, ‘H3’, or ‘H4’.
Check out the Squarespace website for extra inspiration when it comes to creating a Squarespace link to section.
Build anchor links to other pages
You can use anchor links to take web visitors to another page on your site. Just set up your anchor on page B, and when you set up the hyperlink on page A, make sure the URL points to page B.
Revisit your links if you restructure your site
If you rename a page that has anchor links on it, check your links to make sure they still work. You might need to amend them.
Bonus: Styling your Squarespace anchor links
Want a way to make your links look extra enticing? With Spark Plugin you get over 100 incredible customizations that will make every part of your webpage stand out!
Spark Plugin works brilliantly with anchor links, meaning you can get lots of extra clicks and make sure web visitors find the content they want to read. Here are three of my favourite customizations for anchor links.
1. Animated links
Standard hyperlinks are static and boring, but what if you could bring them to life with a simple click? With this customization your links transform as your web users roll over them, making your anchor links extra appealing!
And with four animated link styles to choose from, you can pick the one that best suits the design of your site.
2. Header links
If you’re using headers for your anchors, you want them to stand out. With the header link customization you can choose from seven fantastic styles, from an elegant underline to a quirky back-to-front animation! Give them all a try and see which your web users like the most.
3. Custom buttons
Your Squarespace anchor link doesn’t have to be text; it can be an image or button! If you want to link to a call-to-action button, this customization will animate your button, encouraging people to click and convert.
Choose from an animated gradient, an enigmatic shadow, or even a festive flurry of snow to celebrate the holiday season!
Check out all the Spark Plugin customizations.
Try adding Squarespace jump to sections to your website today - you’ll wonder how you ever got on without them!
