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 4.0+ 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 bundled Skelementor utility CSS so you can verify the full workflow first.
1

Open the Skelementor admin screen

Open the Skelementor import screen from the WordPress dashboard.
2

Copy the bundled stylesheet

Copy the CSS from skelementor-utilities.css shipped with the Skelementor plugin package.
3

Run the import

Paste the CSS into Skelementor and submit it.
4

Confirm success

Wait for the confirmation state, then check the imported classes inside Elementor.
Once the starter import works, begin bringing in your own classes.
1

Prepare the CSS

Follow the CSS writing guidelines so your classes use supported properties and values.
2

Import in batches

For larger sets, import smaller groups first so you can isolate failures quickly.
3

Verify in Elementor

Test the imported classes in the editor before moving on to the next batch.

​
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.

​
Quick Examples

​
Flexbox Layout

<div class="elementor-element flex items-center justify-between p-6 bg-white rounded-lg">
  <h1 class="text-2xl font-bold">
    Logo
  </h1>
  <nav class="flex gap-6">
    <a class="text-base text-gray">
      Home
    </a>
    <a class="text-base text-gray">
      About
    </a>
  </nav>
</div>

​
Button Component

<button class="btn btn-blue">
  Primary Button
</button>
<button class="btn btn-green btn-lg">
  Large Button
</button>

​
Card Grid

<div class="elementor-element cont">
  <div class="flex gap-6 flex-wrap">
    <div class="card w-1-3">
      Card 1
    </div>
    <div class="card w-1-3">
      Card 2
    </div>
    <div class="card w-1-3">
      Card 3
    </div>
  </div>
</div>

​
What Happens Next?

Explore the framework

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

Learn Best Practices

Review patterns for composing classes without creating utility sprawl.

View Examples

See utility-driven layouts and components in context.

Customize CSS

Start importing your own class sets when the starter framework is stable.

​
Common Issues

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

​
Classes Not Working?

  • Check that Elementor 4.0+ 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.