How to add CSS classes and ID attributes in Divi 5

In older versions of Divi, you should find separate fields in the Complex tab so you can add CSS IDs and categories. In Divi 5 there are no fields.

But in reality nothing is missing. Everything went in Attributes under the similar Complex form. You’ll still be able to upload IDs and categories exactly as before, as well as any other custom attributes you’d like to have. The adaptation is the way it is organized: a unified home as an alternative to scattered camps.

In this post we will walk you through including CSS categories and ID attributes on using custom attributes.

What are the custom attributes in Divi 5

Custom attributes allow you to immediately load any HTML features, such as IDs, categories, ARIA labels, or information tags, for your Divi components from the builder. It is a way to monitor component behavior, style, or learning through browsers and assistive technologies.

In previous Divi versions, you had dedicated fields CSS IDs and categories. They covered basic style desires, but that’s all they could do.

There is now a drop-down menu Attributes possibilities within the Complex form. Open it and you will be able to load any HTML feature onto a piece, row, column or form. The IDs and categories however paint similarly, however you are not limited to simply those two.

Click Load feature to open the panel where you can create, edit or remove attributes. You will be able to select the type of feature in the drop-down menu or manually enter a custom feature.

Each feature wishes a Identify (identification, magnificence, air-label or data information) and to Of value, similar to the hero section or the large button. You will also be able to upload a file Administrator label to your personal reference and select a Objective component to check whether or not the feature applies to the module itself or to particular pieces within it.

Whenever you insert those, Divi immediately writes the feature to the HTML. For example, the atmosphere Characteristic Identify TO identification and the Characteristic value TO section of heroes produces this:

<div identification="hero-section"></div>

In addition to IDs and categories, you can upload accessibility attributes like aria-label, date-* tracking codes, or search engine marketing components like rel and identify. You don’t need to use third-party plugins or custom code snippets to make your website more available online or track loading. You take care of this immediately within the constructor, keeping the whole lot in one place while giving you greater control over how components paint with CSS, JavaScript, and assistive applied sciences.

Because we changed the CSS ID and category possibility

Previously, IDs and CSS categories were in separate fields. They worked in high quality, but included everything that involved custom code or workarounds. By consolidating the whole lot into one Attributes panel method you are now not looking in other sections to use what you want to have. You notice all your attributes in one place, which makes managing them more convenient and helps keep your workflow consistent.

For anyone happy with HTML, this also seems more grassy. You are operating with the attributes as best they actually exist in the code, simply without leaving the builder visible.

Learn all about Divi 5 custom attributes

Using custom attributes to load CSS categories and ID attributes

Including IDs and categories in Divi 5 works the same way as always. You can practice them on any module, part or line. Let’s go through each of them.

Included an ID feature

An ID targets a particular component of a web page. You would use it for something that looks more effective as soon as, like the main hero image, a post subscription form, or the touch part of the footer.

For this case, we will label one image as the main image of the web page.

Click on the image, go to Complex > Attributesand click Load feature. Set the Characteristic Identify TO identification and the Characteristic value TO image of the hero. So choose Symbol because the Objective component so the ID applies to the image itself, now not the form wrapper.

Save and preview the web page.

If you check the element in your browser, you will see the ID associated with the image within the HTML.

Including a magnificence feature

Unlike an ID, a category will also be implemented in more than one component. This makes it useful when you immediately need similar styles or habits in a series of pieces, such as entire CTA buttons, testimonial playing cards, or pricing tables.

Here, we will assign a category to each CTA button on the webpage so that they match the similar style. Open the main button, switch to Complex > Attributesand set the Characteristic Identify TO magnificence and the Characteristic value TO cta button.

Then repeat the similar steps for every single button you want to incorporate into the cta button magnificence.

As soon as all the buttons have the same magnificence, you will be able to enjoy them in combination with the use of the web page Complex > Custom CSS panel. Any changes you are making to that magnificence will be applied immediately to each button.

Check out custom attributes in Divi 5 lately

Custom attributes don’t reinvent IDs and categories. They simply put everything you want to have in one predictable spot. The Attributes panel helps keep it organized so you don’t have to jump from field to field or write workarounds to fix problems.

If you haven’t already, download the latest version of Divi 5 to start using custom attributes along with all the different updates

The post How to add CSS classes and ID attributes in Divi 5 appeared first on Elegant Themes Blog.

wordpress Maintenance Plans | wordpress hosting

Read more