---

name: elementor-to-generateblocks version: 1.0.0 description: Convert Elementor layouts to clean GenerateBlocks V2 format, eliminating DIVception author: Gaurav Tiwari updated: 2026-01-22 trigger:

• Elementor to GenerateBlocks
• convert Elementor
• Elementor migration
• clean up Elementor
• simplify Elementor tags:
• wordpress
• generateblocks
• elementor
• conversion
• migration

---

Elementor to GenerateBlocks Converter

Convert bloated Elementor layouts to clean, semantic GenerateBlocks V2 blocks.

The DIVception Problem

Elementor wraps everything in excessive nested divs with utility classes:

Copy<!-- Elementor's typical output -->
<section class="elementor-section elementor-top-section elementor-element elementor-element-abc123 elementor-section-boxed elementor-section-height-default elementor-section-height-default">
  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-def456">
      <div class="elementor-widget-wrap elementor-element-populated">
        <div class="elementor-element elementor-element-ghi789 elementor-widget elementor-widget-heading">
          <div class="elementor-widget-container">
            <h2 class="elementor-heading-title elementor-size-default">Hello World</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Result: 7 nested divs for a simple heading.

GenerateBlocks Solution

Same content, cleaner structure:

Copy<!-- wp:generateblocks/element {"uniqueId":"sect001","tagName":"section","styles":{"paddingTop":"4rem","paddingBottom":"4rem"},"css":".gb-element-sect001{padding-top:4rem;padding-bottom:4rem}"} -->
<section class="gb-element gb-element-sect001">
    <!-- wp:generateblocks/element {"uniqueId":"sect001a","tagName":"div","styles":{"maxWidth":"1200px","marginLeft":"auto","marginRight":"auto","paddingLeft":"1rem","paddingRight":"1rem"},"css":".gb-element-sect001a{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}"} -->
    <div class="gb-element gb-element-sect001a">
        <!-- wp:generateblocks/text {"uniqueId":"sect001b","tagName":"h2","styles":{"fontSize":"2rem","fontWeight":"700","color":"#0a0a0a"},"css":".gb-text-sect001b{font-size:2rem;font-weight:700;color:#0a0a0a}"} -->
        <h2 class="gb-text gb-text-sect001b">Hello World</h2>
        <!-- /wp:generateblocks/text -->
    </div>
    <!-- /wp:generateblocks/element -->
</section>
<!-- /wp:generateblocks/element -->

Result: 3 semantic elements. Clean, maintainable, fast.

Conversion Rules

1. Flatten the Structure

2. Map Elementor Classes to Inline Styles

3. Widget to Block Mapping

4. Column Layouts

Elementor 2-column:

Copy<div class="elementor-container">
  <div class="elementor-column elementor-col-50">...</div>
  <div class="elementor-column elementor-col-50">...</div>
</div>

GenerateBlocks equivalent:

Copy<!-- wp:generateblocks/element {"uniqueId":"col001","tagName":"div","styles":{"display":"grid","gridTemplateColumns":"repeat(2, 1fr)","gap":"2rem"},"css":".gb-element-col001{display:grid;grid-template-columns:repeat(2, 1fr);gap:2rem}@media(max-width:768px){.gb-element-col001{grid-template-columns:1fr}}"} -->
<div class="gb-element gb-element-col001">
    <!-- Column 1 content -->
    <!-- Column 2 content -->
</div>
<!-- /wp:generateblocks/element -->

5. Common Elementor Patterns

Hero with background:

Copy<!-- wp:generateblocks/element {"uniqueId":"hero001","tagName":"section","styles":{"minHeight":"80vh","display":"flex","alignItems":"center","justifyContent":"center","backgroundImage":"url(image.jpg)","backgroundSize":"cover","backgroundPosition":"center"},"css":".gb-element-hero001{min-height:80vh;display:flex;align-items:center;justify-content:center;background-image:url(image.jpg);background-size:cover;background-position:center}.gb-element-hero001::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.5)}"} -->
<section class="gb-element gb-element-hero001">
    <!-- Hero content -->
</section>
<!-- /wp:generateblocks/element -->

Card grid:

