Create A Skip To Content Link With The Divi Theme Builder

Last modified Mar 25, 2023
Difficulty Beginner
Language CSS, HTML

“Skip to Content” anchor links are an easy Divi accessibility improvement that you can add to your site (one of five such improvements that we talk about in this blog post about making your Divi site more accessible). They provide a way for site visitors using screen readers to skip over the header section of your page, which often contains elements that are repeated across your site, such as navigation menus, and jump directly to the page body content instead. While the header and navigation menus serve an important purpose, of course, they can present an obstacle to quickly obtaining the information being sought when there is no need for the entire menu or header to be read out. The Skip to Content link doesn’t need to be visible all the time; as long as it is focusable through keyboard input, it can be read out and activated when needed.

Here is how you can use the Divi theme builder to add one of these links to your site without requiring any additional plugins. This tutorial assumes that you are already using a Divi theme builder header on the pages on which you want to include the link.

    1. Add a text module to the start of your header.
    2. In the text module settings WYSIWYG editor (Text > Body), add the text that you would like to display for the jump link; for example, “Skip to Content”.
    3. Select the text you just added and click the link button in the editor toolbar.
    4. Enter #main-content as the URL.
      Skip to Content
    5. In the Text module settings Advanced tab, set CSS ID & Classes > CSS ID to content-jump-link.
    6. Close the Text module settings.
    7. Add a Code module below the text module.
    8. Set the Code module Text > Code field to the <style> tag and contents shown below.
  1. Close the Code module settings.
  2. Save the theme builder layout.

You can use the following styling code as a starting point. Of course, you may want to customize it to match the look and feel of your site.







The jump link will be hidden until it is focused. To simulate this with keyboard input, after loading a page containing the theme builder header, press the Tab key on your keyboard until you see the link (you may only have to press it once, or you may need to press it multiple times). It should look something like this:


Skip to Content


Pressing the Tab key again should make the link lose focus and disappear again.

For more ways to improve the accessibility of your Divi site, check out this blog post with Divi accessibility tips!

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.5.3 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment!


License: This snippet contains code from the Divi Theme, copyright, modified by WP Zone, November 13, 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments


  1. Kim

    I have tried adding the text box and a code box to the top of an individual Divi page to change the Skip to Content information. However, it is not showing up at all. What I see when I click the ‘tab’ button on my keyboard is a ‘Skip to Toolbar’ button which doesn’t go anywhere. Do I need to create a new global template page for the site and add the text and code boxes above the header? Or can I somehow get in and modify the Skip to Toolbar code?
    Thanks for your assistance! I need to do this for a big HOA client, so time is of the essence!

  2. Ben

    I’ve followed all this, and then I’ve used a child theme and header.php to place the skip to content link before the navigation. (I’ve disabled transform so I can see the link clearly)

    Doing it either way (theme builder or header.php) I have got a link which is the first one that the tab key focuses on.
    I’ve got a jump link that it takes us to.
    What I still need to work out is how this will then continue tabbing through the content.
    At the moment it goes back to the menu, which is defeating the purpose. The purpose is to bypass the navigation. (Because the site has many pages it takes ages to tab through them all)
    Any ideas?


Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.

Next snippet Search WooCommerce Products and Tags With Divi's Search Module
Previous snippet Add An Advanced Content Toggle To Divi