Hoffstedts Webb Agentur logotyp
Divi AI Training

Divi AI & Quick Sites — Practical Guide

This page is for workshop students who already learned Divi basics in the other lessons. Here you’ll learn how to actually use AI in Divi: inside modules, and to generate a website structure quickly (Quick Sites). We also show how to use ChatGPT to plan sections and paste content into Divi the right way.

What you’ll be able to do after this

  • Generate a site draft with Quick Sites, then refine it correctly.
  • Use Divi AI to improve content in modules (Text, Image, Code).
  • Use ChatGPT prompts to create a complete section (copy + structure) and paste it into Divi.
  • Understand where to paste: Text, Buttons, CSS, and Code Modules.

Mindset (so AI doesn’t ruin quality)

Use AI for speed, options, and first drafts — then you decide what stays.
Don’t publish AI text “as is”. Always verify tone, claims, and correctness.
1) Quick Sites 2) Divi AI in modules 3) Screenshots 4) ChatGPT prompts 5) Where to paste in Divi 6) Exercises

1) Quick Sites — create a website foundation fast

Elegant Themes describe that you can generate a complete Divi website draft in about 1–2 minutes (their words). The key is what you do after the draft is generated.

Option A: AI Website Creation

  • Generates pages + initial copy + structure
  • Best when you want ideas and a fast starting point
  • Requires review (tone, facts, offer)

Option B: Starter Sites

  • Pre-designed layouts from Divi
  • Best when you want a polished baseline quickly
  • Still needs your branding + real content
  1. Step 1 — Pick your start

    Choose AI Website Creation for a unique draft, or Starter Sites for a ready-made design baseline.

  2. Step 2 — Generate the draft

    Keep inputs simple: business name, services, location, and goal (bookings/leads).

  3. Step 3 — Lock your brand base

    Set colors + typography early so everything stays consistent.

  4. Step 4 — Improve page by page

    Use AI inside modules to refine sections instead of rebuilding everything.

Pro tip: Don’t start “tweaking random elements” immediately. First: brand base. Then: sections.

Official Divi AI overview (Elegant Themes)

Watch the official update video inside this page (no redirect).

2) Divi AI inside modules — step by step

This is the practical part. You’ll use AI to improve sections that already exist: headlines, text, images, and small CSS tweaks.

Text AI (Headlines, paragraphs, CTAs)

  1. Step 1

    Open the module (e.g., Text Module).

  2. Step 2

    Use Divi AI to rewrite and request 3 versions.

  3. Step 3

    Pick the best parts and edit manually for your offer + tone.

  4. Step 4

    Check clarity: short sentences, clear CTA, no hype.

Image AI + Code AI (Small, safe improvements)

  1. Image AI

    Create supportive images for a section and keep style consistent.

  2. Code AI

    Ask for small CSS tweaks (spacing, mobile readability, button radius).

  3. Rule

    Keep code simple. If you don’t understand it, don’t publish it.

Copy-paste prompts you can use inside Divi AI

Use these prompts when Divi AI asks what you want.

Prompt A (Hero rewrite) Rewrite this hero section for a [industry] business in [location]. Tone: professional, calm, not salesy. Keep it short: 1 headline + 1 supporting sentence + 1 clear CTA. Avoid buzzwords. Mention the main benefit. Give me 3 headline options.
Prompt B (Services blurbs) Write 3 short service blurbs for a [industry] business. Each blurb: a simple title + 1–2 sentences. No hype. Clear, friendly, professional. End each blurb with a micro-benefit (e.g., "so you can...").
Prompt C (Small CSS) Write safe CSS to improve readability on mobile: - slightly larger paragraph line height - more spacing between sections on mobile - buttons slightly more rounded Return only CSS.

3) What it looks like in Divi (screenshots)

Use these screenshots as visual guidance while you follow the steps above.

Divi AI screenshot 1
Screenshot 1: Divi AI inside the builder — use as reference while following the steps.
Divi AI screenshot 2
Screenshot 2: Another Divi AI view — match your settings and buttons to this example.
If any button labels differ on your screen, it’s usually because Divi versions vary — the workflow stays the same.

4) Use ChatGPT to create a section (then paste into Divi)

ChatGPT works best when you ask for a Divi Module Plan (structure + module order + copy). This avoids messy HTML and gives you something you can build in minutes.

Best prompt: “Divi Module Plan” (copy/paste)

You are a Divi website assistant. Create ONE homepage section for a [industry] business in [location]. Goal: get more bookings/leads. Tone: professional, calm, not salesy. Output as a "Divi Module Plan" with: - Section background suggestion (light/dark + optional image) - Row structure (1 column or 2 columns) - Modules in order (Heading, Text, Button, Image, etc.) - Exact copy for each module (headline, paragraph, button text) - 3 alternative headline options Keep copy short and clear.
Make the design match your site:
If you want ChatGPT to follow your existing style, you can either describe your colors and fonts (HEX + font names), or upload/share a screenshot showing your palette and typography so ChatGPT can match the look and tone.

Prompt for FAQ (Accordion / Toggle)

Write 6 FAQ questions and answers for a [industry] business. Requirements: - simple English - no hype - answers max 2–3 sentences Output as: Q1: ... A1: ... (repeat)

Prompt for a full page outline (fast)

Create a one-page website outline for a [industry] business. Include section order and purpose: Hero, Social proof, Services, About, FAQ, Contact CTA. For each section: 1 headline + 1 sentence + CTA suggestion. Keep it short and clear.

Optional: Ask ChatGPT for “paste-ready” HTML (only when needed)

If you want a custom HTML section, ask for clean, minimal HTML + CSS. Then paste it into a Divi Code Module. Keep it simple.

Create a clean HTML + CSS section for a Divi page. Style: modern, minimal, lots of whitespace. Colors: [primary HEX], [accent HEX], [background HEX], text: [text HEX] Fonts: headings: [font name], body: [font name] Output: one HTML block and one CSS block. No JS. Mobile responsive.

5) Where to paste in Divi (important)

Most students get stuck here. Use this mapping and you’ll be fine.

Paste content

  • Headlines → Heading Module
  • Paragraph text → Text Module
  • Buttons → Button Module (text + link)
  • FAQ → Accordion/Toggle Module (Q/A per item)
  • Images → Image Module

Paste code (when needed)

  • CSS (global) → Divi → Theme Options → Custom CSS
  • CSS (only this page) → Page Settings → Advanced → Custom CSS
  • HTML embeds → Code Module
  • Do not paste random HTML into Text Modules unless you know why.
If you use ChatGPT to generate raw HTML for “a whole section”, you may spend more time fixing it than building with Divi modules. Use Module Plans first.

6) Exercises (do this now)

These tasks will make you confident fast. Aim for progress, not perfection.

  1. Exercise 1 — Create a hero section with ChatGPT

    Use the “Divi Module Plan” prompt. Build it using Heading + Text + Button modules.

  2. Exercise 2 — Improve the hero with Divi AI

    Ask Divi AI for 3 headline versions. Combine the best parts and edit manually.

  3. Exercise 3 — Add FAQ

    Generate 6 FAQs with ChatGPT. Paste them into Accordion/Toggle modules.

  4. Exercise 4 — Mobile check

    Check spacing and readability on mobile. Adjust padding or font sizes if needed.

Goal: You should be able to create a clean one-page layout in under 60 minutes using AI as support — not as the driver.