Create Campaigns Using the Email Editor

Introduction

The Email Editor allows you to easily design, customize, and launch email campaigns without any coding. Using a simple drag-and-drop interface, you can create professional emails, add dynamic content, and personalize messages to engage your customers effectively. This guide will walk you through the steps to create and manage email campaigns using the Email Editor, helping you deliver the right message at the right time.

Here are the steps to use the new Email editor:

Step 1: Go to Email marketing > Templates

Step 2: Click on Create from scratch button.

Note: You can also select from pre-designed templates.

Step 3: You can drag and drop different blocks into your email:

Text
Images
Buttons
Dividers
Social icons
Product blocks (if applicable)

Click on any block to edit:

Text content and formatting
Font size, color, and alignment
Button text, links, and styles
Image uploads and image links

4(a). The General Settings area allows you to modify:

Adjust padding and spacing
Change background colors
Modify border styles
Enable or disable specific blocks
Right-to-left (RTL) text direction
Font, link, spaces, background image

4(b). Stripes allows you to edit:

Text size
Background color
Content background color
Font color
Link color
Background image

4(c). Headings regulate the settings for spacing, fonts, and color options for the H1, H2, and H3 headings.

4(d). The button tab can help you modify:

Support of Outlook: When enabled, this option ensures that buttons display correctly in Microsoft Outlook emails. AiTrillion adds a special VML (Vector Markup Language) element behind the scenes, improving compatibility with Outlook’s rendering engine.
Button Color: Defines the background color of the button.
Highlight Hovered Buttons: When enabled, the button changes appearance when a user hovers over it (supported email clients only).
Font Color: Controls the text color displayed inside the button.
Text Style: Customize how the button text appears: Font family (e.g., Arial), Font size, Bold (B) or Italic (I) formatting. These settings help match your brand style.
Border Radius: Adjusts the roundness of the button corners.
Border: Enable this option to add a border around the button. Click More to customize individual sides.
Internal Padding: Controls the spacing inside the button, between the text and the button edges.

4(e). The mobile formatting options are certain settings that would be made for the mobile-specific version of the email only. This means that all settings that you make here would apply if and only if the email is being read on a mobile device.

Size of Header Text: Defines the font size of the header text displayed on mobile devices.
Size of the Content Text: Controls the font size of the main body content in the email for mobile users. Proper sizing improves readability and reduces the need for zooming.
Size of Footer Text: Sets the font size for footer content such as disclaimers, unsubscribe links, or contact information on mobile.
Size of Info Area Text: Adjusts the font size for informational sections, such as notices or highlighted information blocks in the email.
“Menu” Items Font Size: Controls the font size of menu or navigation items when viewed on mobile devices.
Heading H1: Sets the font size and alignment for H1 headings on mobile. Used for primary titles or main headings. Alignment options allow left, center, or right alignment.
Heading H2: Controls the font size and alignment of H2 headings. Suitable for section titles or subheadings.
Heading H3: Defines the font size and alignment of H3 headings. Ideal for smaller sub-sections within content.
Button Text Size: Adjusts the font size of button text on mobile devices. Larger button text improves accessibility and clickability on touch screens.
Full-Width Buttons: When enabled, buttons expand to full width on mobile screens, making them easier to tap.
Content Margin: Allows you to control the outer spacing of content on mobile. Adjust margins to prevent content from feeling cramped. Helps maintain a clean and balanced layout.

Step 5: The content area of the navigation and settings of the editor in AiTrillion allows you to make settings for the email layout, blocks, and to save sections.

5(a). The layouts area of the content tab allows you to take a tabular layout for your email. Each section in this can house a different block from the block section. To use a layout, simply drag and drop it in the email construction area.

5(b). Dragging and dropping a block from the content area allows you to begin constructing your email.

Once in place, click on the block in the email construction area to configure the settings for the block

The three dots on either side allow you to move the block, delete it, or save it as a reusable section for all future emails.

The Text Editor toolbar allows you to format and customize text content within your email. These options help you control the appearance, structure, and personalization of text blocks.

Format: Allows you to change the text type: Paragraph, Heading levels (H1, H2, H3, etc.), and Preformatted text. Use headings to structure your content and improve readability.
Font Family: Select the font style for the selected text (e.g., Arial). Choose a font that aligns with your brand and is supported across email clients.
Font Size: Adjust the size of the selected text. Larger sizes are suitable for headings, while smaller sizes work best for body text.
Bold (B): Makes the selected text bold to emphasize important information.
Italic (I): Applies italic styling to the selected text.
Underline (U): Underlines the selected text to highlight links or key phrases.
Strikethrough (S): Draws a line through the selected text, commonly used for displaying discounted prices or removed content.
Text Color: Changes the color of the selected text.
Background Color: Applies a background highlight color behind the selected text.
Text Alignment: Aligns text within the content block: Left, Center, Right, and Justify
Bulleted List: Creates an unordered (bulleted) list for organized content.
Numbered List: Creates an ordered (numbered) list.
Indentation: Increase or decrease text indentation to improve content structure.
Insert Link: Adds a hyperlink to the selected text. You can link to: A webpage, an email address, and a phone number
Personalization: Insert dynamic personalization tags such as: Customer name, Email address, Order details, Store-specific variables This helps deliver personalized email content.
Emoji: Insert emojis to make your content more engaging and visually appealing.
More Options: Allows you to insert table or add special chracter.

5(c). Any sections saved for later can be found in the saved sections area. These saved sections can be used repeatedly over and over again. e.g. A quote like "Thank you for shopping with us" in the footer of all your emails.

5(d). We also have custom fonts like Century Gothic. Not all email clients support custom fonts.

In general, custom fonts work in the:

iOS Mail, Apple Mail, Android (default mail client, not Gmail app), Outlook 2000, Outlook.com app, Thunderbird

Outlook limitations: It's important to mention that Outlook 2007/2010/2013/2016/2019 is incompatible with any custom or web fonts. It only supports traditional web-safe fonts. Sometimes other fonts may display if they are physically installed on the computer.

Gmail limitation: Gmail does not support Web fonts, even including Google fonts. While Gmail supports the next web fonts - Google Sans and Roboto.

Step 6: The top bar of this editor has the undo, redo, code editor, and Mobile or Desktop preview options.