> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Design Editor

Customize colors, fonts, buttons, layouts, text, and images on an infinite canvas, then preview and pitch the result.


<Callout kind="info">
**Phase 3 of 4**: **Scope** → **Sitemap** → You are here: **Design** → Export. The Design Editor is where your website comes to life visually. Every page and section from your sitemap is rendered here as a real design you can customize.
</Callout>

The Design Editor is an infinite canvas where you customize the visual design of every page and section. AI Website Creator generates a starting design from your prompt and sitemap. You then adjust colors, fonts, layouts, images, and text to match the client's brand. Every change is saved automatically.

You get here by clicking **Continue to design** on the Sitemap Editor's status bar once your sitemap is ready.

## Use Cases

- **Matching a client's exact brand before handoff.** Palette, font, button, and card controls apply globally, so you're not restyling section by section.
- **Presenting design options before a WordPress site exists.** Share a live preview link by clicking the eye icon on any page tab, or **Preview** in the top-right corner.
- **Fixing AI-generated copy or images quickly.** The text quick actions (Rewrite, Shorten, Expand) and AI image tools replace manual rewrites and re-uploads.

## The Canvas

The canvas shows your full website design, every page, every section, in order. Use these controls to navigate:

- **Pan:** click and drag on any empty area of the canvas
- **Zoom:** scroll while holding Ctrl
- **Fit to screen:** click the **Fit to screen** icon in the bottom-left toolbar to zoom the canvas so every page fits on your screen at once
- **Switch pages:** click a page tab above the canvas to jump between pages

**Page Actions.** Each page has its own tab above the canvas, with two icons on the right:

- **Preview (eye icon):** opens a full live preview of that page, with real interactive elements (hover states, forms, motion). Click **Back** to return to the canvas at the same scroll position you left it.
- **Three-dot menu:** opens page-level actions:
  - **Shuffle Components:** swap the layout variant of every section on the page at once
  - **Regenerate Text:** have AI rewrite the copy across the whole page
  - **Move Page Left** / **Move Page Right:** reorder the page relative to its neighbors
  - **Rename Page**, **Duplicate Page**, **Delete Page**
  - **Add Section:** insert a new section at the end of the page

<Callout kind="info">
Clicks, forms, and motion (hover states, carousels, animations) don't run on the canvas itself. Click **Open preview** at the bottom of the screen to test interactive behavior in a live preview.
</Callout>

## Design Panel

The Design Panel is the left sidebar in the Design Editor. It controls the global styles for your entire site: Colors, Typography, Buttons, Badges, Cards, Section Style, and Spacing. Changes made here apply across every page and section instantly.

### 1. Colors

AI Website Creator provides multiple pre-built color palettes organized by industry. Switching palettes updates the entire design instantly.

- Browse palettes by industry: Tech, Health, Finance, Creative, and more
- Create a custom palette using hex color input
- Adjust the global saturation slider to make all colors more vivid or more muted
- Click any swatch (**Main**, **Background**, **Accent**, or an added Extra color) to open its color picker: a gradient and hue picker, a hex code field, and a row of your previously used colors to pick from directly
- Click **Randomize colors** (cube icon) to instantly generate a new color combination based on your current palette
- Add a new color using the **+** button under Primary Colors (labeled Extra 1, Extra 2, and so on), or remove one by clicking its delete icon
- Toggle between **Light** and **Dark** mode using the sun and moon icons to preview how your palette looks in both themes

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790588043/uichemy-docs/ai-website-creator/design-editor/overview/colors-panel.webp" alt="" width={1913} height={935} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} priority={true} fetchPriority="high" />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Colors panel, with the Primary color picker open</em></p>

<Callout kind="tip">
Try several palettes before settling on one. Switching is instant and you can always go back.
</Callout>

**CSS Tokens.** Click **CSS Tokens** to expand the full set of derived color tokens AI Website Creator generates from your Main, Background, and Accent colors.

