Code Library

 

JavaScript

Keyboard-Accessible Clickable Modules | Blurb Modules
This script enables full keyboard accessibility for Divi modules that use the
.et_clickable class (such as Blurbs, Images, or CTAs with link URLs).
It adds accessibility and link activation behavior that Divi’s default code doesn’t provide.

What this script does:

  • Makes non-anchor modules (.et_clickable) focusable with tabindex="0".
  • Adds role="link" so screen readers announce the module as a link.
  • Allows keyboard users to activate the link using Enter or Space.
  • Uses each module’s built-in data-href attribute for navigation.
  • Supports opening links in a new tab if data-target="_blank" or data-link-target="_blank" is set.
  • Automatically skips modules that already contain a real <a> tag to prevent double navigation.
  • Runs automatically after the page loads and re-applies itself if new modules are added dynamically (in sliders or the Visual Builder).
  • Does not apply any visual hover/focus styles — you can control appearance entirely with your own CSS.

How to add this script:

  • Site-wide method:
    Go to Divi → Theme Options → Integration and paste this entire script into
    the “Add code to the <body> (good for tracking codes such as google analytics)” box.
    Save changes — it will run automatically on all pages.
  • Page-specific method:
    Add a Code module anywhere on the page (for example, in a footer or header row).
    Paste this script inside the Code module and save.
    It will only apply to that page.
  • Important:
    Always add this script inside a Code module or Integration field — never in a Text or Toggle module on a live page,
    since that would display the code rather than run it.

When to use each version:

  • General Script:
    Use this version for most projects where your clickable modules are standard Divi Blurbs, CTAs, or Images
    that do not contain real <a> tags inside them.
    It’s lightweight, simple, and runs site-wide without any customization.
  • Scoped / Advanced Script:
    Use this version when you’re building reusable templates or more complex pages that: 

    • Contain a mix of clickable and non-clickable modules.
    • Load modules dynamically (e.g., sliders, AJAX, or Visual Builder updates).
    • Need to limit where the keyboard-accessibility applies (for example, only in .quicklinks-column).

    The advanced version is safer for large or shared environments and prevents double-link activation by automatically skipping modules that already include a real anchor (<a>).

General-Purpose Script (lightweight, site-wide use)

<script>
(function () {
  document.querySelectorAll('.et_clickable').forEach(function (el) {
    if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');
    if (!el.hasAttribute('role')) el.setAttribute('role', 'link');

    var href = el.getAttribute('data-href');
    if (href) {
      el.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          window.location.href = href;
        }
      });
    }
  });
})();
</script>

Scoped / Advanced Script (for dynamic or mixed modules)

<script>
/*
  Divi Clickable Modules (Scoped A11y Enabler)
  - Adds keyboard access to .et_clickable modules
  - Skips any that already contain <a> tags
  - Safe for shared templates
*/
(function () {
  function upgrade(el) {
    if (!el || el.dataset.a11yUpgraded === "1") return;
    if (el.querySelector('a[href]')) { el.dataset.a11yUpgraded = "1"; return; }

    if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');
    if (!el.hasAttribute('role')) el.setAttribute('role', 'link');

    var href = el.getAttribute('data-href');
    var newTab = el.getAttribute('data-target') === '_blank';

    el.addEventListener('keydown', function (e) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        if (!href) return;
        if (newTab || e.ctrlKey || e.metaKey) {
          window.open(href, '_blank', 'noopener');
        } else {
          window.location.href = href;
        }
      }
    });

    el.dataset.a11yUpgraded = "1";
  }

  function init(root) {
    (root || document).querySelectorAll('.et_clickable[data-href]').forEach(upgrade);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function(){ init(document); });
  } else {
    init(document);
  }

  var mo = new MutationObserver(function (muts) {
    muts.forEach(function (m) {
      m.addedNodes && m.addedNodes.forEach(function (n) {
        if (n.nodeType === 1) init(n);
      });
    });
  });
  mo.observe(document.documentElement, { childList: true, subtree: true });
})();
</script>

HTML

Embedding a Facebook Feed

This example provides a skip link for screen readers and a placeholder for adding a Facebook Page Plugin feed.

