Criar um modelo de html do Mandrill
Tenho tentado criar um modelo html para o Mandrill, mas não faço a menor ideia de como criar conteúdo dinâmico. Eu gostaria de enviar e-mails Wordpress e Woocommerce através do Mandrill, mas em primeiro lugar precisa ser capaz de criar um modelo html de trabalho.
Alguém pode ajudar ou dar-me um exemplo de trabalho de um modelo html Mandrill?
0
1 answers
Os documentos Mandrill, mesmo a secção sobre modelos, não são particularmente úteis, pois eles assumem que você sabe como codificar modelos.
A maneira mais fácil de fazer um modelo (especialmente se você não tem idéia do que está fazendo) é se inscrever com Mailchimp (livre). Use o editor de modelos drag and drop para fazer o modelo desejado, em seguida, copiar o código e colá-lo no editor de modelos Mandrill. Ou ligue as suas contas de Mandrill e Mailchimp e deixe o Mandrill copiar os seus modelos para ti.
Aqui está um modelo de exemplo muito básico de qualquer maneira:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Facebook sharing information tags -->
<meta property="og:title" content="*|SUBJECT|*">
<title>*|SUBJECT|*</title>
<style type="text/css">
#outlook a{
padding:0;
}
body{
width:100% !important;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
body{
-webkit-text-size-adjust:none;
}
body{
margin:0;
padding:0;
}
img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
table td{
border-collapse:collapse;
}
#backgroundTable{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
/*
@tab Page
@section background color
@tip Set the background color for your email. You may want to choose one that matches your company's branding.
@theme page
*/
body,#backgroundTable{
/*@editable*/background-color:#ffffff;
}
/*
@tab Page
@section email border
@tip Set the border for your email.
*/
#templateContainer{
/*@editable*/border:1px solid #f6f6f6;
}
/*
@tab Page
@section heading 1
@tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
@style heading 1
*/
h1,.h1{
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:34px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Page
@section heading 2
@tip Set the styling for all second-level headings in your emails.
@style heading 2
*/
h2,.h2{
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:30px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Page
@section heading 3
@tip Set the styling for all third-level headings in your emails.
@style heading 3
*/
h3,.h3{
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:26px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Page
@section heading 4
@tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
@style heading 4
*/
h4,.h4{
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:22px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Header
@section preheader style
@tip Set the background color for your email's preheader area.
@theme page
*/
#templatePreheader{
/*@editable*/background-color:#FAFAFA;
}
/*
@tab Header
@section preheader text
@tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent div{
/*@editable*/color:#505050;
/*@editable*/font-family:Arial;
/*@editable*/font-size:10px;
/*@editable*/line-height:100%;
/*@editable*/text-align:left;
}
/*
@tab Header
@section preheader link
@tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent div a:link,.preheaderContent div a:visited,.preheaderContent div a .yshortcuts {
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Header
@section header style
@tip Set the background color and border for your email's header area.
@theme header
*/
#templateHeader{
/*@editable*/background-color:#FFFFFF;
/*@editable*/border-bottom:0;
}
/*
@tab Header
@section header text
@tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.headerContent{
/*@editable*/color:#202020;
/*@editable*/font-family:Arial;
/*@editable*/font-size:34px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
/*@editable*/padding:0;
/*@editable*/text-align:center;
/*@editable*/vertical-align:middle;
}
/*
@tab Header
@section header link
@tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
.headerContent a:link,.headerContent a:visited,.headerContent a .yshortcuts {
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px !important;
}
/*
@tab Body
@section body style
@tip Set the background color for your email's body area.
*/
#templateContainer,.bodyContent{
/*@editable*/background-color:#FFFFFF;
}
/*
@tab Body
@section body text
@tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
@theme main
*/
.bodyContent div{
/*@editable*/color:#505050;
/*@editable*/font-family:Arial;
/*@editable*/font-size:14px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Body
@section body link
@tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent div a:link,.bodyContent div a:visited,.bodyContent div a .yshortcuts {
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.bodyContent img{
display:inline;
height:auto;
}
/*
@tab Footer
@section footer style
@tip Set the background color and top border for your email's footer area.
@theme footer
*/
#templateFooter{
/*@editable*/background-color:#FFFFFF;
/*@editable*/border-top:0;
}
/*
@tab Footer
@section footer text
@tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
@theme footer
*/
.footerContent div{
/*@editable*/color:#707070;
/*@editable*/font-family:Arial;
/*@editable*/font-size:12px;
/*@editable*/line-height:125%;
/*@editable*/text-align:left;
}
/*
@tab Footer
@section footer link
@tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent div a:link,.footerContent div a:visited,.footerContent div a .yshortcuts {
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.footerContent img{
display:inline;
}
/*
@tab Footer
@section social bar style
@tip Set the background color and border for your email's footer social bar.
@theme footer
*/
#social{
/*@editable*/background-color:#FAFAFA;
/*@editable*/border:0;
}
/*
@tab Footer
@section social bar style
@tip Set the background color and border for your email's footer social bar.
*/
#social div{
/*@editable*/text-align:center;
}
/*
@tab Footer
@section utility bar style
@tip Set the background color and border for your email's footer utility bar.
@theme footer
*/
#utility{
/*@editable*/background-color:#FFFFFF;
/*@editable*/border:0;
}
/*
@tab Footer
@section utility bar style
@tip Set the background color and border for your email's footer utility bar.
*/
#utility div{
/*@editable*/text-align:center;
}
#monkeyRewards img{
max-width:190px;
}
</style></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div mc:edit="std_preheader_content">Preheader content</div>
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="190">
<div mc:edit="std_preheader_links">
Is this email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td class="headerContent">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="">
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<td valign="top" class="bodyContent">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div mc:edit="std_content00">Hi *|FNAME|*<strong>,</strong><br>
<br>
Content goes here<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" style="width: 370px;" width="408">
<tbody>
<tr>
<td nowrap="nowrap" style="width: 152px; height: 20px;">Login ID:</td>
<td nowrap="nowrap" style="width: 217px; height: 20px;"> *|LOGINID|*</td>
</tr>
<tr>
<td nowrap="nowrap" style="width: 152px; height: 20px;">Password:</td>
<td nowrap="nowrap" style="width: 217px; height: 20px;"> *|PASSWORD|*</td>
</tr>
<tr>
<td nowrap="nowrap" style="width: 152px; height: 20px;">Account number:</td>
<td nowrap="nowrap" style="width: 217px; height: 20px;"> *|ACCNUM|*</td>
</tr>
</tbody>
</table>
<br>
<br>
Kind regards,<br>
<br>
<strong></strong></div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<!-- // Begin Module: Standard Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top" width="350">
<div mc:edit="std_footer">
<em>Footer Content</em>
<br>
</div>
</td>
<td valign="top" width="190" id="monkeyRewards">
<div mc:edit="monkeyrewards">
*|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" id="utility">
<div mc:edit="std_utility">
<a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</center>
</body>
</html>
Os bits que começam por *| e terminam por |* são marcas de junção. veja a página de Ajuda Mandrill para ajudá-los
0
Author: mikeybeck, 2015-04-10 03:22:12