Quickstart

Install Skelementor, import the bundled framework, learn how utilities are organized, and apply classes in Elementor.

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 4.0+ with the Atomic Editor enabled.

Step 2: Import Your First CSS

1. Import the bundled CSS

   Start with the bundled skelementor-utilities.css file so you can verify the import workflow first. The detailed copy-paste walkthrough lives in the full import guide.

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.

One Framework

Skelementor ships one bundled utility framework for Elementor v4. The default class names are the framework. 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().

Use the bundled skelementor-utilities.css file included with the plugin package as the source of truth for the shipped utilities.

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.

Related Guides

Installation

Full installation methods, requirements, and setup checks.

Import Guide

Detailed class and variable import walkthrough.