Adestra’s hand-coded email that is fully compactible with most email clients including Outlook, Apple mail, and gmail.
ReallyB2B
Most are probably wondering if email development is still a thing? Well, yeah, it is very much alive with an incline towards even more popular for the next few years as no matter how much technology changes, this is still one of the most unique and effective ways to engage and to track user’s behaviour.
As part of my role, of one my main tasks was to often develop email master templates in Adestra for many other clients. Meaning different layouts and editable Adestra fields. For those who are not familiar with Adestra, it is an email automation software that allows companies to engage audiences with personalized content that drives conversions (continue to read more about Adestra).
When coding a master template in Adestra for the first time can be quite difficult simply because of some weird reasons there are no other resources online about it other than what they provide. For instance, if you look up video and tutorials on Youtube, you would not find any.
Moving on, given that I worked with this in the past it was relatively easy to adapt. Coding an email is one thing and coding for the Adestra is not a completely different thing but in order for it to be editable by an employee or anyone who has no knowledge of coding, you must work with Adestra tags.
The use of Adestra tags
For instance, while coding the header, I separate it three rows (the top grey row, the logo row, and the banner/hero row) all inside one main table. Now normal email you would style this using inline CSS to get you the result you want but in Adestra however, for each row that you want to add editable content you must identify it by using its tags but bear in mind <tr> and <td> uses different tags.
Usually, in a normal HTML email, the top grey row would look something like this
<tr bgcolor="#dbdbdb">
<td align="center" valign="top">
<span style="color: #000000">
Deliver authentic, engaging influencer marketing campaigns | <a href="#" style="color: #2196f3; text-decoration: underline;">View in browser</a>
</span>
</td>
</tr>But in Adestra however, you must add different tags for <tr> and <td> in order to make them editable.
<tr bgcolor="#dbdbdb" amf:repeat="Main_Section" amf:alternate="Main_Section" amf:option="Pre_Header">
<td align="center" valign="top" style="box-sizing: border-box; padding: 10px 30px; vertical-align: top; display: block; font-size:10px; font-family: Arial, sans-serif; font-weight: 400; line-height:120%; color:#000000; text-align: center;" amf:htmlbox="Pre_Header_Text" amf:htmltools="Bold Italic RemoveFormat NumberedList BulletedList Outdent Indent JustifyLeft JustifyRight JustifyCenter Link Unlink TextColor EmailTools FontSize PasteText Underline">
<span style="font-family: Arial, sans-serif; color: #000000; font-size:11px;">
Deliver authentic, engaging influencer marketing campaigns |
<a href="[*link.webversion_url*]" amf:link="View_Online_Link" style="font-family: Arial,sans-serif; font-size:10px; color:#df0d36; text-decoration: underline; font-weight: 600;">View in browser</a>
</span>
</td>
</tr>So to break this down…
Line 1 – I am telling Adestra that this is the main (amf:repeat=”Main_Section” amf:alternate=”Main_Section“) row/wrapper for this section and then giving it a name (amf:option=”Pre_Header“) that will show to the user when putting an email together using Adestra’s email editor.
Line 2 – Once you set the default font style by using inline CSS you then at this tag (amf:htmlbox=”Pre_Header_Text” amf:htmltools=”Bold Italic RemoveFormat NumberedList BulletedList Outdent Indent JustifyLeft JustifyRight JustifyCenter Link Unlink TextColor EmailTools FontSize PasteText Underline”).
The above piece of code does two things. Set the front end section name (amf:htmlbox=”Pre_Header_Text” ) to the user when using Adestra’s email editor and (amf:htmltools=”Bold Italic RemoveFormat NumberedList BulletedList Outdent Indent JustifyLeft JustifyRight JustifyCenter Link Unlink TextColor EmailTools FontSize PasteText Underline“) allows the user to have access to all the html tools mentioned when using the text editor on Adestra’s email editor as seen below.
Bear in mind these tags changes depending on what you want the user to edit for instance Images, links and others have their own (visit Adestra’s help page for more).
