Create email content with Drag & drop editor

Build email content in the Pushwoosh built-in editor without writing code. You get a reusable layout with content blocks, images, buttons, personalized text, and a compliant footer that you can use in a Customer Journey or a one-time email.

Note

Prefer HTML? Use the Pushwoosh HTML code editor for more control. Learn more

Important

Before you start, set up your email’s languages, subject line, and sender details. Learn how

Create new email content

1. Go to Content → Email content.
2. Choose how to start:
   • Click Create email content to open the drag & drop editor and build an email from scratch.
   • Click the arrow next to Create email content, then select Use a template to start from a pre-built layout in the gallery.
   • Click the arrow next to Create email content, then select HTML code to use the HTML code editor. Learn more

Explore the editor layout

Once you open an email, the built-in editor has these areas:

Top bar

Rename the email, undo or redo changes, run Check to catch issues before you send, and save your work. See Check your email before sending. Open the ⋮ menu for more actions:

• Preview: see the email as it will render for recipients, with its own Desktop/Mobile toggle. See Edit the mobile view.
• Validate Liquid: check the Liquid syntax in your subject, preheader, footer, and body across all languages before you send. The same check is also one click away at the bottom of the Smart check panel. See Check your email before sending.
• Test email: send a preview to a test device or address. See Send a test email.

Language / Subject / Preheader bar

Above the canvas, switch the editing language, set the subject line and preheader for the email, and use Auto-translate to fill in missing translations. Learn how to set up languages and localization.

Canvas

See the email as recipients will see it, and edit text, images, and buttons directly on the layout. An empty email shows Start with a block.

Layers panel

Lists every block in your email as a tree, in the same order as on the canvas. Open it from the left edge to select a nested block or drag rows to reorder content.

Right panel

Switch between three tabs:

• Blocks: add content to the email. See Add content blocks.
• Settings: apply styling to the whole email at once. See Configure email-wide styling.
• AI: chat with the AI assistant to generate or edit content from a prompt.

Start building your email

1. Drag a block from the Blocks panel onto the canvas, or click a block in the panel to add it at the end of the email.
2. Keep adding blocks the same way until the layout is ready.
3. Open the Settings tab when you need email-wide styling.

Add content blocks

Open the Blocks tab and drag a block onto the canvas, or click a block to add it at the end of the email. Available blocks:

• Heading: titles and short headlines in the email
• Text: body copy and longer descriptions
• Button: a clickable call to action
• Image: pictures from Media store, upload, or URL
• Video: a clickable video poster that links to a YouTube or Vimeo video
• Card: an image paired with a heading, text, and button in one layout
• Divider: a line that separates sections visually
• 2 columns: two equal columns side by side
• 3 columns: three equal columns side by side
• 4 columns: four equal columns side by side
• 33 / 67: two columns where the left takes about 33% of the width and the right about 67%
• 67 / 33: two columns where the left takes about 67% of the width and the right about 33%
• Timer: a countdown for offers and deadlines
• Menu: a row or column of links, such as navigation or contacts
• Social: icons that link to your social profiles
• HTML: custom HTML, such as a form, survey, or embedded video

Heading and text

Heading and Text blocks hold the copy recipients read in the email. Use Heading for titles and short lines, Text for body copy and longer descriptions.

Click a block on the canvas to start editing. Select text to bring up the formatting toolbar.

Toolbar options

• Text style: set a paragraph style (Heading 1, Heading 2, Normal, etc.) for the whole block
• Font size: resize selected text, or apply a size to the whole paragraph
• Bold / Italic / Underline / Strikethrough: standard character formatting
• Alignment: left, center, or right
• Link: wrap selected text in a hyperlink

Select the block (not a text range) to open its settings in the right panel, then turn on Letter spacing to loosen or tighten character spacing for the whole block. Accepts fractional and negative values. To apply letter spacing across all text blocks at once instead, set it as an email-wide default under Typography. See Configure email-wide styling.

Personalization with Merge Tags

Merge Tags are placeholders that insert a Tag value from the recipient’s profile, so each subscriber sees personalized copy. To add one, select the text, click Merge Tags in the toolbar, and choose a Tag from your account.

Image

An Image block displays a picture in the email. Select it on the canvas to open the Image settings in the right panel.

Adding an image

Click Add image when the block is empty, or Replace image when a picture is already set. This opens the Media Gallery with three tabs:

• Library: your uploaded files, searchable by file name.
• Stock photos: search free Pexels photos without leaving the editor. Click one to copy it into your library and insert it.
• Generate with AI: describe the image you want and pick an aspect ratio. The generated image is saved to your library.

