> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Importing Classes & Variables

> Detailed import guide for bringing the Skelementor Preset into Elementor v4.

<div className="sk-theme-hero not-prose">
  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/2_yOBMnxcHRd_L04/images/quickstart-light.png?fit=max&auto=format&n=2_yOBMnxcHRd_L04&q=85&s=d8ab7aae924b66553fc39b577a99a727" className="dark:hidden block" alt="Skelementor Quickstart - Get up and running in 3 simple steps" width="2258" height="1204" data-path="images/quickstart-light.png" />

  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/2_yOBMnxcHRd_L04/images/quickstart-dark.png?fit=max&auto=format&n=2_yOBMnxcHRd_L04&q=85&s=8fd75230d191a1c8df489bcdc1475be7" className="hidden dark:block" alt="Skelementor Quickstart - Get up and running in 3 simple steps" width="2258" height="1204" data-path="images/quickstart-dark.png" />
</div>

## Import In 3 Steps

This is the longer import workflow for teams that want more setup detail before bringing classes and variables into Elementor.

### Step 1: Install the Plugin

<AccordionGroup>
  <Accordion icon="download" title="Install the package">
    <Steps>
      <Step title="Get the build">
        Download the [Skelementor plugin package](https://d3o9gc3hm4a6ya.cloudfront.net/css-utility-importer.zip) (.zip).
      </Step>

      <Step title="Upload to WordPress">
        In WordPress admin, go to **Plugins -> Add New -> Upload Plugin** and select the ZIP file.
      </Step>

      <Step title="Activate">
        Activate the plugin after installation completes.
      </Step>
    </Steps>
  </Accordion>

  <Accordion icon="check-circle" title="Verify requirements">
    Make sure your environment has WordPress **6.9+**, PHP 7.4+, and Elementor **v4** with the Atomic Editor enabled.

    <Callout icon="puzzle-piece" color="#8f1d7d">
      <div className="sk-elementor-callout-text">
        If you plan to import design tokens, enable Elementor Variables too.
      </div>
    </Callout>
  </Accordion>
</AccordionGroup>

### Step 2: Import Your First CSS

<AccordionGroup>
  <Accordion icon="code" title="Import the Skelementor Preset">
    Start with the built-in **Skelementor Preset** so you can verify the shipped workflow first.

    <Steps>
      <Step title="Open the Skelementor admin screen">
        Open the Skelementor import screen from the WordPress dashboard.
      </Step>

      <Step title="Run the bundled import">
        Click **Import Skelementor Preset**.
      </Step>

      <Step title="Confirm success">
        Wait for the confirmation state, then check the imported classes inside Elementor.
      </Step>
    </Steps>

    <Note>
      The Skelementor Preset imports **976 classes** for Elementor’s default desktop, tablet, and mobile breakpoints, and stays within Elementor’s native **1000-class** limit.
    </Note>
  </Accordion>

  <Accordion icon="book-open" title="Inspect the bundled source files">
    The bundled `skelementor-utilities.css` file remains useful as a reference artifact when you want to inspect the shipped class definitions or understand how the framework is generated.
  </Accordion>
</AccordionGroup>

### Step 3: Use Classes in Elementor

<Accordion icon="magic-wand" title="Apply utility classes">
  After import, utility classes are ready to use on Elementor v4 atomic elements.

  <Steps>
    <Step title="Open Elementor">
      Edit any page or post with Elementor.
    </Step>

    <Step title="Choose an atomic element">
      Add a Heading, Text, Div Block, Button, or another supported v4 element.
    </Step>

    <Step title="Assign classes">
      Add utility classes in Elementor's class field for that element.
    </Step>

    <Step title="Review the output">
      Confirm the imported styles render as expected in the editor preview.
    </Step>
  </Steps>
</Accordion>

## What Happens Next?

<CardGroup cols={2}>
  <Card title="Explore the framework" icon="search" href="/quickstart#framework-categories">
    Browse the complete framework and decide what to keep or customize.
  </Card>

  <Card title="Fluid scaling" icon="arrows-up-down-left-right" href="/concepts/fluid-scaling">
    Learn which bundled families scale smoothly without extra breakpoint layers.
  </Card>

  <Card title="Breakpoints" icon="ruler" href="/concepts/responsive-utilities">
    Use `--on-*` suffixes when the change is structural instead of proportional.
  </Card>
</CardGroup>

## Common Issues

<Warning>
  **Important:** Avoid importing the same classes repeatedly without cleaning up or replacing the earlier set.
</Warning>

### Classes Not Working?

* Check that Elementor **v4** and the Atomic Editor are enabled.
* Verify the import completed successfully in the Skelementor admin screen.
* Clear Elementor cache through **Elementor -> Tools -> Regenerate CSS**.

### Import Errors?

* Reduce batch size to isolate the failing classes.
* Check for missing semicolons, unsupported values, or reserved class names.
* Confirm you are not importing duplicates that already exist.

### Need Help?

* Start with the [troubleshooting guide](/getting-started/common-errors)
* Browse the [FAQ](/getting-started/faq)
* Review the [support page](/getting-started/support)

<Note>
  **Success:** Once your first import works, continue with [Framework categories on the Quickstart page](/quickstart#framework-categories) to see what else is available.
</Note>