Do you want to improve the usability and navigation of your Divi website? Anchor links can effectively structure your content and enhance navigation, especially on a website with long-form content. Apart from navigation, one of the most important advantages of Divi anchor links is perfect for SEO.
However, it can be hard to know where to start while the concept of anchor links is clear. Therefore, when you initially started designing WordPress websites, it was one of the first things you must hunt for.
This article will demonstrate how to add, use, and make cool effects with Divi anchor links. You’ll learn how to improve your site’s navigation and general user experience at the end of this tutorial. But first, we start with the defining anchor link for those who don’t know about it. So let’s begin!
What is an anchor link?
An anchor link is each id you can use to link to a specific content block or element on a page or post. It will take a user to that particular “anchored” portion if they click (or search for) the page/post URL followed by the anchor link.
You have the option of using CSS IDs as anchor links in Divi. Using the Divi Builder, you can add a CSS ID to any part or module you have access It. For example, let’s say you want to give a portion of a webpage the CSS ID “demo” Let’s also evaluate the website’s URL: “www.domain.com/sample-post.”
So now, if you type “www.domain.com/sample-post#demo” into your browser, it will open the website and immediately scroll you to the portion with the anchor link.
How do I anchor a link in Divi?
Using the Divi anchor links on your website will enhance your user experience. But first, we will give you a basic idea of how anchor links function at this level and how can you include them into your website’s UI and UX? So, here are a few practical examples of how to use Anchor Links in the Divi theme.
Create a one-page website
Create a one-page website using Divi builder either you can use the prebuilt template or customize the template. Single-page or one-page websites are great for giving users all the information they need without requiring them to jump around your site.
However, if the one-page webpage is too long, it may not be easy to navigate between sections. As a result, here’s a step-by-step tutorial on making a one-page navigation menu with anchor links.
Assign anchor links to Divi sections
You can use connections to create anchor links for the various sections of your one-page website. Then under the Menu, establish links that allow customers to jump between sections easily. We’ll use one of Divi’s predefined templates for the sake of this article. Here’s a basic example of how to integrate this functionality on your website.
One Page Layout Example
We use a predefine Digital payment layout that is the perfect example of a one-page format with multiple scrollable sections. So now the question comes, how to add anchor links to the areas and make the page easy to navigate?
The dome template we equipped has several sections like home, our services, sending payments, getting paid, our customers, reliable Partner, and many more. So now we add anchor links that will skip some sections to get us to the destination.
Divi Anchor links step by step procedure
Well, the first step is to understand which sections on the page you need to link. So, we connect the Learn More button to the bottom of the page named Getting Paid. For that purpose, we use CSS Id to apply this feature. Navigate to the Advanced tab and add the Demo as a CSS Id to the Getting Page section. Then, click the Green Tick icon to store your CSS Id, as shown below.
Now go top of your page using the back to the top button, or scroll up and add this id to the post, section, or button. For example, we gave this id to the Learn More button by clicking on the settings. Once the settings are open, scroll down to the Link and add #demo into it. Now you may use this feature in different sections or buttons.
Build a One Page Navigational Menu
For one-page websites, this type of menu design is popular. Creating links in the Menu to go from section to section on your page can be effective. It will work with any predefined layout, but we will use the same template design that we already used above.
First, you need to login into the WordPress admin penal dashboard, and on the left sidebar, navigate to Appearance and then click on the Menu. Once the new page opens, you’ll have to create a new Primary menu and add custom links for each page section.
Build a Primary Menu
To build the primary through custom links, you must enter the specific CSS ID for the area you want to jump to must be prefixed by a hash-tag (#) in the URL field. If you need an anchor link for the Our Services, type #OurServices to establish a menu anchor in the URL field for our Services section. We’ve now developed a special link for each area of the website based on this logic.
Next, you will have to complete the menu by adding the sections or pages in it. We create a menu list home, Our Services, Sending Payments, Our Customers, Reliable Partner, and Contact Us. You can create your custom menu as per your requirements. Click the Save Menu button when you’re finished. Also, double-check that Primary Menu is selected as the display position.
If you have an issue while setting the contact form, check out this article that assists you in configuring with step by step procedure.
Finally, go to the main page, and assign the ID as per the menu list. Next, you need to add CSS IDs to each section you want to link (or scroll).
However, open the settings section, click the advanced tab, and add CSS IDs. Once you are done with all the CSS IDs, Save these settings and check that everything is working fine.
Build Table of Content using anchor links
Suppose you’re creating a long-form article of more than 2000 words. Within the content, you most likely have a lot of headings and subheadings. If that’s the case, wouldn’t it be good to be able to jump between the many titles and subheadings quickly? You may have already noticed this functionality on other websites that use a table of contents.
To make this feature available in WordPress, you’ll need a “table of content” plugin. Users of Divi, on the other hand, do not need to install any additional software. Instead, the full functionality can be controlled solely by anchor links.
Add ID attribute to header tags.
Use the Divi Builder to open an existing post or create a new one to add the Id for headings. Now open the module settings for a text module that contains the article headings. Next, open the Text section under the Content tab and switch to Text view. It will display the material in HTML format, however, if you want to hide the header or footer, check out our other article which will assist you in hiding them.
Add CSS ID to Heading
The heading should have HTML formatting by default like this:
<h2>Heading First </h2>
We require to tweak it and add an ID properties like this:
<h2 id=”heading-first”>Heading First </h2>
All you have to do is assign each of the headings in the post a unique ID. It’s now time to start making the table of contents.
Assigning Divi anchor links to the Table of Content
A table of contents is a bullet list that represents the entire content. However, you should use a nested bullet list to highlight the headings and sub-headings to make a beautiful table of content. It’s time to add the anchor links to your table of contents after you’ve finished creating it.
Again, we will use the href tag to get the id’s, and like previously, the id property will be followed by a hash-tag (#) in the URL. After you’ve finished customizing the text module, click the Green Tick and Save your changes. Now it’s time to put this feature to the test anchor Links in the Table of Content, and there you have it: a unique Table of Content created with anchor links and Divi.
Use the Divi Dot Navigation
To explain this, we can take the previous example. We can now jump to three sections on the website ( Our services, Contact Us, and two more areas) not just through our menu anchor links but also from a completely different page to add CSS IDs to those sections.
When creating a link on a separate page, you have to use the anchor link’s URL. So, for example, it would look like this: www.yourdomain.com/page/#ourservices if you wanted to link to the services section with the ID our-services. It works well for various calls to action (e.g., learn more, Read me! etc.) that you might want to link to from multiple pages on your site.
Divi dot navigation is technically built-in anchor connections. You won’t need to add any CSS section ids of your own. The Dot Navigation function builds anchor connections from your sections automatically.
Switch the Dot Navigation option to ON in the Divi Page Settings at the top right of the screen while editing your page to enable dot navigation. That’s it.
Conclusion
So there you have it, a short tutorial on using Divi anchor links in the Divi theme. We hope that you find this article informative and that it inspired you to improve the UI and UX of your Divi website by using anchor links.
That being said, if you’ve already figured out a clever way to use anchor links, please share your strategies in the comments section below. It might even inspire one of your patterns, so share your opinion in the comments below.
