Skelementor

Import utility classes directly into Elementor’s Global Classes system

What is Skelementor?

Skelementor is Elementor’s biggest component library, and now offers a WordPress plugin that seamlessly imports CSS utility classes into Elementor v4’s Global Classes system. No more manual CSS management or complex setup: just paste your CSS and start using utility classes on any Elementor atomic element.

Quick Start

Get up and running in 3 simple steps.

New to Elementor v4? This plugin requires Elementor v4 (beta 3.32.4+) with Atomic Elements enabled. v4 Required

Key Features

Automatic Limit Management

No need to manually edit Elementor files. The plugin handles all limit management automatically.

Safe Deactivation

Restores all Elementor settings when deactivated. Your imported classes remain intact.

Batch Import Support

Import large CSS files incrementally. Perfect for comprehensive utility frameworks.

No Configuration Needed

Works out of the box. Just install, activate, and start importing.

Complete Utility Framework

Skelementor includes a comprehensive utility framework with 200+ ready-to-use classes:

Typography

Font sizes, weights, line heights, text alignment, and more.

Layout

Display, positioning, flexbox, and responsive utilities.

Spacing

Margin, padding, and gap utilities with consistent scale.

Colors

Text, background, and border color utilities.

Borders

Border width, style, radius, and color utilities.

Components

Pre-built button, card, and container components.

Requirements

Elementor v4 Required: This plugin works with Elementor v4 (beta, 3.32.4+) or higher with Atomic Elements enabled.

Requirement	Minimum	Recommended
WordPress	5.8+	6.0+
PHP	7.4+	8.0+
Elementor	v4 (beta 3.32.4+)	Latest stable
Compatibility	Free & Pro	Both supported

How It Works

1. Install & Activate

   Install the plugin and activate it in your WordPress admin.

2. Import CSS

   Paste your CSS utilities into the Skelementor admin page and click “Import Into Elementor”.

3. Use Classes

   Apply utility classes to any Elementor atomic element in the editor.

Example Usage

Once imported, use utility classes directly in Elementor:

<!-- Flexbox Layout -->
<div class="flex items-center gap-4">
  <h1 class="text-2xl font-bold">Heading</h1>
  <p class="text-gray">Subtitle</p>
</div>

<!-- Button Component -->
<button class="btn btn-blue">Click Me</button>

<!-- Card Layout -->
<div class="card p-6 rounded-lg bg-white">
  <h2 class="text-xl font-semibold mb-4">Card Title</h2>
  <p class="text-gray">Card content goes here.</p>
</div>

What Makes Skelementor Different?

Native Elementor Integration

Uses Elementor’s built-in Global Classes system - no custom CSS injection or performance overhead.

Smart CSS Parsing

Automatically converts CSS to Elementor’s atomic format with intelligent property mapping.

Automatic Conversions

Converts logical properties, handles auto values, and adds position:relative for z-index classes.

Backup System

Creates automatic backups before making changes and restores settings on deactivation.

Get Started

Ready to supercharge your Elementor workflow?

Start with Quickstart

Follow our step-by-step guide to get up and running in minutes.

Browse Utility Framework

Explore the complete utility framework with 200+ classes.

View Examples

See real-world examples and best practices for using utility classes.

Need Help? Check out our troubleshooting guide or contact support.