# How to Use HTML Code in the Drag-and-Drop Editor to Create Email Templates

Kasplo provides two ways to create email templates:

* Drag-and-Drop Editor
* HTML Editor

If you already have an HTML email template, you can adapt it so that it works inside the Drag-and-Drop editor. This allows you to edit images, links, buttons, and text visually without modifying the HTML code every time.

This guide explains how to structure your HTML code so it becomes editable inside the Drag-and-Drop editor.

### Understanding the Template Structure

For the editor to recognize different sections of your email, the HTML layout must follow a specific structure.

**Stripe → Structure → Container → Block**

**Explanation of each element:**

* **Stripe** – Represents a full row of content in the email.
* **Structure** – Defines the column layout within a row.
* **Container** – Holds content blocks within the structure.
* **Block** – The actual content such as text, images, buttons, etc.

#### Structure hierarchy:

**Stripe → Structure × n → Container × n (up to 8) → Block × n**

* One stripe can contain multiple structures.
* Each structure can contain up to 8 containers.
* Each container can contain multiple blocks.

### Step 1: Add Stripe Class

1. A Stripe represents a main row of content.
2. To make a section editable, add the following class to the table cell:

```
// <td class="esd-stripe">
```

3. What is this?
4. Once applied, the editor will recognize the section as a draggable row.

### Step 2: Add Structure Class

1. Inside the stripe, add a Structure that defines the column layout.
2. Example:

```
// <td class="esd-structure">
```

3. What is this?
4. This allows the editor to identify and manage column layouts.

### Step 3: Add Container Class

1. Containers group multiple blocks together inside a structure.
2. Example:

```
// <td class="esd-container-frame">
```

3. What is this?
4. Containers allow new blocks to be dragged and placed inside them from the block panel.

### Step 4: Add Block Classes

1. Blocks represent the content elements inside the email.
2. Use the appropriate class depending on the content type.

| Block Type   | Class Name       |
| ------------ | ---------------- |
| Image        | esd-block-image  |
| Text         | esd-block-text   |
| Button       | esd-block-button |
| Spacer       | esd-block-spacer |
| Social Icons | esd-block-social |
| Menu         | esd-block-menu   |
| Custom HTML  | esd-block-html   |

3. Example for an image block:

```
// <td class="esd-block-image">
```

4. What is this?
5. Example for a text block:

```
// <td class="esd-block-text">
```

### Step 5: Using Custom HTML Blocks

1. Some HTML elements may have complex structures that cannot be converted into standard blocks.
2. In such cases, wrap the code inside an **HTML block:**

```
// <td class="esd-block-html">
  <!-- Custom HTML code -->
</td>
```

3. What is this?
4. This allows you to:
   * Move the block
   * Copy the block
   * Delete the block
   * Edit the HTML code
5. while keeping the original layout intact.

### Example: Converting a Product Card

A typical product card might contain:

* Product Image
* Title
* Description
* Price
* Button

You can map these elements to blocks like this:

| Content       | Block Type                 |
| ------------- | -------------------------- |
| Product Image | Image Block                |
| Product Title | Text Block                 |
| Description   | Text Block                 |
| Price         | Text Block                 |
| Button        | Button Block or HTML Block |

This allows each section to be edited individually in the editor.

### Reusing Layouts

When you create repeating sections like:

* Product cards
* Blog posts
* Event listings

You only need to build one structure correctly.

After that, you can:

* Duplicate the structure
* Replace text
* Update images
* Change links

This makes it much faster to build templates.

### Benefits of Using HTML in the Drag-and-Drop Editor

To ensure compatibility:

* Use table-based HTML layouts
* Apply classes to table cells (td)
* Keep blocks simple and modular
* Use HTML blocks for complex layouts
* Test templates across different email clients

### Conclusion

By structuring your HTML with the correct classes, you can convert static HTML email templates into fully editable templates inside the Kasplo Drag-and-Drop editor.

This approach allows you to maintain full control over the design while still benefiting from an easy-to-use visual editing interface.

> *Need more help? Contact our support team at <helpdesk@kasplo.com>*

### &#xD;