How To Turn AI Web Designs into Editable Elementor Pages (Full Workflow)

What This Guide Is About {#what-this-is}

This guide teaches you a repeatable workflow for turning any custom web design — built or generated in HTML, CSS, and JavaScript — into a fully importable Elementor page template. The output is a .json file you can import directly into Elementor, plus a companion CSS file that handles effects and styling that Elementor’s panel cannot replicate natively.

The workflow uses AI (Claude, GPT-4o, Gemini, or similar) at two stages: first to design the page prototype, then to convert it into Elementor-compatible JSON. You do not need to write JSON by hand. You do not need to be a developer. You do need to understand the principles in this guide so that what the AI produces is actually usable.

This is not a theoretical article. Every technique here was developed through a real build session. We designed a full SaaS landing page from scratch, converted it twice using two different approaches, found the problems, fixed them, and documented everything. The prototype — a fictional AI platform called NEXUS — is used throughout as a working example of the methodology. Your job is to apply the same workflow to your own design.

Important Disclaimer Before You Start {#disclaimer}

Your HTML prototype must be built in a way that maps to how Elementor thinks about layout. This is the single most important requirement for a successful conversion.

Elementor organises pages using containers (rows and columns), widgets (headings, text, buttons, images, icons), and — in the modern Flexbox Container system — Grid containers. When you ask an AI to convert your HTML to Elementor JSON, it will try to map your HTML structure onto these building blocks. If your design uses layout patterns that have no Elementor equivalent, the conversion will either lose fidelity or require significant manual rework.

What Elementor understands natively:

• Section/row → Container (flex row)
• Column → Inner container (flex column)
• CSS Grid → Grid container with grid_columns_fr
• Heading tags → Heading widget
• Paragraphs and rich text → Text Editor widget
• Links and CTA buttons → Button widget
• Images → Image widget
• Icon + text combinations → Icon List or Icon Box widget
• Simple dividers and spacers → Divider / Spacer widget

What Elementor cannot do natively but can handle via HTML widgets:

• Canvas-based animations (particle networks, WebGL, Three.js)
• CSS keyframe animations triggered by JavaScript
• Custom cursor effects
• Marquee/ticker animations
• Count-up number animations
• Any component requiring document.body manipulation
• Complex multi-span CSS Grid layouts (bento grids with different row heights)
• Orbital, radial, or SVG-based visual components

The rule is: design in standard HTML/CSS/JS, and the AI will map what it can to native Elementor widgets. Everything it cannot map natively becomes an HTML widget. A well-structured HTML prototype converts cleanly. A prototype built with exotic CSS tricks, heavy JavaScript frameworks, or non-standard layout patterns will require more manual work after import.

How We Discovered This Workflow — The NEXUS Prototype {#the-prototype}

To develop and test this workflow, we built a complete SaaS landing page prototype from scratch using Claude AI. The brief was simple: design a dark, editorial, visually striking landing page for an AI automation SaaS called NEXUS — no limits, no held-back creativity.

The result was a full-viewport landing page with an acid green (#c8ff00) accent on a near-black (#0a0a12) background, using Syne for display type, DM Sans for body text, and Space Mono for monospace labels. It included a fixed navigation bar, a hero section with 120px+ editorial headlines and italic outline text effects, an animated marquee strip, scroll-triggered count-up statistics, a 12-column asymmetric bento grid, a step-by-step process section with an orbital pulsing animation, testimonial cards, three-tier pricing, a full-bleed CTA with a watermark ghost-text effect, and a four-column footer — all with a particle canvas background and a custom lagging cursor.

We then ran two separate conversion passes:

V1 (HTML Widget approach): Sections that could not be reproduced natively — the bento grid, footer, animated elements — were kept as HTML widgets. The result had the highest visual fidelity but lower editability for non-developers.

V2 (Native Grid approach): The bento grid and footer were rebuilt using Elementor’s native Grid container system with proper grid_column_start/end and grid_row_start/end settings. Every widget received its own CSS class in the Advanced tab. The result was more editable but required manual tweaking for card heights.

Everything in this guide is drawn from that experiment. The prompts, the fixes, the limitations, the workarounds — all of it was discovered in practice. You will now use the same playbook for whatever design you want to build.

Step 1: Set Up Global Colors and Fonts in Elementor First {#global-setup}

Before importing any template, take five minutes to configure your brand’s global colors and fonts in Elementor. This is available in the free version (Elementor 3.0+) and ensures consistency across every page you build.

Go to the Elementor editor → hamburger menu → Site Settings → Global Colors. Add your brand palette here. Then go to Site Settings → Global Fonts and add your typefaces.

Why do this first? Because once these globals are set, any widget that references them — including those in imported templates — will automatically display your brand colors and fonts rather than whatever defaults were in the original template. It also means any new sections you build the traditional way will always pull from the same token library.

Practical naming convention for your global tokens:

The exact values depend entirely on your design. Whatever colors and fonts your AI-designed prototype uses, register them here before importing the JSON.

Step 2: Design Your Page in HTML/CSS/JS {#design-step}

If you already have a design, skip to Step 3. If you are starting from scratch, this step is where you use AI to generate your prototype.

The goal is a single HTML file — ideally self-contained with inline styles and scripts — that represents your full landing page design. This file is what the AI will convert to Elementor JSON in Step 4.

What makes a good HTML prototype for Elementor conversion:

• Use standard block-level layout: div, section, header, footer
• Structure sections clearly with meaningful class names (.hero, .features, .pricing)
• Use CSS custom properties (--color-primary, --font-display) for your design tokens — these map cleanly to Elementor global color references
• Keep JavaScript self-contained and vanilla — no framework dependencies
• Avoid using position: fixed for anything except the nav and cursor, as fixed positioning inside Elementor’s DOM can behave unexpectedly
• For any canvas-based or heavily animated element, keep it in its own <div> with a clear class name so the AI knows to treat it as an HTML widget block

Use the prompt in the Complete Reusable Prompt Library section to generate your prototype if you are starting fresh.

Step 3: Choose Your Conversion Strategy {#strategy}

Before running the conversion prompt, decide which approach you want to use. There are two, and the right choice depends on who will be editing the site after import.

Strategy A: HTML Widget Approach (Maximum Design Fidelity)

Use this when: you or a developer will be maintaining the site, visual accuracy is the top priority, or the design has complex animated sections that would lose their effect if rebuilt natively.

In this approach, sections with layouts or animations that Elementor cannot reproduce natively are kept as HTML widgets. The widget carries its own styles and scripts. Content editing requires opening the widget and editing HTML source.

Best for: Agency portfolios, personal sites, developer-maintained projects, designs with heavy animation.

Strategy B: Native Grid Approach (Maximum Editability)

Use this when: a client or non-technical editor will be updating content, or you want the full benefit of Elementor’s panel for typography, spacing, and content changes.

In this approach, the AI uses Elementor’s native Grid container for any grid-based layout, native heading/text/button widgets for all content, and HTML widgets only for pure visual/animation components that the editor will never need to touch.

Best for: Client websites, content-heavy pages, anyone who wants to update copy without touching code.

The Hybrid (Recommended for Most Projects)

The real-world answer is almost always: native containers and widgets for everything editable, HTML widgets for everything decorative or animated. This is what the NEXUS V2 template uses — and it is the strategy the master conversion prompt in this guide is built around.

Step 4: Convert to Elementor JSON — The Master Prompt {#convert-prompt}

This is the most important section in the guide. Copy the prompt below, paste it into your AI conversation immediately after sharing your HTML prototype, and adjust the bracketed sections to match your project. This prompt encodes every convention and lesson learned from the NEXUS build.

Convert the HTML landing page I've shared into an importable Elementor JSON 
page template, plus a companion CSS file.

━━━ SYSTEM REQUIREMENTS ━━━

Use the modern Elementor Flexbox Container system exclusively.
Do NOT use legacy Section/Column elements.
All containers must use elType: "container" with appropriate settings.
Target Elementor 3.x+ (Flexbox Container + Grid Container era).

━━━ STRUCTURAL APPROACH ━━━

For every layout section, apply this decision logic:

NATIVE ELEMENTOR (use for all editable content):
- Headings → Heading widget
- Paragraphs and body text → Text Editor widget
- CTA buttons → Button widget
- Step-by-step processes, features lists → native inner containers
- Testimonials → native containers with heading + text-editor + HTML 
  author block
- Pricing cards → native containers with widgets
- Any section where a client or non-developer will edit copy

HTML WIDGET (use only for visual/animated components):
- Fixed navigation bar (requires JS scroll class toggle)
- Animated marquee/ticker strip (CSS animation)
- Stat counters with count-up animation (requires IntersectionObserver JS)
- Particle canvas / WebGL background effects
- Custom cursor (requires JS)
- Orbital, pulsing ring, or SVG-based visual elements
- Any component requiring document.body manipulation
- Any terminal, code, or pipeline visualisation widget inside feature cards

NATIVE ELEMENTOR GRID (use for grid-based layouts):
- Feature/bento grids → Grid container with container_type: "grid"
  Set grid_columns_fr to match the column proportions of the design
  Set grid_column_start, grid_column_end, grid_row_start, grid_row_end 
  on each card container to reproduce asymmetric layouts
- Footer columns → Grid container with grid_columns_fr (e.g., "2fr 1fr 1fr 1fr")
  Each column as a native inner container with heading + list widgets

━━━ CSS CLASS REQUIREMENTS — CRITICAL ━━━

Every single element in the JSON must have CSS classes applied:
- Every top-level container: _css_classes and _element_id
- Every inner container: _css_classes
- Every widget (heading, text-editor, button, html, divider): _css_classes
- Use a consistent prefix for ALL classes (e.g., nx- for NEXUS, or match 
  the project name) to avoid conflicts with theme/plugin classes

CSS class naming conventions:
- Section containers: [prefix]-[section-name] (e.g., nx-hero, nx-features)
- Section headers: [prefix]-section-header
- Section title headings: [prefix]-section-title
- Section tag/eyebrow labels: [prefix]-section-tag
- Section description text: [prefix]-section-desc
- Individual widgets: [prefix]-[section]-[element] 
  (e.g., nx-hero-headline, nx-hero-sub, nx-hero-actions)
- Button variants: [prefix]-btn-[variant] (e.g., nx-btn-primary, nx-btn-ghost)
- Card components: [prefix]-[section]-card, [prefix]-card-title, 
  [prefix]-card-body, [prefix]-card-tag
- Scroll reveal: nx-reveal (base), nx-d1 / nx-d2 / nx-d3 (stagger delays)
- State classes added by JS: nx-visible (added to .nx-reveal elements),
  nx-scrolled (added to fixed nav on scroll), nx-counted (added to stat cells)

Element IDs (_element_id) on major sections for anchor links:
- [prefix]-hero, [prefix]-features, [prefix]-process, 
  [prefix]-testimonials, [prefix]-pricing, [prefix]-cta, [prefix]-footer

━━━ SCROLL REVEAL SYSTEM ━━━

All major sections and cards must have nx-reveal applied as a CSS class.
The Global Setup HTML widget must include an IntersectionObserver script that:
- Queries all .nx-reveal elements after DOMContentLoaded
- Adds .nx-visible when the element enters the viewport at threshold 0.12
- Applies transition-delay for elements with .nx-d1 (.1s), .nx-d2 (.2s), 
  .nx-d3 (.3s)

━━━ GLOBAL SETUP HTML WIDGET ━━━

Create a Global Setup HTML widget as the very first element in the template.
This widget must handle:

1. Google Fonts import link tag for all fonts used in the design
2. CSS custom properties (variables) for all brand colors and fonts on :root
3. Body and page background color override (!important to override theme)
4. cursor: none on body, a, button, .elementor-button
5. Noise overlay via body::after (SVG feTurbulence data URI or equivalent)
6. Scroll reveal utility classes (.nx-reveal, .nx-visible, .nx-d1/d2/d3)
7. Custom cursor HTML structure (#nx-cursor-dot, #nx-cursor-ring) 
   injected into the page
8. Particle canvas: create via document.createElement('canvas'), 
   set position:fixed, top/left:0, width/height:100%, z-index:0, 
   pointer-events:none, then append with document.body.appendChild(canvas)
   — NEVER place the canvas element inside the HTML widget's own DOM node
   — this is critical: canvas must be in document.body to work with 
     position:fixed on all browsers
9. All JavaScript (cursor animation, particle loop, scroll reveal observer,
   scroll-triggered nav class) must be in a single IIFE in this widget
10. All global CSS (cursor, canvas, reveal utilities, scrollbar, 
    body overrides) must be in a <style> block in this widget

━━━ PARTICLE CANVAS SPECIFICATION ━━━

130 particles, mix of brand accent color (30%) and white (70%)
Particle size: 0.5–2px random, opacity 0.1–0.5 random
Velocity: ±0.3 on both axes, random direction
Connection lines: draw when distance < 100px, brand accent color, 
  opacity proportional to (1 - distance/100) * 0.08, line width 0.5px
Reset particle to random position when it leaves the viewport
Canvas must re-size on window resize event

━━━ FIXED NAV HTML WIDGET ━━━

Include as a separate HTML widget immediately after the Global Setup widget.
Must include:
- position: fixed, top/left/right: 0, z-index: 1000
- Transparent background that transitions on scroll
- .nx-scrolled class applied by the Global Setup scroll listener:
  background: rgba(page-bg, 0.85), backdrop-filter: blur(20px),
  border-bottom: 1px solid var(--stroke), padding reduction
- Logo, navigation links, CTA button all in the widget HTML
- All elements styled within the widget's own <style> block
- CSS classes on every element for companion CSS overrides

━━━ TYPOGRAPHY STANDARDS ━━━

Hero headline:
- font-size: clamp(64px, 9vw, 140px) — applied via companion CSS not inline
- font-weight: 800, letter-spacing: -3px, line-height: 0.92
- Italic outline variant using -webkit-text-stroke and color: transparent
- Accent word using brand primary color class

Section titles: font-size: clamp(36px, 4vw, 56px), letter-spacing: -2px
Card titles: clamp(18px, 2vw, 28px)
Body text: 14–16px, font-weight: 300, line-height: 1.7–1.8
Labels/tags: 10–11px, font-family: mono, letter-spacing: 0.15–0.2em

━━━ BUTTON STANDARDS ━━━

All buttons: border-radius: 0 (sharp corners unless design specifies otherwise)
Primary CTA: brand accent background, dark text, mono font, 700 weight
Ghost/outline: transparent background, subtle border, hover reveals color
Price card buttons: full width (display: block, width: 100%)
All hover states: defined in companion CSS via CSS class selectors

━━━ JSON STRUCTURE RULES ━━━

All containers: { elType: "container", isInner: false/true, 
  settings: {...}, elements: [...] }
All widgets: { elType: "widget", widgetType: "[type]", isInner: false, 
  settings: {...}, elements: [] }
Grid containers: add container_type: "grid" to settings
All IDs must be unique 8-character hex strings
padding/margin: always use object format with unit, top, right, bottom, 
  left, isLinked
gap: always use object with unit, size, column, row
Colors: use hex or rgba strings
Font sizes: use object { unit: "px", size: N }

━━━ COMPANION CSS FILE ━━━

Generate a separate companion CSS file that must include:

HEADER COMMENT BLOCK listing every CSS class used in the JSON,
what element it targets, and where to find it in Elementor 
(e.g., "nx-hero-headline → Heading widget in Hero section → Advanced tab")

Then include styles for:
- All hover transitions (card lift, color shift, border glow)
- All ::before / ::after pseudo-elements (eyebrow lines, section tag lines,
  watermark ghost text on CTA)
- All font treatments that cannot be set in Elementor's typography panel
  (italic outline text, -webkit-text-stroke, clamp() font sizes)
- All button states (.nx-btn-primary:hover, etc.)
- All custom HTML widget component styles (terminal, pipeline bars,
  orbital rings, testimonial author block, price card internals)
- All utility classes (.nx-reveal, .nx-visible, stagger delays)
- CSS variables matching the design tokens

RESPONSIVE BREAKPOINTS — include both @media blocks AND note which 
settings should be adjusted in Elementor's responsive panel:

At 1024px (tablet):
- Hero headline: clamp adjusts automatically; hero bottom row stacks column
- Section headers: stack to column, description text-align left
- Process grid: stack to column
- Bento grid: 2 columns

At 768px (mobile):
- All sections: padding-left/right 24px minimum
- Bento grid: single column
- Testimonial grid: single column
- Pricing grid: single column
- Footer grid: 2×2, brand column full width
- CTA: padding 60px 32px, watermark font-size reduced
- Stats: 2×2 grid

━━━ OUTPUT FORMAT ━━━

Deliver two files:
1. [project-name]-elementor-template.json — the complete template
2. [project-name]-companion.css — the companion stylesheet

Do not include code blocks in your explanation.
The JSON must pass JSON.parse() validation with no errors.
The companion CSS must be complete — no placeholder comments saying 
"add your styles here."

How to use this prompt: Share your HTML prototype with the AI first, then paste this prompt as your next message. Adjust [prefix] to match your project (a short 2–3 letter abbreviation works well), and replace [project-name] with your project name. If your design uses specific effects not covered above, describe them in a short addendum after the prompt.

Step 5: Add the Companion CSS {#companion-css}

The JSON template alone will not reproduce your design correctly. The companion CSS is required. It handles hover effects, pseudo-elements, typography overrides, and all the styles that live outside Elementor’s panel.

To add it: go to Elementor → Site Settings → Custom CSS and paste the entire contents of the companion CSS file. If you are using a child theme, you can alternatively add it to style.css.

Do not skip this step. Importing the JSON without the companion CSS will result in missing hover effects, no scroll reveal animations, incorrect font treatments, and missing decorative elements like eyebrow lines and CTA watermarks.

How the JSON Wires CSS Classes and IDs into Elementor’s Advanced Tab {#css-classes-advanced}

One of the most useful things about AI-generated Elementor JSON is that it can pre-populate Elementor’s Advanced tab fields for you — specifically the CSS ID and CSS Classes fields that most people never bother setting manually.

In the JSON, these correspond to two settings keys:

• _element_id → maps to the CSS ID field in the Advanced tab
• _css_classes → maps to the CSS Classes field in the Advanced tab

When the JSON is imported and you open any widget or container in Elementor, you will see these fields already populated. This means:

1. You can immediately target any element from the companion CSS using its class name — no hunting for Elementor’s auto-generated class names (which change and are unreliable).
2. Section IDs are pre-set for anchor navigation — your nav links pointing to #nx-features or #nx-pricing will work immediately after import.
3. Hover effects, transitions, and pseudo-elements in the companion CSS work because every target element already has the class the CSS expects.
4. Future developers who work on the site can look at any element’s Advanced tab and immediately understand what CSS is affecting it.

This is why the master conversion prompt insists on CSS classes for every single element — not just top-level containers. When every heading widget has .nx-hero-headline, every step title has .nx-step-title, and every price card has .nx-price-card, the companion CSS has precision targeting without any specificity fights.

The Hybrid Approach — What Should Be Native vs HTML Widget {#hybrid}

Here is the decision framework in plain language, drawn from what we learned building the NEXUS prototype:

Use native Elementor widgets for everything that gets edited. Hero headlines, subheadings, body text, feature card copy, testimonial quotes, step descriptions, pricing feature lists, CTA text — all of these should be native Heading, Text Editor, and Button widgets so that anyone can open Elementor and change the words without touching code.

Use HTML widgets for everything that is only looked at, never edited. The particle canvas, the custom cursor, the marquee animation, the count-up statistics, the orbital visual, the pulsing rings, the terminal animation inside a feature card, the pipeline bars — none of these need to be editable from the panel. They can live inside HTML widgets that carry their own styles and scripts.

Use native Elementor Grid for any grid layout where individual cells need to be editable. If you have a bento features grid and the client will update the card titles and descriptions, use an Elementor Grid container with inner container cards and native heading/text-editor widgets inside each card. Set the grid column proportions with grid_columns_fr and position each card with the explicit start/end settings. The visual component inside the card (if any) stays as an HTML widget.

For footer navigation: The Icon List widget is a clean native alternative to an HTML list. It renders a styled list of links, can be fully styled via CSS classes, and does not require WordPress menus. Use it for any link list that a client might update. The HTML widget is a fallback for cases where the Icon List widget’s structure does not match your design.

Known Issues You Will Hit After Import — And How to Fix Them {#known-issues}

Card heights equalize in native grid bento layouts

When using Elementor’s Grid container for a bento layout, cards will default to equal heights within each row. The original HTML design may have used grid-row: span values to create cards with different heights. To restore the intended height variation, either:

Option A (CSS): Add min-height values to specific card classes in your companion CSS. Example: .my-bento-card-large { min-height: 500px; }.

Option B (Elementor Panel): Select each card container, go to the Layout tab, and set a minimum height manually. This is the zero-code route.

The fixed nav may conflict with your theme header

If you use Elementor Theme Builder for your site header, the HTML widget nav in the template will stack on top of it. Solution: remove the nav HTML widget from the template and recreate the navigation in Theme Builder using Elementor’s Nav widget. The companion CSS classes (.my-nav, .my-nav-scrolled) can still be applied via the Advanced tab.

Elementor Pro’s custom_css field is ignored on Free

If the JSON includes a custom_css key on any container (used for effects like the CTA watermark pseudo-element), this will only apply if you have Elementor Pro. On Free, move that CSS rule to Site Settings → Custom CSS or the companion file manually.

Editor preview vs live frontend

Several effects — the particle canvas, the custom cursor, scroll reveal animations — may not behave correctly in the Elementor editor preview. This is because the editor sandbox intercepts DOM manipulation and defers scripts. Always check the published frontend URL to verify these effects, not the editor.

Missing Classes and Effects to Watch For {#missing-classes}

Even with the comprehensive conversion prompt, there are specific patterns that AI tools sometimes miss when converting a prototype. After importing any template, check for these:

Hero subtitle text class

The subtitle text beneath the hero headline should have its own CSS class (e.g., .my-hero-sub). Without it, the font size, color, max-width, and line-height defined in your companion CSS will not apply to this specific element. Check the Advanced tab of the hero subtitle text-editor widget and add the class if it is missing.

Marquee section wrapper

The marquee strip container should have a class that targets its border, background tint, and overflow: hidden. If it is missing, the marquee may bleed outside its container or lose its top/bottom border styling. Add the class to the HTML widget’s wrapper or to the Elementor container wrapping it.

Process visual / orbital container reveal class

If your design has a visual element (orbital diagram, illustration, animation) alongside the process steps, it should have the scroll reveal class applied so it animates in when it enters the viewport. Check that the HTML widget or container holding this visual has .my-reveal in its CSS Classes field.

CTA section pseudo-element (watermark text)

If your CTA section has a large ghost watermark text in the background (created with ::before), this requires either the companion CSS to target .my-cta::before or Elementor Pro’s per-element Custom CSS. If you are on Elementor Free, make sure this rule is in your Site Settings custom CSS. If it is missing entirely from the companion CSS output, add it manually:

.my-cta {
  position: relative;
  overflow: hidden;
}
.my-cta::before {
  content: 'YOUR BRAND NAME';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 200px;
  color: rgba(0, 0, 0, 0.06);
  letter-spacing: -8px;
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
  z-index: 0;
}

Eyebrow/tag line decoration

Section tag lines (the small "— CAPABILITIES" type labels above section titles) often use a ::before pseudo-element to draw a short horizontal rule before the text. If this line is missing after import, add it to the companion CSS targeting your section tag class.

The Particle Canvas and Fixed-Position Effects Problem {#fixed-position}

This is the most commonly mishandled effect in AI-generated Elementor templates, so it deserves a dedicated explanation.

The problem: A <canvas> element placed inside an HTML widget renders inside Elementor’s container tree. If any ancestor element in that tree has transform, filter, will-change, or creates a stacking context in any other way, the browser will treat position: fixed as relative to that ancestor rather than the viewport. The result is a canvas that is either invisible, clipped, positioned incorrectly, or trapped behind other content.

The solution: The canvas must never live inside an HTML widget’s DOM. Instead, the JavaScript inside the Global Setup HTML widget should create the canvas element programmatically and inject it directly into document.body:

var canvas = document.createElement('canvas');
canvas.id = 'my-bg-canvas';
canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0.4;';
document.body.appendChild(canvas);

This bypasses Elementor’s entire container tree. The canvas exists at the body level, position: fixed works relative to the viewport as intended, and the particle animation covers the full page.

The same principle applies to any position: fixed element — custom cursors, floating widgets, overlay loaders. All of them should be injected via document.body.appendChild() rather than placed in HTML widget markup.

Will it show in the Elementor editor? No, and that is normal. The Elementor editor runs scripts in a sandbox environment and defers DOM manipulation. The canvas, cursor, and any body-injected effects will appear correctly on the published frontend page but not in the editor preview. This is expected and does not indicate a problem with your template.

Mobile and Tablet Responsiveness — Build It In, Not On {#responsiveness}

This is the most common failure point in AI-generated page templates: responsiveness is treated as an afterthought when it should be designed from the start.

The companion CSS provides @media breakpoints as a baseline, but CSS media queries alone do not give you the full responsive Elementor experience. Elementor’s responsive system works at two levels — CSS breakpoints and panel-level responsive settings — and you need both.

What the companion CSS handles:

• Column layouts collapsing to single column
• Padding reductions at mobile breakpoints
• Font size floors (via clamp() in the CSS)
• Grid column overrides for bento and footer
• Stat grid going from 4-column to 2×2

What you must do manually in Elementor’s responsive panel:

• Switch to Tablet mode and set every flex-row container’s Direction to Column where the design should stack
• Adjust padding values per breakpoint (tablet typically needs 60% of desktop padding, mobile needs 24px minimum horizontal)
• Set font size overrides per breakpoint in the Typography settings of each heading widget
• Adjust gap values for grids at each breakpoint

Recommended workflow for responsive polish:

1. Import template, add companion CSS, verify desktop layout.
2. Switch Elementor to Tablet mode (responsive toolbar at the bottom of the editor).
3. Go through every section. For any row container that should stack on tablet: Layout → Direction → Column.
4. For every section container: adjust top/bottom padding in tablet mode.
5. For the hero headline: Typography → Font Size → set tablet value (typically 60–70% of desktop).
6. Switch to Mobile mode and repeat. Mobile needs more aggressive stacking and smaller padding.
7. Check the footer grid: it should be 2-column on tablet and single column on mobile.
8. Preview on actual device or browser dev tools at multiple widths.

If you want AI to handle responsive configuration in the JSON: The conversion prompt in this guide includes responsive instructions. For the AI to set responsive panel values in the JSON (Elementor stores these as _responsive keys in widget settings), you need to explicitly ask for it. Add this to the end of the conversion prompt:

“Also configure responsive settings directly in the JSON: for every flex-row container that should stack on mobile, add responsive direction settings. For all padding values, add tablet (60% of desktop) and mobile (24px min horizontal) responsive overrides. For hero and section headings, add responsive font-size values.”

This works but produces larger JSON files and requires the AI to know Elementor’s internal responsive key naming. It is more reliable to set these in the panel after import for complex designs.

Complete Reusable Prompt Library {#prompts}

Copy any of these prompts directly. Replace bracketed values with your project details. These work with Claude, GPT-4o, Gemini, or any capable AI assistant.

Prompt 1 — Design Your Landing Page

Use this to generate your HTML prototype from scratch. The more specific you are about your design direction, the better the output.

Design a complete, single-file HTML/CSS/JS landing page for a [type of business] 
called [BRAND NAME].

Design direction and aesthetic: [describe your vision — e.g., "dark background 
with electric neon accent, editorial oversized typography, maximalist layout" 
OR "clean white with warm earth tones, minimal spacing, luxury feel" 
OR "vibrant gradient, playful rounded shapes, bold colors"]

Brand colors:
- Primary background: [hex]
- Text color: [hex]
- Accent/CTA color: [hex]
- Secondary surfaces: [hex]

Fonts:
- Display/headline font: [font name] — weights 700, 800
- Body font: [font name] — weights 300, 400, 500
- Label/mono font (optional): [font name]

Sections to include:
- Fixed navigation: logo, nav links, CTA button
- Hero: large headline, eyebrow tag line, subtitle paragraph, 
  two CTA buttons (primary + ghost/secondary)
- Social proof strip: animated scrolling marquee with brand keywords
- Stats: 4 key metrics with scroll-triggered count-up animation
- Features: asymmetric bento grid (6 cards, different sizes, 
  some cards with visual elements inside)
- Process/How it works: 4 steps with a visual/animated diagram element
- Testimonials: 3 cards with quote, name, title, company
- Pricing: 3 tiers (free, growth, enterprise) with feature lists
- CTA section: large bold call to action with watermark background text effect
- Footer: 4 columns (brand + 3 nav groups), status indicator

Required effects:
- Custom cursor: dot + lagging ring that expands on hover
- Particle canvas background: connected node network, injected into document.body
- Scroll reveal: all sections animate in on scroll (opacity + translateY)
- Sticky nav: transparent default, frosted glass on scroll
- All hover states: card lift, color transitions, button effects

Full mobile and tablet responsive design is required:
- Layouts must stack cleanly at 768px (mobile) and 1024px (tablet)
- Use clamp() for all headline font sizes
- No fixed widths — all containers must be fluid
- Test every section at 375px, 768px, and 1280px widths

Use CSS custom properties for all design tokens (--color-primary, etc.).
Keep JavaScript vanilla — no frameworks or external libraries except 
Google Fonts loaded via <link> tag.
Make the design extraordinary. Do not limit creativity.

Prompt 2 — Convert to Elementor JSON (Master Conversion Prompt)

Use this immediately after sharing your HTML prototype. This is the comprehensive conversion prompt developed from the NEXUS build.

Convert the HTML landing page I've shared into an importable Elementor JSON 
page template, plus a companion CSS file.

━━━ SYSTEM REQUIREMENTS ━━━

Use the modern Elementor Flexbox Container system exclusively.
Do NOT use legacy Section/Column elements.
All containers must use elType: "container" with appropriate settings.
Target Elementor 3.x+ (Flexbox Container + Grid Container era).

━━━ STRUCTURAL APPROACH ━━━

For every layout section, apply this decision logic:

NATIVE ELEMENTOR (use for all editable content):
- Headings → Heading widget
- Paragraphs and body text → Text Editor widget
- CTA buttons → Button widget
- Step-by-step processes, features lists → native inner containers
- Testimonials → native containers with heading + text-editor + HTML 
  author block
- Pricing cards → native containers with widgets
- Footer navigation links → Icon List widget (style via CSS class, 
  hide icons via CSS if design has no icons)
- Any section where a client or non-developer will edit copy

HTML WIDGET (use only for visual/animated components):
- Fixed navigation bar (requires JS scroll class toggle)
- Animated marquee/ticker strip (CSS animation)
- Stat counters with count-up animation (requires IntersectionObserver JS)
- Particle canvas / WebGL background effects
- Custom cursor (requires JS)
- Orbital, pulsing ring, or SVG-based visual elements
- Any component requiring document.body manipulation
- Any terminal, code, or pipeline visualisation inside feature cards

NATIVE ELEMENTOR GRID (use for grid-based layouts):
- Feature/bento grids → Grid container with container_type: "grid"
  Set grid_columns_fr to match the column proportions of the design
  Set grid_column_start, grid_column_end, grid_row_start, grid_row_end 
  on each card container to reproduce asymmetric layouts
- Footer columns → Grid container with grid_columns_fr matching design
  Each column as a native inner container with heading + Icon List widgets

━━━ CSS CLASS AND ID REQUIREMENTS — NON-NEGOTIABLE ━━━

Every single element in the JSON must have CSS classes and/or IDs applied:
- Every top-level container: _css_classes AND _element_id
- Every inner container: _css_classes
- Every individual widget (heading, text-editor, button, html, divider, 
  icon-list): _css_classes
- These map to Elementor's Advanced tab CSS ID and CSS Classes fields
  on import — this is critical for companion CSS targeting

Use prefix [PREFIX] for all classes (replace with 2–3 letter abbreviation).
Naming convention:
- Section containers: [p]-[section] (e.g., [p]-hero, [p]-features)
- Section header rows: [p]-section-header
- Section title headings: [p]-section-title  
- Eyebrow/tag labels: [p]-section-tag, [p]-eyebrow
- Description text widgets: [p]-section-desc
- Individual widgets: [p]-[section]-[element]
  (e.g., [p]-hero-headline, [p]-hero-sub, [p]-hero-actions)
- Buttons: [p]-btn-[variant] (primary, ghost, dark, outline, price)
- Cards: [p]-[section]-card, [p]-card-title, [p]-card-body, [p]-card-tag
- Process: [p]-process-step, [p]-step-num, [p]-step-title, [p]-step-desc
- Testimonials: [p]-testi-card, [p]-testi-quote, [p]-testi-author
- Pricing: [p]-price-card, [p]-price-featured, [p]-price-plan, 
  [p]-price-amount, [p]-price-period, [p]-price-feats
- CTA: [p]-cta, [p]-cta-title, [p]-cta-sub, [p]-cta-actions
- Footer: [p]-footer, [p]-footer-grid, [p]-footer-brand-col, 
  [p]-footer-nav-col, [p]-footer-bottom
- Scroll reveal: [p]-reveal (base), [p]-d1 / [p]-d2 / [p]-d3 (stagger)

Anchor IDs (_element_id) on all major sections for nav links:
[p]-hero, [p]-features, [p]-process, [p]-testimonials, 
[p]-pricing, [p]-cta, [p]-footer

━━━ GLOBAL SETUP HTML WIDGET — FIRST ELEMENT IN TEMPLATE ━━━

Create a Global Setup HTML widget as element 1.
This must include all of the following:

1. Google Fonts <link> tag for all fonts
2. <style> block with CSS custom properties on :root for all tokens
3. body background color override with !important
4. cursor: none on body, a, button, .elementor-button
5. noise overlay via body::after using SVG feTurbulence data URI
6. .nx-reveal, .nx-visible utility classes and stagger delays
7. Custom scrollbar styles
8. Cursor HTML: #[p]-cursor-dot and #[p]-cursor-ring divs
9. Particle canvas: document.createElement('canvas') then 
   document.body.appendChild(canvas) — inject into body, not widget DOM
   Canvas CSS: position:fixed, top/left:0, 100% width/height, 
   z-index:0, pointer-events:none, opacity:0.4
10. Single IIFE containing all JS:
    - Cursor animation (RAF loop, lagging ring)
    - Particle system (130 particles, resize handler, draw loop)
    - IntersectionObserver for scroll reveal (threshold 0.12, 
      adds [p]-visible class, targets all .[p]-reveal elements)
    - Scroll listener for nav ([p]-scrolled class at scrollY > 60)
    - Stat counter observer (threshold 0.3, count-up with decimal support,
      adds [p]-counted class for the ::before bar animation)

━━━ PARTICLE CANVAS SPECIFICATION ━━━

130 particles: 30% brand accent color, 70% white
Size: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.4 + 0.1
Velocity: (Math.random() - 0.5) * 0.3 on both axes
Reset to random position when any edge is crossed
Connection lines when distance < 100px: brand accent color,
  opacity (1 - distance/100) * 0.08, lineWidth 0.5
requestAnimationFrame loop, canvas resizes on window resize

━━━ FIXED NAV HTML WIDGET ━━━

Second element in template. Must include:
- position:fixed, top/left/right:0, z-index:1000
- Default: transparent bg, no border
- .[p]-scrolled state: rgba(bg, 0.85), backdrop-filter:blur(20px), 
  border-bottom, reduced padding
- Logo, links, CTA button all in widget HTML
- All styles in widget-internal <style> block
- CSS class on every element

━━━ SCROLL REVEAL STANDARD ━━━

Apply .[p]-reveal to: all section containers, all card containers,
section headers, process steps (with stagger d1/d2/d3), 
testimonial cards (with stagger), pricing cards (with stagger),
CTA container, orbital/visual element container

━━━ JSON TECHNICAL REQUIREMENTS ━━━

Format:
- Containers: { id, elType:"container", isInner:bool, settings:{}, elements:[] }
- Widgets: { id, elType:"widget", widgetType:"[type]", isInner:false, 
  settings:{}, elements:[] }
- Grid containers: add container_type:"grid" to settings
- All IDs: unique 8-character alphanumeric strings
- padding/margin: { unit:"px", top:"N", right:"N", bottom:"N", 
  left:"N", isLinked:false }
- gap: { unit:"px", size:N, column:N, row:N }
- font sizes: { unit:"px", size:N }
- Colors: hex or rgba strings only

Typography in widget settings:
- typography_typography: "custom"
- typography_font_family: "[font name]"
- typography_font_weight: "[weight]"
- typography_font_size: { unit:"px", size:N }
- typography_letter_spacing: { unit:"em" or "px", size:N }
- title_color or color: "[hex]"

━━━ COMPANION CSS FILE ━━━

REQUIRED HEADER: Full class map as comment block listing every class, 
what it targets, and where it appears in Elementor's panel after import.
(Example: ".[p]-hero-headline → Heading widget, Hero section, Advanced tab")

Then complete styles for:

Typography:
- Hero headline: clamp(64px, 9vw, 140px), weight 800, ls -3px, lh 0.92
  Italic variant: color:transparent, -webkit-text-stroke, font-style:italic
  Accent word: brand accent color
- Section titles: clamp(36px, 4vw, 56px), weight 800, ls -2px
- Card titles: clamp(18px, 2vw, 28px), weight 700

Buttons (all hover states and active states)
Cards (hover lift, border glow, radial gradient reveal on hover, ::after)
Section eyebrow tags (::before line decoration)
CTA watermark (::before pseudo-element with brand name ghost text)
Testimonial author block (avatar circle, name, role)
Pricing card internals (badge, plan name, amount, period, feature list arrows)
Footer internals (logo, link hover states, status dot animation, bottom bar)
HTML widget component styles (terminal, pipeline, orbital rings)
Scroll reveal: .[p]-reveal and .[p]-visible transitions

Responsive — @media (max-width: 1024px):
- Hero headline clamp adjusts; hero bottom row flex-direction: column
- Section header flex-direction: column; desc text-align: left
- Process grid: flex-direction: column
- Bento: 2-column grid

Responsive — @media (max-width: 768px):
- All sections: padding 24px horizontal minimum
- Bento: 1-column grid
- Testimonials: flex-direction: column
- Pricing: flex-direction: column
- Footer: 2-column grid, brand col full width
- Stats: 2×2 grid
- CTA: padding 60px 32px, watermark font-size 100px

━━━ OUTPUT ━━━

Two files:
1. [project-name]-elementor-template.json — must pass JSON.parse() 
2. [project-name]-companion.css — complete, no placeholder comments

Do not paste code blocks in your explanation — deliver the files directly.

Prompt 3 — Add Full Responsive Configuration to Existing JSON

Use this if you already have a JSON template and want to add responsive settings.

Take the Elementor JSON template I've shared and add complete responsive 
configuration for tablet (1024px) and mobile (768px).

For every container that currently has flex-direction: row, determine if it 
should stack to column on tablet, mobile, or both. Add responsive direction 
settings in the JSON.

For all section containers, add responsive padding:
- Tablet: approximately 60% of desktop padding values
- Mobile: 24px horizontal minimum, 60–80px vertical

For these specific sections:

Hero:
- Headline font-size: desktop → [value]px, tablet → [~60%]px, mobile → [~40%]px
- Hero bottom row: row on desktop, column on tablet and mobile
- Hero actions: flex-end alignment on desktop, flex-start on mobile

Features bento:
- Desktop: [X] columns
- Tablet: 2 columns
- Mobile: 1 column

Testimonials and Pricing:
- Desktop: 3-column row
- Tablet: can stay 3-column or go 2-column (your call based on design)
- Mobile: 1 column, full width

Footer:
- Desktop: [X]-column grid
- Tablet: 2-column grid, brand col full width
- Mobile: 1-column stacked

Process section:
- Desktop: 2-column row (steps + visual)
- Tablet + Mobile: single column, visual hidden or below steps

Also update the companion CSS @media blocks to match these breakpoints.

Add a note for each change explaining what Elementor panel setting it 
corresponds to so a developer can verify it in the editor.

Prompt 4 — Generate Elementor Global Colors and Fonts Reference

Use this to get a ready-to-follow setup guide for your client or your own records.

Based on the design system in this HTML landing page, generate:

1. A list of global colors to register in Elementor Site Settings → Global Colors
   Format: Token Name | Hex/RGBA Value | Where It's Used
   Include: background, primary text, accent/CTA, card surfaces, border/stroke

2. A list of global fonts to register in Elementor Site Settings → Global Fonts
   Format: Token Name | Font Family | Required Weights | Where It's Used

3. Step-by-step instructions for setting these up in Elementor Free
   (no Pro subscription required)

4. A note on which elements in the page already use these globals via the JSON 
   and which have hardcoded values that should be updated to reference globals

Write this as a client handoff document — clear, numbered steps, 
no assumed technical knowledge.

Prompt 5 — Audit an Imported Template for Missing Classes and Effects

Use this after importing a template to catch anything the conversion missed.

I've imported an Elementor JSON template and companion CSS. Please audit it 
against this checklist and tell me what is missing or needs to be added manually:

1. Does every section container have both a CSS class and an element ID 
   in the Advanced tab?
2. Does every individual widget (heading, text-editor, button) have 
   its own CSS class?
3. Is the particle canvas being injected via document.body.appendChild — 
   not placed inside HTML widget markup?
4. Does the CTA section have a ::before pseudo-element style in the 
   companion CSS for the watermark text effect?
5. Does the hero subtitle text widget have its own CSS class for font 
   size/color targeting?
6. Does the marquee container have a CSS class for border and overflow styles?
7. Do the process visual / animation containers have the scroll reveal class?
8. Do all scroll reveal elements have the correct JS observer targeting them?
9. Are there mobile and tablet responsive CSS breakpoints in the companion CSS?
10. Are button hover states defined in the companion CSS for all button variants?

For each missing item, provide the exact code or setting needed to fix it.

FAQ {#faq}

Do I need Elementor Pro to use these templates?

No. Both conversion approaches — HTML widget and native grid — work with Elementor Free. The one exception is per-element Custom CSS (the custom_css JSON field), which requires Pro. On Free, move any per-element CSS to Site Settings → Custom CSS instead. The companion CSS file already handles this for the effects covered in this guide.

My design uses a CSS framework or a UI library. Will that convert cleanly?

Only vanilla HTML and CSS converts reliably to Elementor JSON. If your prototype uses Tailwind, Bootstrap, Material UI, or any other framework, the AI will need to extract the visual design intent and rebuild it using Elementor-native patterns. Ask the AI to “rewrite this section using only vanilla CSS and HTML before converting to Elementor JSON” for any framework-dependent sections.

Can the AI set Elementor’s responsive panel values directly in the JSON?

Yes. Elementor stores responsive overrides as separate keys in the widget settings (they follow a _mobile or _tablet suffix convention for some properties). Add the responsive configuration request to the conversion prompt and the AI will include them. For complex designs, it can be more reliable to set responsive values manually in the editor after import, since the AI may not always know the exact Elementor key names for every responsive property.

Why does the bento grid look different in Elementor compared to the HTML prototype?

The HTML prototype uses grid-row: span CSS to create cards with different heights in a single grid. Elementor’s Grid container handles row sizing differently — it creates auto rows based on content height rather than explicit spans. The result is equal-height cards per row. Fix this by setting minimum heights on individual card containers in the Elementor panel or via CSS class targeting in the companion file.

Can I use this workflow for a redesign of an existing WordPress page?

Yes. Export your current page’s Elementor JSON from Elementor → My Templates → Export, feed it to the AI alongside your new design HTML, and ask it to merge the structure. Alternatively, design the new page completely from scratch as a new template and import it as a new page, then migrate content manually. The latter approach is cleaner and avoids JSON merge conflicts.

How do I update template content after import?

For native widgets (headings, text editors, buttons): click the element in the Elementor editor, update the text or settings in the panel, save. For HTML widgets: click the widget, click the Edit HTML button in the panel, find the text in the markup, update it, click Update. This is why separating editable content into native widgets matters — it determines who can update what without knowing code.

The NEXUS SaaS landing page created in this tutorial — including both JSON template files and the companion CSS — is available as a downloadable reference alongside this article. Use it to study the structure before generating your own.

Suggested tags: Elementor tutorial 2026, AI web design workflow, Elementor JSON template, Claude AI Elementor, WordPress landing page, AI page builder, Elementor flexbox containers, Elementor global colors

Suggested categories: Web Design, WordPress, AI Tools, Tutorials

Schema markup recommendation: Apply HowTo schema to this page. The five numbered steps (Setup → Design → Strategy → Convert → CSS) map directly to HowToStep objects. In 2026, HowTo schema significantly increases eligibility for AI Overview inclusions and rich snippet display in both traditional and AI-augmented search results.

Internal link recommendations: Link to your Elementor installation guide, your Google Fonts in WordPress tutorial, your WordPress child theme setup guide, and any existing AI web design content on your site.