Copy<!-- wp:generateblocks/element {"uniqueId":"cards001","tagName":"div","styles":{"display":"grid","gridTemplateColumns":"repeat(3, 1fr)","gap":"2rem"},"css":".gb-element-cards001{display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem}@media(max-width:1024px){.gb-element-cards001{grid-template-columns:repeat(2, 1fr)}}@media(max-width:768px){.gb-element-cards001{grid-template-columns:1fr}}"} -->
<div class="gb-element gb-element-cards001">
    <!-- Card blocks -->
</div>
<!-- /wp:generateblocks/element -->

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: 1200px
• 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 gauravtiwari.org:

Copy{
  "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": "1200px",
    "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 Rules

1. No HTML Comments (Except Block Editor)

WRONG:

Copy<!-- This is a card -->
<!-- wp:generateblocks/element ... -->

CORRECT:

Copy<!-- wp:generateblocks/element ... -->

Only WordPress block comments (<!-- wp:... --> and <!-- /wp:... -->) are allowed. All other HTML comments break the block editor.

2. Always Include Both styles and css

Every block needs:

• styles object with camelCase properties
• css string with minified CSS (kebab-case)

3. Use Semantic HTML

Replace Elementor's generic divs with proper tags:

4. Remove Spacers

Never convert elementor-widget-spacer to a block. Use:

• marginBottom on preceding element
• marginTop on following element
• gap on parent container

5. Flatten Icon Boxes

Elementor icon box (simplified):

Copy<div class="elementor-icon-box">
  <div class="elementor-icon-box-icon">
    <span class="elementor-icon"><i class="fab fa-wordpress"></i></span>
  </div>
  <div class="elementor-icon-box-content">
    <h3>Title</h3>
    <p>Description</p>
  </div>
</div>

GenerateBlocks:

Copy<!-- wp:generateblocks/element {"uniqueId":"ibox001","tagName":"div","styles":{"display":"flex","gap":"1rem","alignItems":"flex-start"},"css":".gb-element-ibox001{display:flex;gap:1rem;align-items:flex-start}"} -->
<div class="gb-element gb-element-ibox001">
    <!-- wp:generateblocks/shape {"uniqueId":"ibox001a","styles":{"width":"3rem","height":"3rem","display":"flex","alignItems":"center","justifyContent":"center","backgroundColor":"#f5f5f3","borderRadius":"0.75rem","color":"#c0392b","flexShrink":"0"},"css":".gb-shape-ibox001a{width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;background-color:#f5f5f3;border-radius:0.75rem;color:#c0392b;flex-shrink:0}"} -->
    <span class="gb-shape gb-shape-ibox001a">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="..."/></svg>
    </span>
    <!-- /wp:generateblocks/shape -->
    <!-- wp:generateblocks/element {"uniqueId":"ibox001b","tagName":"div","styles":{"flex":"1"},"css":".gb-element-ibox001b{flex:1}"} -->
    <div class="gb-element gb-element-ibox001b">
        <!-- wp:generateblocks/text {"uniqueId":"ibox001c","tagName":"h3","styles":{"fontSize":"1.125rem","fontWeight":"700","marginBottom":"0.5rem"},"css":".gb-text-ibox001c{font-size:1.125rem;font-weight:700;margin-bottom:0.5rem}"} -->
        <h3 class="gb-text gb-text-ibox001c">Title</h3>
        <!-- /wp:generateblocks/text -->
        <!-- wp:generateblocks/text {"uniqueId":"ibox001d","tagName":"p","styles":{"color":"#5c5c5c","lineHeight":"1.6"},"css":".gb-text-ibox001d{color:#5c5c5c;line-height:1.6}"} -->
        <p class="gb-text gb-text-ibox001d">Description</p>
        <!-- /wp:generateblocks/text -->
    </div>
    <!-- /wp:generateblocks/element -->
</div>
<!-- /wp:generateblocks/element -->

Conversion Workflow

1. Analyze Elementor HTML - Identify sections, columns, widgets
2. Extract content - Isolate actual text, images, links
3. Determine layout - Map column structure to grid/flex
4. Apply design tokens - Use provided CSS or infer from site
5. Build blocks - Create GenerateBlocks with inline styles
6. Test responsive - Add media queries for breakpoints
7. Validate - Ensure no HTML comments except block markers

Performance Benefits

Font Awesome to SVG

Replace Elementor's Font Awesome icons with inline SVGs:

Copy<!-- Instead of <i class="fab fa-twitter"></i> -->
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>

See SVG Icons Reference for common icons.