# 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! 🚀
***
## **Appearance Menu**
Let’s start with the **Appearance 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:
* [**General settings**](#general-settings)
* [**Stripes**](#stripes)
* [**Headings**](#headings)
* [**Buttons**](#buttons)
* [**Mobile formatting**](#h_72726fcaa5)
### **General Settings**
In this tab, you define the overall look and feel of your email. You can:
1. Set the **Message width** (default is 600px, the most common width across email clients);
2. Choose the **Message alignment** (centered, left, or right-aligned within the inbox);
3. Define **default padding** for structures you will add later;
4. Pick a general **background color** and optional **background image** for your entire email;
5. Set the **default font** used across all text blocks (except headings);
6. Adjust **line spacing** to make your content more readable or match your brand tone;
7. Enable or disable **paragraph bottom spacing;**
8. Choose whether to **underline links** throughout the email;
9. Activate **RTL text direction** if you're writing in right-to-left languages (like Arabic or Hebrew for example);
10. Manage **responsive design** (enabled by default, so your emails look great on both desktop and mobile).
### **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:
You can:
* Define unique font sizes for each stripe (especially useful for footers, which often use smaller text);
* Customize text and link colors;
* Apply a **stripe background color** to draw attention to specific sections;
* Add a **background image** if your brand requires it.
{% 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 %}
### **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**, **style**, **color**, 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:
* Outlook support toggle (enabled by default, to ensure better rendering in Outlook via VML code)
* Font and button size, style, and color;
* Highlight hovered buttons (change colors when you hover the mouse over it);
* Border radius;
* Borders (full or per side, including color);
* Inner padding;
### 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
1. Go to the "**Appearance"** tab in the editor;
2. Open the "**Mobile view**" section:
Here, you’ll be able to:
* **Set custom font sizes** for headings H1, H2, and H3;
* **Adjust text size for buttons** (we recommend 18px or higher for readability);
* **Apply different font sizes** and **margins for content**;
* **Enable "Full-width buttons"** to make your call-to-action buttons span the full width of the mobile screen;
{% hint style="info" %}
Back to **Desktop view** you can disable "**Responsive images**" for 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.
***
## **Content Menu**
Now that we've set our general styles in the **Appearance** menu, editing your template becomes much faster — no need to manually style each element one by one.
In the **Content** menu, you will find three main building elements of your email:
* [**Structure**](#what-is-a-structure)
* [**Blocks**](#what-are-blocks)
* [**Modules**](#what-are-modules)
#### **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, just drag and drop it from the **Content** menu 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**, 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’re the most granular elements you’ll work with in Batch. In the **Content → Blocks** menu, you have access to **13 essential blocks** such as:
* [**Image**](#adding-a-logo-or-image)
* [**Text**](#adding-text)
* [**Button**](#adding-cta-button)
* [**Spacer**](#add-a-spacer)
* [**Video**](#add-video)
* [**Social**](#add-social-media)
* [**Banner**](#add-banner)
* [**Menu**](#add-menu)
* [**HTML**](#add-html-code)
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 [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
{% 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:
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, 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 label** (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 [Appearance tab](#appearance-menu), 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**:
* Drop the **"Spacer" block** inside that structure.
* **Click the spacer** to open the settings panel.
1. Enable **dynamic resizing** to manually adjust the spacer’s size by dragging;
2. Choose a **background** **color**;
3. Pick a **line style** — options include **solid**, **dashed**, or **dotted**;
4. Define the **width** of the spacer.
5. Adjust the **alignment** (centered by default, but you can change it to left or right);
6. Toggle **"Responsive spacer"** to ensure proper rendering on mobile devices;
7. Set **padding** to manage the space around the spacer within its container;
8. 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).
{% 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
* Adjust the **font size** if needed for better visibility. For example, set it to “18” for a more prominent look.
* 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.
{% hint style="info" %}
**Mobile optimization**: enable the **"Adaptive menu"** toggle to ensure menu items stack vertically on mobile devices. This greatly improves readability and usability on smaller screens.
{% endhint %}
### Add countdown timer
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.
1. Set the **end date and time;**
2. Choose the **time zone;**
3. Choose **number font, size and color**
4. Add **background color**
5. Toggle **"Display days"** if you want the timer to show days
6. Choose your preferred **separator** (e.g., “:”, “-”, “/”).
7. Enable **"Number labels"** to show "days", "hours", etc., under digits.
8. Choose the **language** of your label
9. Style the labels (font, size, color).
10. Toggle **"Expired timer image"** to show a fallback image after expiry.
11. Add a **URL** to redirect users to a specific page when they click the timer.
12. Set **alt text** for the expired timer image for better accessibility.
13. Align the timer to match your brand’s layout and design.
14. Adjust the **size** for optimal display across devices.
15. Define the **timer’s width** to suit your layout.
16. Choose whether to make the timer **responsive**
17. Use **Advanced Settings** to further customize digit and label colors.
18. Add padding to give the timer breathing room.
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.
1. **Paste your custom HTML code** into the editor.
2. **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/how-to-save-modules-on-the-email-composer) 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 🚀
