> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.poptin.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use email campaign editor?

The Email Campaign Editor is our built-in drag-and-drop tool for designing and customizing your email campaigns. This guide will walk you through everything you need to know to get started.

The editor opens with a live preview of your email on the right, and a sidebar on the left with all your design tools.

### The Editor Sidebar

The left sidebar has four main sections. Each one controls a different aspect of your email design.

![](https://storage.crisp.chat/users/helpdesk/website/-/7/a/3/4/7a34af3b43dae400/screenshot-2026-04-27-at-11011_1nlmp2.png)

1. **Add Elements**

Click the + icon (Add Elements) to access individual content blocks you can drag and drop into your email.

Elements are grouped into the following categories:

**Layouts**

Use these to control the structure of your email sections.

* 1 Column - Full-width single column layout.
* 2 Columns - Side-by-side two-column layout.
* 3 Columns - Three-column layout for more complex designs.
* Divider - A horizontal line to separate sections.
* RSS - Dynamically pulls content from an RSS feed.

**Text**

* Text - A standard text block for body copy.
* Intro - A highlighted intro-style text block.
* Boxed Text - Text inside a styled box, great for callouts or notices.

**Media**

* Image - Add a single image.
* Logo - Add your brand logo.
* Img + Text - Image paired with text side by side.
* Img + Text 2 - Two image and text combinations.
* Img + Text 3 - Three image and text combinations.
* Articles - Great for newsletter-style layouts with multiple article previews.
* Articles - RTL - Same as Articles but for right-to-left languages.
* YouTube - Embed a YouTube video thumbnail with a play button.

**Button and Link**

* Button - A standard CTA button.
* Button 2 - An alternate button style.
* Social Links - Add icons linking to your social media profiles.

**Tables**

* 3 Column, 4 Column, 5 Column - Structured table layouts for displaying data or product grids.

**Others**

* HTML - Add custom HTML code directly into your email.
* Divider - An additional divider option.

| Tip: To add an element, simply drag it into the desired position in your email preview.


![](https://storage.crisp.chat/users/helpdesk/website/-/7/a/3/4/7a34af3b43dae400/f7d3be33-7980-4908-8c1d-ec20a6_5gfr64.png)

2. **Add Blocks** 

Click the Add Blocks icon to access pre-built section templates. These are ready-made combinations of elements that you can drop into your email and customize.
Blocks are grouped as follows:

* Header - Pre-designed header sections with a logo and navigation links.
* Footer - Footer templates with social links and an unsubscribe option.
* Pricing - A pre-built pricing section layout.
* Layout - Column-based layout blocks (1, 2, or 3 columns).
* Custom Blocks - Any blocks you have saved yourself will appear here. If you haven't saved any yet, this section will show "No Blocks Yet."

| Tip: Blocks are great for quickly building consistent email structures without starting from scratch every time.

![](https://storage.crisp.chat/users/helpdesk/website/-/7/a/3/4/7a34af3b43dae400/blocks-ss_18eupsm.png)

3. **Settings**

The Settings panel controls the overall look and feel of your email. You can set the canvas background color (the area surrounding your email), the email body color, and upload a background image for either. Additional options include email width (default 600px), font family, background repeat, size, and position. You can also control padding for your email blocks under Block Options.

![](https://storage.crisp.chat/users/helpdesk/website/-/7/a/3/4/7a34af3b43dae400/settings-pe-new_12mlv56.png)

4. **Code**

Click the Code icon ( < > ) to view and edit the raw HTML of your email.

This is useful if you:

* Want to make precise customizations not available in the visual editor.
* Need to paste in custom HTML from another source.
* Are troubleshooting how a specific element is being rendered.

The code view shows a split screen with HTML on the left and a live preview on the right.

|| Note: This is an advanced feature. If you're not familiar with HTML email coding, we recommend sticking to the visual editor to avoid unintended formatting issues.

![](https://storage.crisp.chat/users/helpdesk/website/-/7/a/3/4/7a34af3b43dae400/screenshot-2026-04-28-at-15017_evgo0y.png)

**Previewing Your Email**

You can preview your email by using one of the three preview icons on top of the editor.

* Desktop icon - Preview how your email looks on a desktop screen.
* Mobile icon - Preview the mobile version of your email.
* Eye icon - Open a full preview of the email.

We recommend checking these time to time to make sure your email template looks perfect on all devices.