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.

1744

Image shows settings for the builder

OptionDescription
Content area widthHow wide the email should be in pixels. Defaults to 600px.
Content area alignmentArrange row content left or center.
Background colorThe color of the row behind the content area.
Content area background colorThe color of the row's content area.
Default fontThe default font used throughout the email. Custom fonts can be added with HTML.
Link colorAny links attached to content will turn this color.
LanguageSet 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.

1790

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.

1790

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.

1790

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.

1790

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.

1533

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>

Message Personalization

OneSignal supports tag substitution to customize your email messages.

1026

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:

2000

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.

1818

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.

1754

Image shows how to duplicate an email template