SOLVED

Re: Email Template - Need help with button/ no button option for module

Go to solution
HP
Level 2
Level 2

Email Template - Need help with button/ no button option for module

Hello!

I am stumped and hoping someone with more Marketo skills (i.e. almost anyone) can help.  I started with the Homegrown Marketo Starter Template and I have been able to figure out enough - through trial and error - to customize it to our needs almost perfectly. (I have attached a screenshot of the original on left and my customized version on the right if that helps.)

 

This is a template we will use all the time, but not every instance will call for the CTA button in the top section. And the Homegrown template didn't have a module that fit the parameters. My troubleshooting has led me down these paths, unsuccessfully.

 

1. Use the Free-image module in the starter template, make it full width (like the Hero2) and add the ability to have text on top. (I want to avoid having the copy in the image itself.)

 

2. Duplicate the Hero2 module and remove the code that contains the button so with each email, we can just select the appropriate module - the Hero with or without the button.

 

3. Within the Hero2 module, have a way to remove the button when it isn't needed.  I am sure this wouldn't have been considered a best practice if I had gotten it to work, but I tried simply removing the link and call to action, but alas, a small empty button still shows up and I can't turn it transparent.

 

If anyone has any input or feedback, I'd be grateful. Keep in mind, I am not at all code fluent. 

Thank you very much! Also, apologies if i am posting this in the wrong space. 

 

Screen Shot 2022-05-03 at 6.13.31 PM.png

2 ACCEPTED SOLUTIONS

Accepted Solutions
Jo_Pitts1
Level 10 - Community Advisor

Re: Email Template - Need help with button/ no button option for module

@HP ,

so if I understand correctly, you want to hide/show the CTA button?

Is this something you need to do based on a persons data (i.e. do it programmatically), or based on a manual switch?

