Skip to main content

​
Overview

Migma’s visual editor gives you complete control over your emails with an intuitive drag-and-drop interface. Edit layouts, adjust styling, add sections, and see changes in real-time—no coding required.

WYSIWYG Editing

What you see is what you get—edit visually

Drag & Drop

Move, resize, and reorganize with ease

Live Preview

See changes instantly across devices

​
Editor Interface

​
Main Components

Center workspace where your email displays
  • Live preview of email
  • Click elements to select and edit
  • Zoom in/out for precision
  • Desktop/mobile toggle
Global actions:
  • Undo/Redo
  • Preview modes
  • Save draft
  • Export options
  • Device preview
  • Send test email

​
Editing Elements

​
Text Editing

Click any text to edit:
1

Select Text

Click on any headline, paragraph, or label
2

Edit Inline

Type directly in the canvas to change content
3

Style in Sidebar

Use right sidebar to adjust:
  • Font family
  • Font size
  • Color
  • Weight (bold, normal)
  • Alignment
  • Line height
  • Letter spacing
4

See Live Preview

Changes apply instantly
Keyboard shortcuts:
  • Ctrl/Cmd + B - Bold
  • Ctrl/Cmd + I - Italic
  • Ctrl/Cmd + K - Add link

​
Image Editing

Click any image to open Creative Studio - Migma’s all-in-one image management feature.
  • Creative Studio
  • Adjust Image
  • Optimize
Click any image to open Creative Studio with three tabs:Upload Tab:
  • Upload new images (JPG, PNG, WebP, GIF)
  • Drag and drop support
  • Bulk upload multiple images
Generate Tab:
  • AI-powered image generation
  • Describe what you need
  • Creates on-brand images automatically
  • Includes your logo and brand colors
Project Tab:
  • Browse images from your projects
  • Reuse images across emails
  • Organized by project

Creative Studio & AI Image Generation

Learn more about Creative Studio and AI image generation

​
Button/CTA Editing

Buttons are crucial for conversions. Customize every aspect: Content:
  • Button text
  • Icon (optional)
  • Link URL
Styling:
  • Background color
  • Text color
  • Border (color, width, radius)
  • Padding
  • Width (auto, full, custom)
Effects:
  • Hover state
  • Shadow
  • Alignment
Mobile:
  • Full-width on mobile option
  • Larger touch targets

​
Layout Management

​
Adding Sections

1

Open Elements Panel

Click “Add Section” in left sidebar
2

Choose Layout

Select from pre-built layouts:
  • Single column
  • Two columns
  • Three columns
  • Hero section
  • Feature grid
  • Testimonial
  • Footer
3

Drag to Position

Drag section to desired location in email
4

Customize

Edit content and styling

​
Reordering Sections

Drag and drop:
  1. Hover over section
  2. Grab handle (⋮⋮)
  3. Drag up or down
  4. Drop in new position

​
Deleting Sections

  1. Select section
  2. Press Delete key or click trash icon
  3. Confirm if prompted

​
Styling & Design

​
Global Styles

Apply styles across entire email:
Set email-wide colors:
  • Primary color (CTAs, links)
  • Secondary color (accents)
  • Text colors (heading, body)
  • Background colors
Changes apply to all matching elements
Font settings:
  • Heading font
  • Body font
  • Default sizes
  • Line heights
Maintains consistency across email
Consistent spacing:
  • Section padding
  • Element margins
  • Mobile adjustments
Creates visual rhythm

​
Section Styles

Customize individual sections:
  • Background color or image
  • Padding (top, right, bottom, left)
  • Border
  • Maximum width
  • Alignment

​
Responsive Design

​
Mobile Preview

1

Toggle Device View

Click device icons in toolbar: 💻 Desktop | 📱 Mobile
2

Review Layout

See how email adapts to mobile screens
3

Adjust Mobile Settings

Per-element mobile overrides:
  • Hide on mobile
  • Full-width on mobile
  • Different font sizes
  • Stack columns
4

Test

Send test email to phone
Auto-responsive features:
Columns stack on mobile automatically
Images scale to fit screen
Text sizes increase for readability
Buttons become full-width
Padding adjusts for mobile

​
Advanced Features

​
Custom HTML Blocks

For advanced users who need custom code:
  1. Drag “Custom HTML” element to canvas
  2. Click “Edit HTML”
  3. Enter your HTML/CSS code
  4. Preview renders inline
  5. Saves with email
Use cases:
  • Custom tracking pixels
  • Advanced animations
  • ESP-specific variables (HubL, Liquid, etc.)
  • Embedded content
Test thoroughly—custom HTML must be email-safe

​
Dynamic Content

Insert ESP variables: 
Hello {{contact.firstname}}!

Your order #{{order.id}} has shipped.
Migma preserves variables during export.

​
A/B Testing Variants

Create variations visually:
  1. Edit email in visual editor
  2. Click “Create Variant”
  3. Make changes to variant
  4. Compare side-by-side
  5. Export both for A/B testing

​
Keyboard Shortcuts

ShortcutAction
Ctrl/Cmd + ZUndo
Ctrl/Cmd + YRedo
Ctrl/Cmd + SSave draft
Ctrl/Cmd + DDuplicate selected
DeleteDelete selected
Ctrl/Cmd + CCopy
Ctrl/Cmd + VPaste
↑↓←→Move selected element
EscDeselect

​
Templates & Reusability

​
Save as Template

  1. Complete email design
  2. Click “Save as Template”
  3. Name your template
  4. Add to template library
  5. Reuse for future campaigns

​
Use Pre-Built Templates

  1. Click “Templates” in editor
  2. Browse ReallyGoodEmails-inspired designs
  3. Select template
  4. Customize to your brand
  5. Edit visually

​
Code View Toggle

Switch between visual and code:
  • Visual Mode
  • Code Mode
Best for:
  • Non-developers
  • Quick edits
  • Layout changes
  • Content updates
Features:
  • Drag-and-drop
  • Click to edit
  • Visual property controls
Toggle: Click “Code” button to switch modes

Export Options

Export to HTML, React Email, MJML, and ESPs

​
Need Help?

Watch Tutorials

Visual editor video guides

Templates Gallery

Browse pre-built templates

Join Discord

Get design feedback

Contact Support

Editor questions and help