You can also paste a hosted link directly into Image URL to skip the gallery.

Alt text

Describe the image in Alt text for accessibility, or click Generate alt with AI to have AI write it from the image in your current editing language. Images added from Stock photos or Generate with AI get alt text automatically.

Links and spacing

To open a link when the image is clicked, enter it in Link URL and set Link target to open in the same tab or a new one. See Add links for available link types.

In Spacing, turn on Padding to add space around the image. Use All sides for uniform padding, or turn on More options to set each side separately.

Video

A Video block adds a YouTube or Vimeo video to the email as a clickable thumbnail. Email clients can’t play video inside the message, so the block shows a still image with a ▶ overlay. When the recipient taps it, the video opens on YouTube or Vimeo. This works in every major client, including Outlook.

Select the Video block on the canvas to open its settings in the right panel.

• Video URL: paste a YouTube or Vimeo link. The editor fetches a thumbnail automatically.
• Alt text: describe the video for accessibility.
• Thumbnail URL: keep the auto-fetched thumbnail, or click Add thumbnail / Replace thumbnail to pick one from the Media Gallery, or paste a hosted link directly.
• Play button overlay: on by default. Turn off to show the plain thumbnail without the ▶ overlay. The overlay isn’t available for thumbnails on some external hosts — the editor warns you when that applies, and the email shows the plain thumbnail instead.
• Width (px), Corner radius (px), and Alignment: control how the thumbnail looks and where it sits in the layout. You can set alignment separately for mobile.

Card

A Card block pairs an image with a heading, text, and button in a single ready-made layout. Select it on the canvas to open its settings in the right panel.

• Layout: choose which side the image sits on relative to the content.
• Image: replace the image, set alt text, and (for AI-generated images) edit the prompt used to create it.
• Size & fit: set the image size and how it fits and positions within its area.
• Spacing: set the padding around the card’s content.

Button

A Button is a clickable call to action in the email.

Click a Button block to edit its label on the canvas. Use the toolbar to change font size, text color, bold, italic, underline, strikethrough, and alignment.

To set what happens when the recipient clicks the button:

• Click the link icon in the toolbar to open Insert/Edit Link.
• Or use Action type and URL in the Link section of the right panel.

See Add links for the available action types.

In the right panel, under Styles:

• Alignment: left, center, or right.
• Background, Text color, Font size, and Font family: turn each option on to override the default look.
• Border radius, Border color, and Border width: shape and outline of the button.
• Width: set a fixed button width or leave it automatic.
• Padding: add space inside the button. Use All sides for uniform padding, or turn on More options to set each side separately.

Divider

A Divider is a horizontal line between content blocks. Use it to separate sections visually in the email.

Configure line style (Solid, Dashed, Dotted), color, thickness, and width in the settings panel.

HTML

The HTML block lets you paste custom HTML into your email. Use it for a custom form, survey, or embedded video.

Examples

Lead form

This lead form collects an email address to send a promo code for the New Year Sale.

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #CC0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>

<div id="form">
  <input type="email" placeholder="Your email address" />
  <button type="button">Get my code</button>
</div>

</body>
</html>

Survey

