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

# Installation

> Installation and environment checklist for the Skelementor plugin.

<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/installation-light.png?fit=max&auto=format&n=2_yOBMnxcHRd_L04&q=85&s=51e3466162ed9b0ac86f846048b7bac7" className="dark:hidden block" alt="Skelementor Installation - Complete installation guide" width="2258" height="1204" data-path="images/installation-light.png" />

  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/2_yOBMnxcHRd_L04/images/installation-dark.png?fit=max&auto=format&n=2_yOBMnxcHRd_L04&q=85&s=fa6da86bd50a216c95a1ab8d860cf4ee" className="hidden dark:block" alt="Skelementor Installation - Complete installation guide" width="2258" height="1204" data-path="images/installation-dark.png" />
</div>

## System Requirements

### Minimum Requirements

| Requirement   | Minimum              | Notes                                          |
| ------------- | -------------------- | ---------------------------------------------- |
| **WordPress** | 6.9+                 | Multisite supported                            |
| **PHP**       | 7.4+                 | 128MB memory recommended                       |
| **Elementor** | 4.0+ (Atomic Editor) | Atomic features on by default for new installs |
| **MySQL**     | 5.6+                 | MariaDB 10.1+ also supported                   |

### Recommended Requirements

* **WordPress:** **6.9+** (latest **6.9.x** recommended)
* **PHP:** 8.0 or higher
* **Memory:** 256MB or higher
* **Elementor:** Current **4.x** with Atomic Editor enabled (default for new Elementor installations)
* **Variables:** Enabled if you plan to import design tokens

## Installation Methods

Choose the option that fits your deployment workflow.

### Method 1: WordPress Admin Upload

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

  <Step title="Open plugin upload">
    In WordPress admin, go to **Plugins -> Add New** and click **Upload Plugin**.
  </Step>

  <Step title="Install the package">
    Select the ZIP file and click **Install Now**.
  </Step>

  <Step title="Activate the plugin">
    Activate the plugin after WordPress finishes installing it.
  </Step>
</Steps>

### Method 2: FTP Upload

<Steps>
  <Step title="Extract the ZIP">
    Extract the plugin archive on your local machine.
  </Step>

  <Step title="Connect to the server">
    Use your preferred FTP or SFTP client to connect to the WordPress host.
  </Step>

  <Step title="Upload the plugin folder">
    Upload the extracted `skelementor-v4` directory to `/wp-content/plugins/`.
  </Step>

  <Step title="Activate in WordPress">
    Open **Plugins** in WordPress admin and activate Skelementor.
  </Step>
</Steps>

### Method 3: WP-CLI

If you manage the site with WP-CLI, install from the hosted ZIP or a local copy:

```bash theme={null}
wp plugin install https://d3o9gc3hm4a6ya.cloudfront.net/css-utility-importer.zip --activate
wp plugin install /path/to/css-utility-importer.zip --activate
```

## Pre-Installation Checklist

Before installing Skelementor, verify these points:

<AccordionGroup>
  <Accordion icon="check-circle" title="WordPress version">
    Confirm the site is on **WordPress 6.9+** (latest **6.9.x** recommended) via **Dashboard → Updates** or **Tools → Site Health**.
  </Accordion>

  <Accordion icon="puzzle-piece" title="Elementor & Atomic Editor">
    Use **Elementor v4** from the standard plugin release. The **Atomic Editor** is stable; new Elementor installs enable Atomic features by default. Upgraded or legacy sites may need **Atomic Editor** enabled under **Elementor → Editor → Settings**.

    <Steps>
      <Step title="Check version">
        Confirm **Elementor v4** is active in **Elementor → System Info**.
      </Step>

      <Step title="Confirm Atomic Editor">
        In **Elementor → Editor → Settings**, ensure **Atomic Editor** is on (or use Elementor’s prompt in the editor).
      </Step>

      <Step title="Enable Variables if needed">
        Turn on Variables if your import workflow includes reusable design tokens.
      </Step>
    </Steps>
  </Accordion>

  <Accordion icon="server" title="Server readiness">
    Confirm PHP version, available memory, and file permissions are sufficient for plugin installation and larger imports.
  </Accordion>
</AccordionGroup>

## Post-Installation Setup

### 1. Verify Installation

<Steps>
  <Step title="Confirm plugin status">
    Check **Plugins** in WordPress admin and make sure Skelementor is active.
  </Step>

  <Step title="Open the Skelementor screen">
    Find the Skelementor admin screen and confirm the CSS import interface loads.
  </Step>

  <Step title="Check Elementor compatibility">
    Verify Elementor still loads normally and the Atomic Editor is available.
  </Step>
</Steps>

### 2. Import the Starter Framework

<Steps>
  <Step title="Open the Skelementor screen">
    Open the Skelementor admin screen after activation.
  </Step>

  <Step title="Import the Skelementor Preset">
    Click **Import Skelementor Preset** to load the built-in default-breakpoints package.
  </Step>

  <Step title="Verify imported classes">
    Confirm the imported classes appear in Elementor's class management UI.
  </Step>
</Steps>

<Note>
  The Skelementor Preset imports **976 classes** for Elementor’s default desktop, tablet, and mobile breakpoints. It stays within Elementor’s native **1000 global class** limit, so no core-file patching is required.
</Note>

### 3. Test in Elementor

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

  <Step title="Insert an atomic element">
    Add a Heading, Text, or Div Block to the canvas.
  </Step>

  <Step title="Apply a utility class">
    Assign a simple class like `text-2xl` or `flex` to verify the import worked.
  </Step>

  <Step title="Confirm rendering">
    Make sure the styling appears correctly in the editor preview.
  </Step>
</Steps>

## Troubleshooting Installation

<AccordionGroup>
  <Accordion icon="exclamation-triangle" title="Plugin activation failed">
    Common causes include low PHP memory, permission issues, or a damaged upload package. Re-upload the ZIP and review server logs if activation fails again.
  </Accordion>

  <Accordion icon="puzzle-piece" title="Elementor not compatible">
    If Skelementor warns about Elementor, update to **Elementor v4** and confirm **Atomic Editor** is enabled before retrying.
  </Accordion>

  <Accordion icon="server" title="Server errors">
    Review PHP memory limits, filesystem permissions, and any web server error logs if imports or activation trigger 500 errors.
  </Accordion>
</AccordionGroup>

### Getting Help

<CardGroup cols={2}>
  <Card title="Common Errors" icon="exclamation-triangle" href="/getting-started/common-errors">
    Troubleshoot import failures and class conflicts.
  </Card>

  <Card title="Support Workflow" icon="life-ring" href="/getting-started/support">
    See what information to gather before contacting Skelementor support.
  </Card>

  <Card title="FAQ" icon="question-circle" href="/getting-started/faq">
    Review the most common setup and usage questions.
  </Card>

  <Card title="GitHub Issues" icon="github" href="https://github.com/skelementor/skelementor-css/issues">
    Report bugs or request features on GitHub.
  </Card>
</CardGroup>

## Next Steps

<Check>
  **Installation complete:** Continue with the [quickstart guide](/quickstart) to run your first import.
</Check>

<CardGroup cols={2}>
  <Card title="Start with Quickstart" icon="rocket" href="/quickstart">
    Import your first utility classes.
  </Card>

  <Card title="Explore the Framework" icon="book-open" href="/quickstart">
    Review the utility surface area before importing larger class sets.
  </Card>
</CardGroup>