# Create Email Template

{% hint style="info" %}
**Quick Steps Guideline**

`Settings` > `Mail Templates` > `Create Email Template`

1. Open **Mail Templates**.
2. Click **Create Email Template**.
3. Set **Template Label** and **Email Type**.
4. Fill sender details and subject fields.
5. Build the layout with **Structures** and **Blocks**.
6. Preview, test, then **Save.**
   {% endhint %}

### Windows Outlook Configurations <a href="#windows-outlook-configurations" id="windows-outlook-configurations"></a>

Some versions of Windows Outlook may display distortions if **CSS definitions** are **missing** or **not properly applied**. To ensure consistent apperance across all email clients, especially Outlook, make sure your template **includes media styles** in the CSS section.

**Adding media styles in the CSS section:**

1. Open the template and switch to the Code Editor.
2. Open the CSS tab in the top right corner.
3. Add your media style definitions and save them.
4. Test: Preview in several different clients (Outlook, Gmail, Apple Mail).

Example:

```css
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
```

### Template Attributes

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FLwPC1PdxR9zDXQtSJhho%2FScreenshot%202025-05-15%20at%2016.01.41.png?alt=media&#x26;token=d6ed240d-1429-4b29-b115-b94cedf6588c" alt="" width="563"><figcaption></figcaption></figure>

<table><thead><tr><th width="156.70953369140625">Attribute</th><th>Description</th></tr></thead><tbody><tr><td><strong>Template Label</strong></td><td>Internal name visible only to you. Choose descriptive names to quickly identify templates.</td></tr><tr><td><strong>Email Type</strong></td><td>Select one:<br>- <strong>Notification</strong>: For transactional emails (password resets, confirmations). Sent to all users regardless of opt-in.<br>- <strong>Campaign/Advertisement</strong>: Marketing emails sent only to opt-in users.</td></tr><tr><td><strong>From Address</strong></td><td>Pre-registered sender email address visible to recipients.</td></tr><tr><td><strong>Sender Name</strong></td><td>Display name your recipients will recognize (e.g., company name).</td></tr><tr><td><strong>Mail Subject</strong></td><td>Clear, concise email subject reflecting email content.</td></tr><tr><td><strong>Mail Pre-header</strong></td><td>Optional preview text shown after the subject line (min 40 characters recommended).</td></tr><tr><td><strong>Reply Email</strong></td><td>Optional reply-to address if you want recipients to reply directly. Leave blank to disable.</td></tr></tbody></table>

{% hint style="warning" %}

#### Important Notes on Email Type and Opt-Outs

* **Notification emails** bypass opt-in preferences and send to all users; intended for essential info.
* **Campaign emails** respect opt-in status, sending only to users who have not unsubscribed.
  {% endhint %}

## Netmera Email Editor

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FJtVz546eowCs6CTUpM8J%2Fimage.png?alt=media&#x26;token=ec0ce297-0bf2-44a8-acd7-bd9d13e78f9b" alt=""><figcaption></figcaption></figure>

### Structures & Modules

Predefined layouts organizing content (e.g., one-column, two-column). Easily dragged into the template workspace. You can customize borders (size, color, rounded edges) individually or collectively.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FCD4F3BsJdolFKO4lUVbf%2Fimage.png?alt=media&#x26;token=38996323-edbd-422a-9323-c190138b0e51" alt="" width="563"><figcaption></figcaption></figure>

### Blocks (Icon Toolbar)

On the left side of the editor, the icon-based toolbar (highlighted in green) provides access to all available content blocks. Blocks are drag-and-drop elements used inside predefined layouts to build email content. Customizable properties include font, alignment, colors, padding, and size.

