How to Create a Link to Jump to Any Section of Your Squarespace Website (AKA Anchor Links)

All About Anchor Links:

In this tutorial, I walk you through how to use anchor links on your website. It's a great feature to allow your guests to jump around your site and access the information their looking for quickly — I'll show you how.

Transcript below!

• Transcript

  0:01 hey

  0:02 If you don't know me I'm Ellie

  0:04 I'm obsessed with all things Squarespace and systems

  0:08 Automation in your business is a huge thing and making things really easy on the automation side for your users is where your website comes into play

  0:18 So, those are my two favorite things

  0:20 um today I want to talk to you about how

  0:22 to use anchor links in your business in

  0:24 your website

  0:26 um it's a really really important thing

  0:29 um to be able to access information more

  0:32 quickly sometimes especially if you ever

  0:33 say a really long sales page or

  0:37 um maybe you want to do a shop program

  0:39 so I'm going to show you a few examples

  0:41 of how I've done this on the previous

  0:42 sites and then I'm going to show you how

  0:44 to actually do it

  0:46 um anywhere on your own site

  0:48 so let's start with

  0:51 this one

  0:52 all right

  0:54 so

  0:55 in her shop we wanted to really

  0:57 specifically

  0:59 um

  1:02 just a second I thought I'd already know

  1:04 this we wanted specifically we don't she

  1:06 doesn't have a shop in this traditional sense

  1:09 we wanted to instead of having a

  1:11 standard Squarespace drawer we wanted to

  1:13 be able to collect everything together

  1:16 um under earrings

  1:19 nose rings etc etc so

  1:23 instead of letting them potentially get

  1:25 mixed up or having to drag them around

  1:26 in the grocery store

  1:29 so what we've done instead is I've put

  1:31 some really fun animations around these

  1:32 as well with some code but

  1:35 what we've done instead is use summary blocks

  1:39 and another page and so in order for

  1:42 people to have to scroll all the way

  1:44 down to get to couplings and now it's

  1:46 you know not terribly far but still if

  1:49 they know they're there for cufflinks

  1:51 they don't want to scroll all the way to

  1:52 the bottom they can click this button

  1:54 and yes it's been really slow because my

  1:57 internet's been a bit funny but take

  1:58 some straight to cufflinks you can go

  2:00 back to the top and if I want Rings take

  2:02 some knees straight to rings and that's

  2:04 what the power of anchor links can do another example

  2:0 is I have

  2:12 um a client that I've done these courses for and

  2:17 so um for every one of her courses we

  2:20 create a course directory section so

  2:22 people don't have to go

  2:24 to a specific page so if they're

  2:27 actually in the course

  2:29 the nice introductory thing looks like

  2:32 this take them to the course directory

  2:34 or any of the specific modules and then

  2:39 if they click one of these it will take

  2:41 them directly to that module and even to

  2:43 that video or download so if I click

  2:46 this download

  2:47 it will take me into that module and

  2:49 scroll all the way down the page to the

  2:51 appropriate download so that's another

  2:54 thing and at the top of every one of

  2:55 these Pages we also have the ability for

  2:57 people to jump to the thing this makes

  2:59 it really mobile friendly

  3:01 um especially for this course A lot of

  3:03 them are mums that are probably watching

  3:04 them on with their phone Silence with subtitles

  3:08 um while they're breastfeeding so

  3:10 that is another way to use anchor links

  3:13 of thing the way that I've used it with

  3:15 a client recently is it has a really

  3:18 really long

  3:19 training page all of her offers are

  3:22 listed on one page I didn't set this up

  3:25 um but I did help her utilize it better

  3:27 so she

  3:30 has all like this really long page of

  3:33 all the different ways people can work

  3:34 with her

  3:35 so instead we've created these sections

  3:39 of the page so if somebody wants to go

  3:42 to her coaching

  3:45 it Scrolls them all the way down to coaching

  3:48 and that's all automatic and we've

  3:50 embedded Acuity here so people can just

  3:52 book in and it makes it really easy for them

  3:55 and for her makes it really easy both

  3:58 directions so the way we've done this is

  4:01 by creating just links in the navigation

  4:03 that are connected to that anchor tag so

  4:07 let's look a little bit about how to do this

  4:10 um this is the page that I do all my

  4:12 teaching from it's just a really basic

  4:14 page of Squarespace that I call my sandbox

  4:19 um so let's start with the thing you

  4:21 need to start with when you're creating

  4:22 anchor blocks is a code block so you

  4:25 need to add a code book and I'm going to

  4:27 add that just up here in the corner when

  4:29 you've done it it will kind of hide in

  4:31 the background so you don't really need

  4:32 to worry too much about it

  4:34 um but I'm just gonna

  4:36 make this as small as possible for the

  4:39 sake of that and there I will link this

  4:42 in the video but this is squarespace's support

  4:46 um page on how to use Interlink so they

  4:49 have their own tutorial here too but I

  4:51 wanted to make sure it include some

  4:52 examples of how it really can work for

  4:54 your business

  4:55 so this is the code you're going to need

  4:59 and this so if you can go ahead and then

  5:02 paste that into the site now you can see

  5:04 it says this is where the link will jump to

  5:07 I always just delete this nine times out

  5:10 of ten you don't want this text to be

  5:13 seen unless maybe it's a back to top

  5:15 button at the bottom of your website

  5:17 um but normally you don't want there to

  5:19 be any tests here so just go ahead and delete that

  5:22 and then unique ID what's in quotes

  5:24 there should be whatever it is so I'm

  5:26 gonna call this sandbox

  5:33 it's spell sand sandbox section one for

  5:37 me that's what I'm gonna call this and then

  5:40 I'm going to do the same thing in

  5:42 section two so I'm going to add a block

  5:45 I'm going to add some code in this case

  5:47 I'm going to hide it up in this corner here

  5:50 and then I'm going to paste that same code

  5:53 probably should have copied it without all this

  5:56 and I'm going to call this sandbox 2.

  6:04 now I can make this even easier for

  6:06 myself if I want to duplicate this and

  6:09 drag it

  6:12 oops

  6:14 I don't think you can drag it into the

  6:15 next section unfortunately which I was

  6:17 hoping you can do but what I can do

  6:22 excuse me still on the other side of

  6:23 this cold

  6:25 it's just copy and paste the text okay

  6:27 so add code block

  6:29 hide it up in this corner

  6:33 and that

  6:37 doesn't seem to want to get any smaller

  6:39 than that which is fine you could

  6:40 technically put it to the back but you

  6:41 don't really need to

  6:43 all right and then I'm gonna also make

  6:45 sure because you don't ever want to have

  6:47 any section IDs or IDs that are the same

  6:49 that can be really problematic so I'm

  6:52 going to update that to three

  6:54 all right I'm gonna hit save the next

  6:57 thing we need to do is so that's telling

  7:00 people that that section is what shows

  7:02 people where they're gonna go

  7:04 um so you're telling the code or the the

  7:07 link here's the idea I want you to jump to

  7:11 but what we need to do now is actually

  7:13 put those links somewhere

  7:15 so you're going to go with your page

  7:18 Slug and then the hashtag and then

  7:21 unique ID so if I wanted to for example

  7:27 um at the top of this page

  7:29 create a text block or or a button

  7:33 actually what I'm going to do is I'm

  7:34 going to delete that I think a button

  7:36 would be better

  7:37 so I'm going to create a button that says

  7:46 take me to section three and you could

  7:50 do this you know with courses

  7:52 um I actually have this on that same

  7:54 yoga instructor she has a course and I

  7:56 have three buttons and they take her

  7:58 students to each different module of her

  8:00 and because hers are videos

  8:02 um collection pages

  8:04 so

  8:05 what I'm going to do is put in this log

  8:08 for this I am not a big fan of the fill buttons

  8:12 okay

  8:13 let's try the fit buttons no The Fill

  8:17 buttons that's the one so I'm going to

  8:19 go to this page and forward slash and

  8:21 this is sandbox too

  8:23 I'm going to do another forward slash

  8:24 hashtag

  8:27 and I'm going to say sandbox

  8:29 free and that's going to take me to

  8:31 section three

  8:34 and that button is saved and we're going

  8:37 to hit save here

  8:38 and we're going to test it take me to

  8:41 section three clicked it there we are

  8:43 section three

  8:44 now we can do the sending order on my

  8:46 website I can put this up in the

  8:47 navigation like I showed you before that

  8:50 same

  8:51 if I just copied and pasted essentially

  8:52 this link

  8:54 and obviously this is an internal link

  8:57 um then I can put this in my navigation

  9:00 I can put it on another page of my

  9:02 website I can put it really anywhere but

  9:05 you could I could even link this from an

  9:07 external website

  9:09 so if I were to give somebody this link

  9:12 um but obviously put calibrator Concepts

  9:18 calm in front of it and then give

  9:20 someone this link it will take them to

  9:22 this the specific section That I Want

  9:24 from anywhere on the web so that's how

  9:27 you use anchor links in Squarespace if

  9:30 you have any questions comments concerns

  9:33 drop them in the comments and I'll get back to you

  9:35 have a good day

Want some hands-on help?

---

You might also like…

---

Pin it!