| Token Group | What's Included |
| --- | --- |
| **Brand** | Primary, Secondary, and Accent colors, plus a tint of each |
| **Text** | Title and description colors for light and dark backgrounds, plus an alternate text color |
| **Backgrounds** | Two light background colors, two dark background colors, and an alt background color |
| **Shades** | A deeper shade variant of each brand and background color |
| **Utility** | Neutral light and dark colors, plus spark and glow colors for effects |

### 2. Typography

Choose from 1,000+ Google Fonts for your heading and body text.

- **Heading** and **Body** tabs let you style each independently, headings and paragraph text keep separate font, size, and spacing settings
- Click the current font name to open the font picker: search by name, and each result shows a live preview in that font before you choose it
- Adjust **Size**, **Weight**, **Case** (Aa for sentence case, the default as-typed option, or AB for all caps), **Letter spacing**, and **Line height** with the sliders and dropdowns below the font, separately for the Heading and Body tabs
- Font changes apply globally and update every section instantly
- Click **Randomize fonts** (cube icon) to instantly swap to a new heading and body font pairing

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790588044/uichemy-docs/ai-website-creator/design-editor/overview/typography-panel.webp" alt="" width={1912} height={938} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} priority={true} fetchPriority="high" />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Typography panel, with the Heading font picker open</em></p>

### 3. Buttons

The Buttons section lets you control the global style of all buttons across your design. Changes here apply to every button on every page. Click the **Primary** or **Secondary** preview to open the full Buttons panel:

- **Size:** choose the default button size, Small (S), Medium (M), or Large (L)
- **Corner Radius:** select from four options ranging from sharp square corners to fully rounded
- **Label Color:** choose **Auto**, **Light**, or **Dark** for the button text color
- **Display Icon:** toggle Yes or No to show or hide icons inside buttons

Select a **Button Design** from the list (Button Design 1 through 6) to choose the overall button style. Each design shows a preview of how your Primary, Secondary, and Link buttons will look across the site. Click **Randomize buttons** (cube icon) to instantly generate a new button style combination.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790598767/uichemy-docs/ai-website-creator/design-editor/overview/buttons-panel.webp" alt="" width={1912} height={937} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Buttons panel, with the full list of Button Designs</em></p>

### 4. Badges

The Badges section controls small label elements like "New" or "Since 1998" shown on some sections. It is marked **Coming Soon** and not yet editable.

### 5. Cards

The Cards section lets you control the global style of all cards across your design. Changes here apply to every card on every page. Click either card preview to open the full Cards panel:

- **Corner Radius:** select from four options ranging from sharp square corners to fully rounded
- Select a **Card Style** from the list (Card Style 1 through 4) to choose the overall card layout. Each style shows a preview of how the card image, heading, and description are arranged.

Click **Randomize cards** (cube icon) to instantly generate a new card style combination.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790601019/uichemy-docs/ai-website-creator/design-editor/overview/cards-panel.webp" alt="" width={1913} height={938} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Cards panel, with the full list of Card Styles</em></p>

### 6. Section Style

Sets the default background style for sections across your design. Changes here apply site-wide. Click the style preview to open the full **Section Background** panel and select a style (Style 1, 2, 3, and so on), for example a light background, dark background, or alternate light layout. Click **Randomize style** (cube icon) to instantly preview a different background style.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790601510/uichemy-docs/ai-website-creator/design-editor/overview/section-style-panel.webp" alt="" width={1912} height={936} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Section Background panel, with the full list of styles</em></p>

### 7. Spacing

Controls the gap between content across your design.

- **Vertical:** adjust the spacing between sections stacked on top of each other
- **Horizontal:** adjust the side padding within each section

Click **Randomize spacing** (cube icon) to instantly preview a different spacing combination.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790602325/uichemy-docs/ai-website-creator/design-editor/overview/spacing-panel.webp" alt="" width={1915} height={938} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Spacing panel, with Vertical and Horizontal sliders</em></p>

## Editing a Section

Beyond the global styles in the Design Panel, you can edit each section, its text, and its images individually.

### 1. Section Content Panel

