Email content, styling, and personalization

When creating an email from scratch, or editing a prebuilt template, there are lots of parts that can be added, removed, or edited.

In this article:

Email Content

Personalisation

Styling

Global Styling

Email Content

Subject Line

You must include a subject line when building your email.

The subject line is arguably the most important part of your email. It needs to grab the attention of the recipient in a potentially crowded inbox, and encourage them to open your email, so make sure the phrase or sentence you use is enticing, honest, and gives them an idea of the content or purpose of your email.

You can enter a subject line by selecting subject line text field at the top of your email editor and entering your copy. You can include emojis and variables too.

Preview Text

Preview text is an optional but highly recommended element of your email, displayed by most email clients just next to the subject line. If you do not specify a preview text, email clients typically default to showing the first line of your email content, which may not be the most engaging or informative snippet. By adding customized preview text, you can provide additional context to your subject line, further enticing the recipient to open your email. You will find the preview text field located just below the subject line field in your email editor.

Template Elements

Content Elements

In the email editor, content elements are blank, customisable sections that you can drag-and-drop into your email.

Content blocks make it easy to create beautiful emails without needing to use any code.

Let's take a look at the content elements you can use:

Text

With a Text, you can:

Add text to your email.
Customize text font.
Customize text color.
Personalize your text with variables.

Image

With an Image, you can:

Upload images to your email.
Add alt text.
Hyperlink your images.
Adjust image dimensions.

Button

With a Button, you can:

Add inteactive elements and CTAs to your email.
Customize button font.
Customize button size and padding.
Hyperlink your buttons.

HTML Code

With an HTML Code, you can:

Add custom HTML code to your email.
Customize your email with advanced design elements or specific formatting that isn't available with our default content blocks.

Divider

With a Divider, you can:

Visually separate sections in your email with a customizable horizontal line.

Spacer

With an Spacer, you can:

Visually separate sections in your email with negative space for improved readability.
Use the default spacer height of 20, or adjust it to a new height.

Table

With a Table you can:

Organise content using rows and columns

Rating

With a Rating, you can:

Add an easy way to ask for rating to your emails.
Link to a form to collect feedback. Users will be shown this form after submitting their rating.

Product

With a Product element, you can:

Select products from your catalog to showcase in your email.
Showcase dynamic products using a product feed.

Layout Elements

To create visually appealing and well-structured emails, you can use various layout elements such as full width, two columns, and three columns.

Full Width: Utilize the full width layout to span content across the entire width of the email. This is ideal for showcasing large images or highlighting important announcements.

Two Columns: The two-column layout is perfect for dividing content into two equal sections. You can use this layout to compare features, display side-by-side images, or present paired information clearly.

Three Columns: For more complex designs, the three-column layout offers a balanced way to present multiple pieces of content simultaneously. This can be useful for categorizing products, listing benefits, or organizing detailed information efficiently.

You can also experiment with other layout elements such as a Four Columns layout for showcasing multiple items, or a Two Columns (Custom Widths) layout to give different percentages of space to the left and right columns. These variations can help you create more interesting and brand-specific emails.

To add these layout elements to your email, drag the desired layout element from the editor's sidebar into your email design. Once added, you can populate the columns with text, images, or other elements.

Prebuilt Blocks

Prebuilt blocks are predesigned sections that you can drag-and-drop into your email, simplifying the creation process.

They come ready-made with text, images, buttons, and other customizable content elements.

Let's take a look at the prebuilt blocks you can use:

Hero

The hero block is designed to grab the email recipient's attention. It's typically used for drawing attention to a key message or offer.

Image + image

This block allows you to display two images side by side within the email. It's useful for showcasing two products, services, or images that complement each other.

Image + text

This block allows you to display a single image with accompanying text.

Gallery

This block allows you to display multiple images in a single group.

Reusable Blocks

You can save any content block in your email as a reusable block.

Reusable blocks are a great way to maintain style and branding consistency over multiple emails. By saving a styled block as a reusable block, you and your team can use it again in future emails.