This survey asks what category the recipient is shopping for and links each option to the relevant sale page.

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    color: #222;
  }
  .option:hover { border-color: #CC0000; background: #fff5f5; }
</style>
</head>
<body>

<h2>What are you shopping for?</h2>
<p>Pick a category and go straight to your deals</p>

<a class="option" href="https://example.com/sale/clothing">👗 Clothing</a>
<a class="option" href="https://example.com/sale/electronics">📱 Electronics</a>
<a class="option" href="https://example.com/sale/beauty">💄 Beauty</a>
<a class="option" href="https://example.com/sale/home">🏠 Home & Living</a>

</body>
</html>

Video

This example embeds a New Year Sale promo video in the email.

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>New Year Sale — Up to 50% Off</h1>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

</body>
</html>

Note

You can also add an unsubscribe link directly in the HTML block:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

The %%PW_EMAIL_UNSUBSCRIBE%% placeholder is replaced with the Pushwoosh unsubscribe URL when the email is sent.

Menu

The Menu block places several clickable items in a row or column. Use it for a navigation bar or a list of company contacts.

For each menu item, set:

• Label: the text recipients see
• URL: where the item opens
• Target: same tab or a new tab

In the block settings, you can also set:

• Direction: Horizontal or Vertical
• Alignment: Left, Center, or Right
• Separator: an optional divider between items
• Font, size, weight, letter spacing, and link/text colors

Social

The Social block displays a row of social media icons that link to your profiles. Use it to send recipients to Facebook, Instagram, X, and other platforms from the email.

Add platform entries, then set alignment, icon size, and the gap between icons.

Countdown timer

The Timer block is a countdown in the email. Use it for limited-time offers, flash sales, and event reminders.

To set it up:

1. In Countdown, set End date and End time, then choose the Timezone and Language for the timer labels.
2. Turn Labels on to show “days / hours / minutes / seconds” captions under the digits, or off for numbers only.
3. In Appearance, set Background, Digits color, Labels color, and the font size for digits (default 40px) and labels (default 16px).
4. Adjust Spacing (padding) as needed.

The timer renders as a sharp image at any language or size, with a background that stretches across the full email row, and a version rendered natively for mobile width rather than a shrunk desktop image.

Columns

Columns split the canvas into side-by-side sections so you can place content next to each other in one row.

Drag one of these blocks onto the canvas:

• 2 columns: two equal columns
• 3 columns: three equal columns
• 4 columns: four equal columns
• 33 / 67: left column about 33% wide, right about 67%
• 67 / 33: left column about 67% wide, right about 33%

Then add content to each column. To change spacing for all columns in the email, open Settings → Columns defaults and adjust outer padding, column padding, and the gap between columns.

Save and reuse blocks

Save a block to reuse it in this or other emails instead of rebuilding it each time.

1. Click the block itself (its frame or background, not the text or button inside it) to select the whole block. Card, Columns, and Social are examples of blocks that work this way.
2. Click the bookmark icon in the block’s toolbar and give it a name.

Saved blocks appear under Saved blocks at the bottom of the Blocks tab.

• Drag a saved block onto the canvas, or click it to add it at the end of the email.
• Click the × on a saved block’s tile to delete it.

Edit the mobile view

Once you’ve added your content blocks, switch to mobile to check and adjust how they look on a phone. Next to the language switcher above the canvas, use the Desktop / Mobile toggle to switch into a fully editable mobile view at real phone width. Select, edit, and rearrange content exactly the way your subscribers will see it on their phone, instead of just previewing how the desktop layout adapts.

Every mobile-overridable setting has a checkbox next to it. When the checkbox is off, a hint shows the inherited desktop value, and the setting keeps using it. Turn the checkbox on to set a separate value for mobile. Turn it off again to fall back to the desktop value.

Set different padding and font size per device

• Padding: every block, column, card, and individual element (such as text, an image, or a button) has a padding control you can override for mobile. Switch the canvas to Mobile, turn on the checkbox next to Padding, and set the new value. The desktop padding stays the same until you turn the checkbox on.
• Font size: turn on Font size (mobile) on a text element to set a size just for mobile. Without this override, large headlines shrink automatically to fit the phone screen.

Control how columns stack on mobile

Columns layouts stack vertically on phones by default. In the mobile view, use Stack columns to set how each Columns block behaves:

• Stack: columns flow into a single column, top to bottom (default).
• Keep row: columns stay side by side, preserving the desktop layout.
• Reverse: columns stack in reverse order. Useful for image + text rows: keep the image on the right on desktop, but show it on top on mobile.

Show or hide content per device

Open a block or element’s settings and use Hide on mobile or Hide on desktop under Visibility to show it on only one device, so you can build device-specific banners, CTAs, or navigation without maintaining two templates.

Show content to specific recipients

A display condition shows or hides a block for specific recipients based on their Tags. Every subscriber gets the same email, but each one only sees the blocks meant for them.

Example

You tag some subscribers as loyalty_member. You add a block with a members-only offer and set a condition: show this block only when loyalty_member is true. Everyone else never sees it.

You can add a display condition to any block or element on the canvas, except the Footer.

To set a display condition:

1. Select the block or element on the canvas.
2. In the right panel under Display condition, turn on Show this block conditionally (Show this element conditionally if you selected an element inside a block).

3. In the first field, pick a Tag.
4. Set the operator and value (for example, is and true).

5. Click + Add rule to add more rules. Choose All rules if every rule must match, or Any rule if at least one is enough.
6. Under If value is unknown, choose Hide block or Show block. This controls what happens when the Tag has no value for a recipient.

When a condition is active, the block shows a chip on the canvas with a short summary of the rule: IF for a standalone condition, or ELSE IF / ELSE for a block in a branch chain.

Show different content to different groups

A single display condition only controls one block: the editor shows it to some recipients and hides it from others. It does not replace one block with another.

Use Branch when different recipients should see different blocks in the same place, and each recipient should see exactly one variant.

To set up a branch chain:

1. Place two or more blocks (or elements inside the same block) directly next to each other on the canvas.
2. On the first block, turn on Show this block conditionally (or Show this element conditionally) and set the Tag rule. The first block has no Branch setting. The editor checks this block first.
3. On each middle block (every block below the first except the last), turn on the display condition, set a Tag rule, and set Branch to Else if. The editor checks this block only when the conditions of the blocks above it didn’t match.
4. On the last block, turn on the display condition and set Branch to Else. Do not add a Tag rule. This block is the fallback for everyone who did not match any block above.

Tip

Think of the chain as if → else if → else: the first block is the first check, each Else if block is the next check when the previous one did not match, and Else is what everyone else sees.

The editor checks blocks in order from top to bottom and shows the first one that matches. All other blocks in the chain stay hidden for that recipient.

Note

Each branch links only to the block directly above it. If you move blocks apart or set Branch without a valid block above, the chain breaks. Check your email flags this as an issue.

Example scenario: re-engagement by last purchase

A re-engagement email where each recipient sees content based on how long ago they last bought something. days_since_last_purchase must be a Number (Integer or Price) Tag set on the recipient profile — the ≥ operator is only available for numeric Tags.

Block	Branch	Condition	What the recipient sees
Block 1	None	days_since_last_purchase ≥ 90	”We miss you” message with a win-back discount
Block 2	Else if	days_since_last_purchase ≥ 30	A reminder about new arrivals
Block 3	Else	None	A regular promo block

A recipient inactive for 120 days matches both Block 1 and Block 2, but sees the win-back message because Block 1 comes first. Someone inactive for 30–89 days sees the new-arrivals reminder. Everyone else sees the regular promo block.

To set up this scenario:

1. Add three Text blocks one after another as three separate blocks on the canvas.
2. Block 1: turn on Show this block conditionally. Set days_since_last_purchase ≥ 90, leave If value is unknown on Hide block, and add the win-back copy.
3. Block 2: turn on the display condition. Set days_since_last_purchase ≥ 30, set Branch to Else if, and add the new-arrivals copy.
4. Block 3: turn on the display condition, set Branch to Else, and add the regular promo copy. Do not add a Tag rule.

Write a custom Liquid condition

When the rule builder is not enough, write the condition yourself in Liquid.

1. Select the block or element on the canvas.
2. Under Display condition, turn on Custom Liquid expression.
3. Type your condition. For example, to show a block to recipients in Germany or VIP subscribers:

Country == "DE" or VIP

The editor wraps your expression as {% if ... %} around the block when the email is sent. A custom expression replaces any rules set in the builder above it.

Tag names with spaces are converted automatically. For example, Last Order becomes LastOrder.

Add links

Use the Insert/Edit Link dialog to set what happens when a recipient clicks a button or selected text. Choose an Action type, then fill in the fields for that action.

Open Website

Opens a link when the recipient clicks. Enter the address in URL.

Manage preferences link

Adds a link to the subscription preference center where recipients can choose which email categories they receive. The link is inserted automatically.

Unsubscribe link

Lets recipients opt out in line with regulations and their preferences.

Tip

You can also add an unsubscribe link in an HTML block:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

The %%PW_EMAIL_UNSUBSCRIBE%% placeholder is replaced with the Pushwoosh unsubscribe URL when the email is sent.

What happens when the recipient clicks the unsubscribe link

If the subscription preference center is enabled

The recipient is unsubscribed only from the category assigned to that email (e.g., Newsletter). The category name is added to their Unsubscribed Email Categories tag.

A confirmation screen appears with Resubscribe and Manage preferences options. Learn more.

If the subscription preference center is not enabled

The recipient is opted out of all marketing emails and the Unsubscribed Emails tag is set to true. Transactional emails are not affected and will continue to be delivered. Learn more about message types.

Important

To let you deliver important emails to your customers, we do not delete unsubscribed users from your user base.

To continue messaging engaged recipients, create a segment filtered by Unsubscribed Emails = false. To avoid complaints, do not email recipients who have unsubscribed.

Clicks are counted in the unsubscribe rate in Message History.

Web version link

Gives recipients access to a web version of the email, useful if they have trouble viewing it in their inbox.

No track statistics

Opens a link when the recipient clicks, without counting the click toward your email’s click statistics. Enter the address in URL.

Subscription form confirmation link

Inserts a confirmation link for a subscription form submission (for example, to confirm a double opt-in). Learn more about double opt-in.

Configure email-wide styling

Email settings control styling for the whole email: document size and background, sender-facing options, and default styles for blocks.

Open the Settings tab in the right-hand panel.

Available sections:

• Document: size and look of the whole email area: width, padding, background image or gradient, the gap between blocks, default image corner radius, content area corner radius, and content shadow.
• Typography: email-wide font family, and per text style (Heading 1, Heading 2, Normal, etc.) the font size, font weight, line height, and letter spacing.
• Color scheme: the email’s palette. Background and Text repaint the page, Heading recolors the heading styles, and Link recolors menu links that don’t have an explicit color; the rest feed AI generation and the color pickers elsewhere in the editor — existing blocks keep their own colors. Turn on Dark mode variant to set separate colors for clients that honor dark mode.
• Email options: turn View in browser and Unsubscribe link on or off for the email.
• Block defaults: starting background, background image, border color, border width, border radius, and default mobile/desktop visibility for blocks you add later, so new content matches the email until you override a block on the canvas.
• Columns defaults: spacing for every Columns layout: outer padding, padding inside each column, and the gap between columns.
• Card defaults: starting look for Card containers that group content in the layout, applied until you style a card individually.
• Button group defaults: spacing and alignment when several buttons sit together as a group.
• Button defaults: starting look for new Button blocks so CTAs stay consistent across the email until you style one separately.
• Divider defaults: starting line style, color, thickness, and width for new Divider blocks.

Note

Some defaults, such as visibility, can be set separately for desktop and mobile. See Edit the mobile view.

Defaults apply wherever an individual block does not override them.

Configure the email footer

Every email includes a Footer block for the legally required sender information and unsubscribe link. Select Footer in the Layers panel to open its settings.

Use Load from account to pull in your saved account-level footer, or Save as account default to reuse the current footer as the starting point for future emails.

• Email type: Marketing or Transactional. Unsubscribe visibility follows this setting.
• Logo: set the logo URL or pick one from the gallery, then set the width in px and an optional click-through link.
• Company name, Postal address, and Copyright: your sender identity in the footer.

Caution

Marketing emails must include a physical postal address (CAN-SPAM).

In Links & badges:

• Footer links: add labeled links, such as Privacy Policy or Terms.
• App store badges: add App Store or Google Play badges with destination URLs.
• Social links: add icons that link to your social profiles.

In Style:

• Text color: set the footer text color.
• Font size (px): set the footer font size.
• Alignment: left, center, or right.
• Underline links: turn on to underline footer links.

In Options:

• Unsubscribe link text: the label for the managed unsubscribe link on marketing emails. Transactional emails omit it.

Save your email

Click Save in the top bar to save your changes. Use Undo/Redo in the top bar to step back and forward through your edits.

Note

Saving stores your email in Content → Email content. From there you can edit and manage it, and use it in your campaigns. Learn more

Check your email before sending

Click Check in the top bar to open Smart check and scan your email for common issues:

• Buttons without a link
• Unfilled AI placeholders
• Empty image slots and missing alt text
• Text contrast that doesn’t meet WCAG AA
• An empty or too-long subject line
• A missing sender postal address in the footer of a marketing email
• Content that pushes the email over Gmail’s clipping limit (~102 KB, after which Gmail truncates the message)
• Untranslated content
• A countdown timer whose end date has already passed
• A display condition with a broken or empty rule, a branch that lost the block it chains to, or a condition that won’t apply because dynamic content is disabled for the account

Click a finding to jump straight to the affected element on the canvas.

Note

Smart check runs inside the editor and doesn’t check deliverability. Audit, which runs on the campaign send step against a real test send, still checks things like spam score, broken links, and the unsubscribe header. Run Smart check first to fix editor-visible issues, then rely on Audit before you send.

If you use Liquid in the subject, preheader, footer, or body, click Validate Liquid syntax at the bottom of the Smart check panel. Pushwoosh checks the syntax in every language you added.

Note

The Liquid check validates syntax only. It does not verify that the tags or event attributes you reference exist or that values are available for every user.

Send a test email

Before sending your email campaign, you can send a test email to preview how the content will appear in recipients’ inboxes.

1. Open the ⋮ menu in the top bar and select Test email.

2. In the window that opens, pick a saved test device or type any email address.

3. Click Send to send the test message to the address you chose.

Use your saved email content

Now that your email content is ready, it can be used in email campaigns. Learn more about how to use it