Accessing AtomicKit
Navigate to Elementor → AtomicKit in your WordPress admin sidebar to open the plugin panel. From there, the top navigation gives you instant access to every feature area.AtomicKit requires Elementor v4 with the Atomic Elements and Global CSS Variables experiments enabled. If either experiment is off, the Dashboard health check will flag it with a direct link to fix it.
Feature Pages
Dashboard
Monitor active class counts, variable counts, and tracked imports. Run automated health diagnostics to confirm your Elementor v4 experiments are active.
Variables Manager
Create, edit, and delete global CSS design tokens for colors, fonts, sizes, and custom values. Changes propagate instantly across every element using those tokens.
Class Creator
Visually build custom Elementor global classes with property selectors, breakpoint scopes, design token references, and a live CSS preview before saving.
Import
Bring CSS utility classes into Elementor by pasting raw CSS, fetching from a public URL, or uploading a .css file — with a full diff preview before committing.
Export
Download your Elementor design system as a .css stylesheet or .json schema. Choose to export all classes, AtomicKit-tracked classes only, or a filtered selection.
Snapshot History
Save named checkpoints of your Elementor class state and restore any previous snapshot. AtomicKit auto-saves before every rollback for an extra layer of safety.
Feature Quick Reference
The table below summarises what each section of the plugin does at a glance.| Feature | What it does |
|---|---|
| Dashboard | Monitors class counts, variable counts, and runs health diagnostics |
| Variables Manager | Create, edit, and delete CSS design tokens |
| Class Creator | Visually build custom utility classes with breakpoint scopes |
| Import Center | Bring in CSS from paste, URL, or file upload |
| Export Center | Download your design system as .css or .json |
| Snapshot History | Save and restore Elementor class states |