Articles on: Notifications

Guide to the New Easy Email Template Editor

Plans: Enterprise Platforms: All platforms For optimal editor performance, use the Chrome browser. The editor may not function as expected in other browsers.

Overview

Learn about AfterShip’s new easy email editor that allows you to customize your email notifications more flexibly. The new email editor is packed with diverse layering, style, and formatting options to help you build highly personalized and aesthetically appealing email notifications tailored to your brand style. The new editor is easy-to-use with a straightforward process to help you build the most engaging emails.

📢What you’ll learn

In this tutorial, we will show you:

Access to the easy email editor
Elements and layouts
Layers and layer styles
Sections and section styles
Blocks and block styles
Unsubscribe
How the easy email editor works

Access to the easy email editor

Go to Notifications > Flows in AfterShip Tracking admin
Choose the email workflow you want to customize the email template for
Click the email actions in flow
By default, the editor you currently use for the notification will open. At the top, click the two opposite-facing arrows icon to expand the dropdown and select Easy email editor
Click Switch to transfer the saved content of the email to the new editor

The new Easy email editor will open

Elements and layouts

When you open the AfterShip Tracking Easy email editor, the sidebar will display three options — Layer, Elements, and Layout. Elements and Layout offer you a selection of block and section options to choose from.

Choose between default sections, which are blank canvases to customize the layout of the email, or build one from scratch

Choose from pre-built and basic blocks to customize the content of the email

Use Elements (i.e., blocks) to add text, images, dividers, and buttons. Use Layout (i.e., sections and columns) to group your blocks and position them within the template

Blocks and sections can be cloned, deleted, or exited using the icons that appear when you hover over the block or section

To remove or reposition, drag-and-drop sections using the below icon

To move or reposition, drag-and-drop the blocks using the below icon

Layer and layer styles

The main page, on which the entire layout is designed, has separate attributes page to configure the email delivery and overall style settings.

To access the main page’s attribute settings, click the gray area outside the white layout.

Note: The main page style settings will be applied to your entire template and overrule the section and block-specific settings.

A Page attributes sidebar with the following settings will appear

Email settings
Subject line: The first-single text subscribers see when they receive an email
Sub-title: The second-single text below the subject line
Width: The width of your email content (600px recommended)
Breakpoint: The range after which the layout auto-adjusts to suit the screen size and orientation (480px recommended)

Theme settings
Font family: Select a font style for the email text
Font size: Select the email font size
Text color: Select the email text color
Line height: Add vertical distance between two lines
Background color: Select a color for the page background (does not cover email content background)
Content background color: Select a backdrop color for the email content. This color is different from the page color and spans only the width of the email content
Style: Apply unique styling and formatting to specific elements with CSS

Import font
Name: Name of the font
Href: Input the URL of the font

Sections and section styles

Under Layout, you get different section styles with specific columns to build a new email template or customize the existing one. All content in the new easy email editor is organized and segregated into sections. What section to choose depends entirely on what information you want to display where.

When you switch from the Drag-and-drop email or HTML editor, all the content will be auto-organized into sections.

You can add or delete sections as required

To open a section’s attribute settings, click anywhere to the right or left of that section. A sidebar on the right will open with the Section attributes settings.

Note: Clicking on the block will open that block’s attribute settings, not the section containing it.

Each section’s attribute settings contain the following settings

Dimension
Padding: Add space between your content blocks and the edge of a section area

Background
Background image: Add a background image to a specific template section. This image spans the width and height of that section (Supports .jpg, jpeg, png, and gif)
Background color: Select a color for a specific template section. This also spans the width and height of that section
Repeat background: Select a saved or previously used background image for the template section
Background size: By default, this will be configured to auto, meaning the background image will auto-adjust to suit the screen size and orientation

Border
Border: Set a solid, dashed, or dotted border surrounding the section area
Border radius: Set the widget of the border surrounding the section

Extra
Class name: Apply unique styling and formatting to specific elements with CSS

Click the eye icon in the sidebar to hide a section from the email template

Blocks and block styles

Blocks are configured within sections to populate your email with content. Each section comes with different column styles. Replacing these columns, are elements (blocks) like text, images, and buttons to configure the structure of your email.

In AfterShip Tracking Easy email editor, you get multiple block styles with the following attributes (appearance) settings.

Text

Use a text block to add text to your email.

Dimension
Height: The height of the text box
Padding: Add space between text and the edge of the block area

Color
Color: Select the color of the text
Background: Select the color of the text background

