The MigoSMTP drag-and-drop builder allows you to create professional email templates visually — without writing a single line of HTML. It is designed for marketers, content teams, and non-technical users who need to build and update email designs quickly. This article covers all builder features from adding content blocks to previewing and publishing.
Accessing the Builder
- Go to Templates → Create Template.
- In the template editor, select Visual Editor or Drag-and-Drop Builder mode.
- The builder opens with a blank canvas and a sidebar of available content blocks.
The Builder Interface
| Panel | Location | What It Does |
|---|---|---|
| Blocks panel | Left sidebar | Library of drag-and-drop content blocks — text, image, button, divider, spacer, columns, social icons, HTML |
| Canvas | Centre | The email layout — drag blocks here, reorder by dragging, select to edit |
| Properties panel | Right sidebar | Settings for the selected block — text, colours, padding, links, and image URLs |
| Global settings | Top of right panel or gear icon | Email-wide settings: background colour, maximum width, font family defaults |
| Preview / test buttons | Top toolbar | Toggle desktop/mobile preview, send test email, switch to HTML view |
Available Content Blocks
| Block Type | What You Can Do With It |
|---|---|
| Text | Add headings, paragraphs, and body copy. Format with bold, italic, underline, links. Supports {{variable}} syntax for personalisation. |
| Image | Upload or paste a URL for an image. Set alt text, link, width, and alignment. Hosted images load fastest — avoid large image files. |
| Button | Call-to-action button with customisable text, URL, colour, border radius, padding, and font size. Supports {{cta_url}} variable. |
| Divider | Horizontal rule to separate content sections. Customise colour, width, and thickness. |
| Spacer | Add vertical whitespace between blocks. Set exact pixel height. |
| Columns (2 or 3) | Split a row into 2 or 3 columns. Drop other blocks inside each column. Columns stack vertically on mobile. |
| Social Icons | Pre-built social media icon row for LinkedIn, Twitter, Instagram, Facebook, YouTube. Add your profile URLs. |
| Video thumbnail | Insert a linked video thumbnail image (email clients cannot play video inline). Links to your video URL when clicked. |
| HTML | Embed a custom HTML code block anywhere in the template — useful for custom pricing tables or complex components. |
| Footer | Pre-built footer block with unsubscribe link, mailing address, and legal text. Always include this block — required for CAN-SPAM compliance. |
Step-by-Step: Building a Simple Promotional Email
- Set global styles — click the gear icon; set background colour to
#f4f4f4, email width to600px, and default font to Arial, sans-serif. - Add a header — drag an Image block to the top. Upload your logo. Set background colour to your brand colour. Set alt text to your company name.
- Add a hero section — drag an Image block below the header for a banner image (1200×600px recommended). Add a link to your campaign landing page.
- Add headline text — drag a Text block. Type your headline. Set font size to 28px, colour to your brand dark colour, alignment to centre.
- Add body copy — drag another Text block. Write 2–3 sentences of copy. Set font size to 16px, line height to 1.6, colour to
#555555. - Add a spacer — drag a Spacer block with height 20px.
- Add a CTA button — drag a Button block. Set text to your CTA phrase (e.g. Shop Now). Set URL, background colour to your brand green, text colour to white, border radius to 6px, padding to 14px 28px.
- Add a footer — drag the Footer block. Update the company address. Link the unsubscribe URL to
{{unsubscribe_url}}.
Mobile Preview and Responsiveness
Click the mobile icon in the preview toolbar to toggle mobile view. All blocks in the drag-and-drop builder are automatically responsive:
- Multi-column layouts stack into single-column on mobile screens.
- Images scale to full width on small screens.
- Font sizes and button padding are preserved.
- If any block looks wrong on mobile, select it and adjust mobile-specific settings in the properties panel (many blocks have separate desktop and mobile padding controls).
Sending a Test Email from the Builder
- Click Test Email in the top toolbar.
- Enter one or more recipient email addresses (comma-separated).
- Optionally enter sample variable values for preview.
- Click Send Test.
- Check your inbox — the email should arrive within 1–2 minutes.
- Review on both desktop and mobile email clients before publishing.
Exporting to HTML
If you want to use the template outside MigoSMTP or inspect the generated code:
- Click the </> Code button in the toolbar.
- The generated HTML is displayed in the code editor.
- You can copy the HTML, edit it directly, and switch back to the visual view.
- Note: major structural changes in HTML view may prevent switching back to the visual editor cleanly — save before switching.