Docs Designs & email types

Designs & email types

Build HTML templates in the designer

On this page

The designer produces email-friendly HTML that renders reliably in the major clients (Gmail, Outlook, Apple Mail). The in-plugin preview helps, but it does not replace a real test mail in real inboxes.

FreddyMail designer in the WordPress admin
The designer with the preset picker on the left, live preview on the right and detail panel below.

The designer’s five sections

  1. Pick a preset. A starting point for width, spacing and base typography. Saves fiddly work later.
  2. Set the background. Outer surface color and inner spacing. Usually the only thing that changes when rebranding.
  3. Customise the header. Logo (HTTPS only!), title, alignment and mobile behaviour.
  4. Configure the body. Type sizes, text color, link color, button style, paragraph spacing.
  5. Check the preview. Desktop and mobile widths. Only then save and send test mails.

Preset picker

Preset selection in the designer Annotated
A handful of curated style presets such as Corporate Blue, Warm Sunset or Mono Editorial. One click applies colors and typography.

Header editor

Header editor with logo upload and alignment
Embed the logo via HTTPS. A maximum width of 200px keeps it crisp on Retina inboxes.

Body editor

Body editor with typography options
Type, sizes, link color and button style. Aim for 4.5:1 contrast minimum to stay dark-mode safe.

Preview

Preview toggle for desktop and mobile
Switch between desktop width (600px) and mobile width (320px) before saving.

Library

Library save dialog with success toast Annotated
Name the template and save. The green toast confirms — the template is now available to email types.

Pre-publish design check

  • Logo loads via HTTPS and is not too large (max 200 px wide).
  • Text is readable in dark mode.
  • Buttons have enough contrast and work as links.
  • The mobile width has been checked.
  • Test emails have been opened in the most important clients.