Typography
Font family: Select a text font style text
Font size: Select the text font size
Line height: Add vertical distance between two lines of text
Letter spacing: Horizontal spacing between text characters
Text decoration: Set the appearance of decorative lines like underline, overline, and blink on text
Font weight: Set the boldness of the font as per need
Align: Choose left, center, or right-aligned
Font style: Set the font's appearance to normal or italic

Extra

Class name: Apply unique styling and formatting to specific elements with CSS

Image

Use an image block to add an image to your email.

Setting
Upload: Upload a JPEG, JPG, PNG, or GIF from your device
Background color: Add a background color to the image. The color will only appear in places where the picture hasn’t covered the block area

Dimension
Width: Set the width of the image
Height: Set the height of the image
Padding: Add space between the image and the edge of the block area
Align: Choose left, center, or right-aligned

Link
Href: Specify the URL of the specific source the image is linked to
Target: Set whether to open the linked URL in a new window or the same window

Border
Border: Set a solid, dashed, or dotted border surrounding the image
Border radius: Set the width of the border surrounding the image

Extra
Class name: Apply unique styling and formatting to specific elements with CSS

Spacer

Spacer blocks add a customizable amount of space between vertically stacked blocks. For the horizontally stacked columns, use left-right padding.

Dimension
Height: Set the height of the spacer to add whitespace between two blocks or between the block and the edge of the section area
Padding: Use right and left padding to add space between horizontally stacked columns. Use top and button padding to add space between vertically stacked blocks (e.g., in a column)
Background color: Give the spacer a background color

Divider

Divider blocks add a blank or visible divider line between columns. Divider signifies a break in your content.

Dimension
Width: Set the length of the divider from left to right
Align: Choose left, center, or right-aligned
Padding: Customise the space between the divider and the edge of the block area

Border
Width: Set the width of the border surrounding the divider
Style: Set a solid, dashed, ridge, or dotted border surrounding the divider

Background
Background: Choose the background color of the divider block

Extra
Class name: Apply unique divider styling and formatting to specific elements with CSS

Button

Button blocks create significant call-to-action links, which are more distinguished than regular text links. These are great for highlighting essential CTAs in emails and, therefore, must be used scarcely.

Setting
Text: Add text to the CTA button
Href: Specify the URL of the specific source the button is linked to
Target: Set whether to open the linked URL in a new window or the same window

Adjust the button’s appearance, shape, and size using the width, padding, typography, color, and border-radius options.

Navbar block adds a navigation bar and links to your email, redirecting readers to different content on your website.

Layout: Left, center, or right-align navigation bar

Navbar link
Tab: Add tabs to redirect users to different pages on your website
Content: Give each tab a name
Font size and color: Set font size and color for each tab
Link: Add the URL of the specific source the tab is linked to
Padding: Customise the space between the tabs and the edge of the navbar block

Social block adds social media links for your Instagram, Pinterest, Facebook, Twitter, and more to your email.

Customize your social media icons' appearance, size, shape, and redirect URLs using the format, padding, typography, color, and social items options.

Hero

Hero block adds a large full-size image with some text and CTA. It is the most visible part of your email and must contain key information. Hero sections are usually inserted at the top after the navbar to drive customers’ attention when they first open the email.

Customize the hero block’s appearance and size using width, padding, background, and mode settings. While padding, width, and background changes are easy to accomplish, here are two settings we would like to draw your attention to.

Mode
Fluid height: Set the mode to auto-adjust the hero section height in reaction to the scale of the user's screen
Fixed height: Set the mode to keep the hero section height the same as any device that your website visitors are using

Unsubscribe

Unsubscribe block inserts an unsubscribe link directly into your email.

Customize the unsubscribe link's appearance, size, and shape using the text, typography, padding, border, and color settings.

How the easy email editor works

Prepare an email draft for reference

Build the layout of the email using Sections. Drag and drop the Layout components (sections) from the left-hand side to the right-hand side of the email editor.

Insert the corresponding Blocks (elements) into the Layout components (sections)

E.g., If you want to insert an image in one of the columns, drag the image block from the left-hand side to the right-hand side into that column.

Customize the appearance, size, and shape of the blocks you insert under the Attributes settings.

To populate customer and order information from your tracking data to emails, use merge tags as per your email content. Click the {...} icon when you hover over the text block and choose the merge tag from the list.

Save the changes and preview the desktop and mobile versions of the email.

Send a test email to confirm if everything works and looks good.

Reach our support team should you have any questions

Updated on: 29/09/2024