Creating Anchor Links

this tutorial will go over creating

anchor links and showing how to put in

the link and then where the link will go

like where to put the anchor link so

this page kind of does a good

explanation of it so this is what you

would link so this is the text or you

could put this in a button or whatever

you want to link this is what would go

for that link so if you’re doing some

text like let’s just grab this from this

example this is the text that we want to

link that we want to add the link to so

let’s just I’m doing this on the

typography page let’s just put it right

here just create a text block here add

in our text so now this text will have

this link because we’re still using the

H ref right there the href equals the

pound sign make sure you have the pound

sign and then the name of the anchor

link right after it so pound anchor and

then what we’ll do then is then we’ll

place this wherever we want that link to

go to so if we grab this copy that and

we can save this let’s kind of Center it

a little bit here will Center it that

should be good and let’s say we want to

link that down further down the page so

what we want to do is we want to add one

at the text blocks let’s say we want the

link to go right above this text right

here we can either add it to this text

or if it’s something where you can’t add

text like a text block you can just

create your own text block like this

put in where the link is going to and

this is all that you’ll put in there

you’ll just put the the a name equals

anchor and this name right in here is

the the name after the pound sign that

you put in in the link like where you

linked up the text so you want to make

sure that those names match up but in

this one you don’t you don’t include the

pound sign you just include the name so

if we look at them both kind of together

like this you have your link this is the

link with the pound sign and the name

and then this is without the pound sign

and this is where it’ll go to so since

we already have that towards the top of

the page will show you how this works

and out on the front end like this it’ll

pie show a blank spot but that’s okay

when you go in there I’ll show like a

little anchor icon and it’ll still be in

there so that’s no problem it’ll just

show a blank area so we have our link

text up at the top and it should then go

down towards the bottom so we’ll check

that out

all right so here is our linked up text

when we click that it takes us down

right to the spot where we put the

anchor link or we put the the the second

part that with the name equals anchor so

what that’ll do is whenever it’s clicked

it’ll just go down to where that that

the the anchor name was and that’s how

to link that up to do this in a button

let’s say we have a button the link for

this you’d actually put the same thing

that you put in in here so you would put

the pound sign with the name and that’s

it so that’s what you would put in the

button like that so now when this button

is clicked it’ll go down to that the

anchor link let’s update that see how it

looks

oh we have some text in there let’s add

a little text

Update

okay now so we got that in there if when

we click this it now goes down to the

bottom where the linker link is if we

want to link this to another page that’s

something a little different you’ll have

to you’ll have to add more to the link

so let’s say for example let’s say on we

can add this somewhere else so let’s

grab this we’ll grab that remove it from

here and we will put this on a different

page and we’ll show you how to link to

that so let’s say we go to maybe I’m not

sure to use an example here we could

just go to a downloads page on a page

that should work or actually let’s go to

a news and events page so this is the

Stark County news and events page and

let’s say we have a button that takes

them you know check out our latest Stark

County news something like that and you

want to direct those people right to

where like the blog posts are so all we

want to do is we want to put that link

that we have let’s say because the blog

post show up here at the bottom so let’s

add a textblock right here and we want

to put in our anchor right here and

let’s put in let’s change the name of

this to news so since this is on the

Stark County news and events page and we

are linking to it from a different page

we need to add more than just than just

the anchor link we need to include

everything before it so this is now news

and since it is on the Stark County news

and events page we need to grab the URL

from the top I don’t have the video up

there but we need to grab the URL from

the top everything after comm so then we

put it in here so everything after comm

we don’t need to include everything

before it because the website

automatically puts that in so here’s our

new link this will link it to the Stark

County news and events page and then we

want to put it put in our anchor link

right after that because this will tell

it to go to this page and then it will

tell it to go down to this anchor and we

put that anchor in right down here at

the bottom so let’s update this page

let’s go back to our link so here’s our

link text we will also do the button

here do I not save actually

okay I must not have saved that right

okay

so we’ll put that back in there is our

link that is now news oh I didn’t save

it that’s right and let’s copy this so

we can put in our button go to our

button put in our link all right so

let’s go into Stark County news and

events and the news anchor and we’ll

update that all right so now let’s

refresh our page that has the links on

it and we’ll try it out when I when I

hover over this you can see down towards

the bottom left down here that the URL

pops up so that should go to Stark

County news events and the news anchor

so let’s try it out there it goes so the

anchor link I put in was right here

right below this text so it went right

to the blog post on the news and events

page so now if I go back and try out the

button that has the same link in there

takes its darkened County right down to

our anchor so that that’s also you can

also do that in the main menu like if

you create a menu item you can also add

an anchor link to that the same way you

would just put in the link like this you

just put in that link to wherever the

anchor would be when you just a quick

recap on that when you link something on

the same page you don’t need to include

all the URL information that’s just for

linking to a different page with like an

anchor on a different page so that’s the

the basics of the anchor links I’ve used

this page before a few times just kind

of refreshing my memory on it so I’ll

include this in the website handbook –

just a link to it and that should do it

Categories
Get Website Results
to our Youtube Channel

Follow Us

Stay in the Know Via Email

Request Free Consultation