Visual Builder

Published on: March 16, 2026

Last updated: March 16, 2026

Visual Builder

The Visual Builder is a drag-and-drop email editor powered by GrapesJS. It opens as a modal inside your WordPress admin and is available wherever you see the “Open Visual Builder” button — both inside campaign editing and transactional email editing.

Interface overview

  • Left panel — Blocks: Drag content blocks from here onto the canvas
  • Center — Canvas: The email design surface; click any element to select it
  • Right panel — Properties & Styles: Edit the selected element’s content, spacing, colors, and other CSS properties
  • Top toolbar: Undo/redo, toggle device preview (desktop/mobile), save, and close

Available blocks

  • Text — paragraph or heading text; type merge tags like {{first_name}} directly into the element
  • Image — upload an image or enter a URL; set width and alt text in the right panel
  • Button — styled link button; set the label and URL in the right panel
  • Divider — horizontal rule for visual separation
  • Columns — side-by-side column layout; drag other blocks inside each column
  • HTML — raw HTML block for custom or advanced content

Using merge tags

Type merge tags directly into text elements on the canvas. They are preserved in the output HTML and replaced with real values at send time. Available tags: {{first_name}}, {{email}}, {{site_name}}, {{site_url}}. In Confirmation emails only: {{confirm_url}}.

Saving your design

  • Click the Save button in the top toolbar
  • The builder closes and returns the generated HTML to the campaign or transactional email editor
  • The output uses inline CSS — it is already optimized for email client rendering
  • To make further changes, reopen the builder by clicking “Open Visual Builder” again

Troubleshooting the builder

  • Builder modal opens blank: A JavaScript conflict with another admin plugin is likely. Try deactivating other plugins one by one, or switch to Chrome.
  • Blocks won’t drag or canvas is unresponsive: Same root cause — JS conflict. Check the browser console for errors.
  • Saved content not appearing in editor: Check the browser console for errors. As a fallback, switch the editor mode to Raw HTML and paste your content directly.
  • Columns layout looks broken in the email client: Not all email clients support multi-column layouts. Use a single-column layout for maximum compatibility, or test thoroughly before sending.

Next: Shortcode Reference

Dispatch Pro

Premium self-hosted email marketing for WordPress. Everything in Core, plus the Visual Builder, customizable transactional emails, and CSV import/export.

Quick Links

Need support?

Dispatch Pro Support →

❌
Subscription Hell
  • • Payment fails? App stops
  • • Need online activation
  • • Forced updates
  • • Data held hostage
✓
M Media Way
  • • Buy once, own forever
  • • Works offline
  • • Optional updates
  • • You control your data

Simple Licensing. No Games.

We don't believe in dark patterns, forced subscriptions, or holding your data hostage. M Media software products use clear, upfront licensing with no hidden traps.

You buy the software. You run it. You control your systems.

Licenses are designed to work offline, survive reinstalls, and respect long-term use. Updates are optional, not mandatory. Your tools don't suddenly stop working because a payment failed or a server somewhere changed hands.

✓ One-time purchase, lifetime access
✓ No "cloud authentication" breaking your workflow
✓ Upgrade when you want to, not when we force you
✓ Software empowers its owner — not rent itself back
🤖
Support Bot
"Have you tried restarting your computer? Please check our knowledge base. Your ticket has been escalated. Estimated response: 5-7 business days."
❌ Corporate Script Theater
👨‍💻
Developer (M Media)
"Checked your logs. Line 247 in config.php — the timeout value needs to be increased. Here's the exact fix + why it happened. Pushed a patch in v2.1.3."
✓ Real Technical Support

Support From People Who Understand the Code

Ever contact support and immediately know you're talking to someone reading a script? Someone who's never actually used the product? Yeah, we hate that too.

M Media support means talking to developers who wrote the code, understand the edge cases, and have probably hit the same problem you're dealing with. No ticket escalation theatrics. No "have you tried restarting?" when your question is clearly technical.

Documentation written by people who got stuck first. Support from people who fixed it.

We don't outsource support to the lowest bidder or train AI on canned responses. When you ask a question, you get an answer from someone who can actually read the logs, check the source code, and explain what's happening under the hood.

✓ Real troubleshooting, not corporate scripts
✓ Documentation that assumes you're competent
✓ Email support that doesn't auto-close tickets
✓ Updates based on actual user feedback