Design emails with drag-and-drop
Learn how to create beautiful, responsive emails using OneSignal’s Drag and Drop Email Builder. This guide covers global settings, row and content customization, saved templates, link tracking, personalization, and more.
Overview
The OneSignal Drag and Drop Email Builder allows you to visually design emails exactly as they will appear in your users’ inboxes. It consists of three core components:
- Settings – global configurations that apply across your message
- Rows – structural containers to layout content horizontally
- Content – individual blocks such as images, text, and buttons
Settings
Settings control the foundational style and layout of your message. These settings cascade down to rows and content blocks unless explicitly overridden.
Image shows settings for the builder
| Option | Description |
|---|---|
| Content area width | Width of the email in pixels. Default is 600px. |
| Content area alignment | Align content to the left or center. |
| Background color | Background color behind the content area. |
| Content area background color | Background color within the content area. |
| Default font | Font applied throughout the email unless customized at the row or content level. Custom fonts require HTML. |
| Link color | Color for all hyperlink text. |
| Language | Sets the lang attribute in HTML for accessibility. Defaults to English. |
Customize rows
Rows are the horizontal building blocks of your email layout. Each row can contain multiple columns and content blocks.
Image shows the ability to use multiple rows
Each row and its columns can override global settings, giving you granular control over design and responsiveness.
Saved rows
Click the save icon on any row to reuse it across templates. Updates to a saved row can optionally apply to all templates that use it.
How to save a row
To access saved rows, go to the Rows tab and open the saved rows dropdown:
Select saved row
Dropdown categories:
- Empty – blank row templates
- My Saved Rows – rows you’ve saved
- Sample Rows – prebuilt templates by OneSignal
Row properties
Click on a row to edit properties such as:
- Background color or image
- Visibility by device type
- Column structure
- Padding and borders
To add a background image:
Use the padding setting to expand the visual space:
If there’s no clickable content, consider using an Image Block instead of a row background image.
Customize columns
Adjust column widths and individual column settings under Customize Columns.
Image shows the ability to use multiple columns
Content
Content blocks represent the core of your message — images, text, buttons, and more.
Image shows the drag and drop blocks to form content
Drag a content block into a column and it will adjust to the column width. Each block has its own settings like padding, font size, and alignment.
Image shows content block settings
Image file manager
Uploaded images are accessible across your team. You’ll see two folders:
- myfiles (writable)
- shared (read-only)
Organize uploads in myfiles by creating subfolders.
Image shows our asset file manager for your email
Unsubscribe link
All OneSignal emails must contain an unsubscribe link using [unsubscribe_url].
Add it either:
- Via HTML:
<a href="[unsubscribe_url]">Unsubscribe</a> - Using the Special links option in the editor
Emails missing [unsubscribe_url] will have a default footer link automatically appended, which cannot be styled or removed.
HTML blocks
Add custom HTML with HTML Blocks. JavaScript is not supported.
Inline CSS is recommended. Some email clients strip out class or ID attributes.
Message personalization
Use liquid templating to personalize messages based on user tags.
Example: {{ first_name | default: "there" }}
Image shows the use of tag substitution
Emojis
Emojis may render differently across email platforms.
Image shows how emojis render on different email clients
Linking with email
Links can include http:// or https:// URLs and support click tracking.
Tracked links are temporarily obfuscated before redirecting to the actual destination:
This redirection is quick and usually invisible to users.
To disable link tracking:
- Uncheck Track link clicks in the dashboard
- For API: Set
disable_email_click_tracking: true
Track link clicks is disabled.
Note: If disabled, click data will not be available in Email Message Reports. You cannot disable tracking on individual links.
Deep linking with email
For mobile deep links, see Deep Linking for caveats and configuration.
Unique link tracking
Add UTM parameters directly in your URLs to identify individual email links. Learn more
Save your work
You can save your email design as a template for future use.
Image shows how to save as a template
Build upon a base template
Start from a reusable base layout by duplicating an existing template:
Image shows how to duplicate an email template