Re: Need help with adding multiple modules VERY frustrasting

Anonymous · ‎09-13-2018

Hi everyone,

I have been trying and trying to figure this out to no avail for months whenever I get back to trying to fix. When trying to add another module I keep getting an invalid module error!!! So frustrating. Here are my two modules added so far. I want to add a few more as well.

The first one:

works, but then I get an error on this one:

I have read and read and read forums and nothing seems to help.

Thanks for any help you can give me.

Here is the code. I've highlighted my container and the two modules. Also there is a screenshot of the email.

<!doctype html>

<head>

<title>Monday Minutes</title>

</head>

<title>Monday Minutes</title>

.main_container{

max-width: 740px;

height: 100%;

margin: 10px auto 0px auto;

background-color: #ffffff;

}

.in_container{

background: #fafafa;

}

.back_link{

display: block;

text-decoration: none;

margin-top: 80px;

text-align: center;

font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

color: #3E3E3E;

font-size: 16px;

letter-spacing: 1px;

}

.back_link .back_arrow_icon{

vertical-align: middle;

margin-right: 10px;

}

html{

width: 100%;

}

body{

width: 100%;

margin:0;

padding:0;

-webkit-font-smoothing: antialiased;

mso-margin-top-alt:0px;

mso-margin-bottom-alt:0px;

mso-padding-alt: 0px 0px 0px 0px;

background: #eef1f2;

font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

}

p,h1,h2,h3,h4{

margin-top:0;

margin-bottom:0;

padding-top:0;

padding-bottom:0;

}

table{

font-size: 14px;

border: 0;

}

img{

border: none!important;

}

a:visited {

color: #ffffff;

}

</style>

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

body[yahoo] .full_width_600 {width:90% !important;}

}

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

body[yahoo] .full_width_700 {width:100% !important;}

body[yahoo] .txt_center {text-align:center !important;}

body[yahoo] .separator {height: 40px !important;}

}

#footer {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

background-color: #666666;

padding: 30px 60px;

}

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

#footer {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

}

.social_icons {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

}

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

.social_icons {

margin: 15px 0 0 0;

}

.social_icons div {

margin: 0 0 0 5px;

}

#logo {

width: 216px;

height: 46px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png);

}

#twiterr_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/twiterr_icon.png);

}

#linkedin_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_icon.png);

}

#insta_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/insta_icon.png);

}

#youtube_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/youtube_icon.png);

}

#fb_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/fb_icon.png);

}

</style>

<style>

.transition, p, ul li i:before, ul li i:after {

transition: all 0.25s ease-in-out;

}

.flipIn, h1, ul li {

animation: flipdown 0.5s ease both;

}

