How to Create Anchor Links in WordPress Using Elementor

[Music] hello and welcome to wp click's youtube channel in this video we'll show you how to easily set up elementor anchor links generally links help us guide users to other pages on our site or to external pages on other sites however we can also use links to connect to certain page sections that's where anchor links come in an anchor link is a link that helps you navigate the page you're on by taking you to a specific section on it anchor links are especially useful for navigating one page sites or simply long sections of text the example i'll be using today is this by clicking on this link here digital solutions will be taken to a page section that addresses this topic in more detail links like this can be very useful in helping you organize your site content now let's see how you can add these anchor links to your page start by choosing the page or post where you want to have the link i'll be using a post to show you and let's open it for editing with elementor now on our page backhand we need to find the text that we plan to use to anchor our link and we need to decide which page section we'll be linking it to i'll be using this section here once you have that tool picked out you'll need to find the elementor element that will help us create our anchor link the one we'll be using is the default element available even with the free version of elementor it's called menu anchor find it and then simply drag it to the section which will serve as your link target once you drop it as you can see it creates a space but don't worry this new space won't be visible on the page front so it won't affect your existing page spacing arrangement or layout it can only be seen here in the back and you can also see the element in the navigation panel here the next thing we want to do is to create an id for this menu anchor element so you need to add a name here in this field the name you use depends entirely on you it can be a word a mix of words an alphanumeric combination whatever you like however please note that you can't have any blank spaces here so if you use separate words you need to separate them with a dash or an underscore for example i'll set digital dash solutions once i've done that i'll just copy the id as i'll need it in a moment what i need to do next is find the anchor text i want to use for me that's this text at the start select the element and then link the appropriate word or words which i'll do by selecting them and clicking on the link option here in the text options now i just need to paste in my id but this is important when adding your id you need to start with a hashtag or the pound symbol if that's what you prefer calling it this serves as an id selector so if you leave it out your link won't work after the hashtag you can simply paste in your id and go to apply and that's it don't forget to update your page after that you can check your page front-end to see if everything works as it should there when we click on the link perfect it takes us exactly where we want to go so we've successfully created an anchor link for our page now let me show you a hack for adding a link to an element that's not just text for example this one here when we click we can see that this is an imagebox element but looking at the text field its settings don't include the option for creating a link so what do you do in this case well you add an html tag to this text specifically the tag for links which is open left angle bracket and right angle bracket then between them type a then href equals quotation marks then between the quotation marks add the hashtag and type in or paste your anchor id this completes our opening tag for the link to work you'll need a closing tag as well that is open a left angle bracket in a right angle bracket slash handy that's it you can add this html markup to any text that you want to use as an anchor text for a link you might be wondering why i didn't use the link field within the element settings well that's because i wanted to link only the text and not include the icon above it when you're done update to save the change and we can check the page let's see if the link works yes perfect now you know two easy ways to add anchor links to your page using elementor but what happens if you want to link to a specific section from another page for example what if you want to direct visitors from another page to this section here well the steps are a bit different so let me show you first we need to add the menu anchor element to our target or the section where you want visitors to go so that's here let me find the element okay there and i'll just carefully drop it here about the title if i accidentally drop it underneath then the title will be cut off anyone clicking on the link will get a view of the target section from the anchor point downwards this is where you want to make sure your anchor point is properly set next we need to create a new id for this menu anchor please note these ids need to be unique otherwise the link won't know where it needs to direct you so since the last one was digital solutions this one will be rt for now this menu anchor works just like the one we saw before you can create a link for it on the same page by following the steps we already covered or you can create a link to it on a different page it's at this point that the process starts to differ so to create a link on a different page i'll just copy my new id and update this page after that what we need to do is create a new url you can do that by going to all pages finding the page where you just placed your menu anchor and clicking on view by opening it like this you'll get a clean url for that page whereas opening it using the preview option will result in a url with the suffix that includes the word preview therefore open the page using the view option so this is the page where your anchor is for me that's in the theme section here so i'm certain that this is the right page and i can go to its url in the address bar and add my menu anchor id just paste it in at the end now my anchor is part of the url and opening this new url will take me to the section i picked out let's see it in action there perfect my url will take me exactly where i wanted to since i now know it works i'll copy the whole url i'll need it as the link target and now go to the page that you want to link this url to open it for editing with elementor one moment let me find the text i wanted to use on this page here it is now within it i want to use the words are theme as my anchor text and i'll just select them and click the link option now we need to paste in the complete url we just copied since we're linking from a different page it's not enough to just add the anchor menu id we need to be more specific and note down the complete path to that menu anchor and then click on apply and then update now we can go to preview just to check the page and when it opens let's find the text we linked okay here it is and when we click on this link we get sent to the our theme section on the other page so we've successfully created an anchor link that connects one page with a section on a completely different page now you know how to use elementor to create anchor links that connect sections on the same page or sections across different pages we hope you found this tutorial helpful thank you for watching and for more information on this topic check out the description and make sure to subscribe to our youtube channel

Channel: WPKlik - Tips and Tricks For WordPress Beginners

Views: 6,127

Keywords: how to add anchor links using elementor, how to create anchor links via elementor, creating elementor anchor links, how to create anchor link from one page to another one

Id: 0gpy_omocLQ

Length: 8min 37sec (517 seconds)

Published: Thu Jan 28 2021