Anchor links can improve navigation and help organize your content, especially on a website with long-form content. One of the other main benefits of using anchor links other than navigation is the fact that they are awesome for SEO. While the concept of using anchor links is very simple, it can be hard to know where to start. It’s actually one of the first things I went hunting for when I got started developing WordPress websites.

This article shows you 5 cool things you can do in Divi with anchor links. For these examples, all you need is Divi and a desire to learn. Let’s go!

What You’ll Learn:

  1. Open an Accordion Item with an Anchor Link in Divi
  2. Create a One Page Navigational Menu
  3. Jump to a Page Section from Another Page
  4. Use the Divi Dot Navigation
  5. Add Anchor Links to Your Headings

Accordions are one of those elements that can enhance user experience.  Call me lazy (I’d use the word efficient) but the easier it is for me to get my information, the better. I’m a big fan of accordions for certain types of content.

One of the best uses I’ve seen for accordions are for FAQ pages. They work great for revealing small bits of information that the user wants to focus on. This will only take a minute and a few lines of JavaScript to complete. You can also use a variation of this method to open tabs or toggles and while this may seem difficult, but it’s really not too complex. Let’s get started.

First, open up a post or page from the dashboard and create an accordion. Go ahead and add at least two items. See the documentation on the accordion module if you need help using it.

Next add unique CSS ID’s to each Row Module. I chose the characters #my-accordion to id the accordion, and #open-accordion to id the text module where I am placing the link. The names are arbitrary, feel free to choose any name you want, just make sure the names match in the JavaScript code snippet.

5 Cool Things You Can Do In Divi with Anchor Links

Click to enlarge

Now you can insert the anchor link. I put it in a Text Module. Since we are linking to a section on the same page, all we need to add is the characters #my-accordion.

5 Cool Things You Can Do In Divi with Anchor Links

Click to enlarge

Navigate to the Divi Theme Options, and open the Integration Tab then paste the following code into the body section as shown in the GIF below.

jQuery(function ($) {
    //accordion
    $('#open-accordion-dance a').on('click', function(event){
        $('#my-accordian .et_pb_accordion_item_1 .et_pb_toggle_title').click();
        $("html, body").animate({ scrollTop: $('#my-accordian').offset().top }, 1000);
    });
    //tab
    $('#open-tab-dance a').on('click', function(event){
        $('#my-tabs .et_pb_tab_1 a').click();
        $("html, body").animate({ scrollTop: $('#my-tabs').offset().top }, 1000);
    });
});
5 Cool Things You Can Do In Divi with Anchor Links

Click to Enlarge

Now you can test out your page to see if it works.

5 Cool Things You Can Do In Divi with Anchor Links

Click to enlarge

Close Accordions by Default

Divi leaves the first accordion open by default. To make all the accordion items closed by default, paste the following code into your footer.php file as shown in the GIF below it.

jQuery(function($){
    $('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
    $('.et_pb_accordion .et_pb_toggle').click(function() {     
      $this = $(this);
      setTimeout(function(){
      $this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');      
},700);
    });
});
5 Cool Things You Can Do In Divi with Anchor Links

Click to enlarge

Now reload your page and the accordion will be closed by default.

5 Cool Things You Can Do In Divi with Anchor Links

Click to enlarge

Create a One Page Navigational Menu

This sort of menu design is popular for one page sites. It can be useful to create links in the menu to jump from section to section on your page. This is especially helpful if you are building a one page site, or a landing page.

First you need to add ids to each section. We have 3, respectively named section-1, section-2, and section-3.

5 Cool Things You Can Do In Divi with Anchor Links

Click to enlarge

From the Dashboard, navigate to Appearance > Menus and create a new Primary Menu.

5 Cool Things You Can Do In Divi with Anchor Links

Click to enlarge

Now when you visit your page you can try it out. You may notice that there is smooth scrolling. This is because the Divi theme automatically adds smooth scrolling – this feature was added in Divi version 2.4.

5 Cool Things You Can Do In Divi with Anchor Links

Click to enlarge

For a more in depth tutorial on building a killer one page style website, see our post on How to Build a Responsive Fixed Sidebar With Anchor Links.

Jump to a Page Section from Another Page

We can use the example from above to demonstrate this. Just add the #section to the URL on the page you want to create a link to that particular section. If you wanted to put a link to section-3, it would look something like, www.yourdomain.com/page/#section-3. This works great with a call to action (i.e. learn more, get Divi, vote for me!, etc.)

Use the Divi Dot Navigation

Technically these are built-in anchor links. You won’t need to add your own CSS section ids. The Dot Navigation feature automatically creates anchor links out of your sections. Once you turn on Dot Navigation, Divi automatically adds a transparent menu on the side your page. These are great on laptops and desktops, but they aren’t always so user friendly on tablets and phones. Take a look at our post on How to Turn Off Dot Navigation on Phones and Tablets if you want to turn these off for mobile phones and tablets.

5 Cool Things You Can Do In Divi with Anchor Links

Click to enlarge

Adding anchor links to your headings is always a good idea, that way you can setup longer pages for easy navigation or create links to sections from other pages on your website. It helps search engines crawl your site, too. Since you already know how to add a CSS id with the Divi Builder, we will show you how to add it from the text editor.

Open up the Text tab in the WordPress text editor. Simply locate the heading of your choice and add the characters id=”section-name” inside the heading tag as shown below. The section links are at the top of this post.

5 Cool Things You Can Do In Divi with Anchor Links

Click to enlarge

Wrapping Up

Anchor links have a few great practical uses, but don’t go too crazy with them because you must always first consider your audience and your goals. Remember, good design is about usability and function so, in some instances anchor links can be very helpful. But in others, it just means users zap back and forth over the parallax sections and wind up getting lost. Hopefully, you were able to get some useful tips from this post.

Do you have any tips or questions about anchor links? Let us know about your experiences in the comment section below.

Article thumbnail image by umka245 / shutterstock.com 

The post 5 Cool Things You Can Do In Divi with Anchor Links appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!