Settings, Rows & Columns

Configuring message settings

In the Message tab you can configure settings that apply to the entire message.

Let's take a quick look.

Message Width**:** set the width for the content area. This is used when the device has a screen larger than that width. You can think of it as a "max" width for that content area. On small devices, it will be ignored.

Background Color**:** the default background color for the message. You will be able to override it at the row, column, and content block level when settings properties for those elements.

Message Background Color: the default background color for the content area, which is the area for which you set the Message Width above.

Font: the default font family that all content elements in the message will inherit. Of course, you can overwrite this selection at the content block level.

Link Color: the default link color that all links will inherit, unless you overwrite it for individual elements.

Body, Structure and Content: How do they work?

Design flexibility

One of the biggest strengths of the BEE editor is that it provides creative professionals with tremendous design flexibility.

This is achieved by separating the concepts of Body (settings that apply to the entire message), Structures (rows of content in the message, which can be added, removed, copied, & moved) and Content (individual content blocks: images, text, buttons, etc., which also can be added, removed, copied, and moved).

Body

General settings for the message.

They are inherited by Structure and Content blocks. For example, the font family set in the message settings is then used everywhere in your message, except where you use a custom setting.

This is very useful to build a coherent message very quickly.

Structure

Here you can find different types of rows to insert into the message.

Rows are structural units that define the horizontal composition of a section of the message by using columns. You can use from one to four columns.

Using more than one column allows you to put different content elements side by side.

You can add to your messages all the structural elements you need, regardless of the template you selected when you started.

Every row has its own settings, which gives you the kind of flexibility that before was only achieved with hand-coded email.

For example, you can select a background color for the entire row, only the message area, or a specific column within it.

Content

This section includes a series of tiles that represent the different kinds of content you can use in your message. More will become available in the future.

To use them, just drag one inside a column, it will auto-adjust to the column width.

Every content block has it owns settings, such as granular control on padding. The right-side panel automatically switches to a property panel for the selected content element.

How do I change the properties of a row?

First mouse over an area of the stage that is free of message content.

Then, click to select it.

The right side of the editor will now show you some properties that apply to the entire row (e.g. background color, background image, padding, etc.) and some that apply to each column in the row. A row could contain multiple columns, and you can control several settings independently for each column.

How columns display on mobile devices: using the "Do not stack on mobile" setting

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

Vertical stacking is supported by the most popular mobile email clients. In some cases, the desktop version will be displayed. That happens when a client lacks support for standard CSS.

One size doesn't fit all

Although it normally helps, there are cases in which vertical stacking of columns may not lead to an optimal result.

A common scenario is using a row to display a navigation bar with text links or icons. In that scenario, as shown below, a vertical layout could create excessive empty space, hiding important elements of the message or giving too much visibility at the top of the email to content that is not supposed to be that prominent.

Changing the default behavior

With the introduction of the Do not stack on mobile row setting, users of the BEE editor can now decide when to override the default behavior and prevent columns from stacking vertically on mobile devices.

The option is available in the right pane as a row property, off by default.

"Do not stack" and email design best practices

Email design best practices suggest a careful use of this display setting, as keeping a user-friendly vertical layout on mobile makes sense in most cases. As always, it is up to you and your creativity when and how to use this option.

How do I select a row vs. 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 (an image in the example below), and BEE shows you an icon that allows you to drag that block of content elsewhere.

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

Show you two icons on the stage, which allow you to remove or clone 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. BEE will highlight it and show you an icon that allows you to drag it elsewhere.

4. You click on a row, and BEE 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 of 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.