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.
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.
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
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
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
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
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
Click the eye icon in the sidebar to hide a section from the email template
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.
Use a text block to add text to your email.
Use an image block to add an image to your email.
Spacer blocks add a customizable amount of space between vertically stacked blocks. For the horizontally stacked columns, use left-right padding.
Divider blocks add a blank or visible divider line between columns. Divider signifies a break in your content.
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.
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
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 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.
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.
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
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
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
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
Thank you!