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

​
Get Started in 3 Steps

Use this page when you want the fastest route from installing Skelementor to working classes inside Elementor.

View Import Guide

Need the longer walkthrough? Open the full import guide.

​
Step 1: Install the Plugin

1

Install the plugin

Download, upload, and activate the Skelementor ZIP in WordPress. Use the full installation guide if you need the detailed requirements, upload methods, or troubleshooting steps.
Requirements: WordPress 6.9+, PHP 7.4+, and Elementor v4 with the Atomic Editor enabled.

​
Step 2: Import Your First CSS

1

Import the Skelementor Preset

Use the built-in Skelementor Preset for the standard first import. It adds 976 classes for Elementor’s default desktop, tablet, and mobile breakpoints while staying within Elementor’s native 1000-class limit.

​
Step 3: Use Classes in Elementor

1

Use classes in Elementor

Open any page with Elementor, add an atomic element, and assign imported utility classes in the class field to confirm the styles render correctly.
Skelementor Utility Framework - Skelementor Preset and utility categories for Elementor v4

​
One Framework

Skelementor ships one stable built-in import path for day-one setup: the Skelementor Preset. It adds 976 classes for Elementor’s default desktop, tablet, and mobile breakpoints. The bundled skelementor-utilities.css file remains the source artifact for reference, inspection, and regeneration workflows. Where a class family uses responsive clamp() values (for example text-*), that behavior is built in and does not need a separate naming layer. leading-* uses fixed pixel line-height in the bundle, not clamp().

​
Framework Categories

Typography

Responsive text-* scale, fixed pixel leading-*, weights, tracking, alignment, and text styling.

Layout

Display, overflow, object-fit, aspect-ratio, positioning, z-index, and responsive structural suffixes.

Spacing

Margin, padding, and gap utilities built around the bundled spacing tokens.

Sizing

Fractional widths, screen-height helpers, and responsive max-width utilities.

Colors

Text, background, and border color helpers aligned with the bundled tokens.

Borders

Border widths, styles, radius utilities, and the shipped border color set.

Effects

Full opacity scale for layering, disabled states, and visual depth.

Filters

Blur, brightness, contrast, saturation, and color-shift utilities.

Flexbox

Direction, wrap, alignment, order, grow/shrink, gap, and responsive structural variants.

Components

Preset button classes and the broader component patterns they support.

Breakpoints

The shipped --on-* suffix system for structural classes at each breakpoint.

Fluid scaling

How clamp()-based scaling works across bundled typography and spacing families.

Variables

CSS custom properties, bundled tokens, and how variables fit into imports.

Installation

Full installation methods, requirements, and setup checks.

Import Guide

Detailed class and variable import walkthrough.