Skip to main content
The AtomicKit Import Center lets you bring CSS utility classes into Elementor from three sources: paste raw CSS directly, provide a public URL, or upload a .css file. Before any changes are applied, you review a diff that shows which classes are brand new and which existing classes would be overwritten. Nothing is committed to Elementor until you confirm.

​
Import Methods

Raw CSS Paste

Paste CSS text directly into the input area. Use this when you have CSS on your clipboard from a design tool export, a code editor, or another plugin.

URL Fetch

Enter the public URL of a hosted .css file. AtomicKit fetches the file and parses it for you. The URL must be publicly accessible — authenticated or locally hosted files cannot be fetched.

File Upload

Drag and drop a .css file onto the upload zone, or click Browse to select one from your computer. Only .css files are accepted.

​
Understanding the Diff Preview

After you provide CSS through any of the three methods, AtomicKit parses the input and displays a diff preview before making any changes. The diff has two sections:
SectionWhat it shows
NewClasses found in the imported CSS that do not yet exist in your Elementor registry — these will be added
Overwrite (Existing)Classes in the imported CSS whose names match classes already in Elementor — importing will replace their current property values
Review both sections carefully. If you see an overwrite you did not intend, you can cancel, rename the conflicting class in your source CSS, and re-import.
Classes listed under New are safe additions. Classes listed under Overwrite will replace existing property values on those classes — the original values will be lost unless you have a snapshot to restore from.

​
Completing an Import

1

Open the Import Center

In your WordPress admin, go to Elementor → AtomicKit and select the Import tab.
2

Choose an input method and provide the CSS

Select Paste, URL, or File Upload and provide your CSS source. For URL fetches, click Fetch to retrieve the file. For file uploads, drag the file onto the upload zone or click Browse.
3

Review the diff preview

Read through the New and Overwrite sections. Confirm that the classes being added or replaced are exactly what you intend. If anything looks wrong, click Cancel to start over without making any changes.
4

Confirm the import

Click Confirm Import. AtomicKit writes the new and updated classes to Elementor’s global class registry. The import is tracked so future re-imports of the same source show an accurate diff.
Create a Snapshot before importing a large set of classes. If the result is not what you expected, you can restore the snapshot and try again with adjusted source CSS.
Classes in the Overwrite section will have their current property values replaced permanently. Without a snapshot, there is no way to recover the previous values after confirming an import.

​
After Import

Once confirmed, all imported classes appear in the Class Manager immediately. You can edit any imported class, assign it to elements in the Elementor editor, or export the updated set using the Export Center.

​
Related

  • Export — package your design system for backup or team sharing
  • Snapshot History — save a restore point before importing