Creating a Class
Open the Class Creator
In your WordPress admin, go to Elementor → AtomicKit and select the Class Creator tab.
Enter a class name
Type a name for your new class in the Class Name field. Use lowercase letters and hyphens — for example,
card-shadow or flex-center. Avoid spaces, underscores, and uppercase characters for best compatibility with Elementor.Select a property category
Use the category dropdown to choose the type of CSS you want to add. Available categories are:
| Category | Examples |
|---|---|
| Layout | display, position, overflow |
| Spacing | margin, padding |
| Sizing | width, height, max-width |
| Flexbox | flex-direction, justify-content, align-items, gap |
| Grid | grid-template-columns, grid-gap, grid-area |
| Typography | font-size, font-weight, line-height, letter-spacing |
| Backgrounds | background-color, background-image, background-size |
| Borders | border, border-radius, outline |
| Custom CSS | Write any arbitrary CSS property-value pair |
Set property values
Enter a value for each property. To reference a design token instead of a hard-coded value, drag a variable from the Design Tokens sidebar into the value field — or click the token to insert the
var(--token-name) reference automatically.Add responsive overrides
Switch between the Desktop, Tablet, and Mobile breakpoint tabs at the top of the form. Properties set on a breakpoint tab apply only at that screen size. You can add, change, or omit any property per breakpoint independently.
Review the live CSS preview
The Live CSS Preview panel compiles your selections in real time, showing the exact CSS that will be saved. Review it to confirm property names, values, and
@media blocks look correct before proceeding.Design Tokens Sidebar
The Design Tokens sidebar lists every CSS variable you have created in the Variables Manager. You can use these tokens as values inside any property field in the Class Creator.- Drag and drop a token from the sidebar into a value input to insert the
var(--token-name)reference. - Click a token while a value input is focused to insert the reference at the cursor position.
Breakpoint Scopes
AtomicKit maps breakpoint tabs to Elementor’s built-in responsive breakpoints.| Tab | Scope |
|---|---|
| Desktop | Styles applied at all screen sizes (the base layer) |
| Tablet | Styles applied inside Elementor’s tablet breakpoint @media block |
| Mobile | Styles applied inside Elementor’s mobile breakpoint @media block |
Managing Existing Classes
Open the Class Manager view within the Class Creator section to see all registered global classes and take management actions.Reordering Classes
Drag the handle icon (☰) on any class row up or down to change its position in the list. The order saves instantly — no confirmation required. Class order affects the CSS cascade when multiple classes are applied to the same element.Renaming a Class
Click Rename on any class row and enter a new display label. AtomicKit preserves the underlying CSS class selector when you rename, so existing Elementor elements that use the class continue to work without any changes.The display label in Elementor’s editor updates to reflect the new name, but the CSS class selector used in your HTML remains unchanged. Your published pages are unaffected by renames.
Duplicating a Class
Click Duplicate to clone a class. The duplicate copies all property rules including responsive breakpoint styles. Duplicating is useful when you need a variation of an existing class (for example,btn-primary → btn-secondary) and want to start from the same property set.
Deleting Classes
- Single delete: Click the Delete icon on a class row to remove that class from Elementor.
- Bulk delete: Select multiple classes using their checkboxes and click Delete Selected.
Related
- Variables Manager — create the design tokens you reference in class values
- Snapshot History — save a checkpoint before making large changes to your class set