Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

hey designers this is Karthik from design school for WordPress beginners the place where I teach you how to design build and customize your websites if you are new here consider subscribing and let's get into the video in this video I want to show you how to add on-page anchor links with Elementor Divi Gutenberg or basically any page builder without installing a plug-in there are lot of ways to do that and I will show you three in this video what are anchor links well as you can see there's an article on Kim star or Tom's website and when I click on this link I will be taken to that particular section well this helps the user to navigate to the part of the website or article that he wants and it's also helpful in improving the user experience plus google shows these in Google search results so there are a lot of benefits to anchor links and we'll see how to add anchor links using Elemental Divi builder Guttenberg and a lot more so in order to add an anchor link you need two things one is the link itself and the second one is an anchor basically so when you click on a link it will be scrolled to that particular anchor right similar to how you would pull a boat to the shore so let's select this one so I just want when a user clicks on this for instance maybe Design Conference I want him to be scrolled to that tickets area so what I will do is that I'll drag my new anchor widget just above where I want and just give it an ID so let's call it tickets anchor don't worry don't affect the design of your site it will be totally invisible it is just as an anchor it won't change your design so once you're done here copy the name oh let's actually link this to that anchor so I'll just click on this and the link I'll add a hash and then paste the name so just like that we've created an anchor link so when I click on this you can see the cursor turned into a hand and click on it I'm actually scrolled to this particular section because that's where I placed my anchor link so it's simple drag anchor link wherever you want to be scrolled and just give that anchor link a name and then go and add the link to anything with a link field so it can even be a button so for instance so we have a button here we'll change the link to an anchor link so when I click on bypass it will be scrolled to that particular section so I will be scroll to this so whatever has a link just type hash and add the name of the link or the anchor that you've added in the anchor links widget there's other way to do it you don't even need to add an anchor links with it so with an elementary itself there's other way to do it and this actually applies to any page builder not just element so I will delete this anchor link instead I'll just click on this tickets area and under advanced I have something called CSS ID well if there's no CSS ID you can give it any CSS ID I'll just call it tickets section so just give it a CSS ID if there's not anything else already present so let's called tickets section and just go to the button and paste the anchor link so it's the same as dragging an anchor link so when I click on bypass I will be scrolled to this area so under advanced just add CSS ID and under link field add a hash and then copy the same name basically that's how you create anchor links in Elementor so you can basically link any particular widget to any other anchor without even actually using the anchor language it if you want to use anchor links widget it's all up to you well the same method applies to Divi builder as well so let's say I want to be scrolled to this area so I'll just click on the toys I'll just click on settings and our advanced I'll just give it an ID so let's go with the same name I'll say choice section can give it any name you want let's give it a name let's save it so it's choice section now anything with the link field so I will just click on this and anything with the link field can be linked to this so just add a hash to it and just copy the name since its choice section just copy and paste the same name and click done so I'll actually open the page that I have added anchor link with a Divi builder and then we just added anchor link to this no more button so when I click on no more it will be taken to this area well you can see that the scroll is not smooth we can correct this we can actually correct it for every page builder and everything all you need to do is to paste a snippet of code in customizer area of your team so from your wordpress dashboard click on appearance and customize and it opens up the customizer interface scroll to the CSS area or additional CSS area of your theme scroll to the end and this paste the snippet of code so it's HTML within paranthesis you have this property called scroll behavior so that will actually correct that sudden jump property so once we've added this I'll actually click on publish I will refresh this page to see if the code is working or not so the page is refreshed now let's click on the no more button again and just like that you can see now the scroll is corrected because of the code that we just added and if we change theme don't forget to add this to every theme that you want so it's HTML scroll behavior smooth just like that it corrects the behavior for most teams and also most page builders now there's also a way to do or to add anchor in Gutenberg we'll see that now so I just opened the page that I've edited or composed with Gutenberg click on any heading block or any heading or text-based block under advanced just give it a name so I will call it first anchor and under link field of any block or anything that has a link field just simply paste your URL just like that so hash and the anchor name and when you click on this you will be taken to that heading you can also add it to text so you can link your text just like that and just click on this and when you click on this link it will be scrolled to this heading that's how you add anchor links in good mark and that's how you basically add anchor links and improve navigation for your users if you really have long form of articles this is really helpful I will talk to you in the next video peace and that's it for now and hope you guys like this video if you did make sure to give a thumbs up subscribe to the channel and let me know what you guys think in the comments down below and if you need anything else don't hesitate to ask I'm ready to help you catch you in the next video peace .

Video Discription

In this video, I'll show how to create On page anchor links in WordPress using Elementor's Menu Anchor Widget, CSS ID, Divi Builder and even Gutenberg editor.

Anchor links help users jump to a specific section on a page and they also show up in Google search results

Get Elementor Pro:

Code for smooth scrolling:

html {
scroll-behavior: smooth;
}

 

InterServer Web Hosting and VPS

Leave a Reply