Click any section on the canvas to open its detail panel, titled "[Section] Content" (for example "Navbar Content"). Click the **Global Section** icon in the top-right of the panel to turn that section into a **Global Section**, shared across every page. The icon turns green when the section is global, click it again (now labeled **Remove Global Section**) to turn it back into a page-specific section.

The panel is organized into a few groups:

<ExpandableGroup>
  <Expandable title="Logo" default-open="false">
    On Navbar and Footer sections, click **Upload a logo** to open the logo picker: toggle **Light** or **Dark** to set which theme you're uploading for, drop an SVG, PNG, JPG, or WebP file, and adjust the **Logo size** slider.
  </Expandable>
  <Expandable title="Context" default-open="false">
    A description of the section's content. Click **Regenerate Section Content** to have AI generate a new version of that section on the canvas based on this description.
  </Expandable>
  <Expandable title="Layout" default-open="false">
    Shows the current layout variant, for example "Navbar Layout - layout-y4." Click **Randomise [Section]** (cube icon) to instantly switch to a different layout. The undo icon next to it reverts to the previous layout, it's disabled with a "No previous layout" tooltip until you've made a change to undo.
  </Expandable>
  <Expandable title="Style" default-open="false">
    Toggle the section's **Theme** between light (sun icon) and dark (moon icon), choose an **Overlay** for its background image (**Default**, **Off**, or **Black**), and adjust the **Vertical** spacing slider.
  </Expandable>
  <Expandable title="Assets" default-open="false">
    Lists the media used in the section, with a total count (for example, "6 items"). Assets are grouped into collapsible **Images** and **Icons** groups, each with its own count badge. Click an asset card to open its editor.
  </Expandable>
</ExpandableGroup>

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790659093/uichemy-docs/ai-website-creator/design-editor/overview/section-content-panel.webp" alt="" width={1912} height={937} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>Section Content Panel, with Logo, Context, Layout, Style, and Assets</em></p>

Sections without a logo, like the Hero, skip the **Logo** group and open straight to **Context**.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790659606/uichemy-docs/ai-website-creator/design-editor/overview/hero-content-panel.webp" alt="" width={1912} height={937} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>Hero Content panel, with Assets split into Images and Icons</em></p>

Not every section shows every Style option. The Footer, for example, includes the **Logo** group but its **Style** group has only **Theme** and **Vertical**, with no **Overlay**.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790661857/uichemy-docs/ai-website-creator/design-editor/overview/footer-content-panel.webp" alt="" width={1914} height={938} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>Footer Content panel, with Logo, and Style limited to Theme and Vertical</em></p>

### 2. Layout Variants

Click the current layout name in the Section Content Panel to open the full-screen layout picker for that section type.

- Use the search bar to find a layout by name
- Your current layout appears under **ACTIVE**
- **AI Picks** are highlighted below, these are variants recommended based on your brief, and the one already applied to your section is marked **In Preview**
- Click any layout to switch to it

### 3. Icon Assets

Click an icon card under Assets in the Section Content Panel to open its editor.

- **Site icon style:** toggle between **Outline** and **Filled**
- **Color:** choose **Auto**, **Primary**, **Accent**, **Dark ink**, **Light ink**, **Secondary**, or **Custom**
- **Content** tabs: **Icon Pack** to browse and search a library (filter by pack, Lucide, Tabler, Solar, Heroicons, Phosphor, Material Design, Remix Icon, Myna UI, IconaMoon, or Huge Icons, and by style, All Styles, Filled, or Outline), or **Uploads** to drag and drop your own SVG, PNG, or JPG

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790660469/uichemy-docs/ai-website-creator/design-editor/overview/icon-styles-panel.webp" alt="" width={1912} height={937} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>Icon editor, with Site icon style, Color, and the Icon Pack library</em></p>

### 4. Editing Text

Click any text element on the canvas to open its **Text** panel. Edit the content directly in the text field, changes are saved automatically.

