How to Create Anchor Links in Divi
Welcome to part 6 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.
In this tutorial, I show you “How to Create Anchor Links in Divi!” An anchor link is simply a way to link to a certain “section” of a web page and is very useful for a variety of ways in modern web design. I walk you through how to use anchor links in 3 ways:
- How to use anchor links as a menu item
- How to use anchor links as a text link in a page
- How to use anchor links to link to a certain section in a whole different web page
Links shown in the video:
- Anchor links in the menu – https://turnersbarbershop.com/
- Anchor links to section in the page – https://joshhall.co/product/jump-to-bio-team-page/
- Anchor links to certain section in a different page – http://theretinagroup.com
- Free page layout that was referenced – https://joshhall.co/product/free-image-overlap-page-layout/
Similar Tutorials:
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
great tutorial but I never seem to get it to go to the top of the section, any ideas on how to fix that?
Thanks in advance.
I’ve had that issue too..unfortunately, I think you’d have to anchor the section above for it to show up in the middle of your screen. You could create a blank module above it and anchor it to that. Not the most professional solution but that could work.
Check out tip #3 here: https://www.elegantthemes.com/blog/divi-resources/10-hidden-divi-features-you-need-to-know-about
ooo nice little feature. I didn’t even know about that. Great share!
Hi Thanks for great job with tutorials! Is there any easy way to make links from page-to-page-to-anchor scroll to pointed anchor instead of jumping?
Thanks, Sven! I’m not sure of a way to avoid the jumping unfortunately. Will let you know if I come across a solution!
Josh,
I need a help. How to add section anchor links to project permalinks (Filterable portfólio)?
mmm not sure on that one, Cassio. Would recommend posing that question to my Divi FB group!
Ok, i requested to join the group.
Thanks
Awesome!
Hi Josh,
it seems it is only possible to jump to sections within a page, correct?
Is there no way to jump to a headline? I can not find a way to add a simple Index list to a page (with 10 headlines the reader might want to jump to) – do I need to create 10 sections or is there a better way? It is huge pain. I would use simple html in any other theme, but divi ask me to create a new section / module “code module”.. this can not be it and is so annoying for a simple index. I have been looking for ages. Thank you for any help!
You could add the anchor ID as a link as HTML in the title then link it from there! See this article for reference: https://www.w3schools.com/html/html_links.asp
Hi Josh! Love your Divi tutorials! Do you have one showing how you do the header style on the Turner’s Barbershop page? I love how it’s just a hero image and then the fixed navigation drops in. Thanks!
That’s actually just a Divi page setting! You can hide the navigation until scroll!
Thanks for the tutorial. Very helpful. Question. I find that this works perfectly on a page or if you want to direct to another page or section of another page.
My question is once a visitor links to another page (within the same site), how do they get back to the home page or other pages on the site?
I have not been able to solve that issue.
For example, let’s say the visitor clicks the Services item from the menu and it takes them do to the Services section of the page. But if there is a LEARN MORE/READ MORE button that takes them to a separate page highlighting that particular service, they can’t get back to the main/home page because what shows in the browser bar would be #home. How would they get back to the Home page?
Make sense? Let me know if or how this would be resolved.
Thanks.
If I understand this correctly, I would thing you can just add the entire home URL as that link to bring them back to the home page!
Thank Josh,
It is a fantastic video, and It made it so easy for me