Up next in 10
How to Create Anchor Links to Other Pages in Elementor (Step-By-Step Tutorial for Beginners in 2024)
3K views
Feb 27, 2024
Learn how to create smooth scrolling anchor links between different sections or pages within your Elementor site in just a few simple steps. This 2024 tutorial clearly shows Elementor beginners how to navigate to the link settings, customize your anchors, link to other pages or sections, customize link text and formatting, utilize best practices, and troubleshoot issues—no coding or technical expertise required.
View Video Transcript
0:00
Hello guys, welcome to this new video. If you want to add a specific anchor point linked
0:05
into Elementor, the first thing you want to do is to locate the very first page that you
0:09
want to make the link, for example here it says sign up now. What I want to do is to
0:14
merge, I want to change, or let's say I want to make this button to send you into a form
0:23
So there's two ways that we can do this. If you want to like do it all in just one page
0:27
I think that this might be more easier to actually do that, but I think that I'm going
0:33
to go and try to do both ideas so you can figure out which one fits for you the best
0:39
So I'm going to go into button, and I'm going to try to import that into in here, like that
0:47
So what I want to do is to, let's say that I want to go in back here, and I want to go
0:53
into heading, like that, and I want to import that in here, I want to just try to make an
1:01
inner selection, like in here, and here I want to import my first and my second, like
1:11
that, or you can just copy paste if you want to, but you don't have to actually worry about that. If you mess it up, you can always go into delete, and with that being said, I can
1:19
go once again into the button, and I'm going to just drag and drop, like this
1:24
So what I want to do is to create two different templates. So here into the alignment, I'm
1:31
going to go into the center part, here into typed, you want to go into info, and I'm going
1:37
to go into style, I'm going to do something related into what I just created before, so
1:42
I'm just going to go into like this, and I'm going to try to use maybe not the same color
1:48
I'm going to use something more yellow, like this, there we go, and here I have the text
1:55
shadow, I have the background type, or even what I can do is to duplicate this one, I
2:02
can delete this button, like that, and I'm just going to be the drag and drop, so I can
2:09
have two different options. So here, instead of sign up now, let's say I want to delete
2:15
it and I want to change schedule here, or let's say contact us here, of course, I'm
2:25
going to leave it like that. So there you go. So now, what I want to do, of course
2:29
is to make the anchor point. So we go into the very first one. And actually, I'm going
2:34
to leave it like that, I'm going to scroll all the way down. And here I want to focus
2:40
into the sign up now. So here, go into this part, I'm going to locate the form. There
2:50
we go. When I make exactly the same thing, drag and drop, I'm going to try this once
2:54
again, because I'm not pretty sure what is the didn't actually work. So here we go. So
2:59
you have the actual name, the email and the message. So what I want to do is to try to
3:06
change the actual content that we use in here. So here into style, what I want to do
3:14
is to change the actual colors. So here into buttons, which I was this actually green
3:20
I want to change that into blue. There we go. Something like this. And a little bit
3:26
more bluer like this in the background color, I'm going to leave like that. There we go
3:32
And hit into update. So what I want to do is to scroll all my way up, select my first
3:38
anchor point in here into linked, I'm going to type here, which is linked, go into content
3:45
focus into link. And here I'm going to type whatever you want to do, let's say for example
3:49
sign. And here I want to copy my actual text here, you don't want to copy the hashtag only
3:57
after the hashtag, because we don't need that scroll where you want to make the anchor point
4:03
I'm going to look into this six dots. And here into advanced, you want to locate for the CSS
4:11
ID. So here at your custom ID without the pound key, that means the hashtag. So I'm going to
4:19
paste that sign up now. And I'm going to hit into update. There we go. So now what I want to do is
4:26
to scroll all my way up. And I want to go here into contact us here, I'm going to do exactly the
4:35
same thing go into content here into content, I want to go into linked, I want to create something
4:40
new contact us here like that. And I'm going to copy this text without the hashtag. Remember
4:50
copy this one, and I'm going to hit into update. And there we go. So once we have successfully done that, what I want to do is to focus now
5:02
into navigation. And here we do have the hero and we have the about we have the benefits
5:08
we have the services to simulation. So on and on and on. So what I want to do is to
5:16
go back here, I'm going to do something else. So for example, here into my landing page
5:22
I want to just close this. And here I want to locate my actual, my actual what what editor
5:30
So back into my dashboard, I select here my template, I'm going to go into the end with
5:35
Elementor. And I did exactly the same process as I did before with another page. So what I did here
5:43
is that I just change it the this is the title, you don't have to worry about this
5:48
you want to learn more, click here to learn more and make the connection between this button
5:52
And I scroll all the way down. So I can when somebody clicks in here
5:57
you're going to be sent it right away into the viewer here. So just to make sure that this one
6:01
actually works, scroll all the way up, clicked in there. And as you can see, automatically
6:07
this has been redirected into the very second part. So if you want to do exactly the same thing
6:13
between one and another one, I can strongly suggest you to let's say, for example, to add
6:18
something else here, I'm going to go into my Elementor, I'm going to go into my actual inner
6:24
selection. And what I want to do is just to click in here. And I'm going to copy and paste that
6:34
information here. So what I can do is try to use exactly the same thing. But instead of just copy
6:41
and paste within the same page, I can change from one page into another one. For example, go
6:48
go back here like that. And here I want to select here this element. And I want to get into the
6:56
edit. And I want to duplicate that. So once I duplicate this button, I can now drag and drop
7:02
here. And instead of choosing the click here, I'm going to type the hello world like this. And I'm
7:11
going to copy this link. And then what you can do is to go back into your actual WordPress
7:17
select the actual page that you want to make the template. And in this advanced section
7:24
css ID, paste my custom margin without a pound key and hit into update. So as you can see
7:33
this is how it works. I click in here, and of course, going to be sending me into the new page
7:39
But this is only just to do this live, but I need to change these later. But now you guys know how
7:45
to do this. It's really, really simple, actually how to do this. So in that case, guys, with that
7:49
said, we reached the very end of the video. So thank you once again for watching the video
7:53
Don't forget to like and subscribe to the channel guys if you want to see more amazing twos about
7:58
the WordPress and the element or you guys know how to use this as your favorite how you can use
8:05
this as your own witness. So thank you once again for watching the video guys. And I'll see you next time