Creating Email Template

Revolvapp uses simplified syntax for email templates. This allows you to create the design of emails quickly, simply and not think about how the template will work. Because the editor based on the syntax generates tested and ready-made pieces of HTML code that will look the same in all the major mail clients.

To learn how to create Revolvapp templates, you can start by looking at the template that comes with the editor. Or you can see examples of other ready-made Templates.

Base layout

A typical email template includes three main areas: header, main, and footer.

Here is the syntax:

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body>
        <re-main>
            <re-container>
                <re-header background-color="#ffffff">
                    ...
                </re-header>
            </re-container>
            <re-container>
                ...
            </re-container>
            <re-container>
                <re-footer background-color="#ffffff">
                    ...
                </re-footer>
            </re-container>
        </re-main>
    </re-body>
</re-html>

You can see examples of ready-made Headers, Footers and use their code in your templates.

Cards

The basis of the content is the cards that will be visually edited in Revolvapp. The template has one or more cards.

Here is an example of card:

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body>
        <re-main>
            <re-container>
                <re-card background-color="#ffffff" padding="40px 20px">
                    ...
                </re-card>
            </re-container>
        </re-main>
    </re-body>
</re-html>

Blocks

Blocks are building elements of a card in which the content itself is placed. A card can have as many blocks as you like.

Here is an example of card blocks:

<re-card background-color="#ffffff" padding="40px 20px">
    <re-block align="center" padding="0 0 20px 0">
        <re-heading align="center" type="h1">My Heading</re-heading>
    </re-block>
    <re-block align="center" padding="0 0 20px 0">
        <re-text align="center">My Text...</re-text>
    </re-block>
    <re-block padding="32px 0" align="center">
        <re-image align="center" href="http://example.com/" src="images/my-image.png" width="400"></re-image>
    </re-block>
    <re-block align="center" padding="0 24px">
        <re-button href="http://example.com/">Check it out</re-button>
    </re-block>
</re-card>

Grid

The grid allows you to create content in multiple columns. For example:

<re-card background-color="#ffffff" padding="40px 20px">
    <re-block>
        <re-grid>
            <re-row>
                <re-column width="300px" padding="0 0 20px 0">
                    <re-image href="http://example.com" src="images/image-1.jpg"></re-image>
                    <re-heading type="h2" href="http://example.com" font-size="20px" padding="8px 0 4px 0">
                        Heading...
                    </re-heading>
                    <re-text font-size="14px">
                        Text...
                    </re-text>
                </re-column>
                <re-column-spacer width="20px"></re-column-spacer>
                <re-column width="300px" padding="0 0 20px 0">
                    <re-image href="http://example.com" src="images/image-2.jpg"></re-image>
                    <re-heading type="h2" href="http://example.com" color="#000000" font-size="20px" padding="8px 0 4px 0">
                        Heading...
                    </re-heading>
                    <re-text font-size="14px">
                        Text...
                    </re-text>
                </re-column>
            </re-row>
        </re-grid>
    </re-block>
</re-card>