<table><thead><tr><th width="118.27545166015625">Block Type</th><th width="165.36749267578125" valign="middle">Description</th><th width="206.1876220703125" valign="top">Key Features</th><th width="154.3802490234375">Customization Options</th><th>Use Cases</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td valign="middle">Adds an image (or GIF) to your email.</td><td valign="top"><ul><li>Upload from your library or use a URL</li><li>Optional link on click</li><li>Responsive sizing inside the layout</li></ul></td><td><ul><li>Size and alignment</li><li>Padding and background</li><li>Border and corner radius</li></ul></td><td>Logos, hero images, product shots</td></tr><tr><td><strong>Text</strong></td><td valign="middle">Adds formatted text content.</td><td valign="top"><ul><li>Headings, paragraphs, lists</li><li>Links</li></ul></td><td><ul><li>Font, size, color</li><li>Alignment and line spacing</li><li>Padding</li></ul></td><td>Body copy, disclaimers, announcements</td></tr><tr><td><strong>Button</strong></td><td valign="middle">Adds a call-to-action (CTA) button.</td><td valign="top"><ul><li>Custom label + link</li><li>Works across all email clients</li></ul></td><td><ul><li>Button + text colors</li><li>Border and corner radius</li><li>Alignment and padding</li></ul></td><td>Shop now, reset password, confirm email</td></tr><tr><td><strong>Spacer</strong></td><td valign="middle">Adds vertical spacing between blocks.</td><td valign="top"><ul><li>Fixed-height whitespace</li></ul></td><td><ul><li>Height</li><li>Background (optional)</li></ul></td><td>Separate sections and improve readability</td></tr><tr><td><strong>Social</strong></td><td valign="middle">Adds social media icons with profile links.</td><td valign="top"><ul><li>Common networks (e.g., Instagram, X, LinkedIn)</li><li>Click-through links</li></ul></td><td><ul><li>Icon style and size</li><li>Spacing and alignment</li></ul></td><td>Footer social links</td></tr><tr><td><strong>Menu</strong></td><td valign="middle">Adds navigation links similar to website headers.</td><td valign="top"><ul><li>Multiple links</li><li>Horizontal or vertical layout</li><li>Optional separators</li></ul></td><td><ul><li>Font and color</li><li>Alignment</li><li>Padding and spacing</li></ul></td><td>Navigation for newsletters and multi-section emails</td></tr><tr><td><strong>HTML</strong></td><td valign="middle">Inserts custom HTML/CSS.</td><td valign="top"><ul><li>Full control for advanced layouts</li><li>Email client support may vary</li></ul></td><td>HTML/CSS</td><td>Custom components, bespoke layouts</td></tr><tr><td><strong>Banner</strong></td><td valign="middle">Highlights a promotion with a prominent visual.</td><td valign="top"><ul><li>Image + optional title/caption</li><li>Optional link on click</li></ul></td><td><ul><li>Spacing and alignment</li><li>Background</li></ul></td><td>Promotions, featured announcements</td></tr><tr><td><strong>Video</strong></td><td valign="middle">Adds a video preview that links to a video URL.</td><td valign="top"><ul><li>Thumbnail + play indicator</li><li>Opens the video externally when clicked</li></ul></td><td><ul><li>Video URL</li><li>Thumbnail image</li><li>Alignment and padding</li></ul></td><td>Product demos, webinar invitations</td></tr><tr><td><strong>Timer</strong></td><td valign="middle">Adds a countdown timer to a target date/time.</td><td valign="top"><ul><li>Counts down to a specific date/time</li><li>Can hide or replace after expiry</li></ul></td><td><ul><li>Font and colors</li><li>Background and border</li><li>Time unit display</li></ul></td><td>Flash sales, limited-time offers</td></tr><tr><td><strong>Carousel</strong></td><td valign="middle">Shows multiple images/items in a slider.</td><td valign="top"><ul><li>Multiple images with links</li><li>Auto-play or manual controls</li></ul></td><td><ul><li>Transition and indicators</li><li>Background/border styling</li></ul></td><td>Product galleries, highlights, testimonials</td></tr><tr><td><strong>Accordion</strong></td><td valign="middle">Expandable sections for long content (AMP-only).</td><td valign="top"><ul><li>Multiple sections (header + body)</li><li>Expand/collapse interaction in AMP-supported clients</li></ul></td><td><ul><li>Header/body styles</li><li>Borders and spacing</li></ul></td><td>FAQs, long-form content without scrolling</td></tr><tr><td><strong>Form</strong></td><td valign="middle">Collects input inside the email (AMP-only).</td><td valign="top"><ul><li>Input fields + submit button</li><li>Requires external handling/endpoint</li></ul></td><td><ul><li>Required fields and placeholders</li><li>Label/field styling</li><li>Spacing</li></ul></td><td>Surveys, RSVPs, quick lead capture</td></tr></tbody></table>

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FzNXubJSa8YS38dT6F6rs%2Fimage.png?alt=media&#x26;token=5c4f9163-c798-4132-bccb-39744f6619e8" alt=""><figcaption></figcaption></figure>

