Sendloop has hundreds of mobile-friendly email templates available for your use. However, you can also create your own email template thSendloop has hundreds of mobile-friendly email templates that you can easily customize using the drag-and-drop email builder. However, you can also create your own template for use with Sendloop's drag-and-drop email builder. This article will show you how to do so.

Prerequisites

We assume that you have already coded your HTML-based email. Because of this, we will only cover the steps needed to make your template compatible with Sendloop's email builder.

If you need a boilerplate email design, we recommend you use the one designed by Sean Powell.

Tutorial Sample You can following along and download the sample email template that includes all features we described in this article.

Content Blocks

The basis of the drag-and-drop email editor is the content block. Each content block includes a different type of content, such as text or an image, and by combining different types of content boxes, you create your final email template.

Creating Content Blocks

To define a part of your HTML template as a content box, you must:

  1. Encapsulate it within div tags;
  2. Add the sl-content-block class to the element.

Sendloop-Specific Classes

You can use the following classes to turn your email's HTML template into one that works with the Sendloop email builder. We will cover more of what the classes do as the article progresses.

Untitled

Adding Content Blocks to the Email Builder Toolbars

To make a certain content block available for use in the email builder's toolbars, you must define the attributes required by Sendloop in the div element.

In general, the attributes follow this format: data-block-* = "VALUE"

Parameter: data-block-label

This attribute sets the content block's label, which is displayed on the toolbar.

Parameter: data-block-icon