Skip to main content
The template editor supports both a visual block builder and complete HTML. Both produce an HTML message plus an automatically generated plain-text alternative.

​
Start from a layout

New templates open a starter gallery. Choose a starter to load its editable blocks and styles, or choose Blank template to begin with an empty canvas. Starters are starting points, not locked themes. You can change every block, colour, font, image, and section.

​
Add blocks

Click a + between blocks or type / in an editable text block. Click a block to select it. Its settings cover the values relevant to that block, such as link URL, colours, image alt text, width, alignment, padding, or column stacking.

​
Insert complete sections

Choose Browse sections from the block menu when you want a composed layout rather than one primitive. The library includes:
  • Logo, logo with tagline, and logo with menu
  • Hero, hero with image, and split hero
  • Two- and three-column content
  • Feature rows and FAQ
  • CTA banners, buttons, and highlight boxes
  • Product, order summary, coupon, and pricing layouts
  • Testimonials, stats, and logo clouds
  • Simple and linked footers
A section expands into normal editable blocks and adopts the template’s current styles.

​
Edit and arrange content

Text and headings are edited directly on the canvas. The inline toolbar supports rich text and links. For blocks:
  • Drag to reorder
  • Use Duplicate to make a copy
  • Use Delete to remove
  • Add child blocks inside columns
  • Move column children up or down
  • Enable Stack on mobile for responsive columns
Useful shortcuts: When a heading is active, Enter creates a text block below it. Backspace on an empty text or heading block removes it and focuses the previous block.

​
Work with images

For an image or header block:
  1. Choose an image from Files, upload one, or paste a public image URL
  2. Add useful alt text
  3. Optionally make the image a link
  4. Adjust its width and alignment
Use PNG, JPEG, GIF, or WebP up to 5 MB. See Files & image storage.

​
Apply styles

Open Styles in Design view to control:
  • Preset palette
  • Saved theme
  • Document language
  • Body and heading fonts
  • Text, link, and heading colours
  • Text and heading sizes
  • Page and content backgrounds
  • Block spacing and card padding
  • Card corner radius
  • Default button fill, text, and radius
Button defaults apply to newly created buttons; existing buttons retain their individual style.

​
Understand the style layers

The template system has three styling layers:
  1. Template styles set the overall page, content card, typography, headings, links, spacing, and button defaults.
  2. Section styles are created from the template’s current styles when you insert a prebuilt section.
  3. Block settings override an individual button, image, callout, footer, or column panel.
For example, setting the template button colour to blue makes newly inserted buttons blue. If you then make one destructive action red, that button keeps its red override even when the global button default changes. Inserted sections become normal blocks. A two-column feature section can use the global body font while each column has its own panel fill, padding, radius, width, and mobile-stacking behaviour.

​
Built-in style presets

Presets apply a complete, editable style object rather than locking the design. After choosing a preset, adjust any colour, font size, spacing value, or radius and optionally save the result as your own theme.

​
Example: a clean product update

Start with Neutral and keep its:
  • Light grey page around a white content card
  • 14 px body text
  • 28 px H1
  • Near-black links and buttons
  • 12 px card corners
  • 24 px content and card padding
Insert a Logo, Hero, Feature row, and Footer section. Change the link and button colour to your brand accent, then save the result as a reusable theme.

​
Example: an editorial newsletter

Start with Paper for:
  • A warm paper-coloured canvas
  • 16 px body text
  • Larger 22 px and 18 px secondary headings
  • Cyan links and buttons
  • Tighter card and button corners
Add two-column content for article summaries and enable Stack on mobile. Use a simple footer with sender details and the unsubscribe link.

​
Example: a dark launch announcement

Start with Midnight, Slate, or Charcoal. These presets supply a genuinely dark page and card rather than relying on a mail client’s dark-mode conversion. Check:
  • Logo contrast
  • Muted text legibility
  • Transparent images on the dark background
  • Button and link contrast
  • The result in both light- and dark-mode inbox settings

​
Save a theme

After styling a template:
  1. Open Styles
  2. Click Save current styles as a theme
  3. Name the theme
  4. Save
Apply that theme to another template from the Theme selector. Update theme replaces the saved theme with the current styles. Choosing a preset detaches the template from its saved theme. For example, save a theme named JetEmail product blue, then apply it to the welcome, product-update, and account-notice templates. If the brand colour changes, update the saved theme and deliberately reapply it to the templates that should adopt the new look.
A theme stores a reusable style snapshot, not content blocks or a live stylesheet. Updating it does not rewrite previously saved templates automatically.

​
Use HTML mode

Open HTML to paste or write a complete email document. A live preview updates beside the editor.
Use Insert field to add merge tokens at the cursor. The dashboard adds the managed preview-text preheader to the rendered and sent copy.
Design-to-HTML conversion is one-way for hand edits. If you return to Design and save, the visual block tree becomes authoritative and can replace custom HTML.

​
Review text and preview

The Text view is read-only and regenerated from the active Design or HTML content. It is sent as the plain-text MIME alternative, so make sure links and essential meaning survive without layout or images. The Preview view renders the final HTML at:
  • Desktop width
  • A narrow mobile width that activates responsive column behaviour
Preview is necessary, but a test send is still the best way to catch client-specific rendering.

​
Send a real inbox test

Click Send test in the editor toolbar, enter one recipient address, and send the current template render. The test system is designed for preflight checks:
  • It uses the configured Marketing sender
  • It includes the current HTML and generated plain text
  • It lets the receiving email client process the message normally
  • It does not send to an audience
  • It does not count toward a Marketing quota
  • Its delivery result can be inspected in Marketing Logs
Send another test after any material change to the template’s sender, subject, HTML source, theme, responsive layout, images, links, or unsubscribe footer.