Skip to main content
AtomicKit is a CSS utility framework and WordPress plugin built specifically for Elementor v4. This quickstart walks you through installing the plugin, enabling the Elementor experiments it depends on, and applying your first utility classes — so you can start building more consistent, maintainable layouts right away.

​
Prerequisites

Before you begin, make sure your environment meets the following requirements:
  • WordPress 6.0 or later installed and running
  • Elementor v4 installed and activated
  • Administrator access to your WordPress dashboard
  • A theme compatible with Elementor v4 (Hello Elementor or any block-based theme works well)

​
Installation & Setup

1

Download AtomicKit

Download the latest AtomicKit plugin ZIP using the button below (or the Download Plugin button in the top-right of this site).

Download Plugin

Get the latest AtomicKit .zip file.
2

Install the AtomicKit plugin

In your WordPress admin sidebar, navigate to Plugins → Add New. You can install AtomicKit in two ways:
  • Upload the ZIP file: Click Upload Plugin, choose the AtomicKit .zip file you downloaded, then click Install Now.
  • Search the directory: Type AtomicKit in the search field, locate the plugin in the results, and click Install Now.
Once installation completes, click Activate Plugin to enable it on your site.
If you received AtomicKit as a downloadable ZIP (for example, through a license portal), use the upload method. The search method only finds plugins listed in the WordPress.org directory.
3

Enable required Elementor experiments

AtomicKit relies on two Elementor v4 experimental features. Go to Elementor → Settings → Experiments in your WordPress admin and enable both:
  • Atomic Elements — unlocks the component architecture AtomicKit hooks into
  • Global CSS Variables — allows Elementor to expose and consume CSS custom properties that AtomicKit utilities reference
After toggling each experiment on, click Save Changes at the bottom of the page. Elementor may prompt you to regenerate your CSS — go ahead and accept.
These experiments are required for AtomicKit to function correctly. Skipping this step means utility classes may not render as expected on the front end.
4

Open the AtomicKit dashboard

With the plugin activated and experiments enabled, a new item appears in your WordPress admin sidebar: Elementor → AtomicKit. Click it to open the AtomicKit dashboard.From this dashboard you can:
  • Browse the available utility families (spacing, typography, layout, and more)
  • Configure plugin settings and output preferences
  • Check which utility classes are loaded on your site
Bookmark the AtomicKit dashboard — it’s your reference for available class names as you build in Elementor.
5

Apply your first utility classes

Open the Elementor editor for any page or template. Select a widget — a Heading, Container, or Section works well for a first test.In the left panel, go to the Advanced tab and locate the CSS Classes field. Type one or more AtomicKit utility classes directly into that field, separated by spaces:
<!-- Applied via Elementor Advanced > CSS Classes field -->
padding-6 rounded-lg shadow-md background-white
Click Update (or preview in the editor) to see the classes applied. The widget will pick up the corresponding styles immediately — no custom CSS required.
The Advanced → CSS Classes field is the standard Elementor mechanism for adding classes to any widget or container. AtomicKit is designed around this field, so every utility class you apply lives here, keeping your CSS clean and your styling decisions visible at a glance.

​
How the class system works

Every AtomicKit utility is a single-purpose CSS class that maps to one or a small group of related CSS declarations. You combine classes in the Advanced → CSS Classes field to compose the look you want — similar to working with utility-first CSS in a code-based project, but entirely within the Elementor editor. 
<!-- Spacing + shape + shadow -->
padding-6 rounded-lg shadow-md

<!-- Typography + color -->
text-xl font-semibold text-primary

<!-- Flex layout with responsive override -->
flex flex-col flex-row--on-m
Classes are applied directly to the element’s root node in the rendered HTML. They don’t interfere with Elementor’s own inline styles — AtomicKit utilities and Elementor controls can coexist on the same widget.

​
Next steps

Now that AtomicKit is installed and you’ve applied your first classes, explore the core concepts that make the framework powerful:

Variables

Learn how Elementor Variables act as shared design tokens and how they pair with AtomicKit utilities to keep values consistent across your site.

Responsive Utilities

Use the --on-* breakpoint suffix system to apply structural utility overrides at specific viewport widths.

Plugin Overview

Get a full picture of everything AtomicKit includes — utility families, configuration options, and how the plugin integrates with Elementor v4.