Re: Need you help with create an Email Template which includes Module

Hadar_Ron · ‎04-17-2019

Hey guys!

I want to create an email template which will include a few modules. I've tried anything, read any article, watch any video and NONE.

Please help me to finish the email template! I need you guys!

Thanks in advance for the help!

I've attached here the HTML:

<!doctype html>

<head>

<title>Subject line</title>

/* Style for Apple products and/or devices that recognize Media Queries and Webfonts */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600,400);

body {

width: 100% !important;

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: auto;

margin: 0 !important; /*android 4.4 left side fix*/

padding: 0;

}

div[style*="margin: 16px 0"] {

margin: 0 !important;

}

/*android 4.4 left side fix*/

table td {

border-collapse: collapse;

-ms-text-size-adjust: auto;

-webkit-text-size-adjust: auto;

}

table {

border-collapse: collapse;

mso-table-lspace: 0pt;

mso-table-rspace: 0pt;

margin: 0 auto;

}

img {

outline: none;

text-decoration: none;

border: none;

-ms-interpolation-mode: bicubic;

}

a img {

border: none;

}

p {

margin: 0px 0px !important;

}

@media only screen and (max-width: 600px) {

td[class=mobilestyle] {

font-size: 16px !important;

line-height: 20px !important;

}

td[class=mobilestyle] span[class=header] {

font-size: 18px !important;

}

table[class=table100] {

}

td[class=socialicon] {

padding-right: 7px !important;

}

td[class=socialicon] img {

width: 35px !important;

}

.threeCol {

width: 45% !important;

display: block !important;

margin: 5px auto !important;

}

h1 {

font-size:200%;

}

@media only screen and (max-width:400px) {

td[class=header] {

font-size: 12px !important;

}

td[class=footer] {

font-size: 10px !important;

}

img[class=logo] {

width: 96px !important;

}

/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */

</style>

<!--[if (gte mso 9)|(IE)]>

/* Force outlook to fallback on Arial instead of Times Roman and removes extra spaces */

table {

border-collapse:collapse !important;

mso-table-lspace:0pt!important;

mso-table-rspace:0pt!important;

margin:0 auto;

}

h1,h2,h3,h4,h5,h6,p,a,span,td,strong {

font-family: Arial,Helvetica,Verdana,sans-serif !important;

}

</style>

<![endif]-->

</head>

<!--[if (gte mso 9)|(IE)]>

<tr>

<![endif]-->

<tbody>

<tr>

<td>

<tr>

</tr>

</table>

<table class="table100 mktoModule" id="bannerarea" mktoname="mktoModule" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="max-width:600px;">

<tr>

</div> </td>

</tr>

</table>

<table class="table100 mktoModule" id="content1-area" mktoname="content1-area" width="100%" style="max-width:600px;background:#ffffff;" align="center" cellspacing="0" cellpadding="0" border="0">

<tr>

<tr>

</div> </td>

</tr>

</table> </td>

</tr>

</table>

<table class="table100 mktoModule" id="content2" mktoname="content2"width="100%" style="max-width:600px;background:#ffffff;" align="center" cellspacing="0" cellpadding="0" border="0">

<tr >

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</table>

<table class="table100 mktoModule" id="Speakers" mktoname="Speakers" width="100%" style="max-width:600px;background:#ffffff;" align="center" cellspacing="0" cellpadding="0" border="0">

<tr >

<tbody>

<tr>

<tbody>

<tr>

<p style="font-weight:600;">${Fullname1}</p>

<p style="font-weight:400;">${JobTitle1}</p>

<p style="font-weight:400;">${FreeText1}</p>

</div> </th>

<p style="font-weight:600;">${Fullname2}</p>

<p style="font-weight:400;">${JobTitle2}</p>

<p style="font-weight:400;">${FreeText2}</p>

</div> </th>

<p style="font-weight:600;">${Fullname3}</p>

<p style="font-weight:400;">${JobTitle3}</p>

<p style="font-weight:400;">${FreeText3}</p>

</div> </th>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</table>

<table class="table100 mktoModule" id="PreTitle" mktoname="PreTitle" width="100%" style="max-width:600px;background:#ffffff;" align="center" cellspacing="0" cellpadding="0" border="0">

<tr >

<tbody>

<tr>

<p style="color:#5f5f5f;text-align:center;"> ${PreCTAtitle} </p>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</table>

<table class="table100 mktoModule" id="CTA_Area" mktoname="CTA_Area" width="100%" style="max-width:600px;" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="0" align="center">

<tr >

<tbody>

<tr>

<span style="color: #ffffff;"> <a style="color: #ffffff; text-align:center;text-decoration: none; font-weight:400;" href="${ctaLink}?utm_source=email&utm_medium=marketo&utm_campaign=${utm_campaign}" target="_blank">${ctaTitle}</a> </span>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</table>

<table class="table100 mktoModule" id="SignatureArea" mktoname="SignatureArea" width="100%" style="max-width:600px;" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="0" align="center">

<tr >

<tbody>

<tr>

<p style="font-weight:600; font-size:16px;">${SignatureLine1}</p>

<p style="color:#5f5f5f;"> ${SignatureLine2} </p>

</div> </td>

</tr>

</tbody> </table> </td>

</tr>

</table>

<table class="table100 mktoModule" id="Devider" mktoname="Devider" width="100%" style="max-width:600px;" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" align="center">

<tr >

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</table>

<tr >

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</table>

<tr>

<td class="footer" style="text-align: left; padding: 30px; padding-right: 0; padding-left: 0; color: #333333; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 14px; font-weight: normal; text-align: center;" width="90%"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>

</tr>

</table>

</td>

</tr>

</tbody>

</table>

<!--[if (gte mso 9)|(IE)]>

</td>

</tr>

</table>

<![endif]-->

</body>

</html>

Bryan_Epstein · ‎04-18-2019

A few things to note:

Within your variable definitions, you can and should use default values for these items. This way when you go to preview the email, you can see a working example in action.
If you are planning to make it so individuals can update the background of the modules within, you would need to add variables in that section as well as class="mktoColor"
You shouldn't use Google or Web fonts in an email since they won't show up on all browsers. You do have a fallback of Arial, which is good though.
When you are inserting code into a post, remember to do the following:

I'm not sure how your email is supposed to be laid out necessarily, but here is how I believe it was meant to be laid out (cleaned up the markup for you as well). I attached the HTML file for you.

View solution in original post

Josh_Hill13 · ‎04-17-2019

1. use github

2. what exactly isn't working? screenshots?

3. hire a developer or look at firms like knak.io for help.

Hadar_Ron · ‎04-18-2019

Hey Josh,

So right know my error is: Invalid Module: #mktoContainer > tbody > tr

All the template is working great just the part of creating the modules I don't know how to solved it.

Thanks!!

Bryan_Epstein · ‎04-17-2019

Hadar, I am thinking a possible issue with your mktoModule classes is that you are also including the table100 class within that.

EDIT: There's a lot of things in the syntax that are causing issues across the board. The mktoContainer class is commented out, so that's a place to start. Then, you'll have to make sure all of your modules fit within that row (<td>). As Josh said, it will be much easier to work with this in CodePen or Github.

Hadar_Ron · ‎04-18-2019

Hey Bryan,

So, I've moved the modules to the <td> rows. but I got that error:

Invalid Module: #mktoContainer > tbody > tr

Can you please explain to me how do I need to order the mktoContainer and the mktoModule?

I know HTML CSS and I've already created a simple template, but I'm really stuck in this step because I didn't understand the logic behind the order.

Thanks!!

Bryan_Epstein · ‎04-18-2019

A few things to note:

Within your variable definitions, you can and should use default values for these items. This way when you go to preview the email, you can see a working example in action.
If you are planning to make it so individuals can update the background of the modules within, you would need to add variables in that section as well as class="mktoColor"
You shouldn't use Google or Web fonts in an email since they won't show up on all browsers. You do have a fallback of Arial, which is good though.
When you are inserting code into a post, remember to do the following:

I'm not sure how your email is supposed to be laid out necessarily, but here is how I believe it was meant to be laid out (cleaned up the markup for you as well). I attached the HTML file for you.

Hadar_Ron · ‎04-18-2019

Thank You so much Bryan!

You helped me a lot!!

Bryan_Epstein · ‎04-18-2019

Great Hadar! Glad I was able to help. If that response solved your issue, please feel free to mark my reply as correct so that the thread shows up as 'resolved' in the community.

Bryan_Epstein · ‎04-18-2019

Hadar, you should mark my previous reply with the solution as the correct response to this post.

Hadar_Ron · ‎04-18-2019

Done