#### Content Blocks

Used to display static or custom content within the email.

* **Image** – Upload and edit images and GIFs.
* **Text** – Add text, headings, merge styles and lists.
* **Banner** – Image and text combinations for highlighted sections
* **HTML** – Add element with custom HTML/CSS for advanced layouts

<div><figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FGBQQguHE2e4vdOzS0c0f%2Fimage.png?alt=media&#x26;token=a0f78e4d-270a-4a4b-bfe2-c0a5da938ada" alt=""><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FFZzXdHMj03vjKxAzEJ7W%2Fimage.png?alt=media&#x26;token=89c2ff4a-ee56-4d06-a446-5319623fd2ad" alt=""><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FybE6sJehBeFp13iYJWyM%2Fimage.png?alt=media&#x26;token=7b8d63d6-fc53-43c1-91d9-a7d3ce8365dc" alt=""><figcaption></figcaption></figure></div>

#### Action & Engagement Blocks

Designed to encourage interaction directly from the email.

* **Button** – Call-to-action elements
* **Form** – Collect user input (surveys, RSVPs, contact forms; handled externally)
* **Accordion** – Expandable sections for structured content

{% hint style="warning" %}
**Note**: Accordion and Form blocks are AMP-based components. They are supported only in the AMP HTML version of the email. If the recipient’s email client does not support AMP:

* Accordion content **will not** be interactive
* Form submissions **will not** work inside the email Form submissions always require external handling.
  {% endhint %}

<div><figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2F5qXn7xPVaboTaMk3E5kt%2Fimage.png?alt=media&#x26;token=50e124a9-0ac3-4561-8641-5e743e4b3ffa" alt=""><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FovFjN8nzFHDnZYuGc4po%2Fimage.png?alt=media&#x26;token=7ca299af-a98a-4bee-8baa-3a03a8620124" alt=""><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FJNNTobbi2xhyMsUdHqJa%2Fimage.png?alt=media&#x26;token=4de6a73a-210d-41f7-84ea-96fafaecdee0" alt=""><figcaption></figcaption></figure></div>

#### Layout & Structure Blocks

Used to control spacing and navigation.

* **Spacer** – Add vertical spacing
* **Menu** – Display navigation links

<div><figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FbGBqP4fLGztI3nzI7j8O%2Fimage.png?alt=media&#x26;token=9d094e95-2308-4020-9dff-7efee1db3141" alt=""><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FDJlAp4gyFG6wEZXYVUN7%2Fimage.png?alt=media&#x26;token=d46d7eca-d242-4294-9093-c4f2a05d0dad" alt=""><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2F8T6rMVuhzofHvHVSiDDH%2Fimage.png?alt=media&#x26;token=4e7dc1ce-b23a-46df-ab80-08e50e2726ef" alt=""><figcaption></figcaption></figure></div>

#### Dynamic / Media Blocks

Used to add dynamic or time-based content.

* **Carousel** – Rotating images or content
* **Timer** – Countdown timers
* **Video** – Video previews or thumbnails

