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.
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.
<aside> 💡 Tutorial Sample You can following along and download the sample email template that includes all features we described in this article.
</aside>
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.
To define a part of your HTML template as a content box, you must:
div tags;sl-content-block class to the element.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.
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"
data-block-labelThis attribute sets the content block's label, which is displayed on the toolbar.
data-block-icon