Using the Editor:
Settings, rows & columns
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
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.
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) and some that apply to each column in the row. A row could contain multiple columns.
- Background color for that column
- Padding settings (for all sides or for each side)
- Border settings (for all sides or for each side)
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 the editor shows you an icon that allows you to drag that block of content elsewhere.
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 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.
Editing content
When you insert an image onto the stage or click on an image that has already been added to the message, the properties area of the editor will show you a number of settings that you can configure and tools that you can use.
- Change image: click on this button to replace the image with a new one.
- Edit image: click on this button to load an image editing tool that allows you to resize the image, apply visual effects, and much more.
- URL: specifies where the image is saved. You can also paste an external URL to load an image from there.
- Adjust to width: toggle this setting ON and OFF to automatically fill (ON) or not (OFF) the entire area of the message in which the image was placed.
- Align: change the positioning of the image.
- Alt text: enter the text that should be displayed when images are turned off. This is a best practice in email design since there are still email clients that have images turned off by default.
- Action: you may link the image to a URL, to a new message in an email client or to a telephone number for making a call or sending a text message. You can also link the image to a file that you previously uploaded through the editor’s file manager.
- Adding more customized content. You are not limited by a set of predefined parameters and can therefore have more granular control of the styles applied.
- Adding HTML 5 video, anchor links, etc. You can now add content that is not available as a standard content element in the editor (HTML 5 video, anchor links, etc.).
- Adding advanced effects with CSS. Get creative with animations! Animation effects are not widely supported by the email clients, but managed correctly they can help your message get viral.
- Adding live content from external providers. Product recommendations, dynamic ads, personalized maps, countdowns… all of this advanced content can now be easily included in a message created with MDC DOT Drag n Drop Email Builder. Just copy and paste the code provided to you by the vendor that you are working with.
What it does
The includes a built-in file manager. The file manager is the component that you will use to browse, search, and select the images and documents that you wish to use in your email message.
With the handy file manager you can:
- Browse, search, and sort existing files
- Import new files
- Create folders
- Preview and insert images into your message
How it looks
The file manager will open over the editor, covering the entire working area. This allows you to browse your files without worrying about your screen size or resolution.
You will find a top section with actions and navigation helpers, with most of the space used to list your files and the information you need to work with them. Here is a visual example.
How you access it
The file manager will load in several scenarios.
a. When you click on the Browse button in an image placeholder, which is displayed when you drag and drop an image content block into a message.
b. When you click the Change image button in the image properties panel:
c. When you click on Link file when working with images and buttons:
How to upload files
The quickest way to upload a file into the file manager is to drag it from your computer to the file manager window, dropping it into the upload area. Cool, uh?
There are other ways to do so. When you use the editor full screen, and can’t drag from your desktop, the Add new file button will do the trick.
Upload limits:
- The maximum allowed file size is 5MB.
- Allowed file types are images, pdf, MS excel, MS word, other common text documents.
How to import files from other applications
The Import from feature allows you to connect external applications like DropBox, Google Drive, Instagram and more, and import your files.
How to browse or search files
To locate your desired image or document, browse your folders and order their content by name, date, size or type by clicking on the sort labels on top of the list.
An arrow icon next to this labels means that this is the current filter, and its orientation will tell you the order, ascending or descending.
Too many files in the selected folder? Click on the lens icon to run a search. Results will be filtered on the fly. Mind that this search is performed only in the current folder, and not in your entire repository.
How to use files
When you move your cursor over a file or folder, that row will be highlighted and the available action icons will be shown on the right side:
- insert and preview for files
- delete for both files and folders
If an action is momentary not available, you will be notified by the tooltip text of the icon, such as when you try to delete a folder that contains files, because only empty folders can be deleted.
If you want to delete multiple files or folders, use the check-boxes to select them, the delete action will be shown on top of the list. Only elements that can be deleted will have a selectable check-box.
How to organize folders
You can create the folder structure you prefer to organize your files. To add new folders, use the Add folder icon.
For your folder names you can use letters (upper and lower case), numbers, spaces, periods (.), hyphens (-), or underscores (_).
To navigate to the parent folder use the top breadcrumb. Clicking the home icon will take you to your root folder.
