How it works

Getting started

To begin creating a message with the new BEE editor from your platform, click on Messages > Email, then click on "NEW EMAIL" and then click "START DESIGNING"

Drag-&-drop templates

Build your message starting from:

• Basic templates: they are wireframes for your new message
• Rich templates: they contain sample content to give you some design ideas
• My templates: they are previously saved custom templates

For basic or rich templates, you can:

• Preview it
• Create a copy and save it as a custom template
• Create a new message starting from the template, by clicking on NEW EMAIL.

In the "My Templates" section, you can also edit or delete templates.

Create the message

Creating a message with BEE is very easy.

After choosing a template, you will be able to customize:

• Content
• Structure
• Body

Let's see in detail these three areas.

Content

The "Content" tab allows you to choose a new content element and add it to your message. Just drag and drop a content element (button, image, 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 its settings.

In the example below, for a "text" block you can set text and link color and choose a font. You can also act on the padding (the distance from the borders of the block).

The Content properties area changes depending on the content element that has been selected. If you select a button, for example, you will see several tools to help you style the button and link it to your desired action.

Text editing

If you click inside a text content block, the text editor toolbar will appear. The toolbar opens in "simple" mode, giving you access to basic text editing tools.

Click on the icon on the right of the toolbar to expand it to "advanced" mode. Here you will find additional text editing tools, including advanced features such as merge tags (e.g. "Dear [firstname],").

Structure

The Structure panel includes different types of structural elements for your message. Think of them as a way to create different sections of the message.

For example:

• A single column section at the top with a hero image
• A two-column section in the middle, with a recent product announcement
• A three-column section in the lower part of the email, with some product information
• Etc.

Unlike content blocks available in BEE v1, the new structures provide much more flexibility and customization at both the row and column levels. 

Also, you can now clone entire structures (for example, a picture, a button, and a text) with all its settings and blocks. Previously you could only clone a single block of content.

If you click on a structure inside the message, you can modify row and columns settings, like background colors, padding, and borders.

Body

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

• Content area width: set by default to 600px, which is the recommended width for most devices.
• Background color: it's the newsletter's background color. This setting is effective only for rows where color has not been specified, inside "Row properties". Otherwise, the background color specified for that content structure will be used.
• Content area background-color: it's the background color for all content areas. This setting is effective only for rows and columns where color has not been specified.
• Default font: it's the font used for the whole newsletter. This setting affects all text set to use the default font.
• Link color: it's the link color. As above, this setting affects all text links set to use the default color.

Undo, redo & history

When designing, you can rewind and fast-forward to any point in your recent edit history. As soon as a change in the message is detected, a compact Undo widget displays in the bottom left corner of the editor.

The widget displays 3 items that correspond to these 3 actions:

• Undo & Redo arrows that offer the classic pattern to move back and forth between changes.
• A history icon that expands a timeline of the latest changes, as shown below.

Save and exit

For each message, you create you can:

• Exit: Leave the editor without saving the message. All the edits will get lost.
• Save: save the edits without leaving the editor.
• Save & exit: save the edits and leave the editor.
  
  

From the drop-down menu near the save & exit button you are also able to:

• save the message as a template: by saving a message as a template, it will be added in the section Messages > Email > Templates > Drag & drop templates 
• make a quick send
• take a look at the message preview
• show message structure
  

Save a row

Within the Drag & Drop editor, you can save up to 30 rows that you can use on different messages.

1. To save a row, select it in the Drag & Drop editor and proceed as you prefer:
1. You can click on the Floppy icon that appeared following the selection.
2. You can add the row to those saved from the editor context menu that appears on the right.
2. Name your custom row.
3. Click “Save Row”

Call up a saved row

To use a previously saved row:

1. Enter the "Rows" tab of the Drag & Drop editor.
2. From the drop-down menu, select "Saved rows"
3. Drag the row into the message to customize it

Custom rows

Custom rows are pre-filled rows of content ready to be used.

To use custom rows, click on the drop-down menu in the Structure area and select the source you want to retrieve content from. To insert a new custom row in your message, simply drag and drop the content in your template. Each message can contain custom rows recovered from different sources. 

Content available in custom rows is retrieved through Sources created using a link (RSS/ATOM feed) or by uploading a .csv or .json file.