Snippet / Theme Builder header Code module plus Theme Options > Custom CSS

Skip-to-Content Link for Divi

Adds a keyboard-visible skip link that jumps past a custom Divi header to the main page content.

Place the link as the first focusable element in the custom header, then make sure the page has a main-content target. Classic Divi layouts usually include #main-content already.

<a class="dfy-skip-link" href="#main-content">Skip to content</a>

.dfy-skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 9999;
  transform: translateY(-140%);
  padding: 10px 14px;
  background: #17212b;
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
}

.dfy-skip-link:focus {
  transform: translateY(0);
}

Notes

• Verify the target exists on blog templates, product templates, and landing pages.
• This is small, but it is one of the highest-value accessibility snippets for custom headers.

Sources

• https://wpzone.co/blog/wordpress-code-snippets-divi-tutorials/
• https://wpzone.co/blog/snippet-category/general-divi-tips/