How to design emails with MassMailer Template Builder
This document will help you get started with it. You can use our editor to create an email message using its innovative, easy-to-use features. ?
Rows, Content and Settings = Flexibility
One of the editor’s biggest strengths is that it provides creative professionals with tremendous design flexibility. A lot of it comes from combining structures (rows) with individual design elements (content).
Each tile represents a different kind of content
you can use in your email. Just drag one inside a column, it will auto-adjust
to the column width. Whenever you select a content element, the
sidebar shows its properties.
Rows are structural units that define the horizontal composition of a section of the message by using columns. A row can include one to four columns, and it can either be empty or filled with content.
Settings are general styles for the message, inherited
by Rows and Content blocks. For example, the font family set here is used everywhere you choose to use the "Default" font, so you can quickly change the font.
Rows are structural units that define the horizontal composition
of a section of the message by using columns. Using more than one column allows you to put different content elements side by side. You can add all the structural elements you need at any time, regardless of the template you selected when you started. Unless you set a row to "not stack on mobile", its columns are stacked on mobile devices.
Empty rows help you build a skeleton for your message, without placeholder content. You will find many options, between 1 and 4 columns.
Default rows help you speed up the creation process by providing frequently used layouts with placeholder images, text, and buttons. either be empty or filled with content.
Custom rows contain predefined content for specific use cases, such as footers for Mailchimp, HubSpot, Klaviyo, and SendGrid.so you can quickly change the font. (Future Release)
MY SAVED ROWS
Empty rows help you build a skeleton for your message, without placeholder content. You will find many options, between 1 and 4 columns. (Future Release)
The sidebar's Content tab features a series of tiles that represent the different kinds of content you can use in your message. Text blocks, images, buttons, dividers, videos, and more. Try dragging one inside a column to get started.
Use the text editor's toolbar
for paragraph formatting, the sidebar for color, link color, line height, padding, etc. can be "Open link", "Make a call", etc.
Add the image block, then drag-n-drop images from your PC, or insert with the File Manager. Lots of image editing options.
Insert a button, then modify the label, padding, border, radius, color, etc.
It can be a solid, slashed, or dotted line, or a transparent spacer. Work with thickness & padding for more design control.
Easily add your preferred social icons, selecting from a gallery of available styles.
You can add custom icons too.
Need to paste HTML code?
The HTML content block comes to the rescue. HTML that doesn't work in an email is automatically removed.
The video content block allows you to share your video content in an easy way in your emails. You only need to copy and paste the URL of your video from YouTube or Vimeo.
You can insert a Sticker directly from GIPHY. Simply drag and do a search in their database. (Future Release)
You can insert a GIF file directly from GIPHY. Simply click and drag the block and search for some funny and cute GIFs. (Future Release)
This content block works
much like social icons;
you can use the pre-loaded
icon or you can add custom icons too.
You can add a simple text-base navigation element and set properties for each item.
Configuring message settings
In the Settings tab, you can configure settings that apply to the entire message. They can help you work faster.
Let's take a quick look!
CONTENT AREA WIDTH
The width for the content area. 600px typically provides enough room & works well in most Web & desktop email clients. On small devices, it will be ignored.
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.
CONTENT AREA BACKGROUND COLOR
The default background color for the content area, which is the area for which you set the width above.
The default font family that all content elements will inherit. Of course, you can overwrite at the content block level.
The default link color that all links will inherit in the message unless you overwrite it for individual elements.