Firstly, welcome to the first Divi Shorts post! These will be short and sweet tutorials on how to get the most out of Divi, the awesome WordPress theme and builder, from a usability and optimisation perspective.
In this Divi Short, we will look at a question I have seen thrown around in the Divi Facebook groups a lot:
“How do you link a menu item or button to a module or section on the same page?”
This type of link, which can really help to funnel users to the right information, is called an Anchor Link. Basically, it points to a specific CSS ID, scrolling the page down so that the section, module or item with that ID is at the top of the browser window. In fact, you can see it in action by clicking the button below!
Now that you’ve seen how it works, let’s look at how it can be set up. Divi actually makes it really easy to do this! As you can see in the image above, if you go to the Custom CSS section, you’ll find a text box titled CSS ID. In here, simply write what you want the name of that section to be within the link address. For example, in the image above, the ID is example so the link URL would show it as “example”.
Therefore, it’s probably a good idea to name the ID something descriptive. So, if I wanted to have an Anchor Link on my page to take users to the contact form, I might call the CSS ID “contact” or “contact-form”. Please note that you should not have a space between words. If you want to have more than one word in the ID, make sure you use the dash/hyphen.
Now that you’ve sorted that out, its time to get the link ready.
Using the “contact” example, we would need to make a hashtag link address that consists of the current page’s URL followed by the hashtag and the CSS ID. So it would end up looking like this;
This would take you to the CSS ID “contact” on the page http://ww..example.com/page/, either scrolling you down to it if you are already on that page, or taking to that section of the page directly if you are on another page.
In terms of actually adding you newly formed link into the menu or button ID, it is pretty simple. For a menu item, just use a Custom Link and add the URL with the hashtag and ID as link target. For a button using Divi, its a very similar process. As shown in the image above, you simply add your Anchor Link URL in full to the Button URL field and click save.
You may notice that I have also set it to open in the same window. Doing this gives the nice automatic scroll. If you open it in a new window or tab, it would simply load the page in the new window or tab at the specified section.
And that’s basically it. Hopefully you now understand how to craft an Anchor Link, and will able to help visitors get the content they need!