Today, we release Custom Attributes for Divi 5, which allows you to add any attribute, such as alt, title, rel, and aria-label, to elements and most sub-elements.
Divi has had support for specific attributes, such as class and ID, but now you can add any attribute to any element. This is especially important for accessibility, allowing you to, for example, add alt text to images, and roles and labels to non-semantic elements like an icon-based button.
Other attributes, such as anchor link targets or data attributes for custom applications, are also helpful!
Check out the following video to see the new feature in action. 👇
Add Any Attribute To Any Element
You’ll notice a new Attributes option group in the Advanced tab of all elements, which is your new interface for managing all types of attributes.
Add an attribute, select a target element, and give it a name and value. It’s as simple as that!
All elements support adding attributes to the main wrapper. In addition, most of the content elements defined in each module’s content tab also support custom attributes.
Using Custom Attributes To Improve Accessibility
Attributes play an essential role in accessibility. While Divi can add baseline attributes for elements, it can’t always predict how you will use each module or the content of each element on your page. With the new custom attributes system, you can always define the characteristics you need to ensure screen readers can understand your content.
For example, you may use Divi’s interaction system to build a custom pop-up, including an icon module that serves as the close button. In that case, you can use custom attributes to give that icon a role and an area label, telling screen readers that your icon element is a button that closes the pop-up.
Deprecating Old Attribute Settings
This new attributes option group manages all attributes. All other attribute-related settings have been deprecated and will be automatically migrated to the new system.
For example, 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.
Try Divi 5 Today
Custom Attributes for Divi 5 is available today and is one of many features coming to Divi this year.
You can follow along as we progress through the final release of Divi 5 and beyond, with updates every two weeks. Depending on your priorities, you can use Divi 5 now to build new websites or wait until we add more features, whatever works best for you.
As outlined in Divi 5’s original multi-phase release schedule, the Divi 5 Public Alpha is like “Divi 5 Lite.” It’s missing a few features and may not be suitable for existing websites, but it’s ready to be used on new websites if you prefer the experience to Divi 4.
We want you to try it, and if you love it, use it; when everyone loves it, we’ll make it official.
Have You Tried Divi 5’s New Responsive Editor?
In case you missed it, we recently released the new Responsive Editor for Divi 5.
This editor lets you quickly view, modify, and reset the responsive, hover, and sticky states for any setting while in any view mode.
In Divi 5, you get the best of both worlds: natural, intuitive editing, where all changes made while in a particular view mode apply automatically, and the new responsive editor, which allows you to make swift changes to all states at any time.
Watch this video for all the details. 👇
More Divi 5 Updates Are On The Way
2025 is the year of Divi 5. The tedious work is behind us. We built the super-fast foundation, and now it’s time for Divi to make its comeback.
If you’re here for the Divi comeback, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.
Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁
As an office that works in education and needs to be ADA compliant, this is a feature that will be game-changing.
Thank you!
Is there a list of these attributes and the values that can be assigned to them? There is at least a subtle implication that people already know this. I think I can grasp the broad concept, but I haven’t a clue what to put in those blanks. Maybe I don’t have to know, but if it might be helpful or useful, well, I’d like to know. Thanks!
We write detailed follow up posts about all new features. So stay tuned. But these would be standard HTML attributes, nothing Divi-specific.
While its great that we can add all sorts of useful attributes, such as aria lables, having to click through several steps to add classes (and review /retieve them) is another slow down in the workflow with Divi.
+1
THANK YOU!
At least someone thought about this before typing a response. I don’t get all the positivity. It is terrible UX design; I now need 10x longer to do something as basic as adding a class.
We understand that the new workflow for adding classes feels like a few extra clicks. The goal was to consolidate the CSS ID and Class fields into a single, more powerful Custom Attributes panel. This new system unlocks advanced customization and accessibility options by allowing you to add any HTML attribute, such as ARIA labels and data-attributes. Although the method for adding IDs and classes has changed, the functionality remains in this enhanced, more powerful system.
Thank you for your feedback as we work to improve Divi 5. 👍
This addtion is fanstastic! BUT we seem to have lost the ‘before and after’ function from DIVI 4 on images. I use the dynamic content and ‘after’ on many of my sites. Is there a work around? Other than that, another great release!
Thank you for the kind word and your feedback! Our team is aware of the issue and is actively working to resolve it. We appreciate your patience as we work toward a fix!
Nick,
Removing CSS ID and Classes is, in the opinion of many of the Divi people with whom I associate, a HUGE mistake. While I applaud the new Custom Attributes feature, removing CSS ID and Classes makes it very inefficient to use classes this way. I hope you appreciate user preferences and respect them instead of making our work more difficult. After all, that was supposed to be one of the guiding objectives of the Divi 5 makeover. That said, here is a simple request. Bring back CSS ID and Classes, let us use when it makes our job easier, and let users determine for themselves where and when to use the Custom Attributes feature. That would be a win for ET and its users. I look forward to your response.
Thank you for your feedback, Bob!
We understand your concern about the workflow change.
The goal was to move from two specific input fields to a more powerful and flexible system. The new Custom Attributes panel allows you to add any HTML attribute, including ARIA labels and data-attributes, which opens up new possibilities for accessibility and advanced customization.
While the process for adding IDs and classes is now different, the functionality is still there within this new, more capable system. We appreciate you sharing your perspective as we continue to refine Divi 5, and we’ll be taking this feedback into consideration.
This shouldn’t have to be an either-or situation. Some attributes are clearly used more than others, and in the case of class and id, by a HUGE margin. All you need to do is to change the interface of the attributes dialog to have a dropdown where there are the more used attributes to choose from + a custom selection which still allows one to type in custom values. Good UI/UX is really not that hard – please don’t try to explain away a poor decision but accept that there could be improvements to the implementation.
This new feature is even worse than I thought.
Imagine you are creating a preset: It includes a CSS class.
You are then using the preset for a blurb. The blurb works with an icon / image. You want to define an alt attribute for said blurb.
Guess what happens? All the classes you defined in the preset are now gone.
Because the module settings overwrite the preset settings (which makes sense), but since attributes are now all grouped together, something as “trivial” as an aria label or an alt tag can overwrite the CSS classes you wanted to use for the respective element.
All of the functionalities that Divi has added in the past few months to finally getting us closer to cleaner CSS code and working with classes and presets is basically being overwritten with this new “feature”.
If you’re asking me, it’s definitely a bug… I now need to manually apply all the CSS classes I want to see in modules despite having defined a preset for them earlier.
Thank you for your detailed feedback, Oliver!
You’ve correctly identified a bug in the new custom attributes system. Our developers are aware of this issue where module-level attributes are overwriting preset attributes, and it will be fixed in a future version. We appreciate you bringing this to our attention.
Any chance we’ll be able to use these custom attributes to set fetchpriority=”high” at some point in the future? Or some other solution to be able to accomplish this? Would be nice to help with performance (LCP) issues.
(Currently get error “Invalid attribute name. Attribute names must contain only letters, numbers, hyphens, underscores, and colons.”)