Creating and editing a newsletter (Template Editor)

Template editor makes it easy to create beautiful newsletters that can be used to send all sorts of email campaigns.

Template library

Templates can be chosen from the Template library where you can find many different kinds of templates.

Template library opens by clicking Add new template.

Templates are categorized and you can search for templates from categories. Template can be added by clicking the template image in the library.

Read more about choosing template once you have added the template.

Message editing stage & properties panel

The editor is divided into two main areas: the main message on the left, and the properties panel on the right. 

In general, you will be dragging and dropping content elements onto the stage and then editing their properties. This is true for entire structures (e.g. a single-column row) and individual content blocks (e.g. a text content block). 

When it comes to images, you can drag & drop image files directly from your desktop onto an image content block. You can also upload files from the computer or from files in LianaMailer.

The properties panel is divided into three sections:

• Content
• This is where you will choose and edit the specific content elements that make up your message: buttons, images, text blocks, etc.
• Rows
• Here you can select different structural elements (e.g. a single-column vs. three-column row) to organize your content.
• Settings
• Here is where you will define some overall settings that affect the entire message. For example, a default font family or background color.

Content editing

The Content tab allows you to choose a new content element and add it to your message. Just drag and drop a content element (a button, an image, a text block, a transparent or solid divider, social media sharing, etc.) in the message area on the left.

Content properties

Clicking on a content element inside the message will make the content panel switch to Content properties mode, so you can change the settings of that particular content block.

If you click outside of a content element, instead, the Row in which the content element is located will be selected and its properties will be available (more on this under Rows below).

The Content properties area changes depending on the content element that has been selected. Some properties are available for any content type, while others are specific for certain content types. 

For instance, when Title is selected, you can see Content properties on the right side. You can customize e.g. title, font family and font weight.

Another example is the button block, where you will see a number of tools to help you style the button and link it to your desired action (open a web page, send an email, make a phone call, etc.). You can customize the width of the button by clicking Auto width and align it to left, center or right.

When the properties panel is longer than the height of the screen, a scroll bar appears on the right side. It gives more options to customize the button in this case. Border radius can be edited, you can create a rounded button and with Padding you can add padding to top, bottom, right or left. If some property is not shown, click More options.

Text editing

If you click inside a text content block, the text editor toolbar will appear directly on the editing stage. It gives you access to a number of text editing tools: font family, font size, basic formatting, text alignment, numbered and non-numbered bullets, font color, links, etc.

Note that if you set the font family to Global Font, it will inherit the font family selected under the Settings tab. This allows you to change the font family for multiple elements at once just by changing that property in the Settings tab.

Adding an image

Image can be added to the newsletter using the Image content block. An image can be added to a certain column inside a row or it can have the same width as the content area.

You can drag & drop image files directly from your desktop onto an image content block. You can also upload files from the computer or from files in LianaMailer by clicking Browse or Change image.

On the right side of the screen, you can see properties when the Image content block is selected. When Auto width is deselected, you can change the width of the image. There are other properties as well e.g. align image, add link, and alternative text.

AI Assistant

In the Template editor you can generate new content with the help of AI and add it to your paragraph. Simply type in what kind of content you need, and it'll create the copy text you can use in your newsletter.

The AI assistant is available when you select the Paragraph element. The Paragraph element can be used for text sections.

Click on the Paragraph element in the newsletter and you will get the element's properties on the right side. The AI assistant can be found behind the new “Write with AI” button.

After pressing the 'Write with AI' button, a view opens up where you can utilize the AI assistant.

With the 'Apply' button, you can transfer the text directly to the newsletter in the paragraph you are editing. You can continue the conversation with the AI assistant and improve its response.

Content settings

The properties panel displays different controls depending on which content element you selected. Here is a description of some of the most frequently used ones.

Padding

Padding settings can be configured for all sides of the selected element.

Click More options and padding can be added separately to top, bottom, left or right.

Borders

Border settings can be configured for all sides of the selected element.

Click More options and borders can be added separately to top, bottom, left or right.

Dividers

Dividers help create visual separation between design elements. They can be transparent.

They can be visible, you can e.g. change the color and width of the divider and add padding.

Color memory

As you pick colors for fonts, background colors, etc., the editor will learn and remember them, making them quickly accessible to style future content elements.

Rows

