- Revolvapp

Revolvapp uses templates with simplified email syntax. 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 Revolvapp:

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

It's very simple and reliable. Revolvapp itself will generate reliable HTML, the code of all elements of the email and this code will display perfectly in different email clients.

Create the template

As in the usual html inside Revolvapp template, everything starts with tags: html, head, and body.

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

Next body is divided into three areas: header, main, footer

<re-html>
    <re-head>...</re-head>
    <re-body>
        <re-header>...</re-header>
        <re-main>...</re-main>
        <re-footer>...</re-footer>
    </re-body>
</re-html>

The header usually displays the logo, email menu and other head information. Header is an optional area, you may not want to use it if it is not provided by the design.

The main contains the body of the email and all the main blocks with information. The main required element of the template.

The footer contains address, social links, how to unsubscribe, and other secondary info. Footer is an optional template area.

Blocks

Blocks are the basic building unit of the template. Everything inside the template is made up of blocks. Any tag, must be placed in the block.

<re-html>
    <re-head>...</re-head>
    <re-body>
        <re-header>...</re-header>
        <re-main>
            <re-block>
                <re-heading>...</re-heading>
            </re-block>
            <re-block>
                <re-text>...</re-text>
            </re-block>
        </re-main>
        <re-footer>...</re-footer>
    </re-body>
</re-html>

There can be several tags in one block.

<re-html>
    <re-head>...</re-head>
    <re-body>
        <re-header>...</re-header>
        <re-main>
            <re-block>
                <re-heading>...</re-heading>
                <re-text>...</re-text>
            </re-block>
        </re-main>
        <re-footer>...</re-footer>
    </re-body>
</re-html>

Grids

The grid helps divide the content into columns. In this case, the block will be the column itself and the elements do not need to be wrapped additionally in the block.

<re-main>
    <re-block>
        <re-grid>
            <re-column width="290px">
                <re-image src="..."></re-image>
            </re-column>
            <re-column-spacer width="20px"></re-column-spacer>
            <re-column width="290px">
                <re-heading>...</re-heading>
                <re-text>...</re-text>
            </re-column>
        </re-grid>
    </re-block>
</re-main>

Properties

Properties are tag attributes that define styles, such as text color, background etc.

<re-text color="#555">...</re-text>
<re-heading level="h2">...</re-heading>
<re-image src="https://example.com/my-image.jpg"></re-image>

See all the properties of each tag .

Noneditable

Sometimes it is needed that the header or footer in the template is not editable. To do this, set the noneditable attribute for any tag and it will become uneditable visually.

<re-footer noneditable="true">...</re-footer>

Placement of styles in the template

Revolvapp has the ability to store template style settings right inside the template. This can be done by placing the re-options tag inside the template.

For example, like this:

<re-html>
    <re-options>
    {
        "text": {
            "font-family": "Arial",
            "font-size": "18px",
            "line-height": "1.5",
            "color": "#222"
        },
        "heading": {
            "font-family": "Geomanist",
            "font-weight": "bold",
            "color": "#111"
        }
    }
    </re-options>
    <re-head>...</re-head>
    <re-body>...</re-body>
</re-html>

Now, if you save the template and display it in Revolvapp afterwards, it is these style settings that will be set in the settings.

See the styles setting .

Syntax