Tips & Tricks

How to add a spacer between cards or blocks?

The Revolvapp template syntax has a <re-spacer> tag for adding some space between cards, blocks, headers, footers in one word between any elements in a template. So just add <re-spacer> and set up a height of space.

<re-container>
    <re-header>
        ...
    </re-header>
</re-container>
<re-spacer height="2px"></re-spacer>
<re-container>
    <re-card>
        ...
    </re-card>
</re-container>

The example above shows how to add the space with 2px height between containers.

It is possible to add the spacer between cards like this:

<re-container>
    <re-card>
        ...
    </re-card>
    <re-spacer height="8px"></re-spacer>
    <re-card>
        ...
    </re-card>
</re-container>

In this case, don't forget to set the card spacer option with automatically adding the spacer tag after the card will be duplicated.

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html',
    card: {
        spacer: '8px'
    }
});

How to add a divider line between cards or blocks?

The Revolvapp template syntax has a <re-divider> tag for adding a line between cards, blocks, headers, footers, etc. Add <re-divider> and set up a height and background color of the line.

<re-container>
    <re-header>
        ...
    </re-header>
</re-container>
<re-divider height="3px" background-color="#000000"></re-divider>
<re-container>
    <re-card>
        ...
    </re-card>
</re-container>

In the example abode you can see how to add the divider line with 3px width and black color.

The divider element also supports the ability to set its width.

<re-divider width="600px" height="3px" background-color="#000000"></re-divider>

Now we have the line 600px width.

How to add the space between elements but only on the mobile devices?

It's easy with re-mobile-spacer tag. This tag will show only for small screen. You do not need to add the special CSS queries for this. Just add the tag between elements and set up top and bottom padding to adjust its height.

For example:

<re-block align="center">
    <re-button-app width="130px" src="images/app_store.png" href="http://example.com/">App Store</re-button-app>
	<re-mobile-spacer padding="4px 0"></re-mobile-spacer>
    <re-inline-spacer padding="0 4px"></re-inline-spacer>
    <re-button-app width="130px" src="images/google_play.png" href="http://example.com/">Google Play</re-button-app>
</re-block>

In this example you can see the re-mobile-spacer between the button of apps. In the desktop version of the email, this tag has no effect. But if you toggle Revolvapp to mobile view or see the email on mobile devices the mobile-spacer will be shown aand split the buttons horizontally.

How to load custom fonts from Google Fonts to my template?

First, you need to generate the link in the Google Fonts like this:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">

Then add the link to font in the template between re-head tag:

<re-html>
    <re-head>
        <re-title>Revolvapp</re-title>
        <re-font href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700"></re-font>
    </re-head>
    <re-body background-color="#ffffff">
        ...
    </re-body>
</re-html>

And finally set the styles option with your font:

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html',
    styles: {
        text: {
            'font-family': "'Playfair Display', Helvetica, Arial, sans-serif"
        }
    }
});

That's all. Now Revolvapp knows that it need to use this font for all text elements in the template.

How to hide or change something in the template on the mobile devices?

There are two options to hide or change something on the mobile devices.

The first way is to use pre-defined classes:

  • mobile-hidden - to hide element or block on the small screens
  • mobile-left - to align content in the block by left edge
  • mobile-center - to center content in the block
  • mobile-right- to align content in the block by right edge

For example, add the mobile-hidden class to some block:

<re-block class="mobile-hidden">
    <re-text>My text</re-text>
</re-block>

Now this block will be hidden when you see the email on the movile devices.

The second way is media queries. Just add the style tag between re-head tag in the template and write mdeia query for small screen.

<re-html>
    <re-head>
        <re-title>My email</re-title>
        <re-style>
        @media all and (max-width:639px) {
            .mobile-block {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }
        }
        </re-style>
    </re-head>
</re-html>

NB: !important is required when you specify rules for small screens.

Then add the specified class to your elements in the template, for example:

<re-block class="mobile-block" padding="40px">
    <re-text>My text</re-text>
</re-block>

Ok, the block will have 16px padding on the left and right edges on the mobile devices instead of 40px padding on the desktop version.