Add jump-to anchor links in divi tutorial
Do you ever write really long blog posts with a bunch of defined sections and then realize that someone with a bit more experience may want to skip over the first 3 sections?
Or maybe you design an awesome sales page for your client’s signature service, add a button that says “See Pricing” and realize you want that button to scroll down the page to where the pricing is messaged?
This functionality can be done with coding or, if you’re like me and swear by the Divi theme, you just need to make a couple quick changes to your modules to add jump-to anchor links in Divi! and voila! Functionality added.
What is an anchor link?
First off, what is an anchor link? You may have heard of an anchor link as a jump-to link. They’re the same thing but a jump-to link basically explains exactly what an anchor link does.
When clicked, an anchor link will drive your website visitor down the page to a designated spot. The action of clicking the anchor link will cause the webpage to automatically scroll down (or up) to whatever spot on the page you choose.
When should you use an anchor link?
There are a bunch of ways to use anchor links! Below is a list of recommendations but it’s not all-inclusive. If you feel that an anchor link would benefit a website you’re building, add it.
How-To Blog Posts
Tutorial style blog posts typically include steps that start from the very beginning of a process. Your readers could vary from complete newbies to experts. To cater to everyone in your audience, including a table of contents at the beginning of the post and setting them as jump-to anchor links would allow your more advanced audience to scroll right past whatever info they don’t need.
Check out the following example!
In this blog post you’ll find…
- What is an anchor link?
- When should you use an anchor link?
- How to create anchor links using the Divi theme
Long Form Sales Pages
Sales pages that are designed strategically and set up to convert have buttons all throughout the content. Typically the buttons say either “LEARN MORE” or “SIGN UP NOW.” Obviously, the “SIGN UP NOW” button would link to the registration page but what about the “LEARN MORE” button?
Well, the “LEARN MORE” button could link further down the page to a specific set of information. For example, the pricing or the section that explains what’s in the course. If that’s the case, you want to use anchor links to drive people down the page to the designated section.
Short Sales Pages that Feature Multiple Services
As a new entrepreneur, you may offer multiple services. When you’re still trying to figure things out, that makes sense. (But don’t stay that way for too long!)
Let’s say you’ve narrowed your offerings down to two things: branding and web design. And let’s say your target audience is new entrepreneurs. A majority of your clients want both branding and web design and because of that you message both of these services on the same page.
But sometimes you take on a client who just wants branding or just wants web design. You can use an anchor link near the top of the page that link to the branding section and another that links to the web design section.
How to Create Anchor Links Using the Divi Theme
Now that you know what an anchor link is and three different ways to use them, let’s dive into the actual process of creating the anchor links.
There are two main ways you can add jump-to anchor links in Divi. The first way is by using a button module and the second way is by linking just a specific bit of text within a text module.
Creating an Anchor Link Using the Button Module
The first step is to add a button module to your post or page.
Setup your button how you normally do, add the button text, and change the design if needed. Then navigate to the “Link” section underneath the “Content” tab.
Here you want to add a pound sign / hashtag sign (for you millennials and younger) followed by a label. The label should explain where the button is going to drive. In the example below, the button is going to drive a website visitor down the page to the pricing section…
Click the green check mark when you’re done.
Next you need to determine where the button is going to link. Locate the module you want to link to and open up the settings.
On the “Advanced” tab open up “CSS ID & Classes.”
Enter the exact same label you used in the “Button Link URL” into the “CSS ID” section.
Make sure you remove the pound sign / hashtag.
Click the green check button when you’re done.
Now when you click on the button, it will drive you up or down the page to the designated module!
Creating an Anchor Link Using a Text Link
What if you want to link somewhere using a piece of text within a paragraph? You can!
The first step is to add a link to the text within the paragraph.
In the “Url” field, enter the label you’ve created with the pound sign / hashtag in front of it.
Next you want to add the label (excluding the pound sign) to the “CSS ID” field in the settings of the module you want to link to.
That’s a Wrap
There you have it! Now you know what an anchor link is, when to use them, and how to add jump-to anchor links in Divi.
Just one additional trick you can add to your web designer tool belt!
STRUGGLING TO GROW YOUR WEB DESIGN BIZ?
Join the Web Designer Collective and get access to the free resource library, plus receive occasional emails to help you grow your web design business.