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.

View Detailed Guide

For a complete step-by-step guide with detailed instructions, check out our full quickstart guide.

​
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.
Requirements: WordPress 5.8+, PHP 7.4+, and Elementor v4 (beta 3.32.4+) with Atomic Elements enabled.

​
Step 2: Import Your First CSS

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

Wait for Success

The plugin will parse and import all classes. You’ll see a success message when complete.

​
Step 3: Use Classes in Elementor

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

​
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.
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.
Success! You’re now ready to build faster with utility classes in Elementor. Explore the utility framework to see all available classes.