# Elementor To Generateblocks
> Convert Elementor layouts to clean GenerateBlocks V2 format, eliminating DIVception
- Skill: `wpgaurav/elementor-to-generateblocks` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add wpgaurav/elementor-to-generateblocks`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wpgaurav/elementor-to-generateblocks/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Coding & Dev Tools
- Author: wpgaurav (https://skillmd.com/u/wpgaurav)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wpgaurav/elementor-to-generateblocks
---
# Elementor to GenerateBlocks Converter
Convert bloated Elementor layouts to clean, semantic GenerateBlocks V2 blocks.
## Output Requirements
**ALWAYS output converted blocks to a file, never inline in the chat.**
- Output filename: `{section-name}-converted.html` (e.g., `hero-converted.html`)
- For full page conversions: Split into multiple files by section
- Include a brief summary in chat describing what was converted
**Why file output?**
- Converted block code is often 100+ lines
- Easier to copy/paste into WordPress
- Prevents truncation and formatting issues
- Allows comparison with original Elementor output
## The DIVception Problem
Elementor wraps everything in excessive nested divs with utility classes:
```html
Hello World
```
**Result:** 7 nested divs for a simple heading.
## GenerateBlocks Solution
Same content, cleaner structure:
```html
```
### 5. Common Elementor Patterns
**Hero with background:**
```html
```
**Card grid:**
```html
```
## Design Inference (When CSS Not Provided)
When converting Elementor without CSS values, infer styles based on context:
### Default GeneratePress Design System
Use these defaults when no specific styles are provided:
**Colors:**
- Primary: `#0073e6` (GeneratePress default accent)
- Text: `#222222`
- Muted text: `#757575`
- Background: `#ffffff`
- Light background: `#f7f8f9`
- Border: `#e0e0e0`
**Typography:**
- Body: `17px`, line-height `1.7`
- H1: `42px`, font-weight `600`
- H2: `35px`, font-weight `600`
- H3: `29px`, font-weight `600`
- H4: `24px`, font-weight `600`
**Spacing:**
- Section padding: `60px` top/bottom
- Container max-width: `var(--gb-container-width)`
- Content padding: `20px`
- Gap between elements: `20px`
**Buttons:**
- Padding: `15px 30px`
- Border-radius: `4px`
- Background: primary color
- Hover: darken 10%
### Site-Specific Inference
When the target site is known, extract design tokens from:
1. **Theme's style.css** - Primary colors, fonts, base sizes
2. **theme.json** (block themes) - Color palette, typography presets
3. **Existing pages** - Match the established visual language
**Example inference for yoursite.com:**
```json
{
"colors": {
"primary": "#c0392b",
"text": "#0a0a0a",
"muted": "#5c5c5c",
"background": "#ffffff",
"lightBg": "#f5f5f3",
"border": "#e5e5e5"
},
"typography": {
"body": "1rem",
"h1": "clamp(2rem, 5vw, 3.5rem)",
"h2": "clamp(1.5rem, 3vw, 2.5rem)",
"fontWeight": "900 for headings"
},
"spacing": {
"sectionPadding": "4rem",
"containerMax": "var(--gb-container-width)",
"gap": "1rem to 2rem"
},
"effects": {
"borderRadius": "1rem for cards, 2rem for buttons",
"hoverLift": "translateY(-6px)",
"shadow": "0 20px 60px rgba(0,0,0,0.15)"
}
}
```
## CRITICAL: No Extra HTML Comments
**⛔ NEVER add HTML comments other than WordPress block markers.**
The ONLY allowed comments are WordPress block delimiters:
- `` and ``
- `` and ``
- `` and ``
- `` and ``
- `` and ``
- `` and ``
- `` and ``
- Any other `` format
**WRONG - These will break the block editor:**
```html
```
**CORRECT - Only block delimiters:**
```html
Hello World
```
Any extra HTML comments will **break the WordPress block editor** and cause parsing errors. This is non-negotiable.
## Critical Rules
### 1. htmlAttributes MUST Use Object Format
**htmlAttributes MUST be a plain object, NOT an array of objects:**
```json
// ✅ CORRECT - Plain object
"htmlAttributes": {"href": "https://example.com/contact/", "target": "_blank", "id": "section-id"}
// ❌ WRONG - Array of objects (causes block editor recovery errors)
"htmlAttributes": [
{"attribute": "href", "value": "/contact/"},
{"attribute": "target", "value": "_blank"},
{"attribute": "id", "value": "section-id"}
]
```
**Note:** `linkHtmlAttributes` for media blocks may use a different format.
### 2. Always Include Both styles and css
Every block needs:
- `styles` object with camelCase properties (supports responsive keys like `"@media (max-width:1024px)":{...}`)
- `css` string with minified CSS (kebab-case, **alphabetically sorted**, base styles only)
- The `css` attribute must **NOT** contain hover states or transitions (the plugin generates those from the `styles` object)
- Exceptions that go in `css`: pseudo-elements (::before/::after), media queries, animations, parent hover targeting children
### 3. Element Blocks Need className
Add `"className":"gb-element-{id} gb-element"` to all element block attributes (className MUST include the uniqueId). HTML class order: `gb-element-{id} gb-element`:
```html