How To Create Anchor Links In Squarespace Without Code

Navigating long webpages can frustrate visitors, enter anchor links: your secret weapon for smooth navigation. Anchor links let users jump directly to specific sections of your page with a single click. Forget the days of code blocks – Squarespace now offers a simple, no-code solution. Let's dive in and see how you can use anchor links to enhance your site's user experience.

What are Anchor Links and Why Should You Use Them?

Think of anchor links as bookmarks within a webpage. Instead of making visitors scroll endlessly to find what they're looking for, an anchor link jumps them to the exact section they need.

For example, clicking an "Inquire" link could instantly take you to the About page’s "Contact" section.

Here's why anchor links are great:

• Improved user experience: Make it easier for visitors to find information quickly.

• Easier navigation on long pages: No more endless scrolling!

• Highlight key information: Draw attention to important sections of your site.

Adding Anchor Links to Squarespace Sections

Here's how to add anchor links to your Squarespace site.

Navigating to the Correct Page

First, head to the "Pages" section on your Squarespace dashboard. Then, select the page where you want to add your anchor link.

Supported Section Types

Anchor links work with most Squarespace section types. Here's a quick rundown:

• Blank pages

  • Regular sections

  • Auto layout sections

  • Gallery sections

• Video pages

• Course pages

Note: Anchor links cannot be directly added to blog, store, portfolio, and event pages. But don't worry, we'll cover a workaround later!

Adding an Anchor Link

1. Navigate to the specific section you want to link to.

2. Click "Edit Section."

3. Scroll down to the "Anchor Link" area.

4. Enter your desired anchor link name (also known as a "slug").

5. Save your changes.

That's it! You've just created an anchor link. Now, let's talk about naming conventions.

Naming Your Anchor Links: Best Practices

Choosing the right name for your anchor link is crucial. Why? Because it'll show up in the browser's URL bar. A well-chosen anchor link name should be clear, concise, and relevant. It helps users understand where they're going when they click the link.

Naming Rules

Here are a few rules to keep in mind:

• No spaces allowed: Spaces are automatically converted to dashes (e.g., "Our Services" becomes "our-services").

• Unique names within the same page: You can't have two anchor links with the same name on the same page.

• Reusable names across different pages: You can use the same anchor link name on different pages. For instance, you could have an "our-services" anchor link on both your home page and your about page.

Linking to Your Anchor Links

Now that you've created your anchor link, it's time to put it to work! Here's how to link to it from different elements on your site.

Linking Text

1. Select the text you want to turn into a link.

2. Click the link icon.

3. Enter the link in this format: /page-slug#anchor-link-slug

   • Replace page-slug with the actual page URL slug.

   • Replace anchor-link-slug with the name you gave your anchor link.

4. Disable the "Open in New Window" toggle.

5. Save your changes.

For example, if you're linking to a section called "our-services" on your about page, the link would look like this: /about#our-services

Linking Buttons

1. Add or edit a button.

2. In the button link field, enter the link in the same format: /page-slug#anchor-link-slug.

3. Disable the "Open in New Window" toggle.

4. Save your changes.

Linking Navigation Items

1. Go to "Website" then "Navigation."

2. Add a new navigation item and select "Link."

3. Enter the navigation title (the text that will appear in the menu).

4. In the link field, enter the link in the format: /page-slug#anchor-link-slug.

5. Save your changes.

Workarounds for Unsupported Sections (Blogs, Stores, Portfolios, Events)

As mentioned earlier, you can't directly add anchor links to blog, store, portfolio, and event page sections. But there's a simple workaround!

The trick is to add a new section above the unsupported section and add the anchor link to that new section. You can then make the added section small or blend in with the existing design so it's not noticeable.

Conclusion

Creating anchor links in Squarespace is a simple way to improve your website by eliminating endless scrolling and creating intuitive pathways to information. With proper implementation, these digital shortcuts improve navigation, boost engagement, and create a more professional user experience.