Skip to main content
Skelementor Quickstart - Get up and running in 3 simple steps

​
Import In 3 Steps

This is the longer import workflow for teams that want more setup detail before bringing classes and variables into Elementor.

​
Step 1: Install the Plugin

1

Get the build

Download the Skelementor plugin package (.zip).
2

Upload to WordPress

In WordPress admin, go to Plugins -> Add New -> Upload Plugin and select the ZIP file.
3

Activate

Activate the plugin after installation completes.
Make sure your environment has WordPress 6.9+, PHP 7.4+, and Elementor v4 with the Atomic Editor enabled.
If you plan to import design tokens, enable Elementor Variables too.

​
Step 2: Import Your First CSS

Start with the built-in Skelementor Preset so you can verify the shipped workflow first.
1

Open the Skelementor admin screen

Open the Skelementor import screen from the WordPress dashboard.
2

Run the bundled import

Click Import Skelementor Preset.
3

Confirm success

Wait for the confirmation state, then check the imported classes inside Elementor.
The Skelementor Preset imports 976 classes for Elementor’s default desktop, tablet, and mobile breakpoints, and stays within Elementor’s native 1000-class limit.
The bundled skelementor-utilities.css file remains useful as a reference artifact when you want to inspect the shipped class definitions or understand how the framework is generated.

​
Step 3: Use Classes in Elementor

After import, utility classes are ready to use on Elementor v4 atomic elements.
1

Open Elementor

Edit any page or post with Elementor.
2

Choose an atomic element

Add a Heading, Text, Div Block, Button, or another supported v4 element.
3

Assign classes

Add utility classes in Elementor’s class field for that element.
4

Review the output

Confirm the imported styles render as expected in the editor preview.

​
What Happens Next?

Explore the framework

Browse the complete framework and decide what to keep or customize.

Fluid scaling

Learn which bundled families scale smoothly without extra breakpoint layers.

Breakpoints

Use --on-* suffixes when the change is structural instead of proportional.

​
Common Issues

Important: Avoid importing the same classes repeatedly without cleaning up or replacing the earlier set.

​
Classes Not Working?

  • Check that Elementor v4 and the Atomic Editor are enabled.
  • Verify the import completed successfully in the Skelementor admin screen.
  • Clear Elementor cache through Elementor -> Tools -> Regenerate CSS.

​
Import Errors?

  • Reduce batch size to isolate the failing classes.
  • Check for missing semicolons, unsupported values, or reserved class names.
  • Confirm you are not importing duplicates that already exist.

​
Need Help?

Success: Once your first import works, continue with Framework categories on the Quickstart page to see what else is available.