Integrate with Adestra Email.

Adestra

Adestra provides Email and Marketing Automation Software. It has a handy template system with some really useful templating tags. Unlike other ESPs, the template editor providers solid support for background images, handling a lot of the code work itself behind the scenes. The language is more complex than other email service providers, but this does give you more options on creating a more flexible template.

How to create Adestra email templates

Firstly, lets go through the basics of Adestras' language. Adestra regions are areas of your email template that Adestra recognises as being editable. You simply tag an element and Adestra does the rest. Anything that isn't tagged as an Adestra content region will be locked down; this is handy to stop areas being edited that should remain consistent from one email to the next.

Adestra content regions we'll cover:

  • Repeatable Sections
  • Alternate Sections
  • Containers
  • Editable Content Regions
  • Editable Image Regions
  • Editable Hyperlink Regions

Important: all template region tags need to be assigned a unique name.

Repeatable and Alternative Sections

To give the most customisation to your email template from within Adestras' email editor, you will need sections that can be repeated and chosen from a list of alternatives. This allows the user to create multiple layouts using the same email template.

Add the below tags to a <td>, <tr> or <div> element.

Adestra repeatable tag: amf:repeat="unique_name"

Adestra alternate group tag: amf:alternate="alternate_group_name"

Adestra alternate group option tag: amf:option="unique_name_choice"

In the Cogentro email template, we make use of these tags by adding them to our section blocks in the opening <tr>. This makes each section within our email repeatable. The example below shows two section blocks. These are both grouped within the alternate choice of 'row', with the choice options of one or two columns. This means the user can choose to make a row with one or two columns, repeat it and make another row with one or two columns. As you can now see, using the repeat and the alternate tags, we can create plenty of choices for our user to build a custom layout email. You can nest repeats and alternatives within each other, so you could have a one column block containing multiple options, a two column block with multiple options and so on.


<!-- // SECTION BLOCK // -->
<tr amf:repeat="row" amf:alternate="row" amf:option="One_Column">
    <td align="center" valign="top" class="Section">
        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->
                <td class="Section1padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="left" valign="top" class="Section1Content Responsive">
                                Email content col 1
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
    </td>
</tr>
<!-- // SECTION BLOCK END // -->



<!-- // SECTION BLOCK // -->
<tr amf:repeat="row" amf:alternate="row" amf:option="Two_Columns">
    <td align="center" valign="top" class="Section">
        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->
                <td class="Section2padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="left" valign="top" class="Section2Content1 Responsive">
                                Email content col 1
                            </td>
                            <td align="left" valign="top" class="Section2Content2 Responsive">
                                Email content col 2
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
    </td>
</tr>
<!-- // SECTION BLOCK END // -->

Container Regions

Containers are primarily used in Cogentro to support the use of Adestras' background-color options for table cells. Give the container a name and the add a list of background color options for the user to choose from.

Add the below tag to a <td> element.

Adestra Container Region: amf:container="unique_name"

Background colors: amf:bgcolor="#ffffff #eeeeee #111111 #000000"

In the Cogentro email template, we make use of this tag by adding it to the final containing <td> element (see below).


<!-- // SECTION BLOCK // -->
<tr amf:repeat="row" amf:alternate="row" amf:option="One_Column">
    <td align="center" valign="top" class="Section">
        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->
                <td class="Section1padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="left" valign="top" class="Section1Content Responsive" amf:container="unique_name" amf:bgcolor="#ffffff #eeeeee #111111 #000000">
                                Email content col 1
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
    </td>
</tr>
<!-- // SECTION BLOCK END // -->

Editable Content Regions

Now let's make a text area of content in our email editable. There are a few options to chose from being single line, multiline and HTML boxes. The HTML box allows additional styling to be added to the text by the user.

Add the below tag(s) to a <div> element wrapped around the text area.

Single Line: amf:textline="unique_name">

Multiline: amf:textbox="unique_name"

HTML editor: amf:htmlbox="unique_name" amf:htmltools="basic grp_styles colors(#ffffff #eeeeee) TextColor"

In the Cogentro email template, we make use of this tag by adding a <div> to the final containing <td> element (see below).


<!-- // SECTION BLOCK // -->
<tr amf:repeat="row" amf:alternate="row" amf:option="One_Column">
    <td align="center" valign="top" class="Section">
        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->
                <td class="Section1padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="left" valign="top" class="Section1Content Responsive" amf:container="unique_name" amf:bgcolor="#ffffff #eeeeee #111111 #000000">
                                <div amf:htmlbox="Title" amf:htmltools="basic grp_styles colors(#ffffff #eeeeee) TextColor">
                                    <h1>Heading</h1>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
    </td>
</tr>
<!-- // SECTION BLOCK END // -->

Editable Image Regions

Let's, make images changable in Adestra.

Add the below tag to an <img> element.

Adestra Image Region: amf:image="unique_name"

<img src="image.jpg" width="325" style="width: 325px; height: auto;" alt="A beautiful description" class="MobileImg" amf:image="Image_1"/>

Hyperlink Regions

At some point in your email you'll have a hyperlink. Make this editable in Adestra by adding a tag. You can also add a default link lable.

Add the below tag to an <a> element.

Adestra Hyperlink Region: amf:link="unique_name" linklabel="READ MORE"

<a href="http://www.cogentro.com" amf:link="unique_name" linklabel="READ MORE">READ MORE</a>

Background Images

Thankfully Adestra has a handy background image tag that auto-converts a users uploaded background image to a bulletproof background image.

Adding the below tags to a <td> element will make the background image work, and allow customisable fallback colors.

amf:background

amf:bgimage

amf:container


                        <!-- // SECTION BLOCK // -->
<tr amf:repeat="row" amf:alternate="row" amf:option="One_Column">
    <td align="center" valign="top" class="Section">
        
        <table border="0" cellpadding="0" cellspacing="0" width="600" style="width: 600px;" class="SectionBlock" bgcolor="#ffffff">
            <tr>
                <!-- // CONTENT CONTAINER // -->
                <td class="Section1Padding">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <!-- Col 1-->
                            <td align="left" valign="top" class="Section1Content">
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td style="background-position: center top; 
                                                   background-image:url(image.jpg);
                                                   background-repeat: no-repeat;
                                                   background-position: top center;
                                                   background-size: cover;"
                                                   width="600"
                                                   height="300"
                                                   valign="top"
                                                   align="center"
                                                   amf:background
                                                   amf:bgimage
                                                   amf:container="BG_Image_Container">
                                            <span>Overlay Text</span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>
                         
                        

Other useful Adestra content

To complete your email there a few other things to consider listed below in this handy checklist:

Unsubcribe Link
Make sure the unsubcribe link is compatible by using the following:

<a href="[* link.unsub_url *]">Unsubcribe</a>

View email online Link
To create an Adestra view in browser hyperlink, at this to your code:

<a href="[* link.webversion_url *]">Read Online</a>

Email Title Tag
Add this to your title tag.

<title>[*info.subject*]</title>

Further Documentation
Adestra's library of further documentation can be found here.