Drag-and-Drop Email Editor

Drag and drop email-safe blocks to build reusable email templates, adjust each block’s styles, add images and variables, and preview the compiled message before saving.

Drag-and-drop email editor showing template fields, a styled Hip Pig rewards email, canvas controls, inspector tabs, and save actions.
  1. In the sidebar, open Templates, then select Message.
  2. Select New Template, then Email, or open an existing email template.
  3. Under Body, select Drag & Drop if it is shown.

A new design starts with a text block and a Footer. The Footer includes organization details, a business address, and an unsubscribe link. You can edit, move, duplicate, or remove it like other blocks, but review the compliance warnings before saving without it.

Use the toolbar above the canvas to:

  • Zoom in or out from 50% to 200%.
  • Toggle component outlines.
  • Undo or redo changes.
  • Switch between desktop and mobile views.
  • Open Preview.
  • Select Maximize for a full-screen workspace.
Drag-and-drop editor toolbar with canvas controls, desktop and mobile views, preview, undo and redo, and inspector tabs.

Open Blocks, then drag a block onto the canvas. Available blocks include:

Layout Blocks

  • 1 Column: Creates a full-width section for a single content stack. Use it for introductions, long-form copy, banners, and other content that should span the email.
  • 2 Columns: Places two content areas side by side. Use it for image-and-text rows, paired offers, or two equal choices. Check the mobile preview because columns may stack on narrow screens.
  • 3 Columns: Creates three compact content areas. Use it for feature summaries, product cards, or short lists with similar content. Keep copy brief so the columns remain balanced.

Content Blocks

  • Text: Adds editable headings, paragraphs, and inline links. Use Insert variable for personalized values, and keep important copy readable without images.
  • Button: Adds a prominent linked call to action. Set a clear label and complete destination URL, then verify the link in the compiled preview.
  • Image: Adds an image from the library, connected storage, an upload, or a public URL. Add alternative text for accessibility and when images are blocked; add a link only when the image should be clickable.
  • Divider: Adds a visible rule between sections. Use it to separate topics without creating a large gap.
  • Spacer: Adds empty vertical space. Use it for breathing room; prefer section padding when the spacing should stay attached to one block.
  • Social: Adds linked social-network icons. Include only networks with active destination URLs and confirm each icon opens the intended profile.
  • Hero: Combines a prominent image or background with headline-style content. Use it for the primary campaign message, and check background position, text contrast, and mobile cropping.
  • Group: Wraps related blocks so they can share structure and styling and move together. Use it for reusable visual sections rather than unrelated content.
  • Footer: Adds organization details, a business address, and an unsubscribe link. Keep at least one Footer in commercial email and confirm the account address is complete before sending.

Select a block on the canvas to open its component toolbar. Use the toolbar to edit styles, move the block, duplicate it, or delete it. Use Undo if you remove or restyle the wrong block.

Style a Selected Block

Open Styles after selecting a block. The available controls change with the selected block and can include dimensions, spacing, alignment, typography, colors, backgrounds, borders, and corners.

For an Image block, use Choose image and set link, alternative text, and title values as needed. Hero blocks also expose layout mode, background position, and background dimensions.

Review the Layer Structure

Open Layers to see the email hierarchy, select a nested block, change visibility, or reorder content. Use the pencil action on a layer to jump back to that block's styles.

Add Another Block

Open Blocks to return to the block palette without leaving the editor.

Blocks palette with layout, text, button, image, divider, social, spacer, hero, wrapper, and footer blocks.

Open Settings to choose defaults for typography, colors, and buttons. These settings are saved in this browser.

  • Font, size, line height, and text color apply to supported new blocks.
  • Section background applies to new sections.
  • Button background, label color, and corners apply to new buttons.
  • Email background updates the open email immediately.

Existing blocks do not change automatically. Use Apply to all blocks to write the current settings across the email, or select a block and use Apply to selected block. Confirm the change only after checking the block count. Applying settings replaces matching styles set in the Styles tab, and the action can be reversed with Undo.

Settings panel for default typography, email and section colors, and button styling.

Add an Image block, select it, then choose Choose image. The same picker is available for supported background-image controls.

Use Your Images

Choose an image from the account library. You can also select Upload to add an image. Uploaded and selected library images receive a public URL so they can load in inboxes.

Use Connected Storage

If an active storage integration is available, select Connected storage, choose the integration, and select an image. Drip Drop copies the selected image to a public URL before inserting it.