.no-select, h2 {

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

b

h1, h2 {

color: #676f84;

font-family: 'Roboto Slab', serif;

}

h1 {

text-transform: uppercase;

font-size: 36px;

line-height: 42px;

letter-spacing: 3px;

font-weight: 100;

}

h2 {

font-size: 26px;

line-height: 34px;

font-weight: 700;

letter-spacing: 1px;

display: block;

background-color: #fefffa;

margin: 0;

cursor: pointer;

}

p {

color: rgba(48, 69, 92, 0.8);

font-size: 17px;

line-height: 26px;

letter-spacing: 1px;

position: relative;

overflow: hidden;

max-height: 800px;

opacity: 1;

transform: translate(0, 0);

z-index: 2;

}

ul {

list-style: none;

perspective: 900;

padding: 0;

margin: 0;

background-color: #ffffff;

}

ul li {

position: relative;

padding: 0;

margin: 5px 60px 5px 60px;

padding-bottom: 4px;

padding-top: 18px;

border-bottom: 1px dotted #003b49;

}

ul li:nth-of-type(1) {

animation-delay: 0.5s;

}

ul li:nth-of-type(2) {

animation-delay: 0.75s;

}

ul li:nth-of-type(3) {

animation-delay: 1s;

}

ul li:last-of-type {

padding-bottom: 0;

}

ul li i {

position: absolute;

transform: translate(-6px, 0);

margin-top: 16px;

right: 0;

}

ul li i:before, ul li i:after {

content: "";

position: absolute;

background-color: #ffc627;

width: 3px;

height: 9px;

}

ul li i:before {

transform: translate(-2px, 0) rotate(45deg);

}

ul li i:after {

transform: translate(2px, 0) rotate(-45deg);

}

ul li input[type=checkbox] {

position: absolute;

cursor: pointer;

width: 100%;

height: 100%;

z-index: 1;

opacity: 0;

}

ul li input[type=checkbox]:checked ~ p {

margin-top: 0;

max-height: 0;

opacity: 0;

transform: translate(0, 50%);

}

ul li input[type=checkbox]:checked ~ i:before {

transform: translate(2px, 0) rotate(45deg);

}

ul li input[type=checkbox]:checked ~ i:after {

transform: translate(-2px, 0) rotate(-45deg);

}

@keyframes flipdown {

0% {

opacity: 0;

transform-origin: top center;

transform: rotateX(-90deg);

}

5% {

opacity: 1;

}

80% {

transform: rotateX(8deg);

}

83% {

transform: rotateX(6deg);

}

92% {

transform: rotateX(-3deg);

}

100% {

transform-origin: top center;

transform: rotateX(0deg);

}

.yellow-line {

border-top: 2px solid #ffb819;

width: 40%;

margin-bottom:15px;

margin-top: 15px;

}

</style>

<table class="mktoContainer" id="mkto-container">

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td>

<tbody>

<tr>

<p style="text-align:center; color: #676f84; font-family: 'Roboto Slab', serif; font-size: 28px; font-weight: 600; line-height:30px;">Salubrious. You know what that <br>means don’t you?</p>

</div></td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

<td>

<p style="text-align:center; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;"> This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph.</p>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

<tbody>

<tr>

<p style="text-align:center; color: #ffc627; font-family: 'Roboto Slab', serif; font-size: 25px; font-weight: 600; line-height:30px;">Word of Mouth</p>

</div></td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

<td>

<p style="text-align:center; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 22px;">Premier members working to identify and share best practices in sepsis prevention, detection and treatment recently reported an 18 percent overall decrease in sepsis mortality from 2008-2016. Dr. Madeleine Biondolillo, vice president of quality and safety at Premier, explains the keys to success in a recent interview with HFMA.</p>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

<tbody>

<tr>

</div></td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

<td>

<p style="text-align:center; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 22px;"> Countdown to Real ID Act. Effective Jan. 22, 2018, the Department of Homeland Security will no longer accept state-issued IDs or driver’s licenses for domestic flights from several states. Find out if your state meets the new federal standards. </p>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td>

<tbody>

<tr>

<p style="text-align:center; color: #676f84; font-family: 'Roboto Slab', serif; font-size: 28px; font-weight: 600; line-height:30px;">Your Checklist</p>

<br>

<p style="font-size:18px;text-align:center; color: #676f84; font-family: 'Roboto Slab', serif;font-weight: 600;">Weeks of Oct. 16 and 23</p>

</div></td>

</tr>

</tbody>

</table>

</tr>

<tr>

</tr>

<tr>

<td>

<tr class="mktoModule" mktoname="Article Module" id="article_listing_module">

<td>

<p style="text-align:left; color: #003b49; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 20px;"> Don't Let the Flu Beat You | <span style="color: #b4c0c5;text-align:left; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px;font-weight: 900;">Make an appointment to get your flu shot at one of our on-site clinics. Find out how. </span></p>

</div>

</tr>

</table>

<tbody>

<tr>

<td>

<p style="text-align:left; color: #003b49; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 20px;"> Don't Let the Flu Beat You | <span style="color: #b4c0c5;text-align:left; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px;font-weight: 900;">Make an appointment to get your flu shot at one of our on-site clinics. Find out how. </span></p><center><img src="http://offers.premierinc.com/rs/381-NBB-525/images/AMCP-Logo-annual2018.png" alt="" width="50%" style="display: block;" /></center>

</div>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td>

<p style="text-align:left; color: #003b49; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 20px;"> Don't Let the Flu Beat You | <span style="color: #b4c0c5;text-align:left; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px;font-weight: 900;">Make an appointment to get your flu shot at one of our on-site clinics. Find out how. </span></p>

</div>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td>

<p style="text-align:left; color: #003b49; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 20px;"> Don't Let the Flu Beat You | <span style="color: #b4c0c5;text-align:left; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px;font-weight: 900;">Make an appointment to get your flu shot at one of our on-site clinics. Find out how. </span></p>

</div>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td>

<tbody>

<tr>

<p style="text-align:center; color: #676f84; font-family: 'Roboto Slab', serif; font-size: 28px; font-weight: 600; line-height:30px;">Upcoming Events</p>

<br>

<p style="font-size:18px;text-align:center; color: #676f84; font-family: 'Roboto Slab', serif;font-weight: 600;">Mark your calendar and save the date for these upcoming events:</p>

</div></td>

</tr>

</tbody>

</table>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr class="mktoModule" mktoname="Event Module" id="event_listing_module">

<td>

<p style="text-align:left; color: #003b49; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 20px;"> Oct. 17-18 | <span style="color: #b4c0c5;text-align:left; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px;font-weight: 900;">Flu Shot Clinics | CLT Office, 9 a.m. - 4 p.m. </span></p>

</div>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td>

<p style="text-align:left; color: #003b49; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 20px;"> Oct. 17-18 | <span style="color: #b4c0c5;text-align:left; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px;font-weight: 900;">Flu Shot Clinics | CLT Office, 9 a.m. - 4 p.m. </span></p>

</div>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td>

<p style="text-align:left; color: #003b49; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 20px;"> Oct. 17-18 | <span style="color: #b4c0c5;text-align:left; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px;font-weight: 900;">Flu Shot Clinics | CLT Office, 9 a.m. - 4 p.m. </span></p>

</div>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td>

<p style="text-align:left; color: #003b49; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 20px;"> Oct. 17-18 | <span style="color: #b4c0c5;text-align:left; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px;font-weight: 900;">Flu Shot Clinics | CLT Office, 9 a.m. - 4 p.m. </span></p>

</div>

</tr>

<tr>

<td>

<p style="text-align:left; color: #003b49; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px;padding-top:25px;"> Do you have something that needs to be published in Monday Minutes? <a style="color: #003b49;" href="url">link text</a></p>

</div>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

<td>

<p style="color: #ffffff; font-family: 'Roboto Slab', serif; font-size: 30px; font-weight: 600;"> Have something to share?</p>

</div> </td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

<p style="font-size: 12px;text-align: center;color:#ffffff;padding-top: 10px;padding-left: 20px;">Premier Inc. 13034 Ballantyne Corporate Pl, Charlotte, NC 28277 | <a href="https://www.premierinc.com/contact-premier/" style="text-decoration: none;">Contact Us</a> | <a href="https://www.premierinc.com/careers/" style="text-decoration: none;">Careers</a></p>

</div>

</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Frank_Breen2 · ‎09-21-2018

I converted that 40px space into a spacer module, see attached for updated code.

View solution in original post

Frank_Breen2 · ‎09-19-2018

I see what you are looking to do here, but email 2.0 works slightly different, you can't nest your module in with all code, it needs on it's own within the container. Your HTML included lots of bad markup too, I fixed that, see the attached. I made each section a module so you could see it working, but what you need to do now is break up everything below 'Your Checklist' into modules.

Currently this is what I have for you:

Container

Module (Header)
Module (In Container 1)
Module (In Container 2)
Module (Split 1)
Module (Split 2)
Module (Footer)

But a suggested module root for your design would be:

Container

Module (Logo)
Module (Hero)
Module (Body 1)
Module (Body 2)
Module (Body 3)
Module (Check List)
Module (Article Item)
Module (Event)
Module (Event Item)
Module (Bottom CTA)
Module (Footer)

Please note I left these two lines of code in the html, I kept them for reference, you should remove them once you recode

Anonymous · ‎09-20-2018

Thank you so much Frank for helping me out. Your the first to attempt to help me with my mess. You mentioned an attachment. I don't see anything. Must be missing something.

Anonymous · ‎09-20-2018

Thank you for the html file. Attached is what I'm getting when I place the code in Marketo. I must be missing something. I see the content sections but no modules. These would need to be modules as well to add dates/articles. I apologize but how would I break them up into more modules? Like these..

<tbody>

<tr>

<p style="text-align:left; color: #003b49; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 20px;"> Don't Let the Flu Beat You | <span style="color: #b4c0c5;text-align:left; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px;font-weight: 900;">Make an appointment to get your flu shot at one of our on-site clinics. Find out how. </span></p>

</div>

</tr>

</tbody>

</table>

<tbody>

<tr>

<p style="text-align:center; color: #676f84; font-family: 'Roboto Slab', serif; font-size: 28px; font-weight: 600; line-height:30px;">Upcoming Events</p>

<br>

<p style="font-size:18px;text-align:center; color: #676f84; font-family: 'Roboto Slab', serif;font-weight: 600;">Mark your calendar and save the date for these upcoming events:</p>

</div></td>

</tr>

</tbody>

</table>

After this is created I am handing it off to HR to update as needed / adding events and such.

Frank_Breen2 · ‎09-20-2018

Did you add this as a Marketo email template, as the view you have above usually happens if you add the code directly to email asset, which will block out the Modules section. At the moment the bottom white section is is all in 1 table, so to make that into Modules, you have to break that up into separate tables. Do you have access to a html developer?

Anonymous · ‎09-20-2018

I see... I just replaced the code in the marketing activity email and didnt create a new template. I see them now:). Yes i use dreamweaver. I will make them separate tables and give it a shot. You might hear back from me:)

Thank you!

Anonymous · ‎09-20-2018

OK... I see that this template has a bunch of nested tables. What would be the easiest way to separate them?

All I would need is the article module and the event module.

Frank_Breen2 · ‎09-20-2018

Try the attached, I broke it up into more modules, that should be closer to the design you want.

Anonymous · ‎09-20-2018

Oh man so close!! I really appreciate you. Most importantly these two are what we will need to duplicate. This will be my future bible thats for sure. I've learned a bunch today though. How would these be broken down into modules? So we can add single story's and events?

Frank_Breen2 · ‎09-20-2018

Try the attached, you should be able to replicate those items in the email asset now.