- **AI quick actions:** **Rewrite** (rewrites the text from scratch using your brief as context), **Shorten** (reduces length while keeping the meaning), or **Expand** (adds more detail)
- **Alignment:** left, center, or right
- **Size:** choose **Auto**, or a fixed size from **XS** (20px) up to **4XL** (170px)
- **Color:** choose **Auto**, **Title ink**, **Body ink**, or a swatch from your color palette (**Light Blue**, **Orange**, and so on)

### 5. Images & AI Tools

Click any image or video on the canvas to open its panel. Two tabs at the top switch between **Image** and **Video**, each with its own **Edit** and **Replace** tabs.

**Edit Image.** Adjust how the current image is displayed without replacing it.

- **Ratio:** Choose the aspect ratio for the image frame, Original, 1:1, 4:3, 16:9, or 3:2
- **Overlay:** Toggle **Yes** or **No** to add a color overlay on top of the image

Use **AI Tools** to edit the image itself with AI. Each tool costs credits to run:

| Tool | What It Does | Credit Cost |
|---|---|---|
| **Remove Bg** | Removes the background from the image | 100 |
| **Generative Fill** | Fills or extends parts of the image using AI | 300 |
| **Expand Image** | Extends the image beyond its original borders | 300 |
| **Magic Eraser** | Removes unwanted objects from the image | 300 |

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790661220/uichemy-docs/ai-website-creator/design-editor/overview/edit-image-panel.webp" alt="" width={1910} height={935} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>Edit Image panel, with Ratio, Overlay, and AI Tools</em></p>

**Replace Image.** Swap the current image with a new one from three tabs:

- **Stock:** Browse the built-in stock photo library. Filter by **Photos**, **Art**, or **3D**, and use the search bar to find a specific image.
- **Library:** Browse images already tied to this project, filter by **All**, **Uploads**, **Generated**, or **Stock**. Hover any image to see the prompt that generated it.
- **Generate:** Describe the image you want, pick a **Model** (Gemini 2.5 Flash, Nano Banana Pro at 1K or 4K resolution, GPT Image Mini, or GPT Image), and check **Match this site's brand** to keep the result on-palette. Click **Generate Image**.

**Edit Video.** With no video added yet, click **Upload a video** or **Add a video URL** to add one.

<Callout kind="tip">
Switching to Video keeps the current image as the poster frame, so nothing is lost if you switch back to Image. A video added by URL has no size limit and isn't re-hosted.
</Callout>

**Replace Video.** Swap in a new video from two tabs:

- **Stock:** Search the built-in stock video library, each result shows its duration.
- **Library:** Browse videos already tied to this project, filter by **All**, **Uploads**, or **Stock**, or drag and drop your own (MP4, WebM, or MOV, up to 10MB).

