New Participant

Solved

Need you help with create an Email Template which includes Module

Forum|Forum|6 years ago
April 17, 2019
2 replies
8402 views

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>

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Bryan_Epstein

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.

Bryan_Epstein

New Participant

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_RonAuthor

New Participant

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_EpsteinAccepted solution

New Participant

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.html.zip

Josh_Hill13

New Participant

1. use github

2. what exactly isn't working? screenshots?

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

Hadar_RonAuthor

New Participant

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!!

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded