Skip to main content

Custom Attributes in Divi 5

Learn how to use Custom Attributes in Divi 5 to add HTML attributes like data, aria-labels, or role directly to your sections, rows, and modules.

Updated this week

Custom Attributes give you a way to add extra HTML attributes to any Divi element without editing code.

This includes attributes such as data-*, role, aria-*, or even native attributes like loading or title. They provide more control over how your elements behave, interact with scripts, and support accessibility.

Notes:

  • The new attributes option group manages all attributes. All other attribute-related settings have been deprecated and will be automatically migrated to the new system.

  • If you have previously added a class or ID using the legacy CSS Class & ID option, those attributes will show up as list items in the new attributes option group.

Use Cases

  1. Accessibility Enhancements: Add aria-label="Search Form" or role="navigation" to improve screen reader clarity.

  2. Custom Data Hooks: Insert data-tracking="cta-button" or similar attributes so marketing and analytics tools can identify specific modules.

  3. Browser and Performance Control: Use attributes like loading="lazy" for images or rel="noopener" for links to improve performance and security.

How to Use It

Divi 5 - Add Custom Attributes

  1. Open the the settings of any section, row, column, or module by clicking on the Gear icon, or by clicking on the element itself.

  2. Go to the Advanced tab of the settings panel.

  3. Expand the Attributes option group.

  4. Click on the +Add Attribute option.

  5. Choose the Target element.

  6. Type in the Attribute's name.

  7. Type in the Attribute's value.

Related Articles
The Divi Circle Counter Module (Divi 5)
The Divi Group Module (Divi 5)
Attribute Management in Divi 5
Extend Attributes in Divi 5
Interactions in Divi 5
Did this answer your question?