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!
-
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
