How to Create Anchor Links in Squarespace 7.0
TL;DR:
- Anchor links let visitors jump to specific sections on a webpage
- Create them in Squarespace 7.0 using code blocks in page editors
- Each unique ID must be unique per page and is case-sensitive
- Works with text, buttons, and images
- Update your anchor links if your page URL or site structure changes
Anchor links are clickable elements that take visitors directly to specific sections of a webpage. They're particularly useful for long pages where you want to help people navigate quickly to the information they need.
In Squarespace 7.0, you'll need to use a bit of HTML code to create these links. Don't worry if you're not familiar with HTML – this guide walks you through everything step by step.
Step 1: Add a Code Block
Open the page editor where you want to insert the anchor link. You can place anchor links on most page types, but they won't work on collection pages like blogs or galleries.
Add a code block at the location where you want people to land when they click your anchor link. In the code block, enter:
<p id="unique-id">Anchor Text Here</p>
Replace unique-id with your own identifier. Use dashes instead of spaces and keep it simple and memorable. For example, if you're linking to a pricing section, you might use pricing-section.
The text "Anchor Text Here" will be visible on your page, so replace it with something relevant or leave it blank if you just want an invisible anchor point.
Step 2: Create the Link
Now you need to create the clickable link that will take people to your anchor point. You can do this with text, buttons, or images.
For text links, add a text block and type the text you want to link from. Highlight the text, click the link icon, and add the URL of your page followed by /#unique-id.
For example, if your page URL is https://yoursite.com/about and your anchor ID is pricing-section, your full link would be:https://yoursite.com/about/#pricing-section
If you're linking within the same page, you can just use /#unique-id without the full URL.
Step 3: Save and Test
Save your changes and test the link. The best way to test is in an incognito or private browser window to make sure it works for visitors who aren't logged into your site.
When someone clicks your anchor link, the page should automatically scroll to the section where you placed your code block.
Important Things to Remember
Each ID you use must be unique on that page. You can't have two anchor points with the same ID, or the link won't work properly.
IDs are case-sensitive, so Pricing-Section is different from pricing-section. Keep your naming consistent to avoid confusion.
If you change your page URL or move content around, remember to update your anchor links accordingly.
FAQs
Do I need HTML knowledge to create anchor links in Squarespace 7.0?
Basic knowledge helps, but this guide provides all the code you need. Just copy and paste the examples, replacing the placeholder text with your own content.
What are the limitations of using anchor links in Squarespace 7.0?
Each unique ID used for an anchor must be unique per page and is case-sensitive. You also can't use anchor links on collection pages like blogs or galleries.
How do I update my anchor links if I change the site's URL structure?
You'll need to update the URLs in your anchor links to match the new structure. If you're only using relative links (like /#unique-id), you won't need to update those.
Jargon Buster
Anchor Links: Direct links to a specific location within a webpage
Code Block: A feature in Squarespace that lets you add HTML/CSS code
Unique ID: A unique identifier used in HTML to distinguish elements
Page Slug: The end part of a URL that indicates the specific page address
Code Injection: A way to add custom HTML or JavaScript code site-wide or to specific pages in Squarespace
Wrap-up
Creating anchor links in Squarespace 7.0 is straightforward once you know the steps. The key is using meaningful, memorable IDs and keeping them consistent across your site. Test your links regularly, especially after making changes to your site structure.
Remember that anchor links are just one tool for improving navigation. Consider your overall site structure and user experience when deciding where to implement them.
Join Pixelhaze Academy for more Squarespace tutorials and advanced techniques.