The complete guide to Elementor V4 Classes

What V4 Classes are (and what they replace)

In V3, every style lived inline. You set font size on this heading, padding on that section, color on this button. Each element carried its own styling, and if you wanted the same look on another element, you copied it manually or used Global Styles, which were limited to colors and fonts.

V4 Classes change that. A Class is a named bundle of style properties. You create a Class called "btn-primary" with specific padding, background color, font weight, border radius, and text color. Then you apply that Class to any button on any page. Change the Class definition, every button using it updates.

If you have ever written CSS, this is just CSS classes inside Elementor's visual editor. If you have not written CSS, think of it as a saved style preset that actually stays connected to the elements using it.

The practical effect: consistency without effort. On a V3 site, keeping 40 buttons visually identical required discipline and luck. On a V4 site with Classes, it requires applying the same Class name. That is it.

Setting up your first Class

Open any page in the Elementor editor. Select an element (a heading works well for your first try). In the style panel, you will see a Classes section at the top. Click the plus icon to create a new Class.

Name it something meaningful. In this example, "text-heading-lg" for a large heading style. Set the properties: font family, font size (say 36px), font weight (700), color (reference your color-neutral-900 Variable if you have set one up), and margin bottom (24px).

Save the Class. Now go to any other heading on any page, open the Classes section, and select "text-heading-lg" from the dropdown. That heading immediately takes on all the properties you defined. No copying, no remembering values.

Naming conventions that scale

Your first instinct will be to name Classes descriptively: "blue-button," "big-heading," "dark-card." Resist that instinct. Descriptive names break when things change. What happens when the blue button becomes green? You either rename the Class (which is tedious) or you have a Class called "blue-button" that is green (which is confusing).

Use a naming system based on function, not appearance. Here is a convention that works well for Elementor projects, borrowed loosely from BEM methodology:

Pattern: category-descriptor-variant

• text-heading-xl, text-heading-lg, text-heading-md, text-heading-sm
• text-body, text-body-lg, text-body-sm
• text-overline (small uppercase labels above headings)
• btn-primary, btn-secondary, btn-ghost
• card-base, card-bordered, card-dark
• section-padded, section-dark

This system scales because the names describe purpose, not appearance. "btn-primary" is always the main call-to-action button, regardless of whether it is blue today or coral tomorrow. When the brand colors change, you update the Class definition. The name stays the same.

One more rule: keep names lowercase with hyphens. No spaces, no camelCase, no special characters. This keeps things clean if you ever need to reference these Classes in custom CSS.

The inheritance chain

You can apply multiple Classes to the same element. When you do, properties from all Classes combine. If two Classes set the same property (say both define font-size), the one listed last wins. This is standard CSS specificity, and Elementor V4 follows it.

Practical example: you have text-heading-lg (36px, bold, dark color) and text-light (white color). Apply both to a heading on a dark background section. The heading gets the size and weight from text-heading-lg and the white color from text-light, because text-light's color override comes second.

This is powerful but can get confusing if you stack too many Classes. A reasonable limit: 2-3 Classes per element. If you need more than 3, you probably need a single Class that combines all the properties you want.

Building a Class library for an agency

If you build sites for clients, you need a starter set of Classes that covers 90% of your work. Here is the minimum viable Class library, based on what agencies actually use on typical business websites:

Typography (8 Classes): text-heading-xl (48px), text-heading-lg (36px), text-heading-md (28px), text-heading-sm (22px), text-body-lg (20px), text-body (16-18px), text-body-sm (14px), text-overline (12px uppercase, letterspaced).

Buttons (3 Classes): btn-primary (filled, primary color), btn-secondary (outlined, primary color border), btn-ghost (text only, underline on hover).

Cards (3 Classes): card-base (white background, shadow, rounded corners), card-bordered (border instead of shadow), card-dark (dark background, light text).

Layout (4 Classes): section-padded (consistent vertical padding), section-dark (dark background + light text), container-narrow (720px max width), container-wide (1200px max width).

That is 18 Classes. It takes about 45 minutes to create them all with proper values. After that, every new page you build uses these Classes instead of setting styles inline. The consistency gain is immediate, and the speed gain compounds with every page.

Five mistakes that will haunt you

1. Vague names

"style-1," "custom-heading," "my-button." These names mean nothing in three months. Name Classes by what they do, not by when you created them or how they feel.

2. Mixing layout and visual properties

A Class called "featured-section" that includes background color, padding, max-width, font color, and border radius is doing too much. When you need the same padding but a different background, you have no reusable piece. Keep Classes focused: layout properties in layout Classes, color properties in color Classes, typography in typography Classes.

3. Responsive overrides that conflict

Setting a Class to 36px on desktop and 24px on tablet works fine in isolation. But if you then apply a second Class that also has a responsive font-size override, the two compete. The result depends on specificity and source order, which is exactly the kind of debugging you adopted Classes to avoid. Rule of thumb: only one Class per element should define responsive overrides for any given property.

4. Duplicating what Variables already do

If you have a Variable called "color-primary" set to #1E40AF, do not create a Class called "color-primary" that only sets color to #1E40AF. That is what Variables are for. Classes bundle multiple properties. Variables hold single values. Use both, but do not make one do the other's job.

5. Applying Classes to containers when they should go on elements

A typography Class applied to a container does not always cascade to the elements inside it the way you expect. Elementor elements have their own style defaults that can override inherited styles. Apply typography Classes to headings and paragraphs directly. Apply layout Classes to containers.

Classes vs Variables: when to use which

This confuses people because Classes and Variables both involve reusability. The distinction is simple:

Variables hold a single value. A color. A font size. A spacing amount. You reference a Variable inside any property field. Variables answer the question "what is the value?"

Classes hold a set of properties. A button Class defines background, color, padding, border-radius, font-weight, and hover state all together. Classes answer the question "what is the complete style?"

In practice: define your colors, fonts, and spacing as Variables. Build your Classes using those Variables as property values. Now when a brand color changes, you update one Variable, and every Class that references it updates automatically. This two-layer system (Variables feeding into Classes) is how professional design systems work, and V4 lets you build it without writing CSS.

Migrating from inline styles to Classes

If you have an existing V4 site where everything was styled inline (no Classes used), you can retrofit Classes without starting over. The process is manual but methodical:

1. Audit the site and identify repeated patterns. How many different heading styles do you actually have? Probably 4-6. How many button styles? Probably 2-3.
2. Create a Class for each unique pattern. Give it a proper name.
3. Go page by page, element by element. Remove inline styles and apply the corresponding Class. This is tedious, but each page takes less time as you get faster.
4. Test each page after conversion. Some inline styles might not have a clean Class equivalent, and you will need to decide whether to create a new Class or adjust an existing one.

A 20-page site takes about 3-4 hours to retrofit with Classes. That investment pays back immediately because every future edit is faster and every new page starts consistent.

Snapelement V4 components ship with suggested Class naming that follows the conventions described here. If you use Snapelement as your starting point for page sections, the Class structure is already there. Apply your own Variable values to customize colors and typography, and the design system is built from day one.