divi how to add anchor

2 min read 20-09-2024

If you’re building a website using the Divi theme from Elegant Themes, you might find yourself wanting to add anchor links for smoother navigation. Anchors are particularly useful for long pages, allowing users to jump directly to specific sections without scrolling. In this article, we will explore how to effectively add anchor links in Divi, along with practical examples and additional insights.

What is an Anchor Link?

An anchor link is a hyperlink that points to a specific part of the same page or to a different page. They are commonly used in single-page websites or long scrolling pages where it’s important for users to quickly access different sections.

How to Add Anchor Links in Divi

Step-by-Step Guide

Add an Anchor ID to Your Section:
- Open your Divi Builder and navigate to the section where you want to set your anchor.
- Click on the settings icon of the section.
- Under the Advanced tab, find the CSS ID field.
- Enter a unique ID for your section. For instance, you can type about-us (without the #).
Create the Anchor Link:
- Now you need to create a link that points to this anchor. You can do this in a button, text module, or any other link element.
- Edit the module where you want to add the link.
- In the link URL field, type #about-us (replace about-us with your chosen ID).
Test the Anchor Link:
- After saving your changes, preview your page.
- Click on your anchor link and ensure it scrolls to the intended section smoothly.

Example

Let’s say you have a long page that includes sections like "Home," "About Us," and "Contact." You want to add an anchor link to the "About Us" section.

For the About Us Section: Set the CSS ID to about-us.
For the Link: Use #about-us wherever you want to link to this section.

When users click on the link, they will be taken directly to the About Us section, improving navigation and user experience.

Additional Tips for Using Anchor Links in Divi

Use Smooth Scrolling

To enhance user experience further, consider adding smooth scrolling. By default, Divi may not offer this, but you can easily achieve it with a bit of custom JavaScript or jQuery.

jQuery(document).ready(function($){
    $('a[href^="#"]').on('click', function(event) {
        var target = $(this.getAttribute('href'));
        if(target.length) {
            event.preventDefault();
            $('html, body').stop().animate({
                scrollTop: target.offset().top
            }, 1000);
        }
    });
});

Keep IDs Unique

Make sure the CSS IDs you create are unique across the page. Having multiple elements with the same ID can lead to unpredictable behavior in navigation.

Mobile Responsiveness

Always test your anchor links on mobile devices to ensure that the scrolling functionality works properly, and that the links are easily accessible on smaller screens.

Conclusion

Adding anchor links in Divi is a straightforward process that significantly enhances user navigation. By implementing these steps, you can create a more organized and user-friendly experience for your visitors. Remember to use unique IDs, test thoroughly, and consider smooth scrolling for the best results.

By following this guide, you will not only improve navigation within your Divi-built website but also provide a seamless browsing experience that keeps users engaged and satisfied.

References

By incorporating the insights and techniques discussed here, you're now equipped to effectively use anchor links in Divi, ensuring a professional and user-centric website design. Happy building!