To save a content block as a usable block, follow these steps:

Hover over the block to bring up the block menu.
Click the star icon (⭐), which you'll find next to the 'delete' and 'duplicate' icons. This will save the block as a reusable block.

To find and use a saved reusable block, follow these steps:

From the email builder panel on the right-hand side of your screen, under 'Blocks' > 'Your blocks', find the reusable block you want to add to your email.
Drag and drop the block into your email.

Reusable blocks can be edited once you've dragged and dropped them into your email.

Any changes you make to a reusable block will not be made globally. To save your changes, you'll need to save the edited block as a new reusable block.

Managing content in the editor

Elements can be deleted by selecting an element and clicking the delete icon.
Elements can be duplicated by selecting an element and clicking the duplicate icon.
Elements can be moved by clicking the element and dragging and dropping it within your design.
Some elements can be saved as reusable blocks by selecting an element and clicking the star icon.

Personalisation

Predefined Variables

When you add predefined variables into your messages, they are dynamically replaced with the corresponding values at the moment the message is dispatched. This functionality ensures that your messages are both personalized and accurate, reflecting the latest data or configuration each time.

To add a predefined variable, click the { } icon in any text field, open the variable picker, and select from the organized list of variables.

Currently, we support the following predefined variables, under this sections:

Contact

Contact variables offer an effective way to tailor content to the individual characteristics of your contacts. For instance, instead of using a general greeting like "Hey there!", you can make your communication more personal by using the recipient's name, resulting in a greeting such as "Hey Alex!". This approach not only grabs attention but also enhances engagement by making your message feel more relevant and personalized. Contact variables enable the use of any customer attributes, meaning the dropdown options will be determined by your customer data.

Organization

Organization variables allow you to incorporate details about your business entities within your communications. This includes attributes such as the organization name, address, and other key information. Using these variables, you can dynamically insert relevant organizational data, making your messages more professional and contextually appropriate.

Date

Date variables let you include dynamic date information in your content. This can be helpful for referencing the current date, setting deadlines, or scheduling events. By using these variables, you ensure that the dates in your communications are always accurate and up-to-date.

Links

Links variables facilitate the inclusion of dynamic URLs within your content. Use this section to include an "Unsubscribe" link to your emails.

Email variables enable the insertion of the customer email address dynamically. This is especially useful for automated responses or confirmations.

Discounts

Discount variables allow you to dynamically insert discount codes. This is particularly useful in marketing communications, where personalized discount offers can enhance the effectiveness of your campaigns.

ℹ️ Before using discount variables, make sure you have generated a discount code.

Verify

Verify variables provide OTP codes. These are useful in communications requiring secure and verified actions.

Predefined variables are powered by our Liquid templating engine, for more information on this, please read the Advance Templating section.

Custom Variables

In the email editor, custom variables are placeholders that dynamically populate with the relevant information when an email is sent. Unlike Predefined Variables, Custom Cariables need to be manually assigned to specific data before sending the email, as they are not linked to any preset customer attribute or data

Use custom variables to personalize your email with details that may not be available through predefined variables. They can be quite useful for transactional emails, things like:

Order Tracking Number
Support Ticket ID

To add a custom variable to a text block, click on the "Custom Variables" button in the top navigation bar. After creating your variable, click on the { } icon in any text input to display the variable picker, then choose your variable under "Custom Variables." You can manage these variables at any time. Additionally, you can include variables in the subject line.

Global Styling

Global styling helps your emails to stay visually consistent. It establishes rules for formatting, colors, fonts, and other design aspects.

Let's take a look at what global styling settings are available:

Global background color

Set a consistent background color for your emails.

Global content body

Set a default text style, font, font size, and color for the main body content of your emails.

Global links

Set default styles for hyperlinks, including colors, underlining, and hover effects.

Global buttons

Set a default styles for buttons, including style, color, size, and behavior.

Last updated 3 months ago