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

​
Get Started in 3 Steps

Get your CSS utilities imported into Elementor and start building faster than ever.

​
Step 1: Install the Plugin

1

Download the Plugin

Download the latest version from the GitHub releases page or install via WordPress admin.
2

Upload to WordPress

Go to Plugins → Add New → Upload Plugin in your WordPress admin and select the downloaded ZIP file.
3

Activate

Click Activate after installation completes.
Make sure you have: - WordPress: 5.8 or higher - PHP: 7.4 or higher
  • Elementor: v4 (beta, 3.32.4+) with Atomic Elements enabled
You can check your Elementor version in Elementor → System Info.

​
Step 2: Import Your First CSS

The plugin includes a complete utility framework with 200+ classes:
1

Open Skelementor Admin

Go to WordPress Admin → Skelementor in your admin menu.
2

Copy the CSS

Open skelementor-utilities.css from the plugin folder and copy all the CSS content.
3

Paste & Import

Paste the CSS into the “CSS Content” textarea and click “Import Into Elementor”.
4

Don't wait for Success

The plugin will parse and import all classes. You’ll see a success message when complete (takes less than a second).
Want to import your own CSS utilities?
1

Prepare Your CSS

Write your utility classes following our CSS writing guidelines.
2

Import in Batches

For large CSS files, import 100-200 classes at a time to avoid timeouts.
3

Test Classes

Verify your classes work in Elementor before importing more.

​
Step 3: Use Classes in Elementor

Now you can use utility classes on any Elementor atomic element:
1

Open Elementor Editor

Edit any page or post with Elementor.
2

Add an Atomic Element

Add a Heading, Text, Div Block, or any other atomic element (v4).
3

Apply Classes

In the element’s Style tab, add utility classes to the CSS Classes field.
4

See Instant Results

Your utility classes will apply immediately in the editor.

​
Quick Examples

Try these utility combinations to see Skelementor in action:

​
Flexbox Layout

<div class="flex items-center justify-between p-6 bg-white rounded-lg">
  <h1 class="text-2xl font-700">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="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 Utilities

Browse the complete utility framework with 300+ classes.

Learn Best Practices

Discover how to use utilities effectively in your designs.

View Examples

See real-world examples and advanced usage patterns.

Customize CSS

Learn how to write and import your own utility classes.

​
Common Issues

Important: Never re-import the same classes. If you need to update a class, delete it from Elementor’s Global Classes panel first, then re-import.

​
Classes Not Working?

  • Check that you’re using Elementor v4 with Atomic Elements enabled
  • Verify classes are imported successfully in the Skelementor admin
  • Clear Elementor cache: Elementor → Tools → Regenerate CSS

​
Import Errors?

  • Import in smaller batches (100-200 classes at a time)
  • Check CSS syntax for missing semicolons or units
  • Ensure you’re not re-importing existing classes

​
Need Help?

Success! You’re now ready to build faster with utility classes in Elementor. Explore the utility framework to see all available classes.