The Rows panel includes different types of structural elements for your message. They allow you to create different sections of the message and to sections you can add different kinds of content elements. Rows with different structures allow you to organize content in a way that is different from the preceding and following rows.

For instance, you can select:

• a single-column row with a hero image to introduce your online store’s new promotion.
• a three-column row below it to display some of the store’s best-selling products.

You may also need to have different rows, even if they have the same structure, if you want them to have a different row or content background color.

Instead, if you need to switch to a different number of columns for an existing row, you’ll be able to do so by using the Customize Columns widget inside the row’s properties.

Selecting a row will switch the properties panel to the row and column settings. The editor provides great flexibility and customization at both the row and column level. You can delete or duplicate rows with icons found on top of the right panel. It will duplicate the entire row with content (e.g. text, a button, an image).

Managing columns within rows

When you select a row, the row properties will have a Customize columns section, where you can manage the columns inside that row, and apply additional settings.

Adding a column

Clicking on + Add new action will add a new column inside the row. The New Column is always added to the far right, with default size 2. The widget will automatically find the best resize option to adapt to the addition of a new column. The Minimum column width is 2, and rows can have a maximum of 6 columns. When the maximum number of columns is reached, the + Add new action disappears.

Deleting a column

A column can be removed from a row by clicking the Delete action in the top-right of that Column properties. When a column is deleted, the nearest column on the left gets its width. If the deleted column is the first on the left, the right column will take the width. If there is just one column, the Delete action is not visible.

Resizing columns

Columns can be resized by dragging the divider icon between two columns to the left or to the right. The stage will reflect the change in real-time as the user resizes the column, to preview the result even before letting go of the divider.

Other column settings

Additional settings at the column level within a row allow control on background color, padding and borders for the selected column.

Selecting rows and content

When you mouse over the message in the message editing area of the editor (the stage), the following happens:

1. You mouse over a block of content (a button in the example below): the editor shows you an icon on the right side that allows you to drag that block of content elsewhere. You can see the name of the element also.

2. You click on a block of content, and the editor will:

• Show you two icons on the stage, which allow you to remove or duplicate that block of content.
• Change the properties section on the right side of the editor to display a series of properties that you can set for that block of content.

3. You mouse over an area that is free of content, i.e. the row in which the content is located. The editor will highlight it and show you an icon that allows you to drag that entire row elsewhere on the stage.

4. You click on a row, and the editor will:

• Deselect any block of content that had been previously selected.
• Select the row, and show you two icons that allow you to remove or clone the entire row and all its content.
• Change the properties section on the right side of the editor to display a series of properties that apply to that column within the row. A row can contain more than one column.

Settings

From this tab you can modify general settings that apply to the entire message:

• Content area width: this is the width of the area where content blocks are dropped. According to email marketing best practices, it should typically be set to 600px or less. Please note that this is the maximum width that will be used on larger devices. When the device’s screen is smaller, the message will adjust automatically to it.
• Content area alignment: set the body of the email to be aligned to the center (default behavior) or to the left. This setting will not affect the alignment of the content blocks in the email.
• Background color: it's the message background color. This setting is effective only for rows (and columns) where a color has not been specified. Otherwise, the background color specified for that content structure will be used.
• Content area background color: it's the background color for the content area. This setting is effective only for rows and columns where a color has not been specified.
• Default font: it's the default font that will be used when another font family has not been specified. This setting affects all text set to use the Global font.
• Link color: it's the link color. As above, this setting affects all text links set to use the default color.

Mobile optimization options

Often content in an email is organized in multiple columns. When viewed on a mobile device, those columns can become too narrow and lead to a sub-optimal reading experience. To guarantee a better experience while reading emails on mobile devices, the editor generates HTML code that makes columns stack vertically. This way, content is reorganized to make zooming unnecessary and is easy to scroll with a finger.

Sometimes you may want to make changes to the default mobile optimization settings that the editor uses. There are plenty of different features you can use to do this. Let’s go over the different options that can impact the mobile version of your design.

Do not stack on mobile

There are cases where the vertical stacking of columns may not lead to an optimal result.

Typical scenarios include navigation bars, icons, and other horizontal design elements. For example, when using a row to display a navigation bar with text links, a vertical layout could take too much space, hiding important parts of the message or giving too much visibility at the top of the email to content that is not supposed to be that prominent.

The Do not stack on mobile option is available inside Row properties, toggled off by default.

Reverse stack order on mobile

