Create Emails in the Email Editor

Friendly Automate has a built-in drag-and-drop email builder that makes it easy for you with its graphical interface to create responsive and attractive emails.

In this tutorial you will learn to:

• understand the structure of a visual email
• create a simple email with text, images, buttons and links
• refine your email with tokens, spacing and other settings

To create an email using the Email Builder, in Friendly Automate click on "Channels" on the menu on the left, then "Emails", then "New" on the top right:

Now you have the choice between a "Template Email" and a "Segment Email". In most cases you will choose the template email. With this option, you create an email that you can send later as part of a campaign.

You will now be shown a number of email themes to choose from. For a new empty email use the theme "Hello". (We recommend not to use the "Code Mode" or "Blank" themes as they are not responsive).

In the right column, enter a subject and an internal name for the email and set the language. Then click on "Builder" at the top.

This will take you to the Email Builder. On the right you will see different sections and blocks that you can drag and drop into your email.

1. Understand the structure of an email

To understand how you can use, combine, and edit these elements, let's first look at the basic structure of an email in MJML.

The basic structure of an MJML email consists of sections and columns.

So the sections are the outermost structure of the email.

Each section will contain at least one column. A maximum of three columns is recommended. The columns organize the vertical structure within the sections.

The columns hold one or more blocks. Blocks are always located within a column and are always arranged one below the other. Blocks are, for example: a text field, an image, a button, a social group, or a divider.

With this, you can start composing your first email.

2. Create an email

Now you will learn step by step how to build an email with the Email Builder. It is necessary to always create a section with one or more columns before you insert the actual content (the blocks).

Sections and columns

In the Email Builder, in the upper right corner you will find the sections that already contain one, two or three columns. Below you will find the blocks.

So first drag a section with one, two or three columns into your email.

To adjust the column width, first select the column using the blue frame. You have two options for this:

Either you move the cursor over the field until "column" is displayed, and then click to select the column.

Or you can click on the text box and then on the blue arrow to go up one level.

You access the formatting options by clicking on the brush in the upper right corner. The settings for the column width can be found under "Dimension". There you can specify the column width in pixels or in percent.

Text fields

Each column automatically contains a text field. By double-clicking on the text field you can edit the text:

Click on the brush icon in the upper right corner and then on "Typography" to format the text.

You can return to the block selection by clicking on the icon with the four blocks in the upper right corner:

Images

To insert an image, drag an "Image" block into an existing section:

Double-click on the image placeholder. A dialog will open. Double-click on the top bar to upload a new image, or select an image below that you have already uploaded:

To edit the image attributes, click again on the brush in the upper right corner. There you can change the image size or the background color.

Buttons

Add a button by dragging the "Button" block into an existing section.

By double-clicking on the button you can edit the text of the button.

Now you can again use the brush in the upper right corner to configure settings such as the link the button refers to, the size and color of the button, and the font.

Links

Links are not blocks. Instead, you can turn any plain text into a link. First write the text you want to turn into a link.

Select the text and click on the link icon in the context menu:

Then enter the link in the "URL" field:

If you want to customize the link color, switch to the "Advanced" tab. In the "Style" field you can enter the code "color: #083172". Replace the number with any hexadecimal number (find HTML color codes here).

Click OK to insert the link. You have created a link.

Social Elements

To add social media links to your email, drag a "Social Group" into an existing section:

If you need additional elements, drag a "Social Element" into the Social Group:

Select a social element and click on the brush in the upper right corner to customize the element. You can choose from a variety of social media and enter the link.

3. Refine your email with more elements and settings

Tokens

You can use contact-specific text by using tokens. To insert a token, place the cursor where you want to display contact-specific text.

Then click the token icon in the context menu:

From the drop-down menu, select the contact field you want to read:

In this way, for example, the first name of the respective contact is automatically entered when the email is sent.

Webview and unsubscribe text

You can also use tokens to insert a standardized webview and unsubscribe text.

Again, place the cursor at the relevant position, click the token icon in the context menu and select "web view text" or "unsubscribe text":

This is what the token for the webview text looks like in the Email Builder:

This is how the token may look in the sent email:

This is what the token for the unsubscribe text looks like in the Email Builder:

This is how the token may look in the sent email:

You can configure which text is displayed for the webview and unsubscribe token. To do this, click on the gear wheel in the top right corner of Friendly Automate and then on "Configuration":

Then click on "Email settings":

Scroll down until you find "Message settings" and "Unsubscribe settings". There you can customize the webview and unsubscribe texts.

Spacing

You can define spacing on the block layer and on the section layer. First select the layer for which you want to set the spacing.

Then click on the brush in the upper right corner. Under "Dimension" you can define the top, bottom, left and right padding:

Duplicate, move and delete elements

You can duplicate, move and delete sections, columns and blocks.

Duplicating and moving is especially useful for text fields: Since you need to format each text field individually, it can make sense to create a single text field first and finish the formatting. Then you can duplicate and move this text field. This way you keep the formatting.

Duplicate the element:

Move the element:

In the same way you can duplicate or move columns or sections. Make sure that you always select the correct layer.

In the blue selection box you can delete the element by clicking on the trash can.

Preview options

Preview your email to see how it will be displayed responsively on a desktop device, tablet or smartphone. To do this, click the icons in the upper left corner of the Email Builder:

Code mode

Last but not least: In your emails you can use all elements and attributes that are possible in MJML. In order not to overload the Email Builder, not all settings are possible on the graphical interface. However, you can always go into the code mode to make further adjustments there.

To learn more, visit our tutorial:

With this, you know everything you need to successfully create emails in Friendly Automate!