Smart Email Builder Tools

Knowledge Level: 
Time: Less than 5 minutes
Suggested Skills: HTML, CSS but not required
Objective: This article covers various tools within the Smart Email Builder that adjust the design in both the CSS and the HTML. To learn more about the steps to create a campaign with the Smart Email Builder, visit Designing an Email Using the Smart Email Builder.

What's the difference between inline styling and CSS?

Inline: Inline styles are applied directly to the element itself. You can edit the inline styling through clicking on a content area and using the toolbar at the top of the editing window. You can also open the HTML and edit directly.

CSS: This stands for Cascading Style Sheet. Think of it as a template style-guide. It dictates how "tagged" elements appear within the campaign. You can edit styling that is supported by the CSS through the side-menu, which allows you to make a change to various elements in your design, such as headers, text regions, etc. So rather than edit multiple elements, which could take a long amount of time, this tool allows you to make the edit once and it affect all relevant regions. Jump to CSS Tools.

Note: When your email campaign sends, all supported CSS is "inlined" to increase consistency across email clients. Because of this, when designing and editing your email campaign, there is potential to create a conflict between your CSS and your HTML so attention to detail is required.

Inline Tools

Icon Description
B Apply the bold font style to selected text.
Apply the italic font style to selected text.
U Apply underlining to selected text.
ABC Apply a strikethough selected text.
Align selected content (or a paragraph in which the cursor is located) based on a left-hand margin. If the alignment doesn’t change, alignment may have already been applied.
Align selected content (or a paragraph in which the cursor is located) based on the vertical mid-point. 
Align selected content (or a paragraph in which the cursor is located) based on a right-hand margin. 
Justify selected content (or a paragraph in which the cursor is located).
Change the text color.
Highlight the text using a selected color.
Paste copied text from Word. You copy the text to a window that opens when you click this button. You can edit the copied text and then insert it into the text content block.
Apply a font style that you choose to selected text.
Apply a font size that you choose to selected text. Font sizes are measured in pixels (px).
Bullet selected paragraphs.
Number selected paragraphs.
Decrease the indent for selected paragraphs.
Increase the indent for selected paragraphs.
Undo.
Redo.
Create a link at the cursor position.
Remove a selected link.
Insert a specialized link into the email campaign that, if clicked, will display additional content, such as an article, in a new browser window. This allows you to tease content. Note: These links cannot be copy and pasted.
Insert a link anchor.
Insert or edit an image.
Clean up messy code.
Learn about the editor.
Edit the HTML source for a text content block.
Insert a new table or edit a selected table.
Customize properties for table rows.
Customize properties for table cells.
Insert a table row above the current row.
Insert a table row below the current row.
Delete the current table row.
Insert a table column before the current column.
Insert a table column after the current column.
Delete the current table column.
Split merged table cells.
Merge table cells.
Add a horizontal line (rule).
Remove formatting of selected content in the editor.
Show or hide guidelines or invisible elements, such as link anchors or tables.
Apply superscript to selected text.
Apply subscript to selected text.
Add a symbol that you choose.
Insert a token.
Insert a survey link.
Insert an RSS element.

 

CSS Tools

The above menu may be different based on the template you've chosen, as the CSS can be constructed in a variety of ways. Learn more about how to build a template to be compatible with the Smart Email Builder. This is a general overview of the CSS menu for a very basic template.

Themes: Choose a theme to automatically dictate the styling of your email design.
Colors and Layout: Set the background color and image of your email design.
Top Bar: Set the text color, font, size and link color for the Top Bar content area. 
Headlines: Set the text color, font, and size of the Headline content area(s). 
Sub-Headline: Set the text color, font, and size of the Sub-Headline content area(s).
Content: Set the text color, font, size and link color for the general content area(s). 
Action Link: Set the text alignment, color, font and size of your Action Link(s).
Footer: Set the text color, font, and size of the Footer content area.

Content Area Tools

Icon Description
Copy the content area.
Move the content area down.
Move the content area up.
Remove the content area.
Hide/Show the image area associated with the content area.

Still need help? Contact Us Contact Us