Getting Started with the Email Builder
Overview
The Email Builder has an easy drag-and-drop interface which gives you full control over the design of your emails without any knowledge of HTML, and produces code that adapts automatically to small screens such as smart phones.
Message Editing and Properties Panel
The email builder is divided into two main areas: the main message editing stage on the left, and the properties panel on the right. Generally, 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 and drop image files directly from your desktop into an image content block. You can also upload them using the File Manager, or use the URL of a remotely hosted image.
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.
- Structure: Here you can select different structural elements (e.g. a single-column vs. three-column row) to organize your content.
- Body: Here is where you will define some settings that affect the entire message. For example, a default font family.
Content
The Content tab allows you to choose different elements to add your message. Just drag and drop a content element in the message area on the left. Available elements include buttons, images, text blocks, dividers, and social media sharing.
To learn more about how to use images in your emails, see Add Images, PDFs, or Documents to a Bullhorn Automation Email
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 the selected content block. If you click outside of a content element, the row in which the element is located will be selected and its properties will be available (more on this under Structure below).
The Content Properties area changes depending on the element that has been selected. For example, if you select a button, 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.). In the example shown below, the View Open Jobs button has been selected.
The Properties panel switches to button mode and allows you to set the button’s width, background color, text color, alignment, roundness of the corners, padding around the text, and more. When the properties panel is longer than the height of the screen, a scroll bar appears on the right side.
Some of the controls such as content padding and borders have both a simple editing mode where only one setting is shown, and an advanced editing mode that gives you more control (e.g. specifying padding for the four sides of the object independently of each other).
Text Editing
If you click inside a text content block, the text editor toolbar will appear above 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.
If you set the Font Family to "Global Font", it will inherit the font family selected under the Body tab. This allows you to change the font family for multiple elements at once just by changing that property in the Body tab.
Content Settings
The Properties panel displays different controls depending on which content element you selected. Here are descriptions of some of the most frequently used ones:
Padding
Padding settings can be configured both for all sides of the selected element or separately for each side (by clicking More Options).
Spacers
Spacers help create visual separation between design elements. They can be transparent or visible. Here too, granular control on padding provides great design flexibility.
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 and Structure
The Row panel includes different types of structural elements for your message. These allow you to create different sections of the message, as using different content blocks in the same section won't always work. Think of the different sections as rows that will organize content differently to the rows preceding it and following them.
For instance, you may need:
- A single-column row with a hero image to introduce your new content.
- A two-column row below it to display some of your recent job openings.
Whenever you need to switch to a different number of columns, that’s when you will introduce a new section by using the Structure panel.
Select a row to switch the Properties panel to the row and column settings. The editor lets you customize your message at both the row and column level.
To make message creation even easier and faster, you can clone entire structures (for example, a picture, a button and a text block) with all of their settings and blocks. This allows what email designers call "modular design": you create a module and then replicate it multiple times in the message.
Columns within rows
Settings at the column level within a row allow you to control the 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), it shows you an icon on the right side that allows you to drag that block of content elsewhere.
When you click on a block of content, 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.
When you mouse over an area that is free of content, e.g. 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.
When you click on a row, 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.
Body
From the Body tab you can modify general settings that apply to the entire message, such as:
- Content area width: The width of the area where content blocks are dropped. According to email marketing best practices, this should typically be set to 600px or less, as 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.
- Background color: 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: 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: 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: The color of links in the message. As above, this setting affects all text links set to use the default color.