> For the complete documentation index, see [llms.txt](https://doc.batch.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.batch.com/getting-started/channels/email/email-composer.md).
# Design your template with the Email Composer
### Introduction
Batch Email Composer helps you build beautiful and impactful email templates, no code needed.
Email remains one of the most impactful ways to connect with your users. Whether you're welcoming new customers, promoting an offer, or building long-term loyalty, email is a key touchpoint in the customer journey.
This guide will walk you through how to make the most of the Email Composer. Let’s get started! 🚀
***
## **Styles Menu**
Let’s start with the **Styles menu**. Why? Because the styles you define here will apply to your entire email 💪
You only need to configure design elements once — these settings will automatically apply wherever that element is used. No need to restyle buttons, text blocks, or headings every single time.
This saves time and ensures design consistency across your entire template.
In the **Appearance** menu, you will find the following settings:
* [**Global styles & Layout**](#general-settings)
* [**Stripes Styles**](#stripes)
* [**Headings Styles**](#headings)
* [**Buttons Styles**](#buttons)
### **Global Styles & Layout**
In this tab, you define the overall look and feel of your email. You can:
1. Pick a general **background color** and optional **background image** for your entire email;
2. Set the **Message width** (default is 600px, the most common width across email clients);
3. Choose the **Message alignment** (centered, left, or right-aligned within the inbox);
4. Choose whether to **underline links** throughout the email;
5. Manage **responsive design** (enabled by default, so your emails look great on both desktop and mobile).
6. **Hide image download icons** for cleaner email design
7. Activate **RTL text direction** if you're writing in right-to-left languages (like Arabic or Hebrew for example);
8. Apply the same styles to your lists with **Custom list styles;**
9. Define **Default Padding** and **Margins** for structures you will add later;
10. You can also turn off all the general styles to freely utilize your cutom HTML \&CSS without our styles affecting it.
### **Stripes**
A **stripe** is a horizontal section of your email that contains structures, containers, and content blocks.
To add a stripe, click the **"+"** icon at the bottom left of an existing stripe:
Each stripe can be manually assigned a type: **Header, Content, Footer, or Info area**. Using different types of stripes can be helpful for structure and styling adjustments:
In the Stripe Styles menu, in order to to make your content more readable or match your brand tone, you can :
11. Set the **default font** used across all text blocks (except headings);
12. Adjust the **font weight**;
13. Adjust the **Line Height on desktop**
14. Adjust **letter spacing.**
For each type of stripe, you can also :
15. Apply a **Stripe Background Color** to draw attention to specific sections;
16. Define unique font sizes for each stripe (especially useful for footers, which often use smaller text);
17. Choose your **Content Background Color**;
18. Add a **background image** if your brand requires it;
19. Customize **Font Color**
20. and also **Link Color**;
21. Add **Hover Link Color**.
{% hint style="info" %}
Some email clients, like Outlook, may not display background images. We recommend setting a solid background color as a fallback that matches your image's tones.
{% endhint %}
22. You can also enable or disable **paragraph bottom spacing.**
### **Headings**
Need to highlight a key message or divide sections? Use **Headings**.
Just select your text and apply a heading style from the formatting menu:
In the Settings panel, you can customize the **font**, **size**, **weight**, **style**, **color**, **letter** and **line spacing** of your **headings** to fit your design:
### **Buttons**
Buttons drive action. Whether it's visiting your website, redeeming a promo, or following on social media, they matter.
You can set global look for all your buttons:
1. Outlook support toggle (enabled by default, to ensure better rendering in Outlook via VML code)
2. Font family, size, weight, style and color;
3. Text transform to apply uppercase, capitalize or lowercase to your button's text;
4. Letter spacing;
5. Button color;
6. Borders width;\`
7. Border colors and style;
8. Highlight hovered buttons (change colors when you hover the mouse over it);
9. Border radius;
10. Fit to container for desktop;
11. Padding on desktop;
### Mobile formatting
All emails built with Batch are responsive by default. This means they automatically adapt to mobile screens. But for full control over how your content appears on smaller devices, you can customize certain settings specifically for mobile.
#### Adjust your email for mobile
Click on the "Mobile view" button in the bottom navigation bar:
There, you’ll be able to make the same adjustments described above:
{% hint style="info" %}
Back to **Desktop view** you can disable "**Responsive images**" on specific elements, if needed.
{% endhint %}
#### Hide elements on mobile or desktop
If you want to hide some elements on mobile or desktop devices, you don’t need to write a single line of HTML! To hide content from mobile users:
1. Select the element you want to hide.
2. Click the **"Hide on mobile or desktop"** option in the settings panel;
With this enabled, the selected element won’t appear in the mobile/desktop version of your email. Ideal for simplifying layouts or removing non-essential visuals.
Now that we've set our general styles in the **Styles** menus, editing your template becomes much faster. No need to manually style each element one by one.
***
## **Content Menu**
Let's go through the content menu on the left side of your screen!
In the **Content** menu, you will find three main building elements of your email:
* [**Structure**](#what-is-a-structure)
* [**Modules**](#what-are-modules)
* [**Containers**](#what-are-blocks)
#### **What is a Structure?**
In Batch, the **stripe** sits at the top of the email layout hierarchy.
Each stripe must contain **structures**, which are automatically added by default.
To insert an additional structure:
1. Click on the **Structures & Modules** button in the **Content** menu
2. And just drag and drop it to the desired section of your email:
{% hint style="info" %}
Each stripe can hold multiple structures. And each structure can contain **up to 8 containers in a row**.
{% endhint %}
You can **move, copy, delete**, **apply display conditions** or **save** **a structure as a module** by hovering over it and using the dropdown menu:
#### **What are Blocks?**
Blocks are the **foundation** of your email layout. They are the most granular elements you’ll work with in Batch. In the **Blocks** menu on the left, you have access to **10 essential types**:
* [**Image**](#adding-a-logo-or-image)
* [**Text**](#adding-text)
* [**Button**](#adding-cta-button)
* [**Spacer**](#add-a-spacer)
* [**Video**](#add-video)
* [**Social**](#add-social-media)
* [**HTML**](#add-html-code)
* [**Banner**](#add-banner)
* [**Menu**](#add-menu)
* [**Timer**](#add-countdown-timer)
To use a block, just drag and drop it into your email layout and customize it as needed:
#### **What are modules?**
**Modules** are reusable sections — made up of stripes, structures, or containers — that help you speed up email creation:
You can create your own custom modules and reuse them across templates. Learn more on [how to save modules on the email composer](https://doc.batch.com/guides-and-best-practices/message/email/how-to-save-modules-on-the-email-composer).
#### Now that you're familiar with the **Content section** of the Email Composer, it's time to start building your template 🚀
### **Adding a logo or image**
Images bring your emails to life — whether it’s your logo for brand recognition or a banner to support your message. In Batch, adding visuals is quick and intuitive. You can upload images directly, link to them via URL, and adjust their appearance to fit seamlessly into your design. You can add images to your email in **two simple ways**:
#### 1. **Drag and drop / upload from Computer**
* Drag your image directly into your email layout, or
* Click the **arrow icon** to browse and upload from your device.
{% hint style="info" %}
Supported formats: JPEG, PNG, GIF\
Max file size: 3 MB\
Max resolution: 4000 × 4000 px
Uploaded JPEG images are automatically compressed (25%) to keep your emails lightweight. PNG and GIF images are not compressed.
{% endhint %}
#### 2. Paste **external image URL**
Don’t have the image locally?\
Paste a link to the image in the **External Link** field to pull it directly from the web.
It is also possible to [edit images directly into the Email Composer](https://doc.batch.com/guides-and-best-practices/message/email/how-to-add-and-edit-images-in-your-email).
### **Adding text**
Text is a core element of any email — whether you're crafting a warm welcome message, highlighting a promotion, or guiding users to take action. In Batch, [adding and customizing text and links](https://doc.batch.com/guides-and-best-practices/message/email/how-to-add-text-and-links-to-your-email) is simple and flexible. You can easily drag a text block into your layout or simply click on the text icon in your container:
Then, you can style it to match your brand, and structure your content for maximum impact:
### **Adding CTA button**
A CTA (Call to Action) button is one of the most critical elements in your email — it directly impacts your **click rate**. Without a clear button, your audience can’t take the next step, whether it's making a purchase, signing up, or learning more.
Here’s how to create one in **Batch**:
* **Drag and drop** the **"Button" block** into your email layout or simply click on the button icon in the container, ideally next to the content it relates to.
* Click the button block to activate the **Settings panel**.
1. Enter the **destination URL** your button should link to.
2. Add your **button text** (this is the call to action your users will see for example: *Shop Now*, *Get Started*).
3. Customize the **text styles**: choose your font, size, and colors for both text and background.
4. Set the **border-radius** to round the button corners, if desired.
5. Define an **alignment.**
{% hint style="info" %}
In the [Global Button Styles tab](#buttons), you can globally enable “Highlight hovered buttons.” The hover color itself is configured in the Content tab when editing a specific button.
{% endhint %}
### **Add a spacer**
While a spacer won’t increase conversions, it plays an essential **design role** — it helps structure your content, adds breathing room, and improves overall readability.
Here’s how to add and customize a **spacer** in **Batch**:
* Drag and drop the **"Spacer" block** inside a structure.
* **Click the spacer** to open the settings panel.
1. Choose your spacer mode : line or space;
2. Define the **width** of the spacer;
3. Adjust its thickness, pick a **line style** — options include **solid**, **dashed**, or **dotted** — and a color;
4. Adjust the **alignment** (centered by default, but you can change it to left or right);
5. Choose a **background** **color**;
6. Set **margins** to manage the space around the spacer within its container;
7. If needed, add **anchor links** (they are not supported in some email clients: iOS Gmail app, iOS Apple Mail, Outlook app on Android, Outlook app for macOS and AMP Emails).
8. Choose to hide this element on desktop or mobile, or leave it on both versions.
{% hint style="info" %}
A well-placed spacer keeps your email clean, balanced, and easier to scan — small detail, big visual impact.
{% endhint %}
### Add video
Want to make your emails more dynamic and engaging? Adding videos to your email is a great way to capture attention and increase interaction. Whether you’re showcasing a product demo, a testimonial, or event highlights, [adding videos in your Batch email template](https://doc.batch.com/guides-and-best-practices/message/email/how-to-add-a-video-to-your-email) is quick and easy.
### **Add social media**
Including social media icons in your emails is a great way to encourage your audience to connect with your brand beyond the inbox.
Whether it's Facebook, LinkedIn, Instagram, or others, adding these links is simple with Batch. You can easily [embed social media links using our Email Composer](https://doc.batch.com/guides-and-best-practices/message/email/how-to-add-social-media-to-your-email).
{% hint style="info" %}
Social blocks not only complete your email visually — they also help drive traffic to your online communities. Add them strategically, typically in the header or footer, to stay connected with your audience.
{% endhint %}
### Add banner
Banners are the first element your reader will see at the opening of your email. They introduce your brand and set the tone of the e-mail, which is why it's so important to make them as impactful as possible.
Let's see [how to create an email banner?](https://doc.batch.com/guides-and-best-practices/message/email/how-to-create-an-email-banner)
### Add menu
The **Menu block** allows users to navigate to specific pages on your website — or even to sections within the email itself. It is a smart way to guide your readers and encourage click-throughs, make sure it’s clear, concise, and consistent with your branding!
Here’s how to add and customize a menu block in **Batch**:
* **Drag the "Menu" block** into your email template.
* **Add additional menu items** if needed. By default, Batch provides three items to start with.
* In the **Settings panel**, choose whether your menu should display:
* Icons only
* Links only
* Icons and links
* If using **Icons and links**, choose the desired **alignment** and **upload your icons**.
{% hint style="info" %}
If you choose **Links**, the font and colors you defined in your **General settings** will automatically apply. You can further customize the font style (e.g., make it bold) directly from the settings panel.
{% endhint %}
* **Label each menu item** and **insert the corresponding URL** for redirection.
* Repeat for all menu tabs.
* To **hide menu items on mobile**, simply click the **“Hide on mobile”** icon next to each item.
1. Add visible **separators** between each item by adjusting the thickness. You can also choose the separator style and color;
2. Chose your **font**;
3. Adjust the **font size** if needed for better visibility. For example, set it to “18” for a more prominent look.
4. Adjust the **font weight**;
5. Choose your **text style** and **link color**;
6. If you want to personalize **each item with its own color**, enable the **Menu Items Color**
### Add Countown Timer
{% hint style="info" %}
*This feature is available on request for certain customer tiers. Reach out to your Customer Success Manager to learn more.*
{% endhint %}
A countdown timer is a great way to capture attention and inspire action. It adds excitement by clearly showing how much time remains before an offer begins or ends — perfect for creating anticipation and encouraging quick decisions.
To add a timer:
* Drag a structure into your template.
* Drop the **"Timer"** block into it.
In its settings panel, you can :
1. Set the **end date and time;**
2. Choose the **time zone;**
3. Adjust its **size;**
4. Add a **URL** to redirect users to a specific page when they click the timer.
5. Set **alt text** for the expired timer image for better accessibility.
6. Toggle **"Display days"** if you want the timer to show days
7. Enable **"Digital labels"** to show "days", "hours", etc., under digits.
8. Choose your preferred **separator** (e.g., “:”, “-”, “/”).
9. Choose the **language** of your label
10. **Align the timer** to match your brand’s layout and design : by default it is centered but you can set it to the left or right;
11. Enable **Retina Display Support** for sharp display on high-resolution devices;
12. Toggle **"Expired timer image"** to show a fallback image after expiry.
13. **Hide your timer** on desktops or mobiles, or leave it in both.
14. Add padding to give the timer breathing room.
15. Add an **anchor link**.
You can also style it according to your brand design:
1. Choosing the **digits font and size**;
2. Choosing the **font color;**
3. Enabling Advanced Color Settings to **personalize the color of each element;**
4. Styling the **labels** (**font, size, color**). Use **Advanced Settings** to further customize label colors.
5. Choosing your **separator's font, size and color;**
6. Applying a background color.
That’s it — your countdown timer is all set to drive engagement!
### **Add HTML code**
Sometimes, your email design might require specific features or layouts that go beyond what the visual editor offers. In these cases, you can easily insert your own **custom HTML** code into your Batch template.
Here’s how to do it:
* Inside a structure, **drag and drop the “HTML” block**.
* Click **“Insert your HTML in the Code editor”** to open the code editor window.
* **Paste your custom HTML code** into the editor.
* **Customize or fine-tune the code** as needed.
{% hint style="info" %}
This feature gives you the flexibility to embed widgets, dynamic content, or any HTML-based elements that fit your brand’s needs.
{% endhint %}
## **Save a custom module**
If you find yourself reusing the same layout blocks across multiple emails — like headers, footers, product sections, or CTAs — Batch lets you save time by turning them into reusable **custom modules**.
Once saved, you can quickly drag and drop these modules into future templates, keeping your emails consistent and efficient to build. Here is [how to save modules on the email composer?](https://doc.batch.com/guides-and-best-practices/message/email/how-to-save-modules-on-the-email-composer)
### Add hidden preheader
Email marketing is a powerful tool for engaging with your audience, but optimizing your campaigns for maximum impact requires attention to detail!
One crucial element often overlooked is the **pre-header**, a valuable asset that can significantly improve the open rate of your email campaigns:
You can [add the pre-header](https://doc.batch.com/guides-and-best-practices/message/email/content-and-media/how-to-add-a-pre-header-to-an-email-template) directly into the HTML.
***
Once your email template is complete, you can preview and test it by returning to the [email message editor](https://doc.batch.com/getting-started/channels/email#h_0a21758190). This allows you to review how the template will appear in recipients' inboxes and make any final adjustments before sending 🚀
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://doc.batch.com/getting-started/channels/email/email-composer.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
