Designing Emails with Drag and Drop

How to Design Emails with our Drag and Drop Editor

OneSignal's Email Drag and Drop Builder lets you visually design and build your emails just as they'll be seen in your users' inbox. It consists of three different parts:

  • Settings - settings that apply to the entire message
  • Rows - rows of content in the message, which can be added, removed, copied, & moved
  • Content - individual content blocks: images, text, buttons, etc., which also can be added, removed, copied, and moved

Settings

Control the general settings for the message. This is very useful to build a coherent message very quickly.

Options are inherited by Row and Content blocks. For example, the font family set will be used everywhere in your message, except where you use a custom setting.

Image shows settings for the builderImage shows settings for the builder

Image shows settings for the builder

Option

Description

Content area width

How wide the email should be in pixels. Defaults to 600px.

Content area alignment

Arrange row content left or center.

Background color

The color of the row behind the content area.

Content area background color

The color of the row's content area.

Default font

The default font used.

Link color

Any links attached to content will turn this color.

Language

Set the HTML lang attribute so that the subscriber’s email client, browser, or screen reader can display its contents properly.

Defaults to English.

Customize Rows

Drag and drop rows into the email body to setup the structure of your message. Rows define the horizontal composition of the message. Each row can contain a number of columns in which you add content.

Image shows the ability to use multiple rowsImage shows the ability to use multiple rows

Image shows the ability to use multiple rows

Every row and each column within has its own property settings that override the default settings. This gives you the kind of flexibility that before was only achieved with hand-coded email.

Row Properties

Select the row to pull up its properties.

You can change all aspects of the selected row and each column within including background colors and images, desktop vs mobile visibility, column sizes, padding and boarders.

For example, to set a background image in which you can overlay clickable text or buttons. Toggle on the "Row background image" property and upload your image like this:

To then expand the row, use the "Padding" property like shown below. You can also update padding of the content elements within the row if you need more space. If the row itself has no clickable content, an Image Block would be recommended instead of the row background image property.

Customize Columns

Under Customize Columns, you can adjust the sizes and select the options specific to the column.

Image shows the ability to use multiple columnsImage shows the ability to use multiple columns

Image shows the ability to use multiple columns

Content

The Content section includes a series of tiles that represent the different kinds of content you can use in your message.

To use them, just drag one inside a column, it will auto-adjust to the column width.

Image shows the drag and drop blocks to form contenImage shows the drag and drop blocks to form conten

Image shows the drag and drop blocks to form conten

Every content block has it owns settings, such as granular control on padding. Select the content block and the right-side panel automatically switches to a property panel for the selected content element.

Image shoes a drag and drop blocks settingsImage shoes a drag and drop blocks settings

Image shoes a drag and drop blocks settings

Image File Manager

All images uploaded will be available for everyone on your team that can access the email editor. Be aware that when adding images to your email with the image block, the editor will show you myfiles and shared.

Note that shared is Read Only . If you want to add and use files, please use myfiles. You can create additional folders within myfiles for further file management.

Image shows our asset file manager for your emailImage shows our asset file manager for your email

Image shows our asset file manager for your email

Unsubscribe Link

Currently, every email sent from OneSignal requires an unsubscribe link to let users opt-out of future mailings. This unsubscribe link must be set using this literal syntax [unsubscribe_url] within the href= of your HTML or using the Special links within the Drag & Drop Template Builder.

See Unsubscribe Links & Email Subscriptions for more details.

🚧

Must contain [unsubscribe_url]

Emails that do not contain [unsubscribe_url] will have one added automatically at delivery at the bottom of the email which cannot be styled or overwritten.

HTML Blocks

HTML Content Blocks are designed to add custom HTML within your email template.

📘

Adding CSS styling to your HTML elements

Please keep in mind that when adding CSS to the elements within your HTML block, some web based email clients may strip the class or ID when receiving emails. Best practices for styling, are to use inline CSS for your elements.

<div style="background: red;">This now has custom styling!</div>

Email Preheader / Preview Summary

Preheader text or "email summary" is the text that shows up next to or below the subject line in the inbox. Read more about recommended lengths of Pre-headers in Email Best Practices

Image shows how a preheader looks as a row within Gmail.Image shows how a preheader looks as a row within Gmail.

Image shows how a preheader looks as a row within Gmail.

To set this up, drag an HTML block to the first row of your email. In the HTML editor add a default as follows:

<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
Hidden preheader text shows up in most inboxes &amp; is a great way to give more context on the email!
</span>

Replace the text between the span elements with your email summary.

Message Personalization

OneSignal supports tag substitution to customize your email messages.

Image shows the use of tag substitutionImage shows the use of tag substitution

Image shows the use of tag substitution

Using liquid templating language, e.g. {{ first_name | default: "there" }}, you may incorporate data stored on device records into your messages. For example, set a default value if a user does not have a tag already.

To learn more about tag substitution, see Message Personalization.

Emojis

Similar to push notifications, each email platform renders emoji slightly differently, so plan accordingly:

Image shows how emojis render on different email clientsImage shows how emojis render on different email clients

Image shows how emojis render on different email clients

Save Your Work

OneSignal Email Messaging supports Templates, letting you save designs you like for future use. When you've designed a layout you like, just click Templates > Save Template in the top of the create message box, and you'll be able to name your template.

At any time you may also click Select Template to load existing email templates.

Image shows how to save as a templateImage shows how to save as a template

Image shows how to save as a template

Build Upon a Base Template

Many times, you will have a "default" template to build upon as new content comes out. Templates are stored in Messages > Templates and can be duplicated to build upon your base.

Image shows how to duplicate an email templateImage shows how to duplicate an email template

Image shows how to duplicate an email template


Did this page help you?