In some cases, the columns stacked on mobile can work better in a reversed order. In this case, you can toggle on Reverse stack order on mobile inside the row properties. The image on the right side has Reverse stack order on mobile selected.

Hide content on mobile or desktop

All content blocks in the editor include a Hide on setting in the content properties. To use it, scroll down until you see the Block options section.

This setting is perfect for creating device-specific parts for your email, from things like optimized buttons for mobile, up to entire sections with different layouts on mobile versus desktop. In this last case, you may also want to hide an entire row on a device by using the same Hide on setting.

Hiding a row will apply the Hide on property to all the blocks inside that row.

Mobile design mode

With Mobile design mode, you can easily design emails for mobile without the need to switch back and forth between editing and preview. You'll be able to move between desktop and mobile view to see and edit content. This way, you understand how your design looks on mobile without leaving the editor to go into preview.

You will see two icons in the upper left corner, one for desktop and one for mobile.

The desktop view will use the full width available in your browser window. Clicking on the Mobile icon will reduce the work area width to 320px. This view retains most of the editor's functionality, so you can continue working as usual (you can’t change the width of the newsletter on mobile design mode), while getting an immediate look at the mobile rendering of your email.

Another advantage of Mobile design mode is that you can instantly visualize the results of mobile optimization options - such as do not stack/reverse stack/hide on mobile - and stretch out the editor's design flexibility. 

An important note: with Mobile design mode, you are still working on a single template with the same content. These are not two separate versions of the template. Unless a content has a device-specific setting, the desktop view will reflect edits made in the mobile view.

When using the Hide on setting, you'll get an additional aid: a Visibility icon next to the Desktop and Mobile icons.

When Visibility is ON (the default behavior)

• The editor will display content blocks set as hidden for the current device.
• Those blocks will have a blurred effect to signify that they are hidden for that device.
• They will also have a small icon in the outline of the block when hovering with the mouse.

When Visibility is OFF

• Elements set as hidden for the current view are removed.

Additional blocks & widgets

Icons

When designing an email, several layouts can be created by combining icons or small images, often with some copy.  That is why the Template editor has an Icons and Social content block for creating icon-based content. Icons can be used to create visual bullet lists, ratings, properties, logo galleries, etc. Social is used to create icons for social media channels.

Icons element allows you to upload files from a computer or from files in LianaMailer. You can add a new icon by clicking Add new icon. Click More options and you’ll be able to add text next to the icon. If you have multiple icons, you can change their order by clicking and dragging them in the panel.

Social element have different kinds of icons ready to use.

Video

The Video content block allows you to share your video content easily in your emails. You only need to copy and paste the URL of your video from YouTube or Vimeo, and the editor will do the rest: it will automatically grab the cover image for the video, overlay a Play icon on top of it, and link it to the actual video content.

Once you insert a valid URL, the content block in the editing panel will display the cover image for the video with a Play icon overlaid on top of it. You can edit the type, color, and size of the Play icon to change the way it looks. For example, on some videos a white icon will work better than a black one, or vice versa.

Important about embedding video in email:

• This feature does not embed the actual video in the email, but rather links to it in a smart way.
• The reason why the actual video content is not embedded into the message is that, unfortunately, it doesn't work very well in every email client.

Custom HTML

The Custom HTML content block allows you to add your own HTML code to an email message that you are designing with the editor. It’s as simple to use as a text block. 

HTML experts: Using your own code may affect how the message is rendered in email clients, preventing it from adjusting to the screen size (i.e. the "responsiveness" of the message). Make sure to use HTML that is email compliant and responsive.

Which HTML tags are allowed?

The HTML content will automatically correct some issues like HTML tags that are left open, and strip out code that cannot be used, such as script tags or iframe tags (these code tags are not allowed by the majority of email clients and can cause deliverability problems or security risks).

Allowed tags list:

a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var

Allowed attributes list:

• general attributes: style, id, class, data-*, title
• a: href, name, target
• img: align, alt, border height, hspace, src, vspace, width, usemap
• table: align, bgcolor, border, cellpadding, cellspacing, width
• tbody: align, valign
• td: align, bgcolor, colspan, height, rowspan, valign, width
• tr: align, bgcolor, valign
• tfoot: align, valign
• th: align, bicolor, colspan, height, rowspan, valign, width
• thead: align, valign
• li: type
• map: name
• area: alt, coords, href, shape, target