<div><figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FC0ClnKm7tGRPeQhGdzgE%2Fimage.png?alt=media&#x26;token=a2ba0376-358c-4b55-9cf0-cd96d269136f" alt=""><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FWmJwMPUItVcVNo9r6QGl%2Fimage.png?alt=media&#x26;token=1b861a22-2d43-41fa-b950-c9a3e1f9eba8" alt=""><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2F708Mi4crEwTL781VesQB%2Fimage.png?alt=media&#x26;token=14129153-0130-4683-bedb-20b337049150" alt=""><figcaption></figcaption></figure></div>

#### Social & Utility Blocks

Supporting elements commonly used in emails.

* **Social** – Social media icons and profile links

<div><figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FK15sj2y9H9pybML99e6Y%2Fimage.png?alt=media&#x26;token=320ac23c-d62e-4c73-8388-b40b7c1173e5" alt=""><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2F5dloeP9A1s76K5SGTLW5%2Fimage.png?alt=media&#x26;token=ee462a0e-6e4f-47b7-8672-d41257f258a3" alt=""><figcaption></figcaption></figure></div>

### Modules

* Save reusable content blocks or full templates for future use
* Search and filter modules by name or tags
* Edit or delete modules as needed

<div><figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FS6g4wpQE9qFOinBY6Tdp%2Fimage.png?alt=media&#x26;token=39af7b64-50f0-4927-9194-567e8e716c20" alt=""><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FglIbkHGPPg4uvCXWexrJ%2Fimage.png?alt=media&#x26;token=2c64fa22-94f0-4672-86f4-5879b929b827" alt=""><figcaption></figcaption></figure></div>

### Visual Configuration

Visual Configuration refers to global style settings available in the **Global Styles & Layout** panel.\
These settings affect the entire email template and remain active regardless of which block is selected.

Typical use cases include:

* Defining a consistent content width
* Controlling spacing and margins across the template
* Applying background colors or background images
* Ensuring the layout adapts correctly on different devices

> These configurations apply globally and are independent of individual content blocks.

<div align="left"><figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FIjDcsFwObIRxnnjxedfc%2Fimage.png?alt=media&#x26;token=a3652cc2-cf90-4767-9ff8-d0a078255c09" alt="" width="301"><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FhMuRU9XZ3nHWKTt7sBYN%2Fimage.png?alt=media&#x26;token=9334a235-a17e-4168-ab8f-3a1d144089c6" alt=""><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FBlREy0zLiz7Jozv1vn60%2Fimage.png?alt=media&#x26;token=dda7c4c9-0431-4a05-9a29-e307cd3e95aa" alt="" width="301"><figcaption></figcaption></figure></div>

### Global Appearance & Layout

The **Global Styles & Layout** panel allows you to configure visual settings that apply to the entire email template. Unlike block-level settings, the options in this panel remain active regardless of which content block is selected.

* **Default Padding** – Control the spacing between content and template edges, either globally or per section.
* **Background Color** – Set a base background color for the entire template.
* **Font and Line Spacing** – Choose font styles and adjust line spacing to improve readability.
* **Paragraph Bottom Space** – Define the spacing between paragraphs.
* **Underline Links** – Toggle link underlining to make links more visible.
* **Responsive Design** – Ensure the layout adapts properly to mobile devices.
* **RTL Text Direction** – Enable right-to-left text flow for supported languages.
* **Background Image** – Upload a PNG, JPG, or GIF (max 1 MB), or use a URL to add a background image.
* **Custom List Styles** – Adjust list indentation, spacing above and below lists, item spacing, list type (bulleted or numbered), and list marker color.

#### Dynamic Behavior

The settings panel updates automatically based on the selected element:

* When no block is selected, global email settings are displayed.
* When a content block is selected (e.g., Button, Image, Form), block-specific settings appear.

The available options change dynamically depending on the current selection.

