> ## Documentation Index > Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt > Use this file to discover all available pages before exploring further. # Design emails with drag-and-drop > Build responsive emails visually with OneSignal’s Drag and Drop Email Builder — settings, rows, content blocks, personalization, and compliance links. ## Overview The OneSignal Drag and Drop Email Builder lets you visually design responsive emails exactly as they appear in recipients’ 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 The sections below cover each component and the recommended order for building an email. 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](./design-emails-with-html) instead. ### Recommended build flow 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 **Common mistakes that cause rendering or deliverability issues:** * **Missing unsubscribe link** — required for marketing emails. Without one, inbox providers are more likely to flag your email as spam. * **Email wider than 600px** — causes horizontal scrolling on mobile and breaks layouts in many clients. * **Background images in rows** — Outlook and several mobile clients do not render them. Use Image blocks instead. * **No fallback fonts** — custom web fonts only load in a few clients. Always declare system font fallbacks. * **Oversized images** — emails over 1 MB load slowly and may be blocked. Individual images should be under 200 KB. *** ## Settings Settings define the foundational layout and styles for your email. These values cascade down to rows and content blocks unless explicitly overridden. Global settings panel in the Drag and Drop Editor | Design Setting | Description | | ----------------------------- | ---------------------------------------------------------------------- | | Content area width | Width of the email in pixels. **Recommended:** `600px`. | | Content area alignment | Align content left or center. | | Background color | Color behind the content area. | | Content area background color | Color inside the content area. | | Default font | Applied to all text unless overridden. Custom fonts require HTML. | | Link color | Default color for all links. | | Language | Sets 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. ### 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 Property | Description | | ---------------- | ------------------------------------------------------------------------------------------------- | | Backgrounds | Color or image behind the row. **Recommended:** set background color in Settings for consistency. | | Borders | Border color, width, and style. | | Layout | Show or hide rows on mobile or desktop. | | Columns | Add, remove, or resize columns and adjust column padding. | | Delete/Duplicate | Select a row and use the **delete** or **duplicate** icons to remove or copy it. | 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 elements recipients 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 HTML block theme={null}

Welcome!

Thanks for subscribing.

``` Many email clients (including Gmail and Outlook for Windows) do not load web fonts. Use system fonts for body text and reserve custom fonts for headlines only. Always include fallback fonts, or use images for guaranteed typography. ### Images & video Upload images directly to the OneSignal dashboard so your team can reuse them. The editor supports cropping, filtering, and other effects. You can also reference externally hosted images and videos by URL — make sure each URL is publicly accessible. #### Recommended image sizes for email * 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`) * Keep individual images under `100–200 KB` * Total email size (including images) under `1 MB` * Smaller images mean faster load times and better deliverability * **JPG** — best for photos * **PNG** — best for graphics, logos, and images with transparency * **GIF** — for simple animations (keep file size small) * **WebP** — not widely supported in email yet; avoid * Always include alt text for accessibility and for when images do not load * Use inline CSS for styling (many clients strip ` ``` Replace any content blocks that do not render correctly in dark mode with HTML blocks that use the CSS classes defined above. ```html email-header theme={null} ``` ```html email-body theme={null} ``` ```html email-button theme={null} ``` Return to preview mode to verify the dark mode styles are applied correctly. *** ## Save your work Save your email design as a [**template**](./templates) for future use. Save email as a template *** ## FAQ ### How do I add a custom unsubscribe link? Replace the default `[unsubscribe_url]` with your own URL. You are responsible for updating the email Subscription status in OneSignal when a recipient unsubscribes. See [Create a custom unsubscribe page](./create-custom-unsubscribe-page) for setup details. ### Why does my email look different in Outlook? Outlook on Windows uses the Microsoft Word rendering engine, which does not support modern CSS. Common issues include ignored `max-width`, collapsed background images, and missing web fonts. Test in Outlook specifically and use inline CSS with explicit `width` and `height` attributes on images. ### What is the maximum email size? Keep total email size (HTML + images) under 1 MB. Emails over 102 KB of HTML are clipped by Gmail, which hides content below the fold behind a "View entire message" link. Optimize images and remove unused code to stay under this threshold. ### Can I reuse parts of an email across multiple campaigns? Yes. Save any row as a **Saved Row** by clicking the save icon on the row. Saved rows appear under **Rows > My Saved Rows** and can be dragged into any email. For full email reuse, save the entire design as a [template](./templates). ### How do I preview my email before sending? Use the **Preview** button in the top toolbar to see how your email renders on desktop and mobile. To send a live test, click **Send Test Email** and enter a recipient address. Test emails are delivered to the inbox so you can verify rendering, links, and personalization in actual email clients. ### Do emojis work in emails? Yes, but they render differently across email clients. Outlook on Windows is the most inconsistent — emojis may appear as black-and-white outlines or boxes. If emojis are part of your subject line or CTA text, test across clients before sending. ### How do I import an existing HTML email template? You can bring existing HTML templates into OneSignal three ways: 1. Forward the email to OneSignal using [Email Template forwarding](./email-template-forwarding) 2. Use the [Create Template API](/reference/create-template) to upload HTML programmatically 3. Copy-paste your HTML directly into the [HTML Editor](./design-emails-with-html) ## Related pages End-to-end guide to sending email with OneSignal. Full HTML control, dark mode overrides, and advanced styling. Save and reuse email designs across campaigns. Add default or custom unsubscribe links for compliance. Personalize emails with tags, Liquid syntax, and dynamic content. Test subject lines, content, and send times to optimize engagement.