How to Create a Squarespace Anchor Link in 7.1
Need an anchor link, jump-to link, or on-page link to scroll to a specific area on a web page? Today I have three easy options for you to link to a particular part of any page or section of your Squarespace 7.1 site! Let’s get started!
Table of Contents Show
What is an Anchor Link?
It’s a link that quickly takes someone to a specific part of a page. Its purpose is to help the user to get information more quickly.
This is great from a user perspective because they can skip through an entire page of content and find exactly what they’re looking for without searching the page.
Alternatively, it can be used interactively like with a table of contents.
Anchor links also help SEO as it defines the structure of your page, which improves SEO data that google needs to classify your content.
How to Create Anchor links
There are two ways to create anchor links in Squarespace. One is by using Squarespace section-Ids. Another option is by using a unique identifier and css.
How to Create Anchor Links in Squarespace 7.1 with Section-IDs
Using Squarespace ID-Finder Chrome Plugin
First, you’re going to install Squarespace ID-Finder Chrome plugin. Refresh the page once the plugin is installed.
Now go to the Squarespace page where you want users to land.
Next, go to your browser plugins, usually in the top-right corner of your browser, next to your Chrome profile image.
Find and click on the Squarespace ID-Finder plugin
Once the plugin is enabled, your page will be covered in blue underlined and red underlined rectangular boxes with the Section IDs in blue and Block IDs in red.
Look for the specific section you want to link to, and click on the nearest Blue Underlined Section ID that is above it, which will automatically copy the Section-ID upon the click
In my case, I’m using the second section beneath my header, which will produce the following code which I paste into Apple Notes
section[data-section-id="5e55bb68eb377132c6bf629f"]
Edit the Section-ID to create the Anchor link code
Delete everything, except the ID (keep everything between the two quotation marks")
Add “#page-section-" in front of the ID
Your new Anchor link will look like this
#page-section-5e55bb68eb377132c6bf629f
Create a new link of your choice (Text, Button, Image)
Copy the code
Create a new text link, button link, or image link
Paste the code into the link area
Save the page
Test to confirm it works!
How to create Anchor-links in Squarespace with Unique Identifiers & CSS
This option requires a little bit of code, but it’s super simple, so don’t freak out! You can totally do this!
Create the Anchor
First, go to the exact block where you want the anchor link to target.
Add a code block above that specific block. If you add the block below the ideal block, the link will not land in the correct location.
Add the following code:
<div id="your-ID-here"></div>Using words, numbers, or hyphens, replace “your-id-here” with any name that will make it easy to identify. A relevant, concise, and a unique name is best, and use hyphens instead of spaces. I recommend using one anchor per code block. Examples
<div id="newsletter"></div><div id="inquiry"></div><div id="buy-now"></div>Once one anchor code has been added to the code block, click apply.
When you’re in edit mode, the code block will appear blank, but when you save the page, the code block will disappear.
Create the Anchor Link Code
Create an another anchor by adding a hashtag before the DIV ID #div-id.
#newsletter#inquiry#buy-now
Create a hyperlink of your choice (Text, Button, Image)
Copy the code
Create a new text link, button link, or image link
Paste the code into the link area
Save the page
Test to confirm it works!
How to create an Anchor-link to a section or a specific element on another page.
Once you’ve created your anchor links using either of the above methods, we can now link to an anchor on any page. BUT we do need to adjust the code slightly by adding the URL slug.
Update the Anchor Code
I’m going to use the anchor code from our two options above.
Option 1 Anchor Link to a Section on a different page
Get the URL slug of the page you want to direct people to
“/Page-slug-url/. “Add the page slug URL before the anchor code.
The code will look like this:/page-slug-url/#page-section-IDCopy and paste this code into a text link, button link, or image link area
Save the page and Test
Option 2 Anchor Text to a Specific Element on a page
Get the URL slug of the page you want to direct people to
“/Page-slug-url/. “Add the page slug URL before the anchor code. The code will look like this:
/page-slug-url/#your-id-codeCopy and paste this code into a text link, button link, or image link
Save the page and Test
Squarespace 7.1 Anchor Link Tips
If the scroll to the anchor isn’t smooth or if it’s disruptive in any way, try adding this CSS code to your site. Go to Design> Custom CSS > Add the following code
// Smooth Anchor Link Scroll // html {scroll-behavior: smooth!important;} // End Smooth Anchor Link Scroll//If you are using a code block for text, you can add any text within the Division element
<div id="inquiry">Inquire Now</div>Instead of a Division element (<div></div>), you can use any Paragraph or Header element with the id code within it
<p id="inquiry">Inquire Now</p><h1 id="inquiry">Inquire Now</h1><h2 id="inquiry">Inquire Now</h2><h3 id="inquiry">Inquire Now</h3><h4 id="inquiry">Inquire Now</h4>
When to Use Anchor Links in Squarespace 7.1
You can use anchor links in so many different ways, but let me share a few ways I use them for internal links for my site and my client’s websites.
Add a “Back to Top” anchor link in Squarespace 7.1. You can add a link that takes people back to the top of the page.
Add anchor links to any sales page, to direct to a Buy Now, Check Out Now, or Inquire Now Button
Manually create a Table of Contents on long Blog Posts.
Or get a Table of Contents Plugin to automatically create a TOC for all your blog posts! (I use this, and it’s amazing!) Add the plugin to your site, and every blog post on your site gets a Table of Contents)
It’s as easy as eating a slice of pie! Got questions? Leave them below!
More Squarespace Posts
Are You On Pinterest?
If you enjoyed this post please share it, thanks!