> The available settings change automatically depending on the selected element.

### Message Settings

The **Message Settings** tab is used to configure email-level properties that are not related to layout or content blocks.

These settings define how the email appears in the recipient’s inbox **before it is opened**.

You can configure the following options:

* **Subject / Title**\
  Defines the email subject line displayed in the inbox.\
  \&#xNAN;*Recommended length: up to 65 characters.*
* **Hidden Preheader**\
  A short preview text shown next to the subject line in inboxes.\
  \&#xNAN;*Recommended length: 50–100 characters.*
* **Email Annotations for Gmail**\
  Allows you to highlight deals, discounts, or offers directly in Gmail’s **Promotions** tab, especially on mobile devices.
* **UTM Parameters**\
  Automatically adds UTM tags to all links in the email to support campaign tracking in tools like Google Analytics.

### Stripes

Stripes are horizontal sections used to structure the template. They help separate content clearly and improve readability.

#### Stripe Sections

* **Header:**\
  Customize the top of your template with options for text size, font color, background color, link color, and background image.
* **Content:**\
  Adjust the main body settings like text size, font color, link color, and content background.

  **Tip:** Use this area to enhance readability with clear fonts and contrasting background colors.
* **Footer:**\
  Design the bottom section with options for background colors, font and link colors, and an optional background image.

  **Tip:** Add contact details and social media links here.
* **Info Area:**\
  A separate section for details like dates, times, or links to external actions (e.g., registration or ticket purchase).

  **Tip:** Ideal for highlighting event-related information.

### Headings

Customize the appearance of headings across your template:

* Set font type and size
* Adjust line spacing and color
* Apply italic or bold styling

### Button

Control how buttons look in your template:

* Set button and font colors
* Choose font size and style (italic/bold)
* Adjust border size, color, and corner radius

{% hint style="info" %}
**Support for Outlook**

This option improves button rendering in Microsoft Outlook email clients.\
When enabled, buttons are rendered using Outlook-compatible markup to ensure consistent appearance across different Outlook versions.

> Note: Enabling this option may slightly increase the email size for each button.
> {% endhint %}

<div><figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FqYt8hs5dJ8IhFouyLtAz%2Fimage.png?alt=media&#x26;token=7dd79653-1e68-4da6-8d4e-2adca2387b5f" alt="" width="202"><figcaption></figcaption></figure> <figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FzbWrmsMQ2ia07VpEuHFa%2Fimage.png?alt=media&#x26;token=42bdc541-f5d8-49c9-9833-f1c7f2f2ca3d" alt="" width="225"><figcaption></figcaption></figure></div>

You can switch between Desktop and Mobile views to configure layout and appearance settings separately for each device.

### Preview & Testing

<div align="center" data-full-width="false"><figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FJEFU0VRMeF63rPS6NoS8%2Fimage.png?alt=media&#x26;token=d08ceea9-0205-408f-8980-793b822ef6a2" alt="" width="375"><figcaption></figcaption></figure></div>

Before sending an email campaign, it is recommended to preview and test the template across different devices and email clients to ensure consistent rendering.

The editor allows you to switch between **Desktop** and **Mobile** views to simulate how the email layout adapts to different screen sizes.\
This helps verify responsive behavior such as:

* Content stacking on mobile
* Image and button alignment
* Text readability on smaller screens

#### Using the Email Editor in Expanded View

You can use the **Expand** button to open the editor in a larger view for easier editing and previewing.

This view provides a wider workspace, which makes it easier to work with email content, especially on smaller screens.

To return to the default editor view, click **Collapse**.

#### How It Works

1. Open the **Stripo Editor**.
2. Click **Expand** to open the editor in expanded view.
3. Edit and preview your email template in the larger workspace.
4. Click **Collapse** to return to the default view.

{% hint style="success" %}
You can use the external preview option to view the email as it would appear in real email clients.\
This is useful for identifying layout differences caused by email client limitations.
{% endhint %}