AI HTML prompts

Get AI to write HTML that converts cleanly

If your HTML is AI-generated, paste one of these prompts first. The result maps more cleanly into Elementor headings, text, images, buttons and containers.

Open the tool

General prompt

For ordinary pages, detail pages and intros. Copy the whole block, then add your info.

Please generate a complete HTML page that I will import into Elementor, following these rules:

1. Output only a single complete HTML file starting from <!doctype html>, no extra explanation.
2. Put all styles inside one <style> tag in <head>, or as inline style. Do not link external CSS files.
3. Split the page into clear sections (hero, benefits, content, call to action), each wrapped in <section> or <div>.
4. Use <h1>–<h3> for headings, <p> for body text, and <a> or <button> for buttons.
5. Use <img> with clear, descriptive alt text. Do not embed images as Base64 data URLs — use a real hosted URL, or a simple placeholder src to fill in later.
6. Prefer flex or grid for layout; do not rely on absolute positioning.
7. For icons use Font Awesome classes, e.g. <i class="fas fa-shield-alt"></i> — not inline SVG and not emoji. They import as editable Elementor icon-library icons.
8. Do not include JavaScript, form submissions, carousels or popups.
9. Keep the DOM shallow: one wrapper <section> or <div> per block, no redundant nested divs.

Here is the page information:
(add your product/page topic, key selling points, and copy notes here)

Product page prompt

For product and detail pages, emphasizing product structure.

Generate a complete product detail HTML page to import into Elementor. Same rules as above (single file, inline styles, clear sections, no scripts), and include these sections:

1. Hero: product name <h1>, one-line selling point <p>, two buttons (Get a Quote / View Details), and a main product image placeholder.
2. Key benefits: 3–6 benefit cards, each with a title, description and a Font Awesome icon (e.g. <i class="fas fa-check"></i>), not inline SVG.
3. Specifications: a <table> listing key parameters.
4. Use cases: 2–3 image-and-text use cases.
5. Call to action: a heading and a button.

Product info:
(add product name, benefits, specs, target customer here)

Landing page prompt

For campaign and single-product pages, emphasizing conversion structure.

Generate a complete marketing landing HTML page to import into Elementor. Same rules as above (single file, inline styles, clear sections, no scripts), with this structure:

1. Hero: big heading <h1> + subheading <p> + primary button + a visual placeholder.
2. Advantages: 3–4 advantage cards with Font Awesome icons (<i class="fas fa-..."></i>), not inline SVG.
3. Trust: testimonials or stats (as text, not inside images).
4. FAQ: 3–5 items as headings and paragraphs.
5. Closing CTA: one line + a button.

Campaign info:
(add the campaign topic, audience, selling points and goal here)

Image-first prompt

For when the images are made first (e.g. by AI) and the HTML is built around them.

Build a complete product detail HTML page for me to import into Elementor. I already have the images — use exactly the image URLs I provide below, one <img> per image, each with descriptive alt text. Do not invent extra images and do not use Base64 data URLs.

Rules:
1. Output only a single complete HTML file from <!doctype html>, no explanation.
2. All CSS inline or in one <style> tag; no external CSS.
3. Semantic tags: <h1>–<h3>, <p>, <button> or <a>.
4. Keep the DOM shallow: one wrapper per block, no redundant nested divs.
5. Flex or grid layout, no absolute positioning; Font Awesome classes for icons (<i class="fas fa-..."></i>), no inline SVG, no emoji; no JavaScript.

Sections: hero (product name + one-line pitch + button + hero image); 3–6 benefit cards (icon + title + text); a specs <table>; 2–3 image-and-text use cases; closing call to action.

My images (URL → what it shows):
- https://your-site.com/wp-content/uploads/hero.jpg → main product on white background
- https://your-site.com/wp-content/uploads/use-1.jpg → product in use, outdoors
- (add the rest)

Product info:
(add product name, selling points, specs, target customer here)

No hosted URLs yet? Delete the URL list, keep descriptive alt text, and convert with the “Images” option set to “Empty image placeholders” — then fill each slot in Elementor.

Handling your AI-generated images

AI cannot embed real image files into HTML text, so how images are referenced decides whether they reach Elementor.

Best — real URLs: upload your images to the Media Library first, then give the AI those URLs so the HTML points at absolute https:// image addresses. Absolute URLs are kept, so images arrive in Elementor with no manual step.
Simplest — placeholders: let the HTML use any <img> with descriptive alt, then convert with “Images: Empty image placeholders”. Each slot keeps the alt as a caption, so you know which image to drop where in Elementor.
Avoid: Base64-embedded images and relative or local file paths — the converter turns these into empty placeholders by default.

Why these rules

They make AI output convert into editable Elementor components more easily.

Rule	Benefit
Inline styles, no external CSS	The tool reads real styles, so spacing and colors match after import.
Clear sections, semantic tags	Easier to split into separate heading/text/image/button/container components.
Font Awesome icons, not inline SVG or emoji	They import as editable Elementor icon-library icons; a custom inline SVG can only stay as an HTML block. Note: Font Awesome icons render in Elementor even if the tool preview can’t show them.
Clear image replacement notes	Even without real images, image slots import and can be replaced later.
No complex scripts	Safer import and fewer Elementor errors.
Content split into clear blocks	Better structure after import, easier to move, delete and edit.

Try to avoid asking AI for this

Not impossible to convert, but more likely to need manual fixes after import.

Script-driven carousels, popups or toggles.
Important text baked into images — keep text in the page.
Emoji used as icons.
Strange deep nesting — keep sections clear.
Image URLs pointing at local disk paths.
Pages that depend on external files, which lose styles or content when pasted.