Editing & Customizing Your Website

Make your website truly yours with Deiza's editing and customization tools.

Edit Mode

To start making changes, click Edit Mode in the preview toolbar. This enables inline editing across your entire website.

Edit Mode Toolbar

When edit mode is active, you'll see a toolbar with:

• Save: Save all your changes
• Discard: Undo all unsaved changes
• Undo/Redo: Step through your recent edits (see Undo & Redo)

Text Editing

Click any text element to edit it directly:

• Headlines: Click to edit, type your new text
• Paragraphs: Full text editing with line breaks
• Buttons: Change button text inline
• Press Enter or click away to save
• Press Escape to cancel

Image Editing

Replacing Images

Click any image to open the image editor:

• Upload: Choose an image from your computer
• Generate with AI: Create a new image using AI (uses your generation credits)
• Browse Library: Select from previously uploaded images

AI Image Regeneration

For AI-generated images, you can regenerate them:

1. Click the image in edit mode
2. Click Regenerate with AI
3. Optionally add a custom prompt to guide the generation
4. The new image replaces the old one

Section Editing

In edit mode, each section has a menu icon (three dots) that reveals all section controls. Click the menu to access:

Section Menu Options

Regenerate Section

Click Regenerate to generate fresh AI content:

• Uses your business context for relevant copy
• Great for trying different approaches
• You can provide custom instructions for specific directions

Reorder Sections

Use Move Up/Down to reposition sections:

• Move important content higher on the page
• Experiment with different layouts

Add New Sections

Click Add Section to insert a new section:

• Choose from 15+ section types (Testimonials, Team, FAQ, Gallery, Pricing, etc.)
• AI generates content tailored to your business
• New sections appear with a loading skeleton during generation

Delete Sections

Click Delete to remove a section entirely. A confirmation dialog prevents accidental deletions.

AI Design Assistant

Use natural language commands to modify your website without navigating menus:

Accessing the Assistant

1. Enter Edit Mode by clicking the Edit button in the toolbar
2. Click the chat bubble floating button in the bottom left corner

Example Commands

• "Move testimonials to the top"
• "Hide the contact section"
• "Add a team section after about"
• "Duplicate the services section"
• "Change the hero color to blue"

The assistant understands context and can make multiple changes at once. Changes are applied immediately and can be undone.

Design Inspiration

When creating a new website, you can provide design references:

Reference URL

Paste a website URL that inspires you. AI will analyze its colors, typography, and layout style.

Upload Screenshot

Upload a design screenshot or mood board. AI uses vision to extract design cues like color palettes, spacing preferences, and visual mood.

Undo & Redo

Made a mistake? Use undo/redo to step through your changes:

• Click the undo arrow (or Ctrl+Z) to reverse
• Click the redo arrow (or Ctrl+Y) to restore
• Works for text, images, and section changes
• History is session-based (cleared on refresh or save)

For more details, see Undo & Redo.

Design Panel

Open the Design Panel (paintbrush icon) to customize visual styles. It has four tabs:

Colors Tab

• Primary color: Main brand color used for buttons and accents
• Secondary / Background / Text colors: Fine-tune the full palette

Typography Tab

• Heading font: For titles and section headers
• Body font: For paragraphs and content
• Choose from a curated library of Google Fonts

Layout Tab

• Header style: Sticky, transparent, or solid
• Hero style: Full-screen, split, or minimal
• Footer style: Simple, detailed, or minimal
• Animations: Choose entry animations for sections (Fade Up and Slide In are free; Scale Up, Blur In, Stagger, and Parallax require Grow+)

History Tab (Grow+)

• View all saved versions of your website
• Restore any previous version with one click
• See Version History for details

Mobile Preview

Always check mobile view before publishing:

1. Click the device icons in the toolbar
2. Preview desktop, tablet, and mobile views
3. Content automatically adapts to each screen size

Saving Your Work

Auto-Save

Your changes are automatically saved as you edit:

• Changes are saved when you exit Edit Mode (click the Edit button again)
• A version snapshot is created for the History tab
• No need to manually save - just make your edits and exit edit mode

Version Snapshots

Every auto-save creates a version snapshot that you can restore later from the History tab. This happens automatically - you don't need to do anything special.

Discarding Changes

To discard unsaved changes, click Discard in the toolbar before exiting edit mode.