Email Editor Templates

Sendlio's default editor uses templates with simplified email syntax. 

(The advanced editor uses regular HTML). 

This makes it easier and faster to create templates.

Compare, this is a typical html email for a button:

<table cellpadding="0" cellspacing="0" border="0" width="auto" style="width: auto; font-size: 18px; font-weight: normal; background-color: rgb(0, 145, 255); color: rgb(255, 255, 255); border-radius: 24px; border-collapse: separate;">
    <tr>
        <td align="center" valign="top" style="vertical-align: top; line-height: 1; text-align: center; font-family: Roboto, Arial, Helvetica, sans-serif; border-radius: 24px;">
            <a target="_blank" href="https://example.com" style="display: inline-block; box-sizing: border-box; cursor: pointer; text-decoration: none; margin: 0px; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; background-color: rgb(0, 145, 255); color: rgb(255, 255, 255); border-radius: 24px; border: 1px solid rgb(0, 145, 255); padding: 14px 40px;">
                Check it out
            </a>
        </td>
    </tr>
</table>

Looks scary. Doesn't it?

And here's a simplified syntax of the same button that is used in Sendlio:

<re-button href="https://example.com">
    Check it out
</re-button>

These are the structure properties available in Sendlio's email editor.

html

A template starts with a  re-html tag, it can contain only re-head and re-body tags.

<re-html>     <re-head>...</re-head>     <re-body>...</re-body> </re-html>

head

The  re-head tag contains head components such as style, title and font elements.

<re-head>     <re-title>...</re-title> </re-head>

title

The  re-title contains a title of the email.

<re-head>     <re-title>My Email</re-title> </re-head>

font

Possible attributes:

  • href
<re-font href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i"></re-font>

style

Contains the css styles of the email.

<re-style> .myclass {     width: 100%; } </re-style>

Responsive styles:

<re-style> @media all and (max-width:639px) {     .block-on-mobile {         padding: 40px 20px !important;     } } </re-style>

body

Possible attributes:

  • background-color
  • background-image
  • background-size
  • padding
<re-html>     <re-head>         <re-title>My Email</re-title>     </re-head>     <re-body background-color="#f4f4f4">         ...     </re-body> </re-html>

preheader

<re-body background-color="#f4f4f4">     <re-preheader>         This is preheader and it will show as a preview in some mail clients.     </re-preheader>     ... </re-body>

container

Sets the width for header, main, footer. For example, to make the header a full width color, and the header itself with 600px width.

Possible attributes:

  • width (600px by default)
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius
<re-container width="100%" background-color="#000">     <re-header>...</re-header> </re-container>

main

A way to organize the blocks into a single group.

Possible attributes:

  • width (600px by default)
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius
<re-main width="100%">...</re-main>

header

Possible attributes:

  • width (600px by default)
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius
<re-header background-color="#fff">...</re-header>

footer

Possible attributes:

  • width (600px by default)
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius
<re-footer background-color="#fff">...</re-footer>

block

A way to organize elements into a single group.

Possible attributes:

  • align
  • valign
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius
  • class
<re-block padding="0 0 20px 0">...</re-block>

spacer

Possible attributes:

  • height
<re-spacer height="2px"></re-spacer>

divider

Possible attributes:

  • width (100% by default)
  • height
  • background-color
<re-divider background-color="#000000" height="2px"></re-divider>

grid

<re-grid>     <re-column width="300px">...</re-column>     <re-column width="300px">...</re-column> </re-grid>

column

Possible attributes:

  • align
  • valign
  • width
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius — td
  • class — td
<re-column width="300px">...</re-column>

column-spacer

Possible attributes:

  • width
<re-column width="300px"></re-column> <re-column-spacer width="20px"></re-column-spacer> <re-column width="300px"></re-column>

text

Possible attributes:

  • align
  • margin
  • color
  • class
  • font-size
  • font-weight
  • font-style
  • line-height
  • text-decoration
<re-text>...</re-text>

heading

Possible attributes:

  • align
  • level (h1, h2, h3 etc)
  • href
  • margin
  • color
  • class
  • font-weight
  • font-style
  • text-decoration
<re-heading level="h2">...</re-heading>

Heading with link:

<re-heading href="http://example.com">...</re-heading>

link

Possible attributes:

  • align
  • margin
  • href
  • color
  • class
  • font-size
  • font-weight
  • font-style
  • line-height
  • text-decoration
<re-link href="https://example.com">Check it out</re-link>

button

Possible attributes:

  • class
  • font-size
  • font-style
  • font-weight
  • background-color
  • color
  • border
  • border-radius
  • margin
  • href
<re-block padding="0 0 20px 0">     <re-button href="http://example.com/">Try Now</re-button> </re-block>

image

Possible attributes:

  • width (100% by default)
  • margin
  • class
  • src
  • alt
  • href
  • border-radius
  • border
<re-image src="images/myimage.jpg"></re-image>

Image with link:

<re-image href="http://example.com/" src="images/myimage.jpg"></re-image>

menu

Possible attributes:

  • align
  • color
  • margin
  • class
<re-menu>     <re-menu-item href="http://example.com">Item 1</re-menu-item>     <re-menu-spacer>&nbsp;</re-menu-spacer>     <re-menu-item href="http://example.com">Item 2</re-menu-item> </re-menu>

menu-item

Possible attributes:

  • href
  • color
  • class
  • font-size
  • font-weight
  • text-decoration
<re-menu-item href="http://example.com">Item 1</re-menu-item>

menu-spacer

Possible attributes:

  • color
  • font-size
  • font-weight
  • text-decoration
  • class
<re-menu-spacer>&nbsp;</re-menu-spacer> <re-menu-spacer>&nbsp;|&nbsp;</re-menu-spacer>

social

Possible attributes:

  • align
  • margin
  • class
<re-social>     <re-social-item src="facebook.jpg" alt="Facebook"></re-social-item>     <re-social-item src="twitter.jpg" alt="Twitter"></re-social-item> </re-social>

social-item

Possible attributes:

  • href
  • width
  • alt
  • src
  • class
<re-social-item src="twitter.jpg" alt="Twitter"></re-social-item>

social-spacer

Possible attributes:

  • color
  • font-size
  • font-weight
  • class
<re-social-spacer>&nbsp;</re-social-spacer> <re-social-spacer>&nbsp;|&nbsp;</re-social-spacer>

list

Possible attributes:

  • type (unordered, ordered)
  • font-size
  • font-weight
  • line-height
  • color
  • class
<re-list>     <re-list-item>Item 1</re-list-item>     <re-list-item>Item 2</re-list-item> </re-list>

list-item

Possible attributes:

  • class
<re-list-item>Item 1</re-list-item>

table

Possible attributes:

  • padding
  • border
  • bckground-color
  • class
<re-table></re-table>

table-body

Used if the table has a Table Head.

<re-table>     <re-table-head>...</re-table-head>     <re-table-body>...</re-table-body> </re-table>

table-head

Used if the table has a Table Body.

<re-table>     <re-table-head>...</re-table-head>     <re-table-body>...</re-table-body> </re-table>

table-row

Possible attributes:

  • style
<re-table-row>     <re-table-cell>...</re-table-cell>     <re-table-cell>...</re-table-cell> </re-table-row>

table-cell

Possible attributes:

  • width
  • align
  • rowspan
  • colspan
  • padding
  • border
  • color
  • font-size
  • background-color
  • class
  • style

<re-table-cell>...</re-table-cell>

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us