Squarespace Anchor Links – Create Jump Link to a Page Section
In this guide, I will explain the easiest method for adding anchor links for headings on top of a Squarespace fluid engine page as well as blog article.
If a user clicks on any link, it will take the user to specific place of the page. Follow each step in this easy and best method for creating anchor links in Squarespace. Other terms for anchor links include Squarespace jump link and Squarespace jump to section.
→ Watch Video Below
Step 1 – Decide Page URL
Click on three dots (…) next to the page name on left panel. In Content tab of page settings, finalize the URL of the page. Keep the page URL short and concise. You must never change URL after adding anchor links - otherwise all shared links to the page may break.
Instead of reading this article, you can watch this tutorial video about Squarespace Anchor Links.
Step 2 – Add /# next to page URL
From the SEO section of the page settings, copy the final URL of the page and paste it in any text editing program such as MS Word or Google Docs. Add Slash (/) and (#) characters next to the page URL.
For example, URL will look like this.
https://www.dozro.com/photo-video-editing/filmora-video-editor/#
Step 3 – Create Page Outline
Copy each heading on page and paste it in Table of Contents (outline or section list of page) to create a list of page headings or section titles. Optionally, you can apply bullet list format to each heading text for accessible contents of the page.
Step 4 – Example of a Unique ID
Copy all text in table of contents and paste it in MS Word. Through this step, there will be no chance of any mistake, because you will make complete anchor links in MS Word and then paste them in Squarespace. This step also makes the process of adding multiple anchor links fast, easy and error-proof.
Suppose your first heading on the page is as below:
★Add Text in Filmora Video Editor★
Now add Unique ID text next to each heading. Unique ID text should be short, unique, lowercase, and preferably matching to the heading. Unique ID can be a single word or may consist of multiple words. If unique ID consists on multiple words, then separate each word with a dash (-).
For example, I have added below unique ID to the above heading.
★add-text★
Step 5 – Combine Page URL and Unique ID
Now copy a Unique ID from Step 4 and paste it next to # in front of page URL in Step 2. There should be No space between characters.
Now our example link will look like as shown below.
https://www.dozro.com/photo-video-editing/filmora-video-editor/#add-text
Now it is a complete anchor link. Copy this complete link.
Step 6 – Add Combined Anchor Link in Squarespace
Open Squarespace page. Select text of the same heading in Table of Contents, click Link symbol (🔗) and then click Gear icon.
In new window, select Web Address and paste the complete link here (you copied from step 5). Click Save, and then Apply.
Repeat the same process for each heading and create links for all headings of page in Table of Contents.
Step 7 – Add Code Block for Headings
Here, I have listed sample formats for heading 1, 2, 3 and paragraph body text.
Copy any required anchor format from the following lines of bold text and paste it in MS Word.
★ Heading 2 → <h2 id="unique-id">Text of Each Heading</h2>
★ Heading 3 → <h2 id="unique-id">Text of Each Heading</h2>
★ Heading 4 → <h2 id="unique-id">Text of Each Heading</h2>
★ Paragraph Text → <p>Enter Paragraph Text Here</p>
Pro Tip: As the title of blog post is by default a heading 1 in Squarespace, therefore, for perfect SEO hierarchy, you should not enter the heading 1 again on the page.
Next
Now copy the text of first heading from Squarespace page. Open MS Word and paste the heading text between the tags - your heading text should replace “Text of Each Heading” as shown in above format.
For example, if I want anchor link for heading 2, then our above example will look like as below.
<h2 id="add-text">Add Text in Filmora Video Editor</h2>
Next
Now copy the Unique ID text for the specific heading from step 4 and paste it between the quotation marks. There should be No empty space.
So, after adding Unique ID, our above example will look like as shown below.
<h2 id="unique-id">Add Text in Filmora Video Editor</h2>
AND Finally
Now copy the complete format text including tags. Open Squarespace blog page, above the first heading, click + symbol, and select Code. If the code block window disappears, click the box of Code block on page, select pencil symbol. The code block window will pop-up. Here remove the sample format and paste your own complete anchor format text (<h2 id="unique-id">Add Text in Filmora Video Editor</h2>). Click on an empty space on the page to apply the anchor link text format.
You have done it. Congrats.
Now select the previous plain heading and press Backspace on keyboard to remove it. Bring cursor on start of paragraph and again use backspace to move it upward to align with heading.
Repeat the same process for each heading.
Additional Tips
Change Format of Text Heading
In the code block you can change format of the text. For example, if I want to apply heading 3 instead of heading 2 to the heading text, then I will open ‘code block window’ and change the H value from 2 to 3. The heading 2 on the page will instantly become heading 3.
Method of Creating Anchor Links in Squarespace Fluid Engine
In Squarespace Fluid Engine, there is no + symbol, therefore, select ADD BLOCK button to add Code block and then paste the complete text format same way as we did earlier in this guide.
You can also apply anchor links as I have applied on Services page of Dozro website, using the Squarespace Fluid Engine. A user can click on any link in the Table of Contents on to p of page and to go to a specific section on page, then if user clicks on any button link in a section, it will take the user to a single contact form on bottom of the page. To do this, I have applied same Unique ID to all buttons.
The unique ID becomes part of the URL, and displays to the user in browser address bar.
Please share this article if it proved helpful for you.
Free Help for You
This is the most easy and effective method for creating Squarespace anchor links. However, if you need any help, you can send me email. I will guide you (free of cost) with each step in one-to-one live video through WhatsApp or Google Meet.
You may consult following internal and external resources to know more on this topic.
Sources for More Information
Share This Article
To Share This Article, please use ‘Share’ button in the top right corner of your browser address bar. You can also copy this link and share this page anywhere. 🔗 URL: https://www.dozro.com/squarespace/squarespace-anchor-links
If this article was helpful for you, please support Dozro on Patreon.
Articles
Please visit homepage of Dozro website.
Learn about Creating Anchor Links in Squarespace official support article.
Explore all helpful articles about Squarespace on this website.
Squarespace 301 redirect link forwarding URL mapping method.
Please explore the Services offered by Dozro.
Videos
You can watch related videos on YouTube channel of Dozro.
☑️ Watch tutorial videos about Website Building through Squarespace in specific PLAYLIST on our YouTube channel.
☑️ On our Facebook page, watch tutorial videos about Squarespace Website Building on FB in specific PLAYLIST.
Contribute
Dozro welcomes suggestions and feedback. Please suggest edits and improvements in this article. Let’s make this article a great source of trusted information for everyone. For feedback, discussions, and contributions to this article, please follow the specific community post on Dozro YouTube channel.
