> ## Documentation Index
> Fetch the complete documentation index at: https://jetemail.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Template Editor
> Build responsive email with blocks, sections, HTML, styles, themes, and previews.
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.
| Block | Use |
| --------------- | ------------------------------------------------------- |
| **Text** | Paragraphs, lists, and inline links |
| **Heading 1–3** | Structured headings at three sizes |
| **Button** | A linked call to action |
| **Image** | A hosted image, logo, or banner |
| **Callout** | Highlighted text with fill, border, padding, and radius |
| **Columns** | One or more side-by-side content panels |
| **Divider** | A horizontal separator |
| **Spacer** | Adjustable vertical space |
| **Header** | Logo-oriented header content |
| **Footer** | Company details and an optional unsubscribe link |
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:
| Shortcut | Action |
| ------------------------- | ----------------------------------- |
| `/` | Open the block and section menu |
| Arrow keys | Move through the open slash menu |
| `Enter` | Insert the selected slash-menu item |
| `Escape` | Close the slash menu |
| `Command/Control-D` | Duplicate the selected block |
| `Backspace/Delete` | Delete a selected non-editing block |
| `Command/Control-Z` | Undo a structural editor change |
| `Command/Control-Shift-Z` | Redo |
| `Command/Control-S` | Save the template |
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](/docs/marketing/files).
## 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.
| Preset | Useful starting point |
| ---------------------------------- | --------------------------------------------------- |
| **Neutral** | Near-black text and buttons on a cool white card |
| **Ink** | Minimal white-on-white layout with black actions |
| **Paper** | Warm canvas, larger body text, cyan accent |
| **Indigo** or **Violet** | Product updates with a strong software-style accent |
| **Azure** or **Cobalt** | Clean blue product and account email |
| **Coral**, **Orchid**, or **Plum** | Branded newsletters and promotions |
| **Amber** | Warm announcements and highlighted actions |
| **Midnight** | Black card with high-contrast white actions |
| **Slate** | Dark slate design with a green action colour |
| **Charcoal** | Near-black design with a coral accent |
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.
```html theme={null}
Hi {{firstName}}
Your latest account summary is ready.
```
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.