Skip to main content

​
Overview

The OneSignal Drag and Drop Email Builder lets you visually design responsive emails exactly as they will appear in your users’ inboxes—without writing full HTML. You build emails using three core components:
  • Settings – global styles and layout applied across the entire email
  • Rows – horizontal layout containers that control structure and responsiveness
  • Content – individual blocks such as text, images, buttons, and HTML
This guide walks you through each component and shows the recommended way to build an email from start to finish.
Use the Drag and Drop Email Builder if you want to:
  • Design emails visually without managing full HTML (HTML blocks are available)
  • Reuse rows or templates across campaigns
  • Allow non-technical teammates to safely edit content
If you need full HTML control, custom fonts everywhere, or advanced dark mode logic, use the HTML Editor instead.
Follow this order for the best results and fewer rendering issues:
  1. Configure global styles in Settings
  2. Add layout structure using Rows
  3. Insert Content blocks
  4. Add personalization and links
  5. Add an unsubscribe link (for marketing emails)
  6. Save as a template or send
When finished, your email should:
  • Be no wider than 600px
  • Render cleanly on mobile and desktop
  • Include required compliance links

​
Import your own templates

If you already have HTML email templates, you can add them to OneSignal using:
  1. Email Template forwarding
  2. Create Template API
  3. Copy-paste HTML into the HTML Editor

​
Settings

Settings define the foundational layout and styles for your email. These values cascade down to rows and content blocks unless explicitly overridden.
Settings for the builder
Design SettingDescription
Content area widthWidth of the email in pixels. Recommended: 600px.
Content area alignmentAlign content left or center.
Background colorColor behind the content area.
Content area background colorColor inside the content area.
Default fontApplied to all text unless overridden. Custom fonts require HTML.
Link colorDefault color for all links.
LanguageSets the HTML lang attribute for accessibility. Defaults to English.
Recommended default: Configure as much styling as possible in Settings to ensure consistency and reduce per-block overrides.

​
Rows

Rows define the horizontal layout of your email. Each row can contain one or more columns, and each column can contain content blocks. Drag and drop rows into the editor to build your structure.
Adding rows to structure an email
Use rows to control layout and spacing. Avoid relying on individual content blocks for major layout decisions.

​
Delete & duplicate rows

Select the row and use the delete and duplicate icons.
Delete and duplicate row controls

​
Saved rows

Saved rows let you reuse headers, footers, or repeated sections across emails and templates. Click the save icon on a row to save it.
Saving a row for reuse
Access saved rows from Rows > Saved rows.
Selecting a saved row
Saved row categories:
  • Empty – blank row templates
  • My Saved Rows – rows created by you or your team
  • Sample Rows – OneSignal examples

​
Row properties

Click the outer edge of a row to edit row-level settings.
If you see Content instead of Row when hovering, you’ve selected a content block. Click the outer container edge until the label reads Row.
Row PropertyDescription
BackgroundsColor or image behind the row. Recommended: set background color in Settings for consistency.
BordersBorder color, width, and style.
LayoutShow or hide rows on mobile or desktop.
ColumnsAdd, remove, or resize columns and adjust column padding.
Avoid background images in rows. Email client support is inconsistent. If the row contains only an image, use an Image block instead.

​
Content

Content blocks are the actual elements your users see—text, images, buttons, dividers, and HTML. Drag a content block into a row column. It automatically adapts to the column width.
Available content blocks
Decision rules for content blocks:
  • Use Text blocks for most copy.
  • Use Image blocks for visuals or custom typography.
  • Use HTML blocks only when you need advanced styling or behavior.

​
Custom fonts

The Drag and Drop Editor supports system fonts by default. To use custom fonts, you must use an HTML block.
HTML block
<!-- Place this into a HTML block at the top of your email -->
<style type="text/css">
  /* Declare Bebas Neue (only loads in clients that support web fonts) */
  @font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhzg.ttf') format('truetype');
  }
</style>

<h1 style="font-family:'Bebas Neue', Arial, Helvetica, sans-serif; 
           font-size:36px; line-height:1.2; margin:0; text-transform:uppercase;">
  Welcome!
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  Thanks for subscribing.
</p>
Recommended default: Use system fonts for body text and custom fonts for headlines only.
Many email clients (including Gmail and Outlook for Windows) do not load web fonts. Always include fallback fonts or use images for guaranteed typography.To “force” a specific font, consider using images with the desired font instead.

​
Images & video

You can upload images to the OneSignal dashboard and have them be accessible to your team. Change and apply effects to images like cropping, filtering, and more directly in the editor. You can also use URLs to images and videos. Make sure they are available via the provided URL. Aspect Ratios:
  • Header/Banner images: 3:1 or 4:1 (e.g., 600×200 or 600×150)
  • Hero images: 16:9 or 2:1 (e.g., 600×338 or 600×300)
  • Square images: 1:1 (e.g., 300×300) — good for product grids
  • Thumbnails: 1:1 or 4:3
  • Max width: 600–700px is standard (most email clients)
  • Design at 2x for retina displays (e.g., 1200px wide, displayed at 600px)
File Size:
  • Keep individual images under 100–200KB
  • Total email size (including images) under 1MB
  • Smaller = faster load times and better deliverability
File Formats:
  • JPG: Best for photos
  • PNG: Best for graphics, logos, transparency
  • GIF: For simple animations (keep file size small)
  • WebP: Not widely supported in email yet — avoid
Other Tips:
  • Always include alt text for accessibility and when images don’t load
  • Use inline CSS for styling (many clients strip <style> tags)
  • Avoid background images (inconsistent support)
  • Test across clients (Gmail, Outlook, Apple Mail all render differently)
    • Outlook often ignores image dimensions, so set both width and height attributes in HTML
Link tracking is enabled by default. Multi-link tracking is available. See Links and Deep Linking for more details. All marketing emails should contain an unsubscribe link. Without an unsubscribe link, your emails will have a higher chance of being marked as spam. See Unsubscribe links for more details. OneSignal provides a default unsubscribe link that when used, will unsubscribe the user’s email Subscription. You can also include your own custom unsubscribe URL if desired. Just make sure you correctly manage the email Subscription (details in Create a custom unsubscribe page). Add OneSignal’s default [unsubscribe_url] into your emails via:
  • HTML Block: <a href="[unsubscribe_url]">Unsubscribe</a>
  • Select your text and use the Special links option in the editor or set [unsubscribe_url] in the URL field

​
HTML blocks

HTML blocks allow custom markup and styling.
  • JavaScript is not supported
  • Inline CSS is recommended
  • Some clients strip classes and IDs
HTML blocks are the best place for advanced styling such as dark mode overrides. See Dark mode styling best practices.

​
Personalization

Use liquid templating to personalize messages. Example: {{ first_name | default: "there" }}
Using Liquid templating to personalize messages
See Message personalization and Using Liquid syntax for more details.

​
Emojis

Emojis may render differently across email platforms.

​
Save your work

You can save your email design as a template for future use.
Save email as a template

​
FAQ

​
How do I handle dark mode?

Most emails render acceptably in dark mode, but always test. For advanced dark mode styling, use HTML blockes and see Dark mode styling best practices. See Create a custom unsubscribe page for details.