Squarespace Anchor Links

Anchor links allow readers to navigate your site easily and a happy reader stays on your site longer. This type of link is often a button that jumps you down the page. Not sure what we mean?

Blog-Content-Share-08.png
 

TA-DA!

That is an anchor link! There are many ways to use anchor links but we are going to show you our favorite three.

The Classic

This anchor jumps down the same page (similar to what we just showed you)

TO DO:
*The easiest way to set this up is to work in indexes. This allows you to easily jump down different pages in the same index.

  1. Once logged into your Squarespace site select Pages.

  2. We recommend working in the unlinked section of your site as you practice so no one can see your work until you are ready.

  3. Create an index by clicking the plus button in the gray editing panel in pages and immediately name it in the first pop up.

  4. Use the same plus button and create a page and immediately name it as well. (HINT: If you do not name things right away we recommend you go back into the page by clicking the settings crank next to the specific page, naming the name, and copying this name down into the url slug section. This organization makes things a bit easier down the road.)

  5. Continue to add a few pages in your index.

  6. Add a button in one of the first pages in your index. This button is serve as the anchor link.

  7. Name it and save. We will come back to add the link.

  8. Decide which page in your index you would like the button to jump down to once clicked. Go to this page and hover over the settings crank in the editing panel on the left hand side.

  9. Once you have clicked the crank, you will need to copy the text that is in the url slug area.

  10. Go back to the Button and click edit.

  11. Type in the hashtag symbol # and add your copied text from the url slug.

  12. Click save and refresh the site.

    *Your anchor link is complete! If you are a bit lost, see the step by step video below.

 
 

The Page Jump

This anchor jumps from one page to another on your site. Great for a Learn More or Book Now button!

TO DO:

  1. Once logged into Squarespace, select pages and go to the page you would like to have an anchor link that leads to another page. We are using buttons in our examples but you can also link from text, images, etc.

  2. Add a button to your section.

  3. In the gray pop up for the button click the settings crank next to the Clickthrough URL. You have another pop up that gives you a few options that you may also find helpful in the future.

  4. Select Page in the pop up and click your cursor in the search.

  5. From this Search area you are able to see indexes (hamburger symbol) and pages.

  6. If you want to add the anchor link to another page, select the main index for that page. An example of this is having a small teaser of your services or packages on your home page and adding an anchor link to the Services page.

  7. If you want to add an anchor link to a particular section of a page there is a formula.

    /index url slug here#page in index url slug here

    ex: /about-me#my-story

  8. Click save and refresh the site.

    *Done-zo! If you are a bit lost, see the step by step video below.

 
 

The Blog Jump

We love this option for clients that have a bit more content or would like the option to write A LOT of copy. An example of this is a client that has a Services page that breaks down a few packages. Each package has a title, description, some bullet points and a price point. But there is even more information that the client wants to show. In this case we recommend having a Learn More button leading to a blog post with all the nitty gritty. This keeps the Services page concise and clean but allows interested parties to access more information.

TO DO:

Let’s assume you have your pages built, your blog post ready, and you just need to link up the button.

  1. In the Pages panel hover your cursor over your blog page and click the settings crank. Copy the URL slug.

  2. Go to the button you would like to link the blog post.

  3. Add a backslash in the Clickthrough URL space and then copy your blog url slug here.

  4. Click save and we will come back to this spot later.

  5. Next go to the blog post you would like to link to and select edit.

  6. In the blog pop up, click Options in the top and copy the post URL.

  7. Go back to the button you are working on and click edit. Add another backslash and then copy in your blog post URL.

  8. Save and refresh to test it out.

*There is a video below but the formula should read…
/blog/post url here

 
 

That’s it!

You are ready to conquer our top three uses for anchor links.

Hello Big IdeaComment