Drag & Drop Email Builder
The Drag & Drop (D&D) Email Builder is a visual editor available as an addon that lets you design professional, responsive emails without writing code. Drag content blocks onto the canvas, customize styles with the visual panel, and use pre-designed modules to accelerate your workflow.
The Drag & Drop Email Builder is available as the Advanced Broadcast Builder addon. Contact your administrator to install and enable it. Once active, the builder appears as an option when creating or editing broadcasts.
Overview
The D&D Builder is one of three editor options when creating a broadcast (alongside the HTML Editor and the AI Email Builder). It provides a WYSIWYG editing experience with real-time preview, a component-based architecture, and a rich set of design tools.
Key Features
| Feature | Description |
|---|---|
| Drag & Drop Canvas | Visual editing with draggable content blocks |
| Pre-Designed Modules | Ready-to-use email sections (headers, footers, CTAs, and more) |
| Variable Picker | Searchable modal to insert personalization variables |
| Media Library | Upload, browse, and manage images with remote URL downloading |
| Dynamic Settings Panel | Customize email width, fonts, colors, shadows, and canvas styling |
| Responsive Preview | Preview your email on desktop, tablet, and mobile viewports |
| Quick Preview Modal | Full-screen preview without leaving the builder |
| Keyboard Shortcuts | Ctrl+S to save, plus standard editing shortcuts |
| AI Chat Integration | Chat with Mumara AI directly inside the builder |
| Save & Exit | Save your work and return to the broadcast editor in one click |
Accessing the Builder
- Navigate to Campaigns → Broadcasts
- Click Add New or edit an existing broadcast
- Select Drag & Drop Builder from the editor options
- Choose a template from the gallery that slides in, or click Start Blank
- The builder opens in a full-screen editor
Builder Interface
Toolbar
The top toolbar contains essential controls:
| Control | Description |
|---|---|
| Back | Return to the broadcast editor |
| Save | Save the current email (also available via Ctrl+S) |
| Save & Exit | Save and return to the broadcast editor |
| Undo / Redo | Step through edit history |
| Device Preview | Switch between Desktop, Tablet, and Mobile views |
| Quick Preview | Open a full-screen preview modal |
| Settings | Open the dynamic settings panel |
| AI Chat | Open the Builder AI Chat side panel |
Canvas
The central editing area where you build your email. Drag components from the side panel, click to select and edit, and use the Style Manager to adjust visual properties.
Side Panel
The right-side panel provides:
- Blocks — Standard building blocks (text, image, button, divider, columns, etc.)
- Modules — Pre-designed email sections (see Pre-Designed Modules)
- Style Manager — Visual controls for dimensions, typography, decorations, and spacing
- Layers — Component hierarchy tree for precise selection
Pre-Designed Modules
The builder includes a growing library of professionally designed email modules that you can drag onto the canvas. Each module is a complete, responsive section ready for customization. New modules are added regularly to expand the available options.
Available Modules
| Module | Description |
|---|---|
| Alert Banner | Attention-grabbing notification bar for urgent messages or announcements |
| Article Grid | Multi-article layout with thumbnails and text for newsletters |
| Coupon Code | Promotional coupon section with code display and CTA |
| CTA Banner | Call-to-action banner with headline, description, and button |
| Countdown Banner | Urgency-driven section with countdown-style messaging |
| Divider | Decorative separator between email sections |
| FAQ | Question-and-answer layout for informational emails |
| Footer Columns | Multi-column footer with links and contact information |
| Footer Minimal | Simple, clean footer with essential links |
| Header (Logo Centered) | Centered logo header with optional navigation |
| Header (Logo Left) | Left-aligned logo header with optional navigation |
| Newsletter Signup | Email subscription section with input and button |
| Preheader | Hidden preheader text section for email clients |
| Rating Stars | Visual rating display for reviews or feedback |
| Spacer | Adjustable vertical spacing element |
| Text Block | Rich text section with heading and body content |
Using Modules
- Open the Modules tab in the side panel
- Hover over a module to see a live preview tooltip showing how the module looks
- Drag the module onto the canvas at your desired position
- Click on any element within the module to edit text, images, colors, and styles
Module Preview Tooltip
When you hover over a module in the side panel, a scaled preview tooltip appears showing the actual rendered appearance of the module. This helps you choose the right module before adding it to your canvas.
Variable Picker
Insert personalization variables into your email using the searchable Variable Picker modal.
Opening the Variable Picker
Click the Insert Variable button in the text editing toolbar or the canvas toolbar.
Variable Categories
The Variable Picker organizes variables into searchable categories:
| Category | Syntax | Description |
|---|---|---|
| System Variables | %%variable%% | Sender info, dates, links, IDs |
| Recipient Fields | %%field%% | Contact data (first_name, email, etc.) |
| Spintax Tags | {{tag}} | Rotating text variations |
| Dynamic Content Tags | [[tag]] | Conditional content blocks |
| Profile Fields | %%field%% | Profile-related variables |
Using the Picker
- Open the Variable Picker
- Use the search box to filter variables by name
- Click a category tab to browse variables in that group
- Click a variable to insert it at the current cursor position
Media Library
The builder includes a media library for managing images used in your emails.
Uploading Images
- Click on an image component or the Asset Manager button
- The media library modal opens
- Drag and drop images into the upload area, or click Browse to select files
- Uploaded images appear in your media library for reuse
Browsing Existing Images
The media library automatically loads images you have previously uploaded. Browse and search through your image collection to find and reuse assets.
Remote Image Download
Add images from external URLs directly to your media library:
- Click the Add Image button in the media library
- Enter the URL of the remote image
- Click Download
- The image is downloaded to your server and added to your library
This ensures all images are hosted locally for reliable delivery, eliminating dependencies on external servers.
Dynamic Settings Panel
The settings panel provides visual controls to customize the overall email appearance without editing CSS.
Available Settings
| Setting | Description | Range |
|---|---|---|
| Email Width | Overall width of the email content area | 400px – 800px (slider) |
| Background Color | Email body background color | Color picker |
| Border Radius | Corner rounding for the email container | Slider |
| Font Family | Default font for the email | Font selector dropdown |
| Shadow | Box shadow preset for the email container | None, Subtle, Medium, Strong |
| Canvas Padding | Padding around the email on the canvas | Slider |
| Canvas Background | Background color of the canvas area (not the email) | Color picker |
Using the Settings Panel
- Click the Settings gear icon in the toolbar
- Adjust settings using the visual controls
- Changes are applied in real-time on the canvas
- Settings are saved with your email when you save the broadcast
Responsive Preview
Preview how your email renders on different screen sizes without leaving the builder.
Device Preview Buttons
The toolbar includes three device preview buttons:
| Device | Viewport Width | Description |
|---|---|---|
| Desktop | Full width | Standard desktop email client view |
| Tablet | 768px | Tablet and small laptop screens |
| Mobile | 375px | Smartphone screens |
Click any device button to resize the canvas to that viewport width. The email content reflows according to its responsive CSS rules.
Quick Preview Modal
Click the Quick Preview button in the toolbar to open a full-screen preview modal:
- Shows the email at the selected device width
- Provides a clean view without builder UI elements
- Switch between device sizes within the modal
- Close the modal to return to editing
Rich Text Editor
When editing text components, a rich text editor (RTE) toolbar appears with formatting options.
Link Editing
The builder includes an enhanced link editing experience:
- Click on a link in the editor to see a link bubble popup
- The link bubble shows the current URL with a clickable preview
- Edit the URL, link text, and target directly in the bubble
- Changes are applied in real-time
Text Formatting
Standard formatting options are available:
- Bold, Italic, Underline
- Text alignment (left, center, right)
- Font size and color
- Link insertion and editing
- Variable insertion via the Variable Picker
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Ctrl + S | Save the current email |
| Ctrl + Z | Undo last action |
| Ctrl + Shift + Z | Redo last undone action |
| Delete / Backspace | Remove selected component |
The Ctrl + S shortcut works throughout the entire builder interface, ensuring your work is always saved with a quick keystroke.
Style Manager
The Style Manager panel provides visual controls for styling selected components:
Sectors
| Sector | Controls |
|---|---|
| Dimensions | Width, height, padding, margin |
| Typography | Font family, size, weight, color, line height, alignment |
| Decorations | Background color, border, border radius, box shadow, opacity |
All style sectors are expanded by default for quick access. Select a component on the canvas and use the Style Manager to adjust its appearance visually.
Save & Exit
The Save & Exit button in the toolbar provides a one-click workflow to save your email and return to the broadcast editor:
- Click Save & Exit
- The email HTML and CSS are saved to the broadcast
- You are redirected back to the broadcast editor
This is particularly useful after finishing design work when you need to configure broadcast settings, test, or schedule.
Best Practices
Design Tips
- Start with a module — Drag a header module first, then build the body, and finish with a footer
- Use the preview tooltip — Hover over modules to preview them before adding
- Check responsive views — Switch to tablet and mobile views to verify your layout
- Save frequently — Use Ctrl+S to save your work regularly
Performance
- Optimize images — Use compressed images for faster email loading
- Use the media library — Download remote images locally for reliable delivery
- Limit modules — Avoid excessively complex layouts that may render inconsistently across email clients
Workflow
- Use the Quick Preview for a clean view of your email without builder chrome
- Leverage AI Chat for content generation and design suggestions while building
- Use the Variable Picker to insert personalization variables correctly every time
- Save & Exit when you are done designing to move on to broadcast settings
Troubleshooting
Modules Not Appearing
Cause: Module files may not be loaded or the panel tab is not selected.
Solution:
- Click the Modules tab in the side panel
- Refresh the builder if modules are missing
- Verify the builder assets are properly installed
Styles Lost After Editing
Cause: Component replacement can reset CSS rules.
Solution:
- Use the Style Manager to reapply styles
- Avoid cutting and re-pasting large sections — edit in place instead
- Save frequently to preserve your work
Images Not Loading
Cause: External image URLs may be blocked or unavailable.
Solution:
- Use the Remote Image Download feature to host images locally
- Upload images directly to the media library
- Verify image URLs are accessible via HTTPS
Ctrl+S Not Working
Cause: Focus may be in a nested element that intercepts the shortcut.
Solution:
- Click on the canvas area first, then press Ctrl+S
- The shortcut works throughout the entire builder interface
Next Steps
- Broadcasts — Configure broadcast settings and send tests
- Builder AI Chat — Get AI help while building
- Scheduling — Schedule your email for sending
- Dynamic Content Tags — Add conditional content
- Spintax — Add rotating text variations