help-center-cms

Blog

  • Email Client Compatibility

    This guide explains how major email clients render HTML email differently and how to identify, troubleshoot, and work around compatibility issues using Sender’s editor and testing tools.

    Where to Test Rendering

    The editor includes three tools for verifying how your email will appear across clients.

    campaign-preview

    Click the Preview icon (eye) in the top toolbar to open the preview screen. This displays your email in desktop and mobile layouts side by side. The Dark mode preview toggle in the top-right corner of the preview screen simulates how clients with dark mode may invert your colors and backgrounds. The Email size: approx. X KB indicator in the top-left corner of the preview screen shows your current HTML file size — critical for avoiding Gmail clipping.

    campaign-preview-dark-mode

    Use Send test email in the top toolbar to deliver the email to a real inbox. Enter any email address in the dialog and click Send. This lets you verify rendering in actual email clients, which is essential because the editor preview is a browser-based approximation that does not replicate the rendering engines used by Outlook, Gmail, or Apple Mail.

    Always test in your top 3–5 recipient clients before sending a campaign. The editor preview catches layout and structural issues, but only real-client testing reveals engine-specific rendering differences.

    Steps to Verify and Fix Email Client Compatibility

    Step 1 — Check Email Size and Structure in Preview

    Click the Preview icon in the top toolbar. Review the Email size: approx. X KB indicator. If your HTML exceeds 102 KB, Gmail will clip the email and display a “View entire message” link, hiding content below the cutoff.

    Reduce file size by removing unused sections, consolidating inline styles, and compressing image references. Also verify that your desktop and mobile layouts both display correctly in the side-by-side preview before proceeding.

    Step 2 — Test Dark Mode Rendering

    In the Preview screen, enable the Dark mode preview toggle. Check that text remains legible against inverted backgrounds. Verify that logos and icons with transparency are still visible — dark logos on transparent backgrounds may disappear when the client inverts the background to dark.

    If critical elements lose visibility, add a light-colored background or border directly to those image or text blocks within the editor. Note that this preview is an approximation; actual dark mode behavior varies across clients.

    Step 3 — Verify Rendering in Real Email Clients

    Click Send test email in the top toolbar. Send the email to accounts you control on Gmail, Outlook, and Apple Mail at minimum. Open each test email and compare against the editor preview.

    Look for differences in font rendering, button appearance, background colors, image spacing, and column alignment. If your audience uses Yahoo Mail or Samsung Mail, include those in your test round as well.

    Step 4 — Identify and Fix Client-Specific Issues

    Compare your test results against the known behaviors listed in the Client Rendering Reference below. If Outlook is collapsing your layout, check for unsupported CSS properties like max-width or flexbox. If Gmail is stripping your styles, confirm that all styling is applied inline rather than in a <style> block in the <head>.

    If images appear oversized on Apple Mail retina displays, verify that your images include explicit width and height attributes. Make corrections in the editor or in a Custom HTML block, then repeat the Send test email process to confirm fixes.

    Step 5 — Confirm Final Output Before Sending

    After making all corrections, click Preview one final time to verify file size is under 102 KB, check both light and dark mode views, and confirm the mobile layout is intact.

    Then send a final test email via Send test email to your primary testing inboxes. Only proceed to Save & continue and the Recipients step once rendering is confirmed across your target clients.

    Client Rendering Reference

    Outlook (Windows) — Uses the Microsoft Word rendering engine (WordHTML), which has severely limited CSS support. It does not recognize max-width, margin: 0 auto, background-image on <div> elements, border-radius, padding on <p> or <a> tags, or CSS float. Use <table>-based layouts with inline styles and VML for background images. Set explicit pixel widths on <td> elements instead of percentage widths where precision matters.

    Outlook (Mac/mobile) — Uses the WebKit rendering engine, providing significantly better CSS support than Outlook on Windows. Supports border-radius, background-image, and most modern CSS properties. Emails designed for web-based clients generally render well. However, do not assume consistency between Windows and Mac versions of Outlook.

    Gmail (web) — Strips <style> blocks from the <head> of emails exceeding 8,192 characters and does not support embedded <style> in all cases. Use inline styles for all critical styling. Gmail clips emails with HTML larger than 102 KB. It does not support position, float, or form elements. Check file size in the Preview screen’s Email size indicator.

    Gmail (Android/iOS) — Shares Gmail web’s rendering pipeline but applies additional constraints on mobile viewport. Supports inline styles but does not support <style> in the <head>. Some media queries may be ignored. Test responsive behavior via Send test email to a Gmail mobile account.

    Apple Mail (macOS/iOS) — Uses the WebKit engine and provides the broadest CSS support of any major email client. Supports <style> blocks, media queries, border-radius, background-image, CSS animations, and web fonts via @import. On retina displays, images without explicit width attributes may render at 2x size. Always set width and height attributes on <img> tags.

    Yahoo Mail — Rewrites CSS class names and can strip or modify <style> blocks unpredictably. Use inline styles as the primary method. Supports background-color and basic padding/margin, but complex selectors may not be applied. Test background images and button styles specifically.

    Samsung Mail — Uses an Android WebView-based engine. Generally supports inline styles and basic CSS well. However, dark mode behavior is aggressive and may invert background colors and images. Ensure sufficient contrast in both light and dark contexts. Test via Send test email on a Samsung device.

    Thunderbird — Uses the Gecko rendering engine with moderate CSS support. Supports <style> blocks and many CSS properties, but lacks support for some modern features like CSS Grid. Generally reliable for table-based layouts with inline styles.

    Compatibility Tips

    Use inline styles as the baseline — Inline styles are the only styling method guaranteed to work across all major email clients. Even if you use a <style> block, always include inline fallbacks for critical properties like color, font-family, font-size, and background-color.

    Set explicit dimensions on images — Always include width and height attributes directly on <img> tags. This prevents oversized rendering on retina displays in Apple Mail and ensures Outlook reserves the correct space even if images are blocked.

    Keep HTML under 102 KB — Monitor the Email size indicator in the Preview screen. Gmail clips emails exceeding this threshold, which hides content and breaks tracking. Remove redundant code, unused sections, and excessive whitespace to stay under the limit.

    Use web-safe font stacks — Custom and Google Fonts are only supported in Apple Mail, iOS Mail, and some versions of Thunderbird. Outlook and Gmail fall back to system fonts. Always define a complete font-family stack ending with a generic family like Arial, Helvetica, sans-serif.

    Test buttons as bulletproof buttons — CSS-styled <a> links may lose padding, border-radius, or background-color in Outlook on Windows. Use table-based button structures with bgcolor on a <td> element for Outlook compatibility, or use a Button block from the editor which generates compatible code.

    Common Issues

    Email is clipped in Gmail → The HTML file size exceeds 102 KB. Check the Email size indicator in the Preview screen and reduce content, remove unused sections, or consolidate inline styles until the size is below 102 KB.

    Buttons appear as plain text links in Outlook → Outlook on Windows does not support padding or border-radius on <a> tags. Use a table-based button structure with bgcolor applied to a wrapping <td>, or use the editor’s Button block which generates Outlook-compatible code.

    Background images do not display in Outlook → Outlook on Windows does not support background-image on <div> or <td> elements via standard CSS. Use VML (Vector Markup Language) code in a Custom HTML block to render background images in Outlook while using CSS background-image as a fallback for other clients.

    Fonts change between clients → Custom and Google Fonts render only in clients that support them, such as Apple Mail. Outlook and Gmail substitute the nearest system font. Define a full font-family fallback stack in your Template settings under Headlines and Paragraph to control which system font is used when your preferred font is unavailable.

    Dark mode inverts colors unexpectedly → Email clients with dark mode may invert background colors, swap light text to dark, or alter image backgrounds. Use the Dark mode preview toggle in the Preview screen to check. Avoid transparent backgrounds on logos, and ensure text has sufficient contrast in both light and dark contexts.

    Layout breaks only in Outlook → Outlook on Windows ignores max-width, margin: auto, and CSS-based centering. Replace <div>-based layouts with <table> structures using explicit pixel widths and align="center" attributes for Outlook compatibility.

    Images are oversized on Apple Mail retina screens → Apple Mail renders images at their native resolution on retina displays. If an image is 1200 px wide but displayed at 600 px, it appears full size without explicit constraints. Add width="600" directly on the <img> tag and include style="max-width: 100%" for responsive scaling.

    FAQs

    Why does my email look different in Outlook than in Gmail?

    Outlook on Windows uses the Microsoft Word rendering engine, which has severely limited CSS support compared to browser-based rendering engines. Gmail uses its own pipeline that strips <style> blocks and restricts certain properties. These fundamental engine differences mean the same HTML produces different visual results. Design with both in mind and test in each client via Send test email.

    How do I know if Gmail is clipping my email?

    Gmail clips emails with HTML larger than 102 KB, showing a “View entire message” link at the bottom. Check the Email size: approx. X KB indicator in the editor’s Preview screen to monitor your file size before sending.

    Can I make my email render identically in every client?

    No. Email clients use different rendering engines with varying levels of HTML and CSS support. The goal is consistent appearance, not pixel-perfect parity. Test in your top 3–5 recipient clients using Send test email and optimize for those.

    Should I use table-based layouts or div-based layouts?

    Table-based layouts remain the most reliable method for cross-client compatibility, particularly for Outlook on Windows. The Sender drag-and-drop editor generates table-based HTML by default. If you use a Custom HTML block, use <table> structures with inline styles for sections that must render consistently in Outlook.

    Do web fonts work in email?

    Only in a few clients. Apple Mail (macOS/iOS), iOS Mail, and some versions of Thunderbird support web fonts via @font-face or @import. Gmail, Outlook, and Yahoo Mail ignore them and fall back to the font-family stack. Always include web-safe fallback fonts in your declarations.

  • Importing Custom HTML

    This guide explains how to import and use custom HTML code as your full email design in Sender’s Custom HTML email editor.

    Where to Find This Feature

    When creating or editing a campaign, navigate to the Design step. At the top of the design selection page, choose the Custom HTML email tab. This opens a full-screen code editor on the left with a live preview panel on the right. If you have already selected a design type, click Edit design on the Email campaign design page to reopen the editor.

    You can also reach the editor from an existing draft by clicking the edit icon next to the campaign in Email campaigns, then clicking Design in the top navigation bar.

    Steps to Import Custom HTML

    Step 1 — Select the Custom HTML Email Editor

    On the Design step of campaign creation, click the Custom HTML email tab at the top of the page. Sender loads a code editor pre-populated with a starter template that includes a  declaration, a-based layout, and a {$unsubscribe_link} merge tag.

    The live preview panel on the right renders the default template immediately.

    Step 2 — Paste or Write Your HTML

    Select all the default code in the editor and replace it with your own HTML. Paste your complete email document, starting from  through . The live preview panel updates automatically as you type or paste. Use the + and − controls above the code editor to adjust the font size for readability.

    Step 3 — Import HTML from a URL (Optional)

    To pull HTML from an external source, click the Import from URL icon in the top toolbar (the downward arrow icon).

    In the Enter URL dialog, paste the full URL of your hosted HTML file and click Import. Sender fetches the HTML content from the URL and loads it into the code editor, replacing any existing code.

    Step 4 — Preview and Verify the Output

    Check the live preview panel on the right side of the editor. Toggle between Desktop and Mobile views using the icons in the top toolbar to verify rendering at both viewport widths. Review the Email size indicator in the upper-right corner — keep your HTML under 102 KB to prevent clipping in Gmail and other email clients.

    Step 5 — Save and Send a Test Email

    Click the Save changes icon in the top toolbar to save your work. Then click Send test email to open the send dialog — enter a recipient address and click Send.

    Verify the rendering and link behavior in your inbox before proceeding. When ready, click Save and continue to advance to the Recipients step.

    Code Reference — Required as the first line of your imported HTML.

    Sender expects a complete HTML document structure with elements.

    Sender’s default template uses nested elements with border=”0″, cellpadding=”0″, cellspacing=”0″, and width=”100%”.

    {$unsubscribe_link} — Sender’s unsubscribe merge tag.

  • Creating Signup Forms

    This guide walks you through how to create and publish a signup form in Sender for the first time — from naming your form to embedding it on your website.

    Where to Find This Feature

    In the Sender dashboard, go to Forms in the left sidebar.

    sender-subscription-forms-lists

    On this page, you’ll see a list of any existing forms with their type, status, and performance stats. If you haven’t created a form yet, you’ll see a welcome screen with a Create your first form button. If you already have forms, click Create a new form in the upper-right corner.

    Steps to Create a Signup Form

    Step 1 — Start a New Form

    Click Create your first form on the welcome screen, or click Create a new form in the upper-right corner of the Forms page. You’ll be taken to the New form page where you’ll see a Form name field and three form type options below it.

    Step 2 — Name Your Form and Choose a Form Type

    Enter a name in the Form name field. This is an internal name to help you identify the form later.

    sender-subscription-forms-types

    Below the name field, choose one of the three available form types: Embedded form — a static form that sits directly within your webpage content. Popup form — an overlay that appears on top of your page based on display rules you define. Spin-to-win wheel — an interactive wheel that visitors spin to reveal an offer or incentive.

    Click the orange button below your chosen type (for example, Create new popup) to continue.

    Step 3 — Select a Template

    A template gallery opens with pre-designed layouts for your chosen form type. Browse the available templates or use the Find template by name search bar at the top to locate a specific one. You can also switch between All templates and Themed templates using the filter on the left side.

    Click a template to select it. The form builder opens with your chosen template loaded and ready to customize.

    Step 4 — Customize the Form Design

    In the form builder, click the Design tab on the right-side panel. This is where you adjust the visual appearance of your form. You can expand each section to configure it:

    sender-subscription-form-design

    Box settings — padding, border, background color, and background image. Logo settings — add or change a logo.

    Text settings — heading and body text styles. Inputs and Input placeholders — style the form fields. Submit button — change the button color, text, and shape. Close button, Overlay, and Shadow — control the popup’s surrounding appearance.

    The form preview in the center updates in real time as you make changes.

    Step 5 — Configure Form Fields

    Click the Settings tab, then expand the Fields section. By default, your form includes an Email field and a Name field. Each field has a Field Label and an Input Placeholder you can edit. You can also mark fields as Required using the checkbox.

    To add more fields, click Add field and select from the available options such as Last name, Phone number, or Birthday. You can also click Create a new field to define a custom field.

    Step 6 — Connect to a Subscriber Group

    Still under the Settings tab, expand the Groups section. Under Add subscribers to these groups, click the Select option dropdown and choose a subscriber group. A subscriber group is the list where new signups from this form will be stored.

    sender-subscription-form-settings

    You can also use the Add group button under Allow subscribers to choose their interest groups to let visitors pick which groups they want to join.

    Step 7 — Set Display Behaviour

    Click the Behaviour tab to control when and where your form appears. This tab includes four sections:

    sender-subscription-form-behaviour

    When to show popup? — Choose triggers such as showing the form after a set number of seconds on the page, when the user scrolls to a certain percentage, when they try to leave the page, or when they click a specific element.

    Frequency — Set how often the popup reappears for visitors who haven’t subscribed (for example, every 30 days). Check Always show to display it on every visit.

    Schedule — Choose Instant to activate the form immediately, or Specific time to set a start and end date.

    Visibility — Choose Always show, Hide on specific pages, or Show on specific pages. You can also hide the form on specific device types using the Hide on desktop, Hide on mobile devices, or Hide on tablet devices checkboxes.

    Step 8 — Save and Publish

    Click Save and continue in the upper-right corner of the form builder. This saves your form and takes you to the Publishing settings page.

    sender-subscription-form-publishing-settings

    On this page, you’ll see your form’s status displayed as DRAFT. Review the Double opt-in settings toggle if you want to send confirmation emails to new subscribers. When you’re ready, click the Publish button to make your form live. The page also displays your form URL, a QR code, and a JavaScript snippet you can copy and paste into your website’s HTML to embed the form.

    What Happens Next

    After publishing, your form becomes active and will appear on your website according to the display rules you configured in the Behaviour tab. You can also share it directly using the form URL shown on the Publishing settings page.

    New signups are automatically added to the subscriber group you selected during setup. You can view your subscribers under the Subscribers section in the dashboard.

    Your form’s status updates from DRAFT to active once published. To find and manage your forms at any time, go to Forms in the left sidebar. From the forms list, you can view stats, edit the form, open its settings, or duplicate and rename it using the action menu.

    Common Issues

    Form stays in DRAFT status after saving → Clicking Save and continue saves your form but does not publish it. You must click the Publish button on the Publishing settings page to make your form live.

    Popup does not appear on the website → Verify that the JavaScript snippet from the Publishing settings page is installed on your site before the closing </head> tag. Also check that the form’s Visibility settings in the Behaviour tab are not hiding it on the device or page you’re testing.

    New signups are not appearing in the expected group → Open the form builder, go to the Settings tab, and expand the Groups section. Confirm that the correct subscriber group is selected under Add subscribers to these groups.

    Form fields are not showing on the live form → Make sure the fields you added under Settings → Fields are saved. Click Save and continue again and republish the form to apply changes.

    FAQs

    What form types are available in Sender?

    Sender offers three form types: Embedded form, Popup form, and Spin-to-win wheel. Embedded forms sit within your page content, popups overlay the page based on trigger rules, and spin-to-win wheels display an interactive wheel visitors can spin to receive an offer.

    Can I add custom fields to my signup form?

    Yes. In the form builder, go to the Settings tab and expand the Fields section. Click Add field, then select an existing field like Last name, Phone number, or Birthday — or click Create a new field to define your own.

    How do I connect my form to a specific subscriber group?

    In the form builder under the Settings tab, expand the Groups section. Use the Select option dropdown under Add subscribers to these groups to choose the group where new signups will be stored.

    Can I embed the form on my website?

    sender-subscription-form-publishing-settings

    Yes. After saving your form, the Publishing settings page provides a JavaScript snippet you can copy and paste into your website’s HTML before the closing </head> tag. You can also use the JavaScript explicit rendering option for more control over where the form appears.

    Can I preview my form on different devices?

    sender-subscription-form-preview

    Yes. The form builder toolbar at the top includes device preview icons that let you switch between desktop and mobile views to see how your form will look on different screen sizes.

    How do I edit a form after publishing?

    sender-subscription-form-edit

    Go to Forms in the left sidebar. Find your form in the list and click the edit (pencil) icon, or click the settings (gear) icon to go directly to Publishing settings. You can also click Edit on the Publishing settings page to reopen the form builder.

  • Saved Blocks and Global Styles

    This guide explains how to save sections for reuse and configure global styles in Sender’s drag-and-drop email editor.

    Where to Find These Features

    Saved sections are managed at the section level. Select any section on the canvas to reveal the section toolbar, which includes the Save section icon (bookmark). Saved sections are stored under Section templates → My saved sections in the left sidebar.

    drag-and-drop-builder-saved-sections

    Global styles are configured in the Template settings panel. Click the Template settings icon (the settings card icon) in the left sidebar to open it.

    drag-and-drop-builder-template-settings

    This panel contains collapsible sections for General settings, Headlines, Paragraph, Buttons, Separator, Section settings, and Preview & Unsubscribe.

    Steps to Save and Reuse Sections

    Step 1 — Save a Section to Your Library

    Click the edge or label of any section on the canvas to select it. The section toolbar appears above the section with six icons.

    drag-and-drop-builder-save-section

    Click the Save section icon (bookmark). A Save section to my library dialog opens with a Name field pre-filled with the section’s name. Edit the name if needed, then click Save. The section is now stored in your personal library.

    Step 2 — Reuse a Saved Section

    Click the Section templates icon in the left sidebar to open the panel. Select My saved sections at the top of the category list. A secondary panel opens showing thumbnail previews of all saved sections with their names. Drag a saved section from this panel onto the canvas to insert it into your email at the desired position.

    Step 3 — Configure Global Styles

    Click the Template settings icon in the left sidebar. Expand any style category — Headlines, Paragraph, Buttons, Separator, Section settings, or Preview & Unsubscribe — to reveal its global settings. Adjust values such as Font family, Font size, Font color, Alignment, or Line height. Changes apply to all matching blocks in the email that have not been individually customized.

    Step 4 — Overwrite or Revert Individual Block Styles

    When a block has been individually styled, its settings panel displays an orange asterisk (*) next to each customized property. Click Revert to default style in the block’s settings panel to reset it to the current global style.

    drag-and-drop-builder-block-settings

    Alternatively, after customizing a single block, click Apply this style to all headlines (or the equivalent button for the block type) to push that block’s custom style to all blocks of the same type.

    drag-and-drop-builder-template-settings

    In Template settings, if blocks have custom overrides, a notice such as “You have 4 paragraphs with custom styling” appears with an Overwrite custom styles button that resets all overrides.

    Available Settings

    General Settings

    Background color — Sets the outer background color surrounding the email content area. Accepts a hex color value.

    Content background color — Sets the background color of the main email content area. Accepts a hex color value.

    Background image — Adds a background image behind the entire email. Click Change to upload or select an image.

    Language — Sets the language direction for the email template. Select a value from the dropdown.

    Preheader text — Defines the preview text shown in the inbox next to or below the subject line. Enter text in the input field.

    Headlines

    Type — Switches between H1, H2, and H3 heading levels. Each level stores its own set of global styles.

    Font family — Sets the default font for all headline blocks of the selected type. Choose from the dropdown.

    Font color — Sets the default text color for headlines. Accepts a hex color value.

    Font size — Sets the default size in pixels for headlines. Use the stepper control to adjust.

    Alignment — Sets the default text alignment: left, center, or right.

    Font styling — Applies default formatting: Bold, Italic, Underline, or Strikethrough.

    Link color — Sets the default color for links inside headline blocks. Accepts a hex color value.

    Line height — Controls the default vertical spacing between lines. Entered as a percentage value.

    Paragraph

    Font family — Sets the default font for all paragraph blocks. Choose from the dropdown.

    Font color — Sets the default text color. Accepts a hex color value.

    Font size — Sets the default paragraph font size in pixels.

    Alignment — Sets the default text alignment: left, center, right, or justify.

    Link color — Sets the default color for links inside paragraph blocks.

    Line height — Controls the default vertical spacing between lines as a percentage value.

    Buttons

    Color — Sets the default button background fill color.

    Alignment — Sets the default button position: left, center, or right.

    Corner radius — Controls how rounded the button corners are. Adjust using the slider or enter a pixel value.

    Width — Toggles between auto-width (sized to text) and full-width (spans the column).

    Padding (Horizontal / Vertical) — Sets the internal spacing around the button text.

    Button spacing — Controls the gap between multiple buttons in the same block.

    Font family — Sets the default font for button text.

    Font color — Sets the default button text color.

    Font size — Sets the default button text size in pixels.

    Font styling — Applies default formatting to button text: Bold, Italic, Underline, or Strikethrough.

    Border Style — Sets the default button border style: solid, dotted, dashed, or double.

    Border Color — Sets the default border color.

    Border Width — Sets the default border thickness in pixels.

    Separator

    Style — Sets the default separator line style: none, solid, dotted, dashed, or double.

    Color — Sets the default separator line color. Accepts a hex color value.

    Thickness — Sets the default separator line thickness in pixels.

    Width — Sets the default separator width as a percentage of the column. Adjust using the slider or enter a value.

    Section Settings

    Spacing (Top, Bottom, Left, Right) — Sets the default internal padding for all sections on desktop.

    Column spacing — Sets the default horizontal gap between columns in multi-column sections on desktop.

    Mobile Spacing (Top, Bottom, Left, Right) — Sets the default internal padding for sections on mobile devices.

    Mobile Column spacing — Sets the default horizontal gap between columns on mobile devices.

    Preview & Unsubscribe

    Font family — Sets the font for the preheader and unsubscribe text at the top and bottom of the email.

    Font color — Sets the text color for the preview and unsubscribe area.

    Font size — Sets the text size for the preview and unsubscribe area.

    View in browser link — Toggles the “View in browser” link visibility. Options: Show or Hide.

    Unsubscribe link — Toggles the unsubscribe link visibility. Options: Show or Hide.

    Block Tips

    Use global styles first — Configure Template settings before editing individual blocks. This establishes a consistent design baseline and reduces the need for per-block adjustments.

    Name saved sections descriptively — When saving a section, edit the default name in the Save section to my library dialog to reflect its purpose, such as “Product Feature 2-Column” or “Footer with Social Links.” Descriptive names make sections easier to locate later.

    Watch for the asterisk indicator — An orange asterisk (*) next to a setting name in a block’s panel means that property has been customized away from the global style. Use this to quickly identify which blocks have overrides.

    Use Overwrite custom styles carefully — The Overwrite custom styles button in Template settings resets all custom-styled blocks of that type back to the global style. Review your design before clicking, as block-level customizations will be lost.

    Save sections across campaigns — Saved sections persist in My saved sections across all campaigns in your account. Build a library of reusable sections like headers, footers, and product layouts to speed up future email creation.

    Common Issues

    Saved section not appearing in My saved sections → The section may not have been saved successfully. Select the section on the canvas, click the Save section icon in the toolbar, enter a name, and click Save. Verify it appears under Section templates → My saved sections.

    Global style changes not applying to some blocks → Blocks with individual customizations are not affected by global style changes. Open Template settings, expand the relevant category, and click Overwrite custom styles to reset all custom-styled blocks of that type to the global defaults.

    Asterisk appears next to a setting but no change was made → The block may have inherited a custom style from a template or a duplicated section. Click Revert to default style in the block’s settings panel to realign it with the current global style.

    Saved section looks different after inserting → Global styles in the current email may differ from the original campaign where the section was saved. Adjust Template settings to match, or update the individual blocks within the inserted section.

    FAQs

    Can I rename or edit a saved section? 

    No. There is no rename or edit option in the My saved sections panel. To update a saved section, delete the existing one by clicking the delete icon on its thumbnail, make changes to the section on the canvas, and save it again with the new name.

    Do global styles affect all campaigns? 

    No. Template settings are scoped to the individual email you are editing. Changing global styles in one campaign does not affect other campaigns.

    What happens when I click Apply this style to all headlines? 

    The current block’s custom style replaces the global headline style and is applied to every headline block of the same type (H1, H2, or H3) in the email. Blocks that were previously using the global default will be updated automatically.

    Can I delete a saved section from my library? 

    Yes. Open Section templates → My saved sections, then click the delete icon (trash) in the top-right corner of the saved section’s thumbnail. The section is removed permanently from your library.

    Does the Overwrite custom styles button affect all block types? 

    No. It only affects the specific block type within the expanded category. For example, clicking it under Paragraph resets only paragraph blocks, not headlines or buttons.

  • Brand Settings (Colors, Fonts)

    This guide explains how to configure your brand colors, fonts, and global styles in Sender’s email editor using Template settings.

    Where to Find This Setting

    All brand-level color and font controls are located in the Template settings panel. In the editor’s left sidebar, click the Template settings icon (the fourth icon from the top, resembling a palette). This opens a panel with collapsible sections: General settings, Headlines, Paragraph, Buttons, Separator, Section settings, and Preview & Unsubscribe. Each section controls global defaults for its respective block type across the entire email.

    template-settings

    If you need to save or reuse your branded design as a starting template, use the Template options icon (the third icon from the top in the sidebar), which provides Change template and Save as template options.

    Steps to Configure Brand Settings

    Step 1 — Set Your Brand Background Colors

    In the Template settings panel, expand General settings at the top. Set Background color to your brand’s outer background hex value — this controls the color behind the entire email body. Set Content background color to define the background of the content area itself.

    Together, these two values create the foundational color contrast for your email. You can also click Change next to Background image to upload a full-width background image behind the email body.

    Step 2 — Configure Headline and Paragraph Typography

    Expand the Headlines section. Use the Type tabs (H1, H2, H3) to configure each heading level independently. For each type, set Font family from the dropdown, which offers Web Safe Fonts (Arial, Georgia, Verdana, Times New Roman, etc.) and Custom Fonts (Google Fonts such as Arvo, Cabin, and others). Set your brand’s Font color, Font size, Alignment, and Line height. Use Font styling to apply bold, italic, underline, or strikethrough. Set Link color to match your brand’s accent color for any links within headlines.

    Then expand Paragraph and repeat the same process — set Font family, Font color, Font size, Alignment, Link color, and Line height. If blocks in your email were previously customized individually, a notice will appear stating how many have custom styling. Click Overwrite custom styles to apply your new global paragraph settings to all paragraph blocks at once.

    Step 3 — Style Buttons to Match Your Brand

    Expand the Buttons section. Under BUTTON STYLES, set Color to your brand’s primary action color — this controls the button fill. Adjust Alignment (left, center, or right), Corner radius (in px) for rounded or sharp corners, and Width to toggle between auto-width or full-width buttons. Under PADDING, configure Horizontal and Vertical values to control internal button spacing, and set Button spacing for distance between stacked buttons.

    template-settings-buttons

    Under TYPOGRAPHY, choose a Font family, set the Font color for button text (commonly white over a colored fill), adjust Font size, and apply Font styling as needed. Under BORDERS, select a border Style (solid, dotted, dashed, or double), set the Color, and define the Width in pixels. If any buttons have been individually customized, click Overwrite custom styles to unify them with these global settings.

    Step 4 — Verify Your Brand Colors in Dark Mode

    Click the Preview button (eye icon) in the top toolbar. The editor displays your email in both desktop and mobile views. Toggle Dark mode preview in the top-right corner of the preview screen to see how your background colors, text colors, button fills, and images adapt in dark mode email clients.

    campaign-preview-dark-mode

    Review both views to confirm your brand colors remain legible and your content background provides sufficient contrast against the inverted dark mode backgrounds.

    Design Best Practices

    Match link colors across all text types — Set the same Link color value in both Headlines and Paragraph sections within Template settings to ensure hyperlinks appear consistent throughout the email.

    Use Content background color for contrast — Set Content background color to white or a light brand shade and Background color to a darker or neutral tone. This creates a clear visual boundary between the email body and the surrounding area.

    Apply global styles before customizing individual blocks — Configure all values in Template settings first, then only override at the block level where necessary. This reduces inconsistencies and makes the Overwrite custom styles button more effective when you need to reset.

    Keep button typography simple — Use the same Font family for button text as your paragraph text. Set Font size to 14–16 and ensure the Font color contrasts sharply against the button Color fill for readability.

    Test dark mode early — Toggle Dark mode preview each time you change background colors or text colors. Some color combinations that work in light mode may lose contrast or become unreadable in dark mode clients.

    Common Issues

    Global font changes not applying to all blocks → Blocks that were individually styled before the global change retain their custom settings. Open the relevant section in Template settings (e.g., Paragraph or Buttons) and click Overwrite custom styles to force the global values onto all existing blocks.

    Button color looks different in dark mode → Some dark mode email clients override background colors. Use the Dark mode preview toggle in the Preview screen to identify affected buttons, and consider using higher-contrast color pairings.

    Font family not rendering as expected → Fonts listed under Custom Fonts (Google Fonts) may not render in all email clients. Email clients that do not support the selected font will fall back to the closest Web Safe Font. Choose a web-safe fallback that closely matches your brand typeface.

    FAQs

    How do I ensure my brand colors are consistent across all blocks?

    Configure your primary colors in Template settings under each section — Headlines, Paragraph, and Buttons. This sets the global default. Blocks that have been individually customized will need to be reset using Overwrite custom styles.

    Can I preview how my email looks in dark mode?

    Yes. Click the Preview button (eye icon) in the top toolbar, then toggle Dark mode preview in the top-right corner to see how your colors, backgrounds, and images adapt in dark mode email clients.

    How do I create a reusable branded template?

    Design your email with all brand styles applied in Template settings, then click the Template options icon in the left sidebar and select Save as template. You can select this template as a starting point for future campaigns.

    What is the difference between Background color and Content background color? 

    Background color controls the outer area surrounding the email body — the frame visible behind the content. Content background color controls the background of the main content area where your blocks are placed. Using both together creates a layered visual effect.

    Can I use Google Fonts in my email?

    Yes. The Font family dropdown in Template settings includes both Web Safe Fonts and Custom Fonts (Google Fonts). Select any available Google Font, but note that email clients that do not support it will display the closest web-safe fallback instead.

  • Dark Mode Emails

    This guide explains how to preview and optimize your email for dark mode rendering in Sender’s drag-and-drop email editor.

    Where to Find This Setting

    The primary dark mode control is in the Preview tool. Click the Preview button (eye icon) in the top toolbar to open the preview panel, which displays your email in both desktop and mobile views. The Dark mode preview toggle appears in the top-right corner of this panel.

    campaign-preview

    Color settings that influence dark mode rendering are located across multiple panels. Background color and Content background color are found under Template settings → General settings in the left sidebar.

    template-settings

    Per-section colors are set in Section settings on the right panel when a section is selected.

    section-settings

    Per-block and per-column background colors are available in Block settings and Column settings when any content block is selected.

    block-settings

    Text color and Link color are configured within individual block settings, such as Headline settings or Paragraph settings.

    Steps to Optimize for Dark Mode

    Step 1 — Preview Your Email in Dark Mode

    Click the Preview button in the top toolbar. In the preview panel, locate the Dark mode preview toggle in the top-right corner and switch it on. Both the desktop and mobile previews update immediately to simulate dark mode rendering.

    campaign-preview-dark-mode

    Review the entire email for any areas where text becomes unreadable, colors lose contrast, or images blend into the dark background.

    Step 2 — Adjust Background and Text Colors for Contrast

    Return to the editor and select any section or block where dark mode caused readability issues. In Template settings → General settings, check that Background color and Content background color use values that produce sufficient contrast when inverted.

    In Section settings, review the Content background color and Section background color. In individual block settings, adjust Text color and Link color to ensure they remain legible against both light and dark backgrounds. Avoid pure white (#ffffff) backgrounds paired with very light text, as dark mode may invert only one of these values.

    Step 3 — Test with a Real Inbox

    Click Send test email in the top toolbar to deliver a test message to your own inbox. Open the email on devices and email clients that support dark mode, such as Apple Mail, Gmail, or Outlook mobile.

    Compare the actual rendering with the editor’s Dark mode preview to identify any differences. The preview is an approximation — real-client testing confirms how your design actually appears.

    How It Renders

    Apple Mail (macOS and iOS) — Apple Mail applies a full color inversion in dark mode, swapping light backgrounds to dark and adjusting text colors automatically. Light-colored images with no transparency generally display as expected, while transparent PNGs may show unexpected dark areas behind them.

    Gmail (Android and web) — Gmail’s dark mode behavior varies by version and device. On Android, it may invert background colors, tint light backgrounds darker, or leave the email unchanged depending on the color scheme detected. The web version in a dark-themed browser may not apply any dark mode changes to the email itself.

    Outlook (desktop and mobile) — Outlook on Windows uses its own dark mode rendering engine, which can heavily modify background colors and override text colors. Outlook mobile apps generally apply lighter inversions. Buttons and images are typically preserved, but background color swaps can reduce contrast in unexpected areas.

    Yahoo Mail and AOL — These clients apply a partial dark mode that inverts some background colors while preserving others. Results can differ from the editor’s preview.

    Display Tips

    Use high-contrast color pairings — Choose text and background colors that maintain readability whether the background stays light or is inverted to dark. Avoid low-contrast combinations like light gray text on white.

    Avoid relying on background images alone — Some email clients strip or fail to render background images. Always set a fallback Background color in Section settings or Column settings to maintain contrast if the image does not load in dark mode.

    Use solid-background images instead of transparent PNGs — Dark mode can fill transparent areas with the inverted background color, causing logos or icons to look distorted. Export images with a solid background to prevent this.

    Check both desktop and mobile previews — Dark mode rendering can differ between the desktop and mobile version of the same email client. Toggle Dark mode preview on and inspect both views in the Preview panel.

    Send test emails to multiple clients — The Dark mode preview toggle is an approximation. Click Send test email and open the message in at least two or three different email clients with dark mode enabled to verify your design.

    Common Issues

    Text disappears in dark mode → The email client inverted the background to dark but the text color remained dark or was not adjusted. Select the affected block, open its settings, and change Text color to a value that contrasts against both light and dark backgrounds, then re-check with Dark mode preview.

    Logo or icon looks broken on a dark background → The image uses a transparent background, and the email client filled the transparent area with a dark color. Re-export the image with a solid background that works on both light and dark surfaces.

    Button color changes unexpectedly → Some email clients override inline background colors in dark mode. Button colors set through the editor are generally preserved, but certain Outlook versions may alter them. Test with Send test email to confirm, and consider using a bold, high-saturation button color that remains visible on dark backgrounds.

    Background color renders differently than the preview → The Dark mode preview is an approximation. Different email clients use different dark mode strategies — some invert all colors, some only adjust backgrounds, and some do nothing. Always verify with test emails sent to real inboxes.

    FAQs

    Can I control exactly how my email appears in dark mode?

    Dark mode rendering is controlled by each email client, not by the sender. The editor does not include settings that override dark mode behavior in recipients’ inboxes. You can optimize your color choices and test with Dark mode preview, but the final rendering depends on the email client and its version.

    Does the Dark mode preview show exactly how my email will look?

    No. The Dark mode preview toggle provides a general approximation of dark mode behavior. The tooltip in the editor confirms that due to differences in email clients, browsers, and devices, exact rendering may vary. Always send a test email to verify in your target clients.

    Should I design my email specifically for dark mode?

    Rather than designing exclusively for dark mode, design for both light and dark contexts. Use high-contrast color pairings, avoid transparent image backgrounds, set fallback background colors, and test with the Dark mode preview toggle and Send test email before finalizing your campaign.

    Will dark mode change my button colors?

    Most email clients preserve button background colors in dark mode. However, certain versions of Outlook may adjust them. Use a distinct, saturated button color and verify rendering through test emails.

    Why does my email look different in Outlook dark mode compared to Apple Mail dark mode?

    Each email client applies its own dark mode algorithm. Apple Mail performs a full color scheme inversion, while Outlook on Windows uses a proprietary rendering engine that can change colors more aggressively. There is no universal standard for dark mode in email, so results vary across clients.

  • Mobile Responsiveness

    This guide explains how to ensure your email adapts correctly across mobile devices, desktop clients, and varying screen sizes in Sender’s drag-and-drop email editor.

    Where to Find This Setting

    Mobile responsiveness controls are spread across multiple locations in the editor:

    Section settings — Click any section label (e.g., Section: Headline & Image) on the canvas to open the right-side panel. Here you’ll find MOBILE SPACING values and Visibility on mobile and Visibility on desktop toggles.

    drag-and-drop-builder-column-settings

    Column settings — Select any block, then expand Column settings at the bottom of the right-side panel. This contains the Visibility on mobile toggle with Show and Hide options.

    drag-and-drop-builder-template-settings

    Template settings — Click the Template settings icon in the left sidebar, then expand Section settings to configure global SPACING and MOBILE SPACING defaults that apply across all sections.

    campaign-preview

    Preview — Click the Preview button (eye icon) in the top toolbar to view desktop and mobile renderings side by side, along with the Dark mode preview toggle.

    Steps to Optimize Your Email for Mobile

    Step 1 — Adjust Mobile Spacing at the Section Level

    Click a section on the canvas to open Section settings in the right panel. Scroll to the MOBILE SPACING area. Set Top, Bottom, Left, and Right values independently from your desktop SPACING values.

    section-settings-mobile-settings

    Reduce Left and Right padding to give content more room on narrow screens. Set Column spacing to 0 to eliminate gaps between stacked columns on mobile. Verify your changes in the Preview tool.

    Step 2 — Control Column and Section Visibility by Device

    In Section settings, locate Visibility on desktop and Visibility on mobile. Toggle either to Hide to prevent that section from displaying on the corresponding device type.

    mobile-preview

    For column-level control, select a block inside the column, expand Column settings, and set Visibility on mobile to Hide to remove that specific column on smaller screens. Use this to show simplified layouts on mobile while keeping richer content on desktop.

    Step 3 — Preview Across Devices and Dark Mode

    Click the Preview button in the top toolbar. The editor displays a desktop view on the left and a mobile view on the right, side by side. Toggle Dark mode preview in the top-right corner to see how your colors, backgrounds, and text render in dark mode email clients.

    campaign-preview

    Review how multi-column layouts (e.g., 50/50, 33/33/33) stack vertically in the mobile preview. Use Send test email in the top toolbar to send a rendered version to your inbox and verify rendering in actual email clients.

    Step 4 — Fine-Tune Block Spacing and Alignment for Mobile

    Select any block and expand Block settings in the right panel. Adjust SPACING values (Top, Bottom, Left, Right) to control padding around individual blocks.

    For the Logo block, use the separate Alignment on mobile setting to override the desktop alignment — for example, centering a logo on mobile even if it’s left-aligned on desktop. Check the mobile preview after each adjustment to confirm the layout holds.

    How It Renders

    Desktop email clients — Sections display at their full configured width with desktop SPACING values applied. Multi-column layouts such as 50/50 or 67/33 render side by side as designed. Visibility on desktop set to Hide removes the section from desktop rendering only.

    Mobile email clients — Columns automatically stack vertically on smaller screens, following left-to-right, top-to-bottom order. MOBILE SPACING values override desktop spacing. Columns or sections with Visibility on mobile set to Hide do not appear. Images scale to fill the available width of the stacked column.

    Dark mode — Email clients that enforce dark mode may invert background colors and adjust text for contrast. The Dark mode preview toggle in the editor provides an approximation. Light backgrounds may turn dark, and dark text may turn light. Behavior varies across clients — Apple Mail, Gmail, and Outlook each apply dark mode transformations differently.

    Webmail clients (Gmail, Yahoo, Outlook.com) — Most webmail clients support responsive stacking. Gmail clips emails larger than 102 KB, which may affect complex layouts. Background images may not render in some webmail environments — the Content background color or Section background color serves as a fallback.

    Display Tips

    Test with real inboxes — The Preview tool gives a close approximation, but always use Send test email to verify rendering in your most common recipient clients, particularly Gmail, Apple Mail, and Outlook.

    Reduce mobile padding — Desktop-friendly Left and Right spacing values often feel too wide on mobile. Set MOBILE SPACING left and right values lower than their desktop equivalents to maximize content width on small screens.

    Use single-column layouts for critical content — A 100-width section ensures consistent rendering across all clients without relying on column stacking. Reserve multi-column layouts for content that remains readable when stacked.

    Set fallback background colors — Some email clients strip background images. Always define a Section background color or Content background color that maintains sufficient contrast with your text if the background image fails to load.

    Keep email size under 102 KB — Gmail clips emails that exceed 102 KB. Monitor the Email size indicator shown at the top left of the Preview screen and simplify your design if the file size is too high.

    Common Issues

    Columns do not stack on mobile → This typically occurs when viewing in a non-responsive email client or when the email is rendered inside a desktop webmail wrapper. Most modern mobile clients stack columns automatically. Verify by sending a test email and opening it on an actual mobile device.

    Mobile spacing looks the same as desktop → The MOBILE SPACING values in Section settings may still match the desktop SPACING defaults. Open Section settings for the affected section and adjust the MOBILE SPACING values independently. You can also set global mobile spacing defaults under Template settings → Section settings.

    A section or column is missing on mobile → Check the Visibility on mobile toggle. In Section settings, confirm it is set to Show. For columns, select a block inside the column, expand Column settings, and verify Visibility on mobile is set to Show.

    Dark mode changes my brand colors → Dark mode behavior is controlled by each email client and cannot be fully overridden from the editor. Use high-contrast color pairings, avoid pure white (#ffffff) backgrounds where possible, and test with Dark mode preview enabled. Some clients will invert colors regardless of your settings.

    Images appear too large or overflow on mobile → Images in the editor scale to fit the column width by default. If an image still overflows, check that the parent section’s MOBILE SPACING left and right values are not set to zero, which could push content edge-to-edge. Ensure the image block’s SPACING values in Block settings provide adequate breathing room.

    FAQs

    Why do my columns stack on mobile?

    Columns automatically stack vertically on smaller screens to maintain readability. This is standard responsive behavior in Sender’s editor. You can hide specific columns on mobile by setting Visibility on mobile to Hide in Column settings.

    Does the Preview tool show exactly how my email will look in every client?

    The Preview tool provides a close approximation for desktop and mobile layouts, including a Dark mode preview toggle. However, email clients render HTML and CSS differently. Always send a test email using Send test email to verify rendering in your most important target clients.

    How do I prevent dark mode from changing my background colors?

    Dark mode behavior varies by email client and cannot be fully controlled from the editor. Use high-contrast color pairings and enable Dark mode preview to identify potential issues. Define a solid Section background color as a fallback. Some clients will override your colors regardless of your settings.

    Can I set different padding for mobile and desktop?

    Yes. Each section has separate SPACING (desktop) and MOBILE SPACING controls in Section settings. You can set different Top, Bottom, Left, Right, and Column spacing values for each device type. Global defaults for both can also be configured under Template settings → Section settings.

    In what order do columns stack on mobile?

    Columns stack in left-to-right order, meaning the leftmost column appears at the top on mobile. When designing multi-column sections like 50/50 or 33/33/33, place the most important content in the leftmost column so it appears first on mobile devices.

  • Email Layout Structure

    This guide explains how to build and configure the structural layout of your emails using sections, columns, and spacing controls in Sender’s drag-and-drop editor.

    Where to Find This Setting

    The layout structure of an email is controlled through sections — the horizontal containers that hold your columns and content blocks. To access section-level settings, click the label that appears on the upper-left edge of any section on the canvas (e.g., Section: Headline & Image). This opens Section settings in the right panel.

    drag-and-drop-builder-section-settings

    To browse available column layouts and pre-built section templates, use the left sidebar. Click the Section templates icon (top icon in the sidebar) to open the Section templates panel.

    drag-and-drop-builder-section-templates

    You will see categories such as Preheader, Header, Hero, Content, Newsletter, Feature, Call to action, Product, Footer, and Blank. The Blank category contains raw column layout options you can add to your email.

    Steps to Build an Email Layout

    Step 1 — Add a Section with a Column Layout

    Click the + button that appears between existing sections on the canvas, or open the Section templates panel from the left sidebar. Under the Blank category, choose a column layout such as 100, 50/50, 33/33/33, 25/25/25/25, 50/25/25, 25/25/50, 67/33, or 33/67.

    drag-and-drop-builder-section-templates-blank

    The selected layout is added to the canvas as a new section with empty columns displaying DROP BLOCKS HERE placeholders. Click the + icon inside any column to add a content block.

    Step 2 — Configure Section Background and Spacing

    Click the section label on the canvas to select the section and open Section settings in the right panel. Set the Content background color to control the inner content area color, and the Section background color for the outer area behind the content. To add a background image, click Change next to Background image.

    drag-and-drop-builder-section-settings

    Under SPACING, adjust the Top, Bottom, Left, and Right values to control the padding around the section’s content. Use Column spacing to set the gap between columns within the section.

    Step 3 — Adjust Mobile Spacing and Visibility

    Scroll down in Section settings to find MOBILE SPACING. Set separate Top, Bottom, Left, Right, and Column spacing values that apply only on smaller screens.

    drag-and-drop-builder-section-settings-mobile-spacing

    Below that, use Visibility on desktop and Visibility on mobile toggles to Show or Hide the entire section on each device type. This lets you create sections that appear only on mobile or only on desktop.

    Step 4 — Configure Individual Column Settings

    Click any block inside a column to select it, then expand Column settings at the bottom of the right panel. Set the Background color for that specific column. Choose a Vertical alignment option — Bottom, Middle, or Top — to control how blocks align vertically within the column.

    drag-and-drop-builder-block-settings-column-settings

    Toggle Visibility on mobile to Show or Hide to control whether a specific column appears on mobile devices.

    Step 5 — Reorder, Save, and Reuse Sections

    Hover over a section to reveal the section toolbar at the top of the section. Use the up arrow and down arrow icons to move the section up or down in the email. Click the save icon (bookmark) to save the section to My saved sections in the Section templates panel.

    drag-and-drop-builder-section-options

    To reuse a saved section, open Section templates, click My saved sections, and drag the saved section onto the canvas. Use the duplicate icon to create a copy of the section, or the delete icon to remove it.

    drag-and-drop-builder-section-templates

    Layout Tips

    Use Blank sections for custom layouts — Start with a Blank column layout from the Section templates panel when you need precise control over column proportions rather than using a pre-built template.

    Set mobile spacing independently — The MOBILE SPACING values in Section settings override desktop spacing on smaller screens. Reduce Left and Right padding on mobile to maximize content width.

    Control column gaps with Column spacing — Increase or decrease the Column spacing value in Section settings to tighten or loosen the horizontal gap between columns. Set mobile Column spacing to 0 to remove gaps when columns stack vertically.

    Use section visibility to tailor device experiences — Toggle Visibility on desktop or Visibility on mobile to Hide to create device-specific sections. This lets you show a simplified layout on mobile and a multi-column layout on desktop.

    Preview both views before sending — Click the Preview icon (eye icon) in the top toolbar to see desktop and mobile versions side by side. Use the Dark mode preview toggle to check how your layout renders in dark mode.

    Common Issues

    Columns appear stacked instead of side by side → This happens when the email is viewed on a mobile device. Columns automatically stack vertically on smaller screens. To hide a column on mobile, select a block inside it, expand Column settings, and set Visibility on mobile to Hide.

    Section background color not visible → The Content background color covers the inner content area and may overlap the Section background color. Set Content background color to transparent (clear the hex value) if you want the section background to show through.

    Spacing looks different on mobile → Desktop SPACING values do not automatically apply to mobile. Open Section settings and configure the MOBILE SPACING values separately to control padding on smaller screens.

    FAQs

    How do I change the number of columns in a section?

    You cannot change the column count of an existing section. Instead, add a new section with the desired column layout from the Blank category in the Section templates panel, move your content blocks into it, and delete the original section.

    Can I have different column layouts in different sections?

    Yes. Each section has its own column layout. You can have a single-column 100 section for a hero image and a 33/33/33 section for product cards within the same template.

    How do columns behave on mobile?

    By default, columns stack vertically on mobile screens. You can control this by adjusting MOBILE SPACING and Column spacing values for mobile in Section settings, or hide specific columns using the Visibility on mobile toggle in Column settings.

    Can I save a section layout to reuse later?

    Yes. Select the section on the canvas to reveal the section toolbar, then click the save icon (bookmark). The section will appear under My saved sections in the Section templates panel, ready to drag into any future email.

    What is the difference between Content background color and Section background color?

    Content background color applies to the inner content area where blocks and columns are placed. Section background color applies to the full-width area behind the content, visible on both sides when the email content area is narrower than the viewport.

  • Using the Drag-and-Drop Editor

    This guide shows you how to build and customize email layouts using Sender’s drag-and-drop editor. You’ll learn how to navigate the editor interface, add and arrange content blocks, adjust settings, preview your design, and save your work.

    Where to Find This Feature

    In the Sender dashboard, go to: Email campaigns → click the edit (pencil) icon next to any draft campaign → Edit design.

    campaign-edit

    This opens the drag-and-drop editor. The editor has three main areas: a left sidebar with panels for Building blocks, Section templates, and Template settings; a central canvas where your email design is displayed; and a top toolbar with undo, redo, Preview, Send test email, and Save & continue buttons. When you select a block on the canvas, a settings panel opens on the right side.

    Steps to Build an Email in the Editor

    Step 1 — Get to Know the Editor Layout

    When the editor loads, the Building blocks panel opens on the left by default. The left sidebar includes icon-based tabs for Section templates, Building blocks, Template options, Template settings, Version history, and Keyboard shortcuts.

    drag-and-drop-builder

    A block is a single content element such as a headline, image, or button. The central area is the canvas — this is where you assemble your email by adding and arranging blocks. The top toolbar displays your campaign name, a Changes saved indicator, and action buttons.

    Step 2 — Add a Block to the Canvas

    In the Building blocks panel, you’ll see available blocks: Headline, Paragraph, Image, Button, Separator, Logo, Video, Social, Product, Menu, Timer, Review, and Custom HTML.

    drag-and-drop-blocks

    Drag any block from this panel and drop it onto the canvas where you want it to appear. A blue drop indicator line shows where the block will land. Release to place the block. It appears immediately on the canvas in the position you chose.

    Step 3 — Select and Edit a Block

    Click any block on the canvas to select it. A block-type settings panel opens on the right side of the screen. For example, clicking a Headline block opens Headline settings with options for Type (H1, H2, H3), Font family, Text color, Link color, Alignment, Font styling (bold, italic, underline, strikethrough), Font size, Line height, and Text direction.

    drag-and-drop-block-options

    To edit the text content directly, click the Edit text icon in the block toolbar that appears above the selected block.

    Step 4 — Move, Duplicate, or Delete Blocks

    When you select a block, a toolbar appears above it on the canvas with several action icons. Use Drag block to reposition the block by dragging it. Click Move up or Move down to shift the block one position in either direction.

    drag-and-drop-block-options

    Click Duplicate block to create an identical copy directly below. Click Delete block (trash icon) to remove the block from the canvas.

    Step 5 — Adjust Block and Column Settings

    With a block selected, scroll down in the right panel to find Block settings and Column settings.

    block-column-settings

    Under Block settings, adjust Spacing values for Top, Bottom, Left, and Right to control padding around the block, and set a Background color.

    Under Column settings, you can change the column’s Background color, set Vertical alignment (Bottom, Middle, or Top), and toggle Visibility on mobile between Show and Hide.

    Step 6 — Use Section Templates for Faster Layouts

    Click the Section templates icon (top icon in the left sidebar) to browse pre-built layout sections. Categories include Preheader, Header, Hero, Content, Newsletter, Feature, Call to action, Product, Footer, and Blank.

    section-templates

    You can also access My saved sections to reuse sections you have saved previously. Drag a section template onto the canvas to add a fully structured layout that you can then customize block by block.

    Step 7 — Customize Template-Wide Settings

    Click the Template settings icon in the left sidebar (the globe icon) to open global design controls.

    template-settings

    Under General settings, adjust Background color, Content background color, Background image, Language, and Preheader text. Below that, expand sections for Headlines, Paragraph, Buttons, Separator, Section settings, and Preview & Unsubscribe to set default styles that apply across your entire email.

    Step 8 — Preview, Test, and Save Your Email

    Click the Preview button (eye icon) in the top toolbar to see how your email looks before sending. Use Send test email in the top toolbar to send a test version to an email address and check how it renders in an actual inbox.

    campaign-preview

    When you’re finished, click Save & continue to save your design and return to the campaign workflow. To exit without continuing, click the back arrow next to the campaign name or use Save and go back.

    Editor Tips

    Use section templates to save time — Instead of building every row from scratch, drag a pre-built section from the Section templates panel and customize the placeholder content.

    Check mobile visibility — Open Column settings for any block and use the Visibility on mobile toggle to hide elements that don’t work well on smaller screens.

    Set global styles first — Before adding content, configure your fonts, colors, and button styles in Template settings. This ensures a consistent look across all blocks without adjusting each one individually.

    Duplicate blocks instead of rebuilding — If you need a similar block elsewhere in your email, select the original and click Duplicate block in the block toolbar. Then edit the copy as needed.

    Save reusable sections — Use Template options → Save as template to store a finished design for future use. You can also save individual sections through the Section templates panel under My saved sections.

    Common Issues

    Block won’t drop onto the canvas → You may be dragging to an invalid position. Make sure you see a blue drop indicator line on the canvas before releasing the block. Drag slowly and position your cursor inside the canvas area.

    Settings panel doesn’t appear → The right panel only opens when a block is selected on the canvas. Click directly on a block element (such as a headline or image) to select it and trigger the settings panel.

    Changes are not saving → The editor auto-saves periodically and shows a Changes saved indicator in the top toolbar. If you don’t see this confirmation, click Save & continue manually before leaving the editor.

    Top toolbar disappears → The top toolbar hides when you scroll down or when the right settings panel is active. Scroll to the top of the canvas or close any open side panels to bring it back into view.

    FAQs

    Can I undo changes in the editor?

    Yes. Click the undo button (curved arrow) in the top toolbar to reverse your last action. Click redo (forward arrow) to restore it. You can also use keyboard shortcuts — press Ctrl+Z (or Cmd+Z on Mac) to undo and Ctrl+Y (or Cmd+Y) to redo.

    What is the difference between a block and a section?

    A block is a single content element such as a headline, image, paragraph, or button. A section is a larger layout structure that contains one or more blocks arranged in rows and columns. You can add individual blocks from the Building blocks panel or full sections from the Section templates panel.

    Can I reorder blocks without dragging?

    Yes. Select a block on the canvas and use the Move up or Move down icons in the block toolbar to shift it one position at a time.

    How do I change the email background color?

    Open Template settings from the left sidebar. Under General settings, adjust the Background color field to change the outer background or the Content background color field to change the inner content area.

    Does the editor work the same in automations and campaigns?

    Yes. The drag-and-drop editor behaves the same regardless of whether you open it from a campaign, an automation, or a template. All building blocks, settings, and toolbar options are identical.

  • Transactional Email vs Campaign Email

    This guide explains the difference between transactional emails and campaign emails in Sender, and shows you how to identify when to use each type.

    Where to Find This Feature

    In the Sender dashboard, go to: Transactional emails

    transactional-metrics

    Click Transactional emails in the left sidebar to open the transactional email section. You will see a submenu with four pages: Metrics, Logs, Templates, and Setup instructions. This is where you create, manage, and monitor all transactional emails.

    regular-email-campaigns-list

    For comparison, campaign emails are located under Email campaigns in the main sidebar.

    Steps to Understand the Difference

    Step 1 — Learn What Transactional Emails Are

    Transactional emails are automated messages triggered by a specific user action or system event. Examples include order confirmations, password resets, shipping notifications, and account verification emails. Each transactional email is sent to one recipient at a time, in direct response to something that person did.

    transactional-setup

    In Sender, transactional emails are sent through the API (a way for your application to communicate with Sender’s servers) or SMTP (a standard email-sending protocol). You will find both options under Transactional emails → Setup instructions.

    Step 2 — Learn What Campaign Emails Are

    Campaign emails are bulk messages sent to a group of subscribers at a scheduled time. Examples include newsletters, promotional offers, product announcements, and weekly digests. You choose the audience and decide when to send.

    In Sender, campaign emails are created under Email campaigns in the left sidebar. You click New campaign, select subscriber groups, design your email, and schedule or send it immediately.

    Step 3 — Compare How Each Type Is Created

    Transactional emails follow a three-stage workflow: Settings → Design → API. You define the email details, build the template, and then connect it to your application using an API token or SMTP credentials. Your application triggers each send automatically.

    transactional-api

    Campaign emails follow a different flow. You click New campaign, configure your content, select a subscriber group, and either schedule or send the email manually. There is no API step because Sender handles delivery to your chosen audience directly.

    regular-email-campaign-flow

    Step 4 — Compare How Each Type Is Sent

    Transactional emails are sent programmatically. Your application calls the Sender API or connects via SMTP to send an email whenever a triggering event occurs. You generate an API token under Account settings → API access tokens by clicking Create API token, or you set up SMTP credentials under Transactional emails → Setup instructions → SMTP.

    Campaign emails are sent from the Sender dashboard. You click a send or schedule button, and Sender delivers the email to all recipients in the selected subscriber group at once.

    Step 5 — Compare How Each Type Is Tracked

    Transactional email activity appears under Transactional emails → Metrics, which shows the Transactional overview with stats for total emails sent, total delivered, total opens, and total clicks. Detailed delivery events appear under Transactional emails → Logs, called the Latest events log, where each row shows the event type, recipient, subject, template, and date/time.

    transactional-logs

    Campaign email performance is displayed on the main Dashboard and within each campaign’s individual report. Campaign stats include delivered, opened, and clicks per campaign.

    campaign-report

    Step 6 — Decide Which Type to Use

    Use transactional emails when the message is triggered by a user action and is expected by the recipient. The content is specific to that individual and that event. Password resets, receipts, and shipping updates are transactional.

    Use campaign emails when you want to send the same message to many people at once. The content is promotional, informational, or editorial. Newsletters, sale announcements, and product launches are campaign emails.

    What Happens Next

    If you need to send transactional emails, go to Transactional emails → Templates and click New email to create your first transactional email template.

    If you need to send campaign emails, go to Email campaigns and click New campaign to build and schedule a campaign.

    To verify that transactional emails are working after setup, check the Latest events log under Transactional emails → Logs for delivery confirmation events.

    Common Issues

    Unsure which type to choose for a specific email → If the email is triggered by a user action (such as a purchase or sign-up) and contains information unique to that user, it is transactional. If you are sending the same content to multiple subscribers on a schedule, it is a campaign email.

    Transactional email not appearing in campaign reports → Transactional emails and campaign emails are tracked separately. Transactional email stats are under Transactional emails → Metrics and Logs, not on the main Dashboard or in campaign reports.

    Trying to send a transactional email without API or SMTP setup → Transactional emails require either an API token or SMTP credentials to send. Go to Account settings → API access tokens to create a token, or go to Transactional emails → Setup instructions → SMTP to configure SMTP.

    FAQs

    What is the difference between transactional and marketing emails?

    Transactional emails are triggered by a user action, such as a purchase or password reset, and contain information specific to that individual event. Marketing (campaign) emails are sent to a list of subscribers to promote content, offers, or updates. In Sender, these are managed in separate sections of the dashboard.

    Can I use the same template for both transactional and campaign emails?

    No. Transactional email templates are created under Transactional emails → Templates, and campaign email templates are created under Email campaigns. Each type has its own creation workflow and delivery method.

    Do transactional emails require an API token?

    Yes, if you are sending via the API. You can create one under Account settings → API access tokens by clicking Create API token. Alternatively, you can send transactional emails using SMTP credentials, which you configure under Transactional emails → Setup instructions → SMTP.

    Do campaign emails use the API to send?

    No. Campaign emails are sent directly from the Sender dashboard. You select your subscriber group, schedule or send the campaign, and Sender handles delivery. No API integration or SMTP setup is required.

    Where do I monitor transactional email delivery?

    Go to Transactional emails → Logs to view the Latest events log. This page shows every delivery event including the event type, recipient, subject, template name, and timestamp. For high-level stats, check Transactional emails → Metrics.