Choose your banner editor — Drag & Drop or classic

MailManagers offers two ways to build a banner: Drag & Drop or No Drag & Drop (the classic editor). Both produce the same 680×120px banner — only the building method differs.

When to pick which?

Drag & Drop — professional result in minutes

Drag individual building blocks (text, image, button, review, divider, spacer) into a 1- or 2-column layout. Pick a template to start quickly, or build from scratch.

✅ Pick this if you want to:

• Get a polished design without many decisions
• Combine multiple elements (photo + text + button + review side-by-side)
• Build a banner with multiple rows
• Set a per-row background color

No Drag & Drop — maximum creative control

A fixed layout with set fields (title, subtitle, button, background). Plus advanced options: image position left/right, fade effects, dynamic badges (static text, countdown timer, or review score).

✅ Pick this if you want to:

• Show countdown badges or automatic review badges
• Apply very specific fade/position tweaks
• Stick to a familiar form-driven layout

Create a new banner

1. Go to Banners in the sidebar.
2. Enter a name at the top (e.g. "Spring promo 2026") and click Create banner.
3. A choice modal appears: pick Drag & Drop (Professional look) or No Drag & Drop (For creative people).

You can switch any time between modes via the "Editor mode" toggle in the sidebar of the banner-edit page. Both designs stay saved — only the active mode is rendered in your emails.

Drag & Drop in short

At the top you see a toolbar with 6 building-block buttons and a separate "Badge" button. Drag a block to the desired column on the canvas, or click to add it to the first available column.

Building blocks:

• Text — title + body, with per-block color and alignment
• Image — upload, crop on upload, pick from earlier uploads, per-corner radius, fade edges
• Button — CTA with custom color, radius and alignment
• Review — quote + stars + platform logo (Google, Trustpilot, Facebook, Let's Connect)
• Divider — horizontal separator with color and thickness
• Spacer — vertical spacing

Per-row layout: 1 column · 50/50 · 66/34 · 34/66. Each row can have its own background (color, photo, pattern or library, with optional color tint overlay).

Badge (overlay): static text that sticks to one of 4 corners, above all blocks. 5 shapes (rectangle, rounded, circle, star, tag), rotation, scale, per-corner border-radius and an optional URL.

Drag existing blocks between columns and rows

Already placed a block and want to move it? Drag the block to another column or row — it appears at the end of the target cell and stays selected so the inspector follows it. The source block becomes semi-transparent while dragging, the target cell highlights blue.

Backgrounds: color, photo, library or pattern

Click the 🎨 Background button in the toolbar (banner level) or on any row. You get 4 modes:

• 🎨 Color — solid color
• 🖼️ Photo — upload or pick from your library (Media Library now has a prominent "⬆ Upload new image" button). With fill / fully visible / repeat modes and a 3×3 focus point grid to position the image precisely.
• 🌈 Library — 30 ready-to-use gradient backgrounds (sunset, ocean, brand blue, neon-pink, marble, premium-dark, …). One click to apply.
• ▦ Pattern — 12 minimalist SVG patterns (dots, grid, waves, zigzag, crosses, …) with color and base-color pickers.

Color tint (overlay): expand "Color tint over it" and choose a color with opacity slider (0–100%). Useful to darken your background for readable text on top.

Image block: fill the whole block

In the Image-block inspector you'll find the "Fill the whole block" toggle. Enable it → the image fills the full column width and height with cover mode. With a height slider, "fill" or "fully visible" mode, and a 3×3 focus point grid to control which part of the photo is centered.

✨ AI text improvement

Next to every text field (title, body, button label, review quote, badge text) there's a purple ✨ button. Click → the AI suggests an improved version of your text, in your UI language and tuned to the field type (button = imperative and short, badge = max 14 chars, etc.). Empty fields get a fitting suggestion.

Color pickers — type HEX directly

Click on any color swatch → custom popover opens (no more native OS color picker that sometimes opens in RGB mode). Right away:

• HEX input at the top — type or paste a HEX code like #1B91DA, hit Enter, done
• Visual saturation × value square
• Hue slider
• 12 preset colors (black, white, brand blue, accent colors)

Next to every swatch there's also a HEX text input for power users.

Live email rendering — multi-click & selectable

Drag & Drop banners are embedded in the email inline as HTML (not as PNG). Benefits for you and your recipients:

• ✅ Each block has its own URL — button, image and review link can link separately
• ✅ Text is selectable / copyable by recipients
• ✅ Works without image loading — Outlook shows text right away, even with "show images" off
• ✅ Accessible for screen readers (real text and buttons)
• ✅ Smaller message size (~5 KB instead of 50–200 KB per PNG)

In Outlook Desktop Windows the banner is shown as a flat table (no @media queries — the Word render engine doesn't support them, well-known email industry limitation).

Tips

• Templates: in the toolbar there's a "Choose template" dropdown with ready-made designs (Promo with button, Review spotlight, Event announcement, Hero with text). Fastest starting point.
• Sticky preview: while editing block properties, the toolbar and live banner stay at the top — you see changes instantly.
• Fade in modern mail clients: fade effects on images work in Apple Mail, Gmail web and ProtonMail. Outlook desktop shows the full image (no fade).
• Mobile version: in the Drag & Drop tab use the toggle 🖥️ Desktop ↔ 📱 Mobile to compose a separate mobile banner. Tip: use "Copy desktop blocks" as a starting point.

Common pitfalls

• "My image doesn't fit" — use the Crop button right after upload (appears automatically) and select "680×120 (banner)" as ratio. Or use "Fill the whole block" with focus point for automatic fitting.
• "The badge overlaps my text" — adjust the X- and Y-offset sliders; offset is in pixels from the chosen corner. Range 0–600px (X) and 0–240px (Y).
• "Clicks on a block open external links instead of selecting" — fixed since June 2026: clicks in the editor always select the block, external links only work in the live email.