The Class Converter allows you to quickly generate classes for an entire component, and transfer all your existing ID-level styles to the newly created classes. It doesn’t force you to adopt a specific name class name convention, but it’s a perfect fit if you’re using the BEM convention.

Where can I find it inside the builder?

Once you activate the class converter in the AT’s Theme Settings, you can simply right-click on the “parent” element of your component inside the structure panel – you should see a new “Class Converter” item in the contextual menu. Clicking on this item will open up the Class Converter modal (by default it opens on the right of the screen, but you can move it to the left or full width by clicking on the top-right icons).

When the modal is open, you’ll notice that all the fields are precompiled with the labels of each element inside your component. So Pro tip: setting custom labels on each element before running the class converter can be very convenient!

Configuration

Here is what you should see now:

Let’s review the function of each field.

Basename

The basename refers to the name of your component. In the BEM convention, it’s defined as the “block” part of the class name. It will be added to all the generated classes and is the exact class name of the parent of your component. So for example, if you’re generating global classes for a Hero component, “hero” will logically be your basename and all the children of your component will have a class that starts with “hero”.

Delimiter

The delimiter is a specific string that separates the basename from the context of your class. In the BEM convention, the standard delimiter is composed of two underscores (“__”).

Preview

The preview will show you the structure of your component and the class name that will be generated for each element.

Each class name is dynamically generated by concatenating the basename + the delimiter + the label of the element. Since version 2.0, the context (or element” in the BEM convention) of each class is editable – just click on the input and rename the context to what suits you best.

Since version 2.0, you’ll see a toggle icon next to each class. By default, each class is toggled on. By toggling off the icon, you skip the class generation for specific elements. It’s particularly useful if you don’t want to create a class for each element, but only for specific ones inside the component.

Class Category (optional)

This field allows you to group all the generated classes inside a specific category. The class category is a unique feature of Advanced Themer and belongs to the Class Manager feature – so if you don’t plan to use the Class Manager or if you have no interest in grouping your classes into categories, just leave this field blank.

Note that if you choose a category that doesn’t exist inside the Class Manager, the script will automatically create it for you.

Copy the ID styles to the class(es)?

This option allows you to export the existing ID-level styles from the element to the newly created class.

• YES: choosing this option will transfer any style from ID-level of the element to the newly created class. If the class exists already (and contains styles) the exported styles will override the existing ones. So be careful!
• No: the newly created won’t contain any style and all the ID-level styles will be untouched
• YES, UNLESS THE CLASS ALREADY EXISTS: transfer the ID-level styles only if the newly created class doesn’t exist yet. This option allows you to avoid messing with existing classes that may already have specific styles assigned.

It’s important to understand that the script is running each class one by one. So if you are about to generate 2 classes with the same name – let’s say .hero__container – and this class doesn’t exist yet in your global classes list: on the first run, the script will recognize this class as new. On the second run – since the class has been created on the first run – the script will identify the class as an existing one. Keep that in mind when selecting YES, because if you have duplicated class names in the Class Converter, the last run of the script will override all the previous style exports.

Erase the ID styles?

This option allows you to manage the ID-level styles of the element.

• NO: the ID-level styles – even if they have been exported to the newly created classes – won’t be deleted. In case you exported the styles in the previous option, you’ll basically have duplicated styles on both the class and the ID.
• YES: all the ID-level styles will be removed from the elements. In case you didn’t export the ID-level styles to the classes in the previous option, both the element and the classes will be unstyled.

Create Classes

Click on the “Create Classes” button to generate all the global classes of your component.

Double-check that everything is working as expected before saving the page. If something goes wrong, reloading the page will restore all the styles as they were before the conversion.

This feature highlights with a blue outline the elements sharing the same class inside the structure panel. It efficiently allows you to verify at a glance which element in your structure possesses a particular class.

A.T. will thoughtfully incorporate a green background for all the editable classes and a red background for all the locked classes. This visually appealing and intuitive modification enables you to easily identify the classes you can edit on the fly, thereby enhancing your user experience.

Clone any class quickly and easily, hassle-free, with just two clicks inside the builder. The newly-created class will include all the styles related to the previous one, making it super convenient.

With just one click, effortlessly copy the name of any global class to your clipboard and seamlessly paste it onto any other element hassle-free.

If you’re looking for an easy and efficient way to manage your HTML structure inside the builder, look no further than our improved structure panel. With just a glance, you can quickly review all the HTML tags attached to your elements and make any necessary changes right then and there.

Effortlessly toggle the visibility of an element with ease through the contextual menu in the structure panel, without having to search through the element’s styles for the display control.