Instructions for generating the Facebook Feed code:

  1. Go to the official Facebook Page Plugin generator:
    https://developers.facebook.com/docs/plugins/page-plugin
  2. In the Facebook Page URL field, enter the full address of your Facebook page (for example: https://www.facebook.com/YourPageName).
    This becomes the href inside the embed code.
  3. Leave the Tabs field as timeline (this shows your timeline feed).
  4. Select your desired Width and Height values.
    These determine how wide and tall the feed will appear on your page.
  5. In the four options below the generator:
    • Check ✅ small_header
    • Check ✅ adapt_container_width
    • Uncheck 🚫 hide_cover
    • Uncheck 🚫 show_facepile
  6. Click the “Get Code” button.
  7. In the popup, click the “Iframe” tab to switch from JavaScript to the simpler iframe version.
  8. Copy the entire <iframe>...</iframe> code that Facebook generates.
  9. Paste that iframe code into the spot indicated below (where it says <!– <iframe> goes here –>).

Example HTML structure

<!-- facebook feed -->
<div class="skip">
  <a href="#skipFacebook" role="link" class="">Skip Facebook Feed</a>
</div>

<!-- <iframe> goes here -->

<div id="skipFacebook" tabindex="-1"></div>

Accessibility note:
The skip link allows keyboard and screen reader users to bypass the Facebook embed and return to the rest of the page content.
The final div with id="skipFacebook" serves as the destination for that skip link.

CSS

DP Blog Slider – Pagination Dots (CSS)

This CSS customizes the pagination dots (bullets) used in the DP Blog Slider.
It enhances the appearance, hover and focus states, and accessibility of the slider’s pagination controls.

Instructions:

  • Add this CSS to your site using one of these methods:
    • Site-wide: Go to Divi → Theme Options → Custom CSS and paste it there.
    • Page-specific: In the page builder, open Page Settings → Advanced → Custom CSS and paste the code.
    • Module-level: Add a Code module and paste the CSS inside.
  • Replace .YOUR_CLASS_NAME with the actual class used on your slider (for example, .sequoia-news).
  • No JavaScript is required — this is pure CSS.

Example CSS:

/* === Pagination bullet base styles === */
.YOUR_CLASS_NAME .swiper-pagination-bullet {
  background-color: #fff !important;
  border: 2px solid var(--primary-color) !important;
  opacity: 1 !important; /* override Swiper dimming */
  min-width: 16px; 
  min-height: 16px;
  margin: 0 6px !important;
  border-radius: 50% !important;
  transition: background-color .3s ease, transform .3s ease, border-color .3s ease;
  cursor: pointer;
}

/* === Active bullet appearance === */
.YOUR_CLASS_NAME .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  transform: scale(1.1);
}

/* === Hover and focus interaction states === */
.YOUR_CLASS_NAME .swiper-pagination-bullet:hover,
.YOUR_CLASS_NAME .swiper-pagination-bullet:focus {
  outline: 2px solid var(--primary-color) !important;
  outline-offset: 2px !important;
  transform: scale(1.15);
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

/* === Visible keyboard focus ring (focus-visible only) === */
.YOUR_CLASS_NAME .swiper-pagination-bullet:focus-visible {
  outline: 2px solid var(--primary-color) !important;
  outline-offset: 2px !important;
}

/* === Hide pagination when only one bullet exists === */
.YOUR_CLASS_NAME .swiper-pagination { display: none !important; }
.YOUR_CLASS_NAME .swiper-pagination:has(.swiper-pagination-bullet:nth-child(2)) { display: block !important; }
Adding an Icon to the Parent of a Button

This CSS adds FontAwesome icons (e.g., Facebook, Instagram, calendar) to the parent wrapper of Divi buttons. Because it targets the ::after pseudo-element of the button’s parent, it does not interfere with your normal ::before or ::after hover effects on the button itself.

Instructions:

  • Add this CSS to your site using one of these methods:
    • Site-wide: Divi → Theme Options → Custom CSS.
    • Page-specific: Page Settings → Advanced → Custom CSS.
    • Module-level: Inside a Code module within your layout.
  • In the Button Module settings, click on the Advanced tab → open the CSS ID & Classes toggle → and enter your chosen class name (for example, facebook-button) in the CSS Class field.
  • Update the same class name inside the CSS selectors that use :has().
    For example, if your button’s CSS class is instagram-button, change both selectors to use:
    .et_pb_button_module_wrapper:has(.instagram-button)
  • The icon uses FontAwesome. Update the content value to match the desired icon:
    • '\f39e' = Facebook “f”
    • '\f16d' = Instagram
    • '\e61b' = X (formerly Twitter)
    • '\f073' = Calendar
  • This approach keeps the icon independent from the button’s hover animations and transitions, so your existing effects still work normally.

Example CSS:

/****** ADDING an ICON on the PARENT of a button ******/

/* Targets the parent for buttons with the class of "facebook-button" */
.et_pb_button_module_wrapper:has(.facebook-button)::after {
    content: '\f39e'; /* Facebook "f" */
    position: absolute;
    left: 10px;
    top: 50%; /* first half of vertical centering */
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%);    
    -ms-transform: translateY(-50%);     
    transform: translateY(-50%); /* second half of vertical centering */        
    z-index: 10;
    font-family: 'FontAwesome';
    font-size: 40px;
    font-weight: 400;
    color: var(--primary-color);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; 
    pointer-events: none; /* Prevents the icon pseudo-element from blocking mouse events,
   allowing hover and click interactions to pass through to the button underneath */
}

/* Adds hover/focus styling to the parent of buttons with the class "facebook-button" */
.et_pb_button_module_wrapper:has(.facebook-button:hover)::after,
.et_pb_button_module_wrapper:has(.facebook-button:focus)::after {
    color: #fff;
    font-size: 30px;
}

Shortcodes

Contact Manager Shortcode

This shortcode is used to display a contact list from the Contact Manager plugin. Add it to a Code module on the target page. Change the group value as needed.

Instructions:

  • Add a Code module where you want the list to appear.
  • Paste the shortcode and update the group name (e.g., administration).

Example Shortcode (copy this):

/* Contact Manager code */
[contact_list show_filters=0 hide_search=1 group=administration]

Tip: Alternatively, you can write it with double brackets in docs so WordPress won’t parse it:
[contact_list show_filters=0 hide_search=1 group=administration]. When someone copies it, they just remove one bracket from each side.

Miscellaneous