If it is the latter, you have two options:

  1. Have two modules, one with a CTA, and one without.
  2. Wrap the whole button code inside a <TR> or <DIV> (which it probably is already), and based on a Marketo Boolean in the module variables, alter the style of the surrounding element (e.g. something like 
    style="${showCTA} all your other styling goes here"​

    The setup of the variable would be something like this

    <meta class="mktoBoolean" mktoModuleScope="true" id="showCTA" mktoName="Show CTA" default="true" true_value="display:block;" false_value="display:none; mso-hide:all;" true_value_name="YES" false_value_name="NO" >  

If it is the former, you'd adopt a very similar approach to the steps I've detailed above in point 2., but you'd use velocity script to control the displaying/hiding of the CTA.  Something along the lines of:

 

 

style="{{my.showCTA}} all your other styling goes here"​

 

 

and for the velocity script

 

 

#if (lead.myDataPoint.equals('sell them stuff') ) 
display:block;
#else
display:none; mso-hide:all;
#end

 

 

Hopefully that helps (but sorry for all the code in there 🙂 )

 

Oh - and be very careful with background images with text, other images, buttons, etc etc etc. over the top of them.  It requires some careful coding to ensure it all works with Microsoft Outlook for Windows Desktop App.

 

Cheers

Jo

View solution in original post

Jo_Pitts1
Level 10 - Community Advisor

Re: Email Template - Need help with button/ no button option for module

That's easy enough.

In your mobile responsive section of the CSS create a class something like this:

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

/*startmobile*/

body {
	width: auto !important;
}

.mNoBackground {
  background-image: none !important;
}
etc
etc
etc

 

and in this line

<td class="background" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: auto;margin-bottom: 0;background-image:${hero2BackgroundImage};background-repeat: no-repeat;background-position: center 
center;background:${hero2BackgroundImage};background-color:${hero2BackgroundColor};border-collapse: collapse;" background="${hero2BackgroundImage}" bgcolor="${hero2BackgroundColor}" valign="middle"> 

 

add that mNoBackground in as a style like this:

<td class="background mNoBackground" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: auto;margin-bottom: 0;background-image:${hero2BackgroundImage};background-repeat: no-repeat;background-position: center 
center;background:${hero2BackgroundImage};background-color:${hero2BackgroundColor};border-collapse: collapse;" background="${hero2BackgroundImage}" bgcolor="${hero2BackgroundColor}" valign="middle"> 

 

I've not had a chance to test, but that should get you close.

View solution in original post

14 REPLIES 14
Jo_Pitts1
Level 10 - Community Advisor

Re: Email Template - Need help with button/ no button option for module

@HP ,

so if I understand correctly, you want to hide/show the CTA button?

Is this something you need to do based on a persons data (i.e. do it programmatically), or based on a manual switch?

If it is the latter, you have two options:

  1. Have two modules, one with a CTA, and one without.
  2. Wrap the whole button code inside a <TR> or <DIV> (which it probably is already), and based on a Marketo Boolean in the module variables, alter the style of the surrounding element (e.g. something like 
    style="${showCTA} all your other styling goes here"​

    The setup of the variable would be something like this

    <meta class="mktoBoolean" mktoModuleScope="true" id="showCTA" mktoName="Show CTA" default="true" true_value="display:block;" false_value="display:none; mso-hide:all;" true_value_name="YES" false_value_name="NO" >  

If it is the former, you'd adopt a very similar approach to the steps I've detailed above in point 2., but you'd use velocity script to control the displaying/hiding of the CTA.  Something along the lines of:

 

 

style="{{my.showCTA}} all your other styling goes here"​

 

 

and for the velocity script

 

 

#if (lead.myDataPoint.equals('sell them stuff') ) 
display:block;
#else
display:none; mso-hide:all;
#end

 

 

Hopefully that helps (but sorry for all the code in there 🙂 )

 

Oh - and be very careful with background images with text, other images, buttons, etc etc etc. over the top of them.  It requires some careful coding to ensure it all works with Microsoft Outlook for Windows Desktop App.

 

Cheers

Jo

HP
Level 2
Level 2

Re: Email Template - Need help with button/ no button option for module

First, thank you so much for responding! Was so happy to see a reply this morning! 😀

 

And yes, exactly - hide/show the CTA button manually (based on email content) on an email-by-email basis and not on a person's data or anything. 

 

Below, I am showing where I think I would insert what you shared in the template code - can you tell me if I am in the right ballpark? You might not be able to tell since it's only snippets of the code, but I thought I'd try!  

 

Thank you again!

 

Screen Shot 2022-05-04 at 10.53.23 AM.png

 

Jo_Pitts1
Level 10 - Community Advisor

Re: Email Template - Need help with button/ no button option for module

@HP,

you're doing well to get this far given you're not a coder - well done!

 

Where to insert the meta code for the variable - that's spot on!  Stick it in there!

Where to USE the variable.  Do it as far up the hierarchy as possible.  And you'll only need to do it once.

I've shown (based on what I can see of your code) two possible locations (in red)

Jo_Pitts1_0-1651694190851.png

 

Cheers

Jo

 

 

 

HP
Level 2
Level 2

Re: Email Template - Need help with button/ no button option for module

I finally had time to get back to this and test it ... AND IT WORKED! 

 

I genuinely cannot thank you enough!! I am thrilled - this is exactly what I needed. 

 

Thank you, thank you, thank you!

Jo_Pitts1
Level 10 - Community Advisor

Re: Email Template - Need help with button/ no button option for module

@HP , you're very welcome.  Have a lovely weekend!

HP
Level 2
Level 2

Re: Email Template - Need help with button/ no button option for module

Hello again! 

 

I am not sure it's allowed to piggyback a new question to this post, and if not, I can start a new one! 

 

I am having trouble making the background image responsive in the same module you assisted me with the CTA button. (Still so excited about that.)

 

My mistake for not catching this sooner. I assumed it would be already responsive since I started from the HomeGrown Marketo 2.0 template, but it isn't. Or maybe it was and I inadvertently removed some code that affected it while I was customizing with a different image, etc.

 

I've tried a few random things but none have worked and, like the CTA, this one has me stumped.  The code for what I think is the entire section/table is below in case there is any direction or insight to accomplish this. 

 

Thank you!!

table id-hero_Page_1.jpg

table id-hero_Page_2.jpg

table id-hero_Page_3.jpg

table id-hero_Page_4.jpg

Tags (1)
Jo_Pitts1
Level 10 - Community Advisor

Re: Email Template - Need help with button/ no button option for module

@HP ,

can you post the actual code in here using the syntax highlighter.  Click the ... in the formatting menu, and then the </>.

From there, we'll see what we can do to help.

Cheers

Jo

HP
Level 2
Level 2

Re: Email Template - Need help with button/ no button option for module

That makes much more sense!! Had no idea that was there. Thank you!

<table id="hero2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_hero2" mktoname="Hero"> 
                      <tbody> 
                        <tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"> 
                          <td class="background" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: auto;margin-bottom: 0;background-image:${hero2BackgroundImage};background-repeat: no-repeat;background-position: center 
center;background:${hero2BackgroundImage};background-color:${hero2BackgroundColor};border-collapse: collapse;" background="${hero2BackgroundImage}" bgcolor="${hero2BackgroundColor}" valign="middle"> 
                            <center> 
                              <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;height:435px">
					<v:fill type="frame" src="${hero2BackgroundImage}" color="${hero2BackgroundColor}" />
					<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
					<![endif]--> 
                              <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="600"> 
                                <tbody> 
                                  <tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"> 
                                    <td style="hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; -ms-text-size-adjust: 100%; vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border-collapse: collapse;" height="50">&nbsp;</td> 
                                  </tr> 
                                  <tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"> 
                                    <td style="hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; -ms-text-size-adjust: 100%; vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border-collapse: collapse;"> 
                                      <center> 
                                        <table class="contents" style="border-collapse: collapse; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; -ms-text-size-adjust: 100%; vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="left" border="0" cellpadding="0" cellspacing="0"> 
                                          <tbody> 
                                            <tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"> 
                                              <td class="primary-font title" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: auto;margin-bottom: 0;text-align: left;font-size: 55px;font-family:'Montserrat', Arial, sans-serif;color: 
#FFF;border-collapse: collapse;"> 
                                                <div class="mktoText" mktoname="Main Title" id="mainTitle">
                                                  <p style="text-align: left;"><span style="font-size: 36px; font-family: Lato, Helvetica, sans-serif; color: #ffffff;">Blog Title or Interesting&nbsp;<br />Statement Goes Here</span></p>
                                                </div> </td> 
                                            </tr> 
                                            <tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"> 
                                              <td class="secondary-font subtitle" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: auto;margin-bottom: 0;text-align: center;font-size: 18px;font-family:'Lato', Arial, sans-serif;color: 
#000;border-collapse: collapse;"> 
                                                <div class="mktoText" mktoname="Subtitle" id="subtitle"></div> </td> 
                                            </tr> 
                                            <tr style="${showCTA} " vertical-align:="" middle;="" margin-top:="" 0;="" margin-right:="" auto;="" margin-bottom:="" margin-left:="" auto;"=""> 
                                              <td class="cta" style="hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; -ms-text-size-adjust: 100%; vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border-collapse: collapse;"> 
                                                <center> 
                                                  <table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="100%"> 
                                                    <tbody> 
                                                      <tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"> 
                                                        <td style="-webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -ms-text-size-adjust: 100%; background-clip: padding-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; vertical-align: middle; 
margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border-collapse: collapse;"> 
                                                          <table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0"> 
                                                            <tbody> 
                                                              <tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"> 
                                                                <td style="-webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -ms-text-size-adjust: 100%; background-clip: padding-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; vertical-align: middle; 
margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border-collapse: collapse;" align="center" bgcolor="${hero2ButtonBackgroundColor}"> <a href="${hero2Link}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-background-clip: padding-box;font-size: 16px;font-family:'Lato', Arial, 
sans-serif;-moz-background-clip: padding;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;display: inline-block;background-clip: padding-box;text-decoration: none;border-bottom-color:${hero2BorderColor};border-left-width:${hero2BorderSize};border-top-width:${hero2BorderSize};border-right-style: solid;border-bottom-style: solid;border-left-style: 
solid;border-top-color:${hero2BorderColor};border-right-color:${hero2BorderColor};border-bottom-width:${hero2BorderSize};border-left-color:${hero2BorderColor};padding-left: 40px;padding-bottom: 15px;padding-right: 40px;padding-top: 15px;border-right-width:${hero2BorderSize};border-top-style: solid;color: #FFF;background-color:${hero2ButtonBackgroundColor};">${hero2LinkText}</a> </td> 
                                                              </tr> 
                                                            </tbody> 
                                                          </table> </td> 
                                                      </tr> 
                                                    </tbody> 
                                                  </table> 
                                                </center> </td> 
                                            </tr> 
                                          </tbody> 
                                        </table> 
                                      </center> </td> 
                                  </tr> 
                                  <tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"> 
                                    <td style="hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; -ms-text-size-adjust: 100%; vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border-collapse: collapse;" height="50">&nbsp;</td> 
                                  </tr> 
                                </tbody> 
                              </table> 
                              <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]--> 
                            </center></td> 
                        </tr> 
                      </tbody> 
                    </table>

 

Jo_Pitts1
Level 10 - Community Advisor

Re: Email Template - Need help with button/ no button option for module

Good start - can you also paste in the CSS section of your template?