Drag and Drop Email allows you to create a responsive and text version of your email.
- Click on Emails in the menu.
- Enter email name in the Create New Email field.
- Select Drag & Drop Email as the Content Type.
- Click Create.
- Select a Prebuilt Layout.
Select from one of the five base layouts to start your email. This allows you to start with nothing by using a blank template. You can also choose from a one column, standard, newsletter or e-commerce type of layout. - Complete the Properties fields.
- Click Continue.
This takes you to the Content step of the email creation process. The Drag & Drop Editor Workspace will open. - Create your email.
- Click Save or Continue.
Clicking Continue will validate and save your work and will take you to the Preview step of the process.
iPost will not send emails that have not passed validation. iPost's validation checks your email message for issues that could prevent your email from being sent. To validate your email, click Continue in the Content Step of the email creation process.
Design flexibility is achieved by separating the concepts of Settings (settings that apply to the entire message), Rows (of content in the message, which can be added, removed, copied, & moved) and Content (individual content blocks: images, text, buttons, etc., which also can be added, removed, copied, and moved).
Settings
General settings for the message.
They are inherited by Rows 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 help build a coherent message very quickly.
- Content Area Width: Set the width for the content area. This is used when the device has a screen larger than the particular width. In a sense, it is the "max" width for that content area. On small devices, it will be ignored.
- Content Area Alignment: General alignment for all the content areas.
- 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 setting properties for those elements.
- Content Area Background Color: The default background color for the content area. This can be overwritten at the content block level.
- Background image: Allows an image to be set for the entire email.
- 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.
Optional Properties
Optional properties are not required. Optional properties include:
- Title: Sets the title in the HTML code.
- Language: Use this setting to declare an HTML language attribute within the email.
Background image support varies across email clients. A fallback content area background color should be chosen for optimal results
Rows
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.
Using more than one column allows you to put different content elements side by side.
All desired structural elements can be added to your message, regardless of the template selected when you started.
Every row has its own settings, giving you the kind of flexibility that was previously 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.
Do not stack on mobile: The Drag and Drop editor can now decide when to override the default behavior and prevent columns from stacking vertically on mobile devices.
Vertical stacking is supported by the most popular mobile email clients. In some cases, the desktop version will be displayed which happens when a client lacks support for standard CSS.
The best practices of email design suggest a careful use of this display setting, as keeping a user-friendly vertical layout on a mobile makes sense in most cases . As always, it is up to you and your creativity when and how to use this option.
This section includes a series of tiles that represent the different kinds of content you can use in your message.
| Column Type |
Description |
|---|---|
| Title | Allows you to add specific H1/H2/H3 elements to your email design. |
| Paragraph | The Paragraph content block is similar to the Text content block but includes additional formatting options such as Font Weight and Paragraph Spacing. |
| List | Allows you to create numbered or bulleted lists and provides more granular control over list formatting that may have different design requirements than general text. |
| Images |
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, and preview and insert images into your message. |
| Buttons | The options allow you to create rounded style or rectangular buttons. Color and padding options are also available. |
| Divider | Dividers allow you to create a visual separation between content. You can control the style of line, size and width. |
| Spacer | Adds an additional space to your email design. |
| Social Icons | You have the ability to choose from a selection of social icons that can work with your design. |
| Dynamic Content* | Dynamic content allows you to use custom rules that display different content to different audiences. The content utilizes the snippet section. |
| HTML* | The Custom HTML content block allows you to easily add your own HTML code to an email message that you are designing. It’s as simple to use as a text block. |
| Video | The video content block allows you to easily share you content using just a URL from YouTube or Vimeo. Simply paste the URL into the content block, and the video will be inserted into your content using the cover image for the video with an overlay of the play icon. |
| Icons | Icons allow you to create new layouts mixing icons and images with text without the constrictions of row structures. |
| Menu | Menu allows you to add a simple, text-based navigation element in your email. The properties can be set for each item and the items can be displayed horizontally or vertically by changing the layout. |
| Real-Time Toolbox |
* Using your own code may affect how the message is rendered in email clients, preventing it from adjusting to the screen size (i.e. the "responsiveness" of the message). Make sure to use HTML that is email compliant and responsive.
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 and alignment. The right-side panel automatically switches to a property panel for the selected content element.
Allowed tags list:
a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, varAllowed attributes list:
general attributes: style, id, class, data-*, title
a: href, name, target
img: align, alt, border height, hspace, src, vspace, width, usemap
table: align, bgcolor, border, cellpadding, cellspacing, width
tbody: align, valignMobile design is not only about the layout responsiveness, but also about having the appropriate content in the right context.
An email that may yield excellent results on desktop screens may not work as well when the user needs to scroll on his mobile device to reach the call to action.
The best way to solve this challenge is to hide unnecessary design and/or content elements when the message displays on mobile devices.
All content blocks in the Drag and Drop editor will include a new "Hide on mobile" setting in the property panel. To use it, simply scroll down in the right panel until you see the Block options section, as shown below here.
Flexible Columns
Flexible Columns is located inside the Row properties and allow you to add, resize, and remove columns in real time. Once the row is added to your email, from the side panel, you have the ability to adjust the size of the existing columns by dragging the divider. You can also add or delete the columns from the existing row.
Padding and Borders
You have granular control on padding and borders. You can either set padding or borders around a content element for all sides at once, or individually for each side. This gives you great flexibility in setting the look and feel of your email message.
With Custom Attributes, you can easily append additional information to HTML tags in emails. These attributes can be applied to links, both in text blocks and buttons, and images.
For images and buttons, these attributes will be visible in the editor sidebar, under the new Attributes section.
For links in text blocks, they will be part of the dialog window for creating a link.
The Merge Tags option allows you to add database fields to your content to personalize your emails.
Smart Merge Tags display the iTL field name instead of the iTL variable. When selected, the border will become solid to signify that it has been selected.
Easily toggle between Desktop and Mobile View from the editor. When switched to Mobile View, the editor content area will reduce to 320px. While in Mobile View, you can continue to edit to customize your email design.
Please note that when Mobile View is on, the editor will use a gray backdrop that is not part of the email design.
If you're using the "hide on mobile/desktop" on any content blocks within the email, you will see another icon render next to the design mode toggle. This icon determines whether or not your want content blocks that are hidden on mobile to populate in the editor.
When working in Desktop or Mobile View, any content that is hidden will render as translucent in the editor.
Click Plain text to create a text version of your email. You can drag and drop your text file into the workspace or autogenerate text based on your HTML by selecting Autogenerate Text in the Content menu.
This feature will identify words in your document that are misspelled. Click on the highlighted word for a list of correctly spelled words to replace it with. Click Save Changes when done.
Preview allows you to view how your email will look by device type, along with how the email will appear for a specific contact.
Preview as options:
| Option |
Description |
|---|---|
| User | Enter a contact’s address with the desired attributes for which to preview the email and click OK. Note: The contact must be in the system. |
| Table | Click Browse and select the Data Table with the contacts in which you would like to preview the email. At the top of the preview window you can select a specific contact to preview. |
| List | Click Browse and select the List with the contacts in which you would like to preview the email. At the top of the preview window, you can select a specific contact to preview. |
Devices
View how your email will look on Desktop, Mobile and Tablet screens. Click on a tile to see how your email will look on a specific device type.
Inbox Previews
Allows you to preview your email across the most popular clients, apps and devices. To run an inbox preview test, click the Test Preview button.
| Option |
Description |
|---|---|
| Client Interfaces |
This option allows you to preview how your email will look in the email client’s interface. |
| Blocked Image |
This option includes a preview of each client with image blocking enabled (where available). |
Running Inbox Preview tests can incur extra charges. Please reach out to iPost Client Services for more information.