**Logos.** Logos are uploaded from the **Logo** group of the [Section Content Panel](#1-section-content-panel) on Navbar and Footer sections.

## Design Variants & Pitch

Design Variants let you create multiple complete versions of your site's design, so you can explore different directions or present options to a client. This is different from a section variant, which only changes the layout of one section.

<Callout kind="warning">
Both the **Variant** dropdown and **Pitch** are marked **Coming Soon** at the bottom of the Design Panel and are not yet available.
</Callout>

- The **Variant** dropdown at the bottom of the Design Panel will switch between your saved design variants
- **+ Add New Variant** will create a new design variant

**Pitch Concept.** **Pitch** will open Pitch Concept to generate a shareable link for your client.

- View up to three design variants side by side under **Top Three Concepts**
- Add a description to each variant for context
- Click **Copy Link** to share the preview, your client can view it without logging in to AI Website Creator

## Responsive Preview

Click the monitor, tablet, or phone icon in the bottom-right corner of the canvas to switch between Desktop, Tablet, and Mobile at any time and check how the design looks at different screen sizes.

| Viewport | Width |
|---|---|
| Desktop | Full canvas |
| Tablet | 768px |
| Mobile | 375px |

<Callout kind="info">
Design edits are made in Desktop view. Tablet and Mobile views are for previewing only.
</Callout>

## AI Agent

<Callout kind="warning">
**AI Agent** is marked **Coming Soon** and is not yet available.
</Callout>

**AI Agent** is the sparkle icon in the left icon strip of the Design Editor, just below the pencil (edit) icon. Once available, it will let you review your design or apply changes by chatting instead of using the Design Panel manually:

- **Review my design:** Ask the agent to review your current design and suggest improvements
- **Change fonts:** Ask the agent to swap your heading and body fonts
- **Suggest color palette:** Ask the agent to recommend a new color palette
- **Change layout variants:** Ask the agent to switch section layouts

## Top Bar Actions

The top-right corner of the Design Editor has a few controls beyond navigating between Scope, Site map, and Design:

- **Preview (eye icon):** Opens a live preview of your site.
- **Share:** Marked **Coming Soon**, not yet available.
- **Add comments:** Marked **Coming Soon**, not yet available.
- **Save status:** Shows how long ago your project last saved (for example, "Saved 5m ago"). Hover it for the exact time it last saved.
- **Credits remaining:** Hover the circular icon in the top-right to see your current balance (for example, "You have 19,915.5 credits left"). Click it to open the AI Credits page.

### Export

Click **Export** to open the export modal, with two tabs:

- **WordPress:** Follow the three steps shown (download the UiChemy WordPress plugin, install it and log in with your UiChemy account, import your project into Elementor, with Gutenberg coming soon), or click **Read Docs** for the full walkthrough. See [Export to WordPress](/ai-website-creator/export/export-to-wordpress) for details.
- **Other:** Vote for a platform you'd like UiChemy to support next, React, Bricks, Divi, Gutenberg Core, Webflow, Framer, Wix, or type in your own under **Platform Name**, then click **Submit Request**.

## Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Do color and font changes apply to all pages or just the current one?" default-open="false">
    Color and font changes apply globally across all pages. Section variant changes apply only to the specific section you changed.
  </Expandable>

  <Expandable title="Can I undo changes in the Design Editor?" default-open="false">
    Yes. Use Ctrl+Z, or the undo and redo arrows in the bottom-left toolbar, to undo recent changes.
  </Expandable>

  <Expandable title="What is the difference between a section type and a section variant?" default-open="false">
    A section type is the kind of content, for example Hero, Pricing, or FAQ. A section variant is the visual layout for that type. You choose the section type in the Sitemap Editor and the layout variant in the Design Editor.
  </Expandable>

  <Expandable title="Can I turn a section into a Global Section from the Design Editor?" default-open="false">
    Yes. Click any section, then click the **Global Section** icon in the top-right of its Section Content Panel to make it global, shared across every page. The icon turns green while the section is global. Click it again to make it page-specific again.
  </Expandable>

  <Expandable title="Does Regenerate Section Content rewrite the text, or the whole section?" default-open="false">
    It regenerates the whole section on the canvas, layout included, based on the Context description you provide. It isn't limited to just the text.
  </Expandable>

  <Expandable title="Can I add a video to a section?" default-open="false">
    Yes. Click any image on the canvas, switch to the **Video** tab, then upload a video, add one by URL, or pull one from Stock or Library. The image stays as the poster frame if you switch back.
  </Expandable>

  <Expandable title="Can I reorder or duplicate pages?" default-open="false">
    Yes. Open a page's three-dot menu and use **Move Page Left**, **Move Page Right**, or **Duplicate Page**. The same menu also has **Rename Page** and **Delete Page**.
  </Expandable>

  <Expandable title="Are Badges, Design Variants, Pitch, and AI Agent available yet?" default-open="false">
    Not yet, all four are marked **Coming Soon**. Every other control covered on this page is live today.
  </Expandable>

  <Expandable title="Why don't some sections show the Logo or Overlay options?" default-open="false">
    The Section Content Panel only shows options that apply to that section type. For example, the **Logo** group appears on Navbar and Footer sections, and the Hero includes **Overlay** in its Style group while the Footer does not.
  </Expandable>
</ExpandableGroup>

## Next Step

<Card title="Export to WordPress" href="/ai-website-creator/export/export-to-wordpress" icon="download">
  Export your finished design to Elementor. Gutenberg is coming soon.
</Card>