In older versions of Divi, you would find separate fields under the Advanced tab to add CSS IDs and classes. In Divi 5, those fields are no longer there.
But nothing is actually missing. Everything moved to Features under the same Advanced tab. You can still add IDs and classes as before, plus any other custom attributes you need. The difference is in the way it is organized: one unified space instead of scattered fields.
In this post, we will guide you on how to add CSS classes and ID attributes using custom attributes.
What are custom attributes in Divi 5
Custom Attributes allow you to add any HTML attribute, such as IDs, classes, ARIA labels, or data tags, to your Divi elements directly from the builder. It’s a way to control how elements behave, how they are styled, or how they are read by browsers and supporting technologies.
In older Divi versions you had special fields for this CSS ID and classes. They took care of the basic styling needs, but that was all they could do.
Now there is a drop-down list Features option in the Advanced tab. Open it and you can add any HTML attribute to a section, row, column or module. IDs and classes still work the same way, but you’re no longer limited to just those two.
Click Add attribute to open the panel where you can create, edit or delete attributes. You can choose the type of attribute from the drop-down list or manually enter a custom attribute.
Each attribute has one Name (id, class, aria label or data info) and a Value, such as hero section or button large. You can also use one Admin label for your own reference and choose one Target element to determine whether the attribute applies to the module itself or to specific items within it.
Once you fill this out, Divi writes the attribute directly into the HTML. For example, setting the Attribute name Unpleasant Identity card and the Attribute value Unpleasant hero section produces this:
<div id="hero-section"></div>
In addition to IDs and classes, you can also add accessibility attributes such as aria label, tracking codes with data-*, or SEO elements such as rel and title. No third-party plugins or custom code snippets needed to make your site more accessible or add tracking. You handle it directly in the builder, which keeps everything in one place and gives you better control over how elements work with CSS, JavaScript, and supporting technologies.
Why we replaced the CSS ID & Classes option
Previously, CSS IDs and classes were in their own separate fields. They worked fine, but adding anything else meant custom code or workarounds. By consolidating everything into one attribute panel, you don’t have to hunt through different sections to apply what you need. You’ll see all your attributes in one place, making them easier to manage and keeping your workflow consistent.
For anyone familiar with HTML, this also feels more natural. You work with attributes as they actually exist in the code, without leaving the visual builder.
✅ Don’t worry: your old IDs and classes are still there ✅
If you added IDs or classes in older Divi versions, you won’t lose them. When you update to Divi 5, these values will be assigned to the new version Features panel automatically. Nothing is deleted and your front does not change.
Here’s what you need to know:
- Where to find them: Open the element, go to Advanced > Features. You will see your previous entries listed with Name set to id or class.
- Your CSS and JS still work: Any selectors that reference these IDs or classes will continue to apply without any operations.
- Import and presets: Old layouts, Theme Builder templates and global presets retain their IDs/classes. They will appear in the list of attributes as soon as you open them in Divi 5.
- Quick check: If the styling doesn’t look right, fix the Target element is what you expect. Most elements use the module wrapper by default. If your CSS targeted an inner element, set the target accordingly.
Learn all about Divi 5’s custom features
Use custom attributes to add CSS classes and ID attributes
Adding IDs and classes in Divi 5 works the same way as always. You can apply them to any module, section or row. Let’s go through both.
Add an ID attribute
An ID focuses on one specific element on a page. You’d use it for something that only appears once, like the main hero image, a newsletter sign-up form, or the contact section in the footer.
For this example, we’ll label an image as the page’s hero image.
Click on the image, go to Advanced > Featuresand click Add attribute. Set the Attribute name Unpleasant Identity card and the Attribute value Unpleasant hero image. Then select Image as the Target element so the ID applies to the image itself, not the module wrapper.
Save the page and preview it.
If you inspect the element in your browser, you will see the ID with the image in the HTML.
Add a class attribute
Unlike an ID, a class can be applied to multiple elements. This makes it useful if you want the same style or behavior for multiple items at once, such as all your CTA buttons, testimonial cards, or pricing tables.
Here we assign a class to each CTA button on the page so that they share the same style. Open the first button, go to Advanced > Featuresand set the Attribute name Unpleasant class and the Attribute value Unpleasant cta button.
Then repeat the same steps for each button you want to include in the cta-button class.
Once all the buttons share the same class, you can format them together using the pages Advanced > Custom CSS panel. Any changes you make to that class will apply to every button at once.
Try custom attributes in Divi 5 today
Custom attributes ensure that IDs and classes are not reinvented. They just put everything you need in one predictable place. The Attributes panel keeps things organized so you don’t have to jump between fields or write workarounds to get things done.
If you haven’t already, download the latest version of Divi 5 to start using custom features, along with all other updates 👇🏻
#add #CSS #classes #attributes #Divi