# Email content blocks reference

Reference for every block you can add on the [Drag & drop editor](/product/content/email-content/drag-and-drop-email-editor/create-email-content-with-drag-and-drop-editor/) canvas, and for the link types available on buttons and text. To control which recipients see a block, set a [display condition](/product/content/email-content/drag-and-drop-email-editor/show-content-to-specific-recipients/).

## 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](#heading-and-text):** titles and short headlines in the email
* **[Text](#heading-and-text):** body copy and longer descriptions
* **[Button](#button):** a clickable call to action
* **[Image](#image):** pictures from [Media store](/product/content/media-store/), upload, or URL
* **[Video](#video):** a clickable video poster that links to a YouTube or Vimeo video
* **[Card](#card):** an image paired with a heading, text, and button in one layout
* **[Divider](#divider):** a line that separates sections visually
* **[2 columns](#columns):** two equal columns side by side
* **[3 columns](#columns):** three equal columns side by side
* **[4 columns](#columns):** four equal columns side by side
* **[33 / 67](#columns):** two columns where the left takes about 33% of the width and the right about 67%
* **[67 / 33](#columns):** two columns where the left takes about 67% of the width and the right about 33%
* **[Timer](#countdown-timer):** a countdown for offers and deadlines
* **[Menu](#menu):** a row or column of links, such as navigation or contacts
* **[Social](#social):** icons that link to your social profiles
* **[HTML](#html):** custom HTML, such as a form, survey, or embedded video
* **[Products](#products):** a repeating grid of product cards with image, title, description, price, and a buy button

### 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.

<img src="/emails-drag-and-drop-email-editor-9.webp" alt="Heading block selected on the canvas with the text formatting toolbar showing style and formatting options"/>

**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](/product/content/email-content/drag-and-drop-email-editor/configure-email-styling-and-footer/#configure-email-wide-styling).

**Personalization with Merge Tags**

Merge Tags are placeholders that insert a [Tag](/product/audience-data-and-segmentation/user-data-tags/tags/) 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.

<img src="/emails-drag-and-drop-email-editor-42.webp" alt="Media Gallery with Library, Stock photos, and Generate with AI tabs, and a search by file name field"/>

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](#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.

<img src="/emails-drag-and-drop-email-editor-10.webp" alt="Image settings panel with Replace image, Image URL, Alt text, Link URL, Link target, and Padding" width="320"/>

### 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.

<img src="/emails-drag-and-drop-email-editor-44.webp" alt="Video block settings with Video URL, Alt text, Thumbnail URL, Play button overlay, Width, Corner radius, and Alignment"/>

### 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.

<img src="/emails-drag-and-drop-email-editor-34.webp" alt="Card block settings panel with Layout, Image, Size and fit, and Spacing options"/>

### 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.

<img src="/emails-drag-and-drop-email-editor-11.webp" alt="Button block on the canvas with a formatting toolbar and Link settings in the right panel"/>

See [Add links](#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.

<img src="/emails-drag-and-drop-email-editor-12.webp" alt="Button Styles settings in the right panel with Alignment, Background, Text color, Font size, Border radius, and Padding" width="320"/>

### 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.

<img src="/emails-drag-and-drop-email-editor-13.webp" alt="Divider block settings with line style, color, thickness, and width options in the right panel"/>

### HTML

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

#### Examples

<Tabs>
<TabItem label="Lead form">

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

<img src="/emails-drag-and-drop-email-editor-14.webp" alt="HTML lead form in the email editor with an email field and a Get my code button" width="360"/>

<details>
<summary>HTML code</summary>

```html
<!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>
```

</details>

</TabItem>
<TabItem label="Survey">

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

<img src="/emails-drag-and-drop-email-editor-15.webp" alt="HTML survey in the email editor asking what the user is shopping for with four category options" width="360"/>

<details>
<summary>HTML code</summary>

```html
<!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>
```

</details>

</TabItem>
<TabItem label="Video">

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

<details>
<summary>HTML code</summary>

```html
<!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>
```

</details>

</TabItem>
</Tabs>

<Aside type="note">

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

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

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

</Aside>

### 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

<img src="/emails-drag-and-drop-email-editor-16.webp" alt="Menu block settings with item labels, URLs, direction, alignment, and separator options"/>

### 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.

<img src="/emails-drag-and-drop-email-editor-17.webp" alt="Social block settings with platform links plus Alignment, Icon size, and Gap"/>

### 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.

<img src="/emails-drag-and-drop-email-editor-18.webp" alt="Timer block settings with Countdown end date and time, Labels, Appearance, and Spacing options"/>

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.

### Products

A **Products** block shows a grid of product cards from one shared template. Each card can include an image, title, description, price, and a buy button. The template repeats for every product you add.

<img src="/emails-drag-and-drop-email-editor-51.webp" alt="Products block on the canvas with a grid of product cards"/>

Click a card on the canvas to make it active and edit it:

* Change the title, description, price, picture, or per-product link to update only that card.
* Change the template layout, colors, padding, or which elements it contains to update every card.

In the settings panel:

* **Number of products:** set how many cards to show (1–24), or click **Add product** to add one more.
* **Columns:** choose 1, 2, or 3 cards per row. On mobile, cards always stack in one column.
* **Gap:** turn on to set the space between cards. Off uses the default (16px).
* **Product images:** click a thumbnail to replace that product's picture.
* **Product links:** enter a URL for each product.
* **Card template:** pick a layout, then set **Card background**, **Card corner radius**, and **Content padding**. These styles apply to every card.

<Aside type="note">
You enter products by hand. This block does not pull from a product catalog or personalize content per recipient.
</Aside>

## 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.

<img src="/emails-drag-and-drop-email-editor-38.webp" alt="Bookmark icon in a Card block's toolbar opening a dialog to name and save the block"/>

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

<img src="/emails-drag-and-drop-email-editor-39.webp" alt="Saved blocks section at the bottom of the Blocks tab with saved block tiles and delete icons"/>

* 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.

### Keep copies in sync

When you save a block, turn on **Keep copies in sync** to link every inserted copy to the same source. Edit the source once, and the change applies everywhere that block is used, including emails already scheduled to send.

<img src="/emails-drag-and-drop-email-editor-50.webp" alt="Save block dialog with Keep copies in sync turned on"/>

A synced copy is locked on the canvas. You can't edit it directly. Select the copy to open its settings:

* **Edit synced block:** unlock this copy so you can change it. A banner appears at the top. Click **Apply to all** to save your changes to the source and every other copy, or **Cancel** to discard them. You can unlock only one synced block at a time.
* **Update from source:** replace this copy with the latest version from the source.
* **Detach from source:** unlink this copy from the source so you can edit it on its own.

<Aside type="note">
Each time you open an email, Pushwoosh checks its synced copies and updates any that are out of date. A toast shows how many were refreshed. If the source has newer content, the copy's settings show a warning until you reopen the email or click **Update from source**. If the source was deleted, the copy keeps its last content and you can only **Detach from source**.
</Aside>

## 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**.

<img src="/emails-drag-and-drop-email-editor-20.webp" alt="Insert Edit Link dialog with Action type Open Website and a URL field"/>

### Manage preferences link

Adds a link to the [subscription preference center](/product/messaging-channels/emails/email-preferences/#optional-setup-full-preference-center) where recipients can choose which email categories they receive. The link is inserted automatically.

<img src="/emails-drag-and-drop-email-editor-21.webp" alt="Insert Edit Link dialog with Manage preferences link selected as the action type"/>

### Unsubscribe link

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

<img src="/emails-drag-and-drop-email-editor-22.webp" alt="Insert Edit Link dialog with Unsubscribe link selected as the action type and an optional redirect field"/>

<Aside type="tip">
You can also add an unsubscribe link in an [HTML](#html) block:

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

The **%%PW_EMAIL_UNSUBSCRIBE%%** placeholder is replaced with the Pushwoosh unsubscribe URL when the email is sent.
</Aside>

#### 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 removed from their [**Subscribed Email Categories**](/product/messaging-channels/emails/email-preferences/#how-subscriptions-are-stored) tag.

A confirmation screen appears with **Resubscribe** and **Manage preferences** options. [Learn more](/product/messaging-channels/emails/email-preferences/#default-behavior-unsubscribe-from-a-category).

##### If the subscription preference center is not enabled
The recipient is opted out of all marketing emails and the [**Unsubscribed Emails**](/product/audience-data-and-segmentation/user-data-tags) tag is set to `true`. Transactional emails are not affected and will continue to be delivered. [Learn more about message types](/product/messaging-channels/marketing-vs-transactional/).

<Aside type="caution" title="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](/product/audience-data-and-segmentation/segmentation/) filtered by **Unsubscribed Emails = false**. To avoid complaints, do not email recipients who have unsubscribed.
</Aside>

Clicks are counted in the unsubscribe rate in [Message History](/product/statistics-and-analytics/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.

<img src="/emails-drag-and-drop-email-editor-23.webp" alt="Insert Edit Link dialog with Web version link selected as the action type"/>

### 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**.

<img src="/emails-drag-and-drop-email-editor-37.webp" alt="Insert Edit Link dialog with No track statistics selected as the action type and a URL field"/>

### 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](/product/audience-data-and-segmentation/subscription-forms/double-opt-in/).

<img src="/emails-drag-and-drop-email-editor-24.webp" alt="Insert Edit Link dialog with Subscription form confirmation link selected as the action type"/>