Advanced Prompting Guide

Master the art of writing prompts that produce pixel-perfect, production-ready Elementor pages every time.

This guide teaches you the prompting techniques that produce the best results in TypenDrop. These patterns are based on real-world prompts that generated stunning, production-ready pages in a single One-Shot generation.

The Anatomy of a Perfect Prompt

The highest-quality results come from prompts that follow a specific structure. Think of your prompt as a creative brief — the more precise your brief, the more accurate the output.

A perfect prompt has five layers:

Design system declaration — Colors, fonts, and overall aesthetic
Section-by-section blueprint — Numbered sections with exact structure
Per-section styling — Background colors, padding, alignment for each section
Widget-level detail — Exact widget types and content
Inline styling directives — Specific words to highlight, color, or emphasize

Layer 1: Design System Declaration

Start your prompt by declaring the visual identity upfront. This gives the AI a consistent palette to work with across the entire page.

Design: elegant and luxurious. Dark navy (#0d1b2a), gold (#c8a24e),
cream (#faf7f0), white. Heading font: Playfair Display.
Body font: Inter.

What to include:

3–5 hex color codes with their roles (primary, accent, background, etc.)
Heading font name
Body font name
One-line aesthetic description ("elegant and luxurious", "modern and minimal", "bold and energetic")

Why it works: Without a declared design system, the AI picks colors and fonts per-section, which can feel inconsistent. Declaring everything upfront creates visual cohesion.

Available fonts: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Playfair Display, Merriweather, Nunito, Oswald, DM Sans, Lora, Quicksand, Abril Fatface, Josefin Sans, Orbitron.

Layer 2: Section-by-Section Blueprint

Number each section and give it a clear name. Use separators (like ---) between sections for readability.

SECTION 1 — HERO (dark navy gradient background, white text, centered,
generous padding 80px vertical)

SECTION 2 — PAIN POINTS (white background, 100px vertical padding)

SECTION 3 — BRIDGE / STORY (dark navy gradient, white text, centered)

What to include per section:

Section number and name
Background color or gradient (reference your design system colors)
Text color
Alignment (centered, left-aligned)
Padding values

Why it works: Numbered sections create a clear, unambiguous page flow. The AI processes them sequentially and never skips or reorders.

Layer 3: Per-Section Content Structure

Inside each section, describe the exact elements you want, in order from top to bottom.

SECTION 1 — HERO

- Small label in gold, uppercase with wide letter-spacing: "Brand Name"
- H1 heading (Playfair Display, 900 weight, white):
  "Main headline text here"
- Subtitle (Inter, white 88% opacity, max-width 700px):
  "Supporting text describing the value proposition."
- Gold gradient button (#c8a24e → #a07c2e), white text, uppercase:
  "CALL TO ACTION" — links to #section-id
- Below the button, 4 counter widgets in a row, gold color:
  - 1,400,000 with suffix "+" and title "Revenue" (prefix "€")
  - 0 with title "Direct sales by owner"
  - 20 with suffix "+" and title "Team members"
  - 500 with suffix "+" and title "Google Reviews"

Why it works: Listing elements top-to-bottom mirrors the actual page structure. The AI maps each bullet to an Elementor widget in sequence.

For the best results, name the actual widget types you want. TypenDrop supports these widgets:

Basic Widgets

heading, text, button, image, video, icon, divider, spacer

Pro Widgets

counter, price-table, testimonial, nested-accordion, accordion, tabs, icon-list, blockquote, slides, gallery, animated-headline, countdown, progress, price-list, flip-box, table-of-contents

Widget-specific prompt patterns:

Counter widgets:

4 counter widgets in a row, gold color:
  - 1,400,000 with suffix "+" and title "Revenue" (prefix "€")
  - 260 with suffix "+" and title "Sales per year"

Pricing tables:

2 pricing-table widgets side by side:

  STANDARD:
  - Heading: "Standard"
  - SubHeading: "Complete program"
  - Price: "—" (no price shown, request-based)
  - Features: "Feature 1", "Feature 2", "Feature 3"
  - Button: "REQUEST INFO" links to #contact
  - No ribbon

  PREMIUM:
  - Heading: "Premium"
  - Features: "Everything in Standard", "10 private sessions"
  - Button: "REQUEST INFO"
  - Ribbon: show true, title "MOST CHOSEN"

Accordion / FAQ:

Accordion (nested-accordion) with 4 items:
  1. "Question title" — content: Point 1, Point 2, Point 3
  2. "Question title" — content: Detailed answer text

Icon list:

Icon list widget with 18 items in 2 columns, each item with a gold
bullet icon:
  01. First item name
  02. Second item name
  ...

Blockquote:

Blockquote widget, skin "clean", content: "The quote text here"
— style: Playfair Display, italic, navy color, large

Layer 5: Inline Styling Directives

For precise visual control, tell the AI which words should be styled differently:

"Main headline where specific words are golden." —
the words "are golden" must be in gold color

"Another heading with emphasis." — the word "emphasis" in italic

This works for:

Color highlights — "the word 'leader' must be in gold"
Italic emphasis — "the word 'my' in italic"
Combined — "'my problems' in gold italic"

Card and Component Styling

For cards, grids, and repeated elements, describe the visual properties:

6 cards in 2-column grid. Each card has:
- Background: cream (#faf7f0)
- Border-left: 4px red (#c0392b)
- Border-radius: 12px
- Padding: 32px
Each card contains:
  1. "😤 Card title" — "Card description text here."
  2. "🕐 Second card title" — "Second card description."

Section Transitions

Request shape dividers between sections for polished transitions:

SECTION 2 (white background, shape divider bottom transitioning
to dark navy)

Available shapes: waves, curve, triangle, mountains, drops, split, zigzag, clouds, pyramids, wave-brush, tilt, arrow, book.

Internal Anchors

Link buttons to other sections using anchor IDs:

SECTION 8 — PRICING (id "pricing")
...
Button: "SEE PRICING" — links to #pricing

Complete Example: Deconstructed

Here is a condensed version of a real prompt that produced a stunning 11-section sales landing page in a single One-Shot generation:

Create an Italian sales landing page for "Master Training",
a 12-month program for real estate agency owners.

Design: elegant and luxurious. Dark navy (#0d1b2a), gold (#c8a24e),
cream (#faf7f0), white. Headings: Playfair Display. Body: Inter.
Follow this structure EXACTLY, section by section:

---

SECTION 1 — HERO (navy gradient background, centered, 80px padding)

- Gold uppercase label with letter-spacing: "Master Training"
- H1 (Playfair Display, 900, white): "From chaos to control:
  the program that transforms owners into leaders."
  — "owners into leaders." in gold
- Subtitle (Inter, white 88%, max-width 700px): [value prop text]
- Gold gradient button: "DISCOVER HOW TO JOIN" — link to #packages
- 4 counter widgets in a row: €1,400,000+ Revenue / 0 Direct sales
  / 20+ Team / 500+ Reviews

---

SECTION 2 — PAIN POINTS (white background, 100px padding)

- Gold decorative divider (60px, centered)
- H2: "Do you recognize even one of these situations?"
  — "one" in italic
- Intro text (gray #555)
- 6 cards in 2-column grid, cream background, red left border 4px,
  12px radius, 32px padding:
  1. "😤 Title" — "Description text."
  2. "🕐 Title" — "Description text."
  [... 4 more cards]

---

SECTION 3 — BRIDGE (navy gradient, white text, centered)
[... pattern continues for each section]

---

SECTION 8 — PRICING (cream background, id "packages")

- 2 pricing-table widgets side by side:
  STANDARD: heading, features list, button links to #contact
  PREMIUM: same + ribbon "MOST CHOSEN"

---

SECTION 10 — FINAL CTA (darkest navy #0a1628, id "contact")
- H2, urgency text, large gold button, closing italic quote

---

SECTION 11 — FOOTER (#080f1a, centered, 40px padding)
- Small text with copyright

Why This Pattern Works

Technique	Effect
Declared design system (colors + fonts)	Consistent visual identity across all sections
Numbered sections with names	Clear, unambiguous page flow
Per-section background + padding	Each section feels intentionally designed
Exact widget types named	AI uses the right Elementor components
Verbatim content provided	No guesswork — output matches your vision
Inline styling directives	Precise control over highlighted words
Shape dividers between sections	Polished, premium transitions
Anchor IDs + linked buttons	Functional internal navigation
Emoji in card titles	Visual scanning and personality
Specific numbers and data	Credibility and concreteness

Quick Reference: Prompt Template

Copy and adapt this template for your own pages:

Create a [language] [page type] for "[Business Name]",
[brief description of business/product].

Design: [aesthetic]. [Color 1] (#hex), [Color 2] (#hex),
[Color 3] (#hex). Headings: [Font]. Body: [Font].
Follow this structure EXACTLY:

---

SECTION 1 — HERO ([background], centered, [padding])
- [Element 1]
- [Element 2]
- [Button with link to #anchor]
- [Counter widgets if applicable]

---

SECTION 2 — [NAME] ([background], [padding])
- [Decorative divider]
- [Heading with inline styling]
- [Content elements]
- [Cards/grid layout with styling specs]

---

[Continue for each section...]

---

FINAL SECTION — FOOTER ([dark background], [padding])
- [Copyright and info]

Tips for Consistency

Always declare colors as hex codes — Named colors ("blue", "red") are ambiguous
Always specify font names — The AI may default to generic fonts otherwise
Use the same padding pattern — Pick a consistent value (80px or 100px) for main sections
Write content verbatim — The AI will use your exact text instead of generating generic copy
Name widget types explicitly — "counter widget", "price-table widget", "nested-accordion" instead of "numbers", "pricing", "FAQ"
Test with "All Widgets" mode — Pro widgets (counter, price-table, testimonial, accordion) require the Pro or All widget set