Connected Storage image picker showing synthetic Hip Pig image and PDF assets from Amazon S3.

Use an Image URL

Select From URL, enter a complete address beginning with http:// or https://, then select Insert. The image remains on its current host. If that host moves or removes it, the image can stop loading in sent email.

Choose an Image dialog on the From URL tab with the image-address field and external-hosting guidance.

Personalize Text

Edit a Text block, place the cursor where the value should appear, then select Insert variable from the text toolbar. Choose a contact, organization, sender, custom-field, or unsubscribe variable.

For supported variables, filters, fallback values, and conditional syntax, see Message Template Variables and Filters.

Use the desktop and mobile controls to review the canvas at common widths. Then select Preview to inspect the compiled email with sample variable values and any plan branding that will be added when the message is sent.

The compiled preview shows the message Drip Drop will send, but email clients can render the same HTML differently.

Add a Plain-Text Alternative

Select Plain Text beside the body-mode tab and enter a text alternative. The status row shows whether plain text and HTML are provided.

A template must contain a plain-text body or HTML output.

Each email template has one body editing mode. Empty templates can switch modes without a warning. Templates with content show a confirmation when the switch can discard or simplify work.

Switch to Drag & Drop

Existing HTML cannot be imported into the builder. Confirming Start blank design clears the HTML body and starts a new design.

Switch From Drag & Drop to HTML

Confirming Convert keeps the compiled HTML and removes the editable design source. You can continue in HTML, but you cannot return that design to the drag-and-drop builder.

Switch From Drag & Drop to Basic

Confirming Discard design removes the design and its compiled HTML, then opens an empty Basic body.

Switching from HTML to Basic keeps the HTML, but the Basic editor can simplify or remove tables, custom styles, and layout markup when you edit it. Switching from Basic to HTML is lossless.

Drag & Drop is available only when your Drip Drop environment has the email designer enabled. When it is not, the Drag & Drop option is not shown and a design template opens read-only: the compiled body remains readable, the design source stays intact, and the template can still send.

To edit the body in that environment, switch to HTML and confirm the conversion. This keeps the compiled HTML and permanently removes the editable drag-and-drop design.

  • If the Footer needs a business address, follow Settings → Account and add the address before sending.
  • If you remove the last Footer, Drip Drop warns that the email no longer contains an unsubscribe link. Add a Footer block again before sending commercial email.
  • If plan branding applies, the canvas and compiled preview show the branding that will be added when the message is sent.

Select Save & Continue Editing to save and keep the editor open. Select Save to save and return to the template list. While a save is in progress, editing and mode controls are disabled.

If you close the editor with unsaved changes, choose Keep editing to return or Discard changes to close without saving.

Members with view-only template access can read the template but do not see the save controls. Creating a template requires create permission; updating an existing template requires edit permission.

Drag & Drop is not available
  • Confirm the email designer is enabled in this Drip Drop environment.
  • A design template opens read-only when the designer is unavailable. It can still send, but converting it to HTML permanently removes the editable design source.
A block will not drop, move, or select
  • Drop the block inside a highlighted column or section rather than between editor panels.
  • Open Layers to select nested content or reorder it when the canvas target is hard to reach.
  • Use Undo if a move changes the wrong section.
An image does not load
  • For From URL, confirm the address is complete, begins with http:// or https://, and is publicly reachable.
  • For library or connected-storage images, choose the image again so Drip Drop can publish a public email-safe URL.
  • Add alternative text so the message remains understandable when an inbox blocks images.
Variables are not replaced
  • Insert variables from the Text toolbar instead of typing the syntax from memory.
  • Confirm the sample contact or custom field has a value, then check the compiled Preview.
  • Add a supported fallback when the value may be empty.
The preview looks different from the canvas
  • Use Preview to inspect the compiled email, including sample variables and plan branding.
  • Check both desktop and mobile widths. Email clients can render the same HTML differently, so keep layouts simple and test important sends in the inboxes you support.
The template will not save
  • Wait for any save already in progress; editing and mode controls are disabled until it finishes.
  • Confirm the template has a plain-text body or HTML output, resolve Footer and business-address warnings, and verify that your role can create or edit templates.
The editable design disappeared after switching modes
  • Converting Drag & Drop to HTML keeps the compiled HTML but removes the editable design source.
  • Discarding the design to switch to Basic removes both the design and its compiled HTML. These mode changes cannot reconstruct the original drag-and-drop layout.