I am trying to code a section that works in Outlook as well as other browsers. I have attached the code below, I have run quite a few different VML, but it keeps breaking. Is anyone familiar with making this work in Outlook?
<!--Background Image Section-->
<table class="mktoModule" mktoName="Background Image Section" id="bgImageSection" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td background="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" height="645" style="background:#fffffe url('https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png') no-repeat center center / cover; background-size:cover;background-position:center center;background-repeat:no-repeat;padding:10px 40px 10px 40px;vertical-align:top;height:645px;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100%; height:645px;">
<v:fill type="frame" src="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" color="#fffffe" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div class="headerText mktoText" id="bgHeaderText1" mktoName="BG Header Text 1">HERE IS YOUR WHITE PAPER</div>
<div style="text-align:center; margin-top:70px; margin-bottom:25px;"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/V3_RR_6.8.23_5_Used_EV_Reconditioning_Whitepaper_Autoresponder_Booklet.png?version=0"></div>
<div class="headerText1 mktoText" id="bgHeaderText2" mktoName="BG Header Text 2">Used EV Reconditioning Implications for Auto Dealers</div>
<div style="text-align:center; margin-top:50px; margin-bottom:20px;">
<table align="${btn-alignment}" border="0" cellpadding="0" cellspacing="0" class="mktoText" id="button1" mktoname="Download Button" style="border-collapse:separate;width:225px;line-height:100%;">
<tr>
<td bgcolor="${btn-bgcolor2}" style="border:none;border-radius:60px 60px 60px 60px;cursor:auto;mso-padding-alt:12px 0px 12px 0px;background:#f96e11;" valign="top"><a href="https://my.rapidrecon.com/l/708083/2023-06-14/tz5c8/708083/16867612888EoZj5oz/Used_EV_Recon_Implications_For_Auto_Dealers_v230613.pdf/?utm_medium=email&utm_source=SLX" style="display:inline-block;width:225px;background:#f96e11;color:#ffffff;font-family:Raleway,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:100%;margin:0;text-decoration:none;text-transform:none;padding:12px 0px 12px 0px;mso-padding-alt:0;border-radius:60px 60px 60px 60px;" target="_blank"><span style="font-size:16px;font-family:Raleway,Arial,sans-serif;font-weight:700;color:#ffffff;line-height:119%;">Click Here to Download</span></a></td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--END Background Image Section-->
you will need something like this going before your standard HTML background stuff (you'll need to swap variable names and stuff):
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="display: inline-block;width:600px;height:${mkto-campaign-banner-height}px;" src="${mkto-campaign-banner-background}" href="${mkto-cta-ur}" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="display: inline-block;position:absolute;width:600px;height:${mkto-campaign-banner-height}px;">
<v:fill opacity="0%" color="${mkto-image-bg-color}" />
<v:textbox inset="0,0,0,0">
and at the end
</v:textbox>
</v:rect>
I make extensive use of Outlook background images. This should work for you
The background is working, but all my text within is broken.
Hi @kenmckown, please use this code.
<!--Background Image Section-->
<table class="mktoModule" mktoName="Background Image Section" id="bgImageSection" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td background="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" height="645" style="background:#fffffe url('https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png') no-repeat center center / cover; background-size:cover;background-position:center center;background-repeat:no-repeat;padding:10px 40px 10px 40px;vertical-align:top;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100%; height:645px;">
<v:fill type="frame" src="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" color="#fffffe" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%;">
<tr>
<td><div class="headerText mktoText" id="bgHeaderText1" mktoName="BG Header Text 1">HERE IS YOUR WHITE PAPER</div></td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="70"> </td></tr>
<tr>
<td style="text-align:center;"><div><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/V3_RR_6.8.23_5_Used_EV_Reconditioning_Whitepaper_Autoresponder_Booklet.png?version=0"></div></td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="20"> </td></tr>
<tr>
<td><div class="headerText1 mktoText" id="bgHeaderText2" mktoName="BG Header Text 2">Used EV Reconditioning Implications for Auto Dealers</div></td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="50"> </td></tr>
<tr>
<td>
<table align="${btn-alignment}" border="0" cellpadding="0" cellspacing="0" class="mktoText" id="button1" mktoname="Download Button" style="border-collapse:separate;width:225px;line-height:100%;">
<tr>
<td bgcolor="${btn-bgcolor2}" style="border:none;border-radius:60px 60px 60px 60px;cursor:auto;mso-padding-alt:12px 0px 12px 0px;background:#f96e11;" valign="top"><a href="https://my.rapidrecon.com/l/708083/2023-06-14/tz5c8/708083/16867612888EoZj5oz/Used_EV_Recon_Implications_For_Auto_Dealers_v230613.pdf/?utm_medium=email&utm_source=SLX" style="display:inline-block;width:225px;background:#f96e11;color:#ffffff;font-family:Raleway,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:100%;margin:0;text-decoration:none;text-transform:none;padding:12px 0px 12px 0px;mso-padding-alt:0;border-radius:60px 60px 60px 60px;" target="_blank"><span style="font-size:16px;font-family:Raleway,Arial,sans-serif;font-weight:700;color:#ffffff;line-height:119%;">Click Here to Download</span></a></td>
</tr>
</table>
</td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="20"> </td></tr>
</table>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--END Background Image Section-->
Tried that code, and it broke the entire layout.
Hi @kenmckownm, I have added the same code in one of my template. it looks like this:
Please share the entire code to QA the same.
Thanks,
Disha
OK, here is my entire code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Email</title>
<meta class="mktoColor" id="BodyBGColor" mktoName="Body Background Color" default="#eff0f4" />
<meta class="mktoColor" id="blue_bg_color" mktoName="Background Color" default="#132C65" mktoModuleScope="true">
<meta class="mktoColor" id="grey_bg_color" mktoName="Background Color" default="#f5f5f5" mktoModuleScope="true">
<meta class="mktoColor" id="dark_grey_bg_color" mktoName="Background Color" default="#54565a" mktoModuleScope="true">
<meta class="mktoColor" id="tire_bg_color" mktoName="Background Color" default="#262626" mktoModuleScope="true">
<meta class="mktoColor" id="black_bg_color" mktoName="Background Color" default="#000000" mktoModuleScope="true">
<meta class="mktoColor" id="yellow_bg_color" mktoName="Background Color" default="#ffce01" mktoModuleScope="true">
<meta class="mktoColor" id="red_bg_color" mktoName="Background Color" default="#ef5a2c" mktoModuleScope="true">
<meta mktoModuleScope="true" class="mktoColor" id="whiteBGColor" mktoName="Background Color" default="#ffffff" />
<meta mktoModuleScope="true" class="mktoColor" id="greyBGColor" mktoName="Background Color" default="#4c4d52" />
<meta mktoModuleScope="true" class="mktoColor" id="redBGColor" mktoName="Background Color" default="#ef5a2c" />
<meta mktoModuleScope="true" class="mktoNumber" id="top_space1" mktoname="Top Space" default="1" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="top_space10" mktoname="Top Space" default="10" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="top_space20" mktoname="Top Space" default="20" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="btm_space1" mktoname="Bottom Space" default="1" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="btm_space10" mktoname="Bottom Space" default="10" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="btm_space20" mktoname="Bottom Space" default="20" step="1" min="0" max="100" />
<meta mktomodulescope="true" class="mktoList" id="logo-alignment" mktoName="Logo Alignment" default="center" values="center,right,left">
<meta mktomodulescope="true" class="mktoList" id="logo-alignment-bar" mktoName="Logo Alignment" default="left" values="center,right,left">
<meta mktomodulescope="true" class="mktoList" id="text-alignment" mktoName="Text Alignment" default="left" values="center,right,left">
<meta mktoModuleScope="true" class="mktoColor" id="btn-bgcolor" mktoName="Button BG Color" default="#ef5a2c" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-bgcolor1" mktoName="Button BG Color" default="#f0f0f0" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-bgcolor2" mktoName="Button BG Color" default="#f96e11" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-border-color" mktoName="Button Border Color" default="#ef5a2c" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-border-color1" mktoName="Button Border Color" default="#f0f0f0" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-border-color2" mktoName="Button Border Color" default="#f96e11" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-text-color" mktoName="Button Text Color" default="#ffffff" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-text-color1" mktoName="Button Text Color" default="#666666" />
<meta mktoModuleScope="true" class="mktoString" id="btn-cta-url" mktoName="Button Url" default="#" />
<meta mktoModuleScope="true" class="mktoString" id="btn-cta-text" mktoName="Button Text" default="Lorem ipsum dolor sit" />
<meta mktomodulescope="true" class="mktoList" id="btn-alignment" mktoName="Button Alignment" default="center" values="center,right,left">
<meta mktoModuleScope="true" class="mktoColor" id="border-bgcolor" mktoName="Border Color" default="#cac9cf" />
<meta mktoModuleScope="true" class="mktoList" id="border-alignment" mktoname="Border Alignment" default="center" values="left,center,right" />
<meta mktoModuleScope="true" class="mktoNumber" id="border-width" mktoName="Border Width(in %)" default="100" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="border-height" mktoName="Border Height" default="1" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="spacer" mktoname="Spacer Height" default="10" step="1" min="0" max="100" />
<meta mktomodulescope="true" class="mktoList" id="social-alignment" mktoName="Social Icons Alignment" default="right" values="center,right,left">
<!--Background Image-->
<meta class="mktoColor" id="SectionID-bg-color" mktoName="Section: BgColor" default="#54565A" mktoModuleScope="true">
<meta class="mktoString" id="SectionID-bg-gradient-1" mktoName="Section: BgGradient 1" default="rgba(84, 86, 90, .85)" mktoModuleScope="true">
<meta class="mktoString" id="SectionID-bg-gradient-2" mktoName="Section: BgGradient 2" default="rgba(84, 86, 90, .85)" mktoModuleScope="true">
<meta class="mktoImg" id="SectionID-bg-image" mktoName="Section: BgImage" default="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Layer 1.png" mktoModuleScope="true">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if mso]>
<style> body,table tr,table td,a, span,table.MsoNormalTable,td,th,div{ font-family: helvetica, sans-serif !important; }</style>
<![endif]-->
<!--[if mso]>
<style>
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}
</style>
<![endif]–->
<!--[if mso]>
<style type="text/css">
ul {
margin: 0 0 0 40px !important;
}
</style>
<![endif]-->
<style media="all">
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
/* iOS BLUE LINKS */
@-ms-viewport {
width: device-width;
}
</style>
<style media="all">
html {
-webkit-text-size-adjust: none;
}
body {
font-family: helvetica, sans-serif;
}
p,
.undoreset div p,
.undoreset p {
margin-top: 14px;
margin-bottom: 14px;
}
img {
border: 0px !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
a {
outline: none !important;
text-decoration: none !important;
color:#ef5a2c;
}
.btnLine {
text-decoration: underline !important;
}
.headerText {
text-align: center;
font-size: 36px;
font-family:Open Sans,Arial,sans-serif;
font-weight:800;
line-height:150%;
}
.headerText1 {
text-align: center;
font-size: 24px;
font-family:Open Sans,Arial,sans-serif;
font-weight:800;
line-height:150%;
color: #ffffff;
}
@media only screen and (max-width: 640px) {
.main {
width: 100% !important;
min-width: 100% !important;
}
.inner_table {
width: 90% !important;
margin: 0 auto !important;
}
.res {
width: 100% !important;
display: block;
}
.center {
text-align: center !important;
margin: 0 auto;
}
}
</style>
<style>
.transparentbg {
background-size: cover;
width: 640px;
height: 300px;
}
@media screen and (max-width:640px) {
.block { display: block !important; width: 100% !important; }
}
</style>
</head>
<body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0; margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%;">
<!-- Outer table starts here -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; border-spacing: 0; border-collapse: collapse;margin:0 auto;">
<tr>
<td style="background-color:${BodyBGColor};" bgcolor="${BodyBGColor}">
<table class="main" cellpadding="0" cellspacing="0" align="center" border="0" width="600" style="border-collapse: collapse; margin:0 auto;min-width:600px;">
<tr>
<td class="mktoContainer" id="template-wrapper" style="background-color:${BodyBGColor};" bgcolor="${BodyBGColor}">
<!-- Logo module starts -->
<table class="mktoModule" mktoName="Logo Module" id="Logo-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color: ${whiteBGColor}">
<table class="inner_table" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;">
<tr>
<td height="${top_space20}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="${logo-alignment}" valign="top" style="vertical-align:top;">
<div class="mktoImg" id="logo" mktoName="Logo">
<a target="_blank" style="text-decoration: none;outline: none;" href="#">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Original_Product_Logos-RGB_RapidRecon_Horizontal1.png" alt="" width="250" border="0" />
</a>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Logo module end -->
<!-- Banner Image -->
<table class="mktoModule" mktoName="Full Width Image Section" id="full-width-img-section" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td class="full-width" bgcolor="${blue_bg_color}" align="center" valign="top" style="background-color:${blue_bg_color};vertical-align:top;text-align:center;">
<div class="mktoImg" id="image" mktoname="Image">
<img src="https://via.placeholder.com/640X250.png/ccc/fff" width="640" alt="" />
</div>
</td>
</tr>
</table>
<!-- Banner Image End -->
<!-- Top Tire Image -->
<table class="mktoModule" mktoName="Tire Header" id="full-width-img-section-tire" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td class="full-width" bgcolor="${whiteBGColor}" align="center" valign="top" style="background-color:${whiteBGColor};vertical-align:top;text-align:center;">
<div class="mktoImg" id="tireImg" mktoname="Tire Header">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/RR_11.28.22_Open_Road_Video_DIVIDER_2.png" width="640" alt="" />
</div>
</td>
</tr>
</table>
<!-- Top Tire Image End -->
<!-- Black Text module V1 starts -->
<table class="mktoModule" mktoName="Black Text Module V1" id="Black-Text-Module-V1" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${tire_bg_color}" style="background-color:${tire_bg_color};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space1}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="${text-alignment}" valign="top" style="vertical-align: top;font-size: 14px;line-height: 20px;font-family:helvetica, sans-serif;color:#fff;font-weight: normal;">
<div class="mktoText" id="Text" mktoname="Text">
<div>
<p>Hi,</p>
<p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, minus.</strong>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis non, praesentium iusto in sint dignissimos dolore accusamus cupiditate autem qui totam consequatur? Asperiores hic dolor facere reiciendis dolorem, cupiditate consequuntur.</p>
</div>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Text module V1 end -->
<!-- Bottom Tire Image -->
<table class="mktoModule" mktoName="Tire Bottom" id="full-width-img-section-tire1" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td class="full-width" bgcolor="${tire_bg_color}" align="center" valign="top" style="background-color:${tire_bg_color};vertical-align:top;text-align:center;">
<div class="mktoImg" id="tireImg1" mktoname="Tire Bottom">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/SLX_5.25.22_trifecta_ad_TiremarksTopGreySolid.png" width="640" alt="" />
</div>
</td>
</tr>
</table>
<!-- Bottom Tire Image End -->
<!--Background Image Section-->
<table class="mktoModule" mktoName="Background Image Section" id="bgImageSection" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td background="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" height="645" style="background:#fffffe url('https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png') no-repeat center center / cover; background-size:cover;background-position:center center;background-repeat:no-repeat;padding:10px 40px 10px 40px;vertical-align:top;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100%; height:645px;">
<v:fill type="frame" src="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" color="#fffffe" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%;">
<tr>
<td><div class="headerText mktoText" id="bgHeaderText1" mktoName="BG Header Text 1">HERE IS YOUR WHITE PAPER</div></td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="70"> </td></tr>
<tr>
<td style="text-align:center;"><div><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/V3_RR_6.8.23_5_Used_EV_Reconditioning_Whitepaper_Autoresponder_Booklet.png?version=0"></div></td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="20"> </td></tr>
<tr>
<td><div class="headerText1 mktoText" id="bgHeaderText2" mktoName="BG Header Text 2">Used EV Reconditioning Implications for Auto Dealers</div></td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="50"> </td></tr>
<tr>
<td>
<table align="${btn-alignment}" border="0" cellpadding="0" cellspacing="0" class="mktoText" id="button1" mktoname="Download Button" style="border-collapse:separate;width:225px;line-height:100%;">
<tr>
<td bgcolor="${btn-bgcolor2}" style="border:none;border-radius:60px 60px 60px 60px;cursor:auto;mso-padding-alt:12px 0px 12px 0px;background:#f96e11;" valign="top"><a href="https://my.rapidrecon.com/l/708083/2023-06-14/tz5c8/708083/16867612888EoZj5oz/Used_EV_Recon_Implications_For_Auto_Dealers_v230613.pdf/?utm_medium=email&utm_source=SLX" style="display:inline-block;width:225px;background:#f96e11;color:#ffffff;font-family:Raleway,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:100%;margin:0;text-decoration:none;text-transform:none;padding:12px 0px 12px 0px;mso-padding-alt:0;border-radius:60px 60px 60px 60px;" target="_blank"><span style="font-size:16px;font-family:Raleway,Arial,sans-serif;font-weight:700;color:#ffffff;line-height:119%;">Click Here to Download</span></a></td>
</tr>
</table>
</td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="20"> </td></tr>
</table>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--END Background Image Section-->
<!-- Text module V1 starts -->
<table class="mktoModule" mktoName="Text Module V1" id="Text-Module-V1" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color:${whiteBGColor};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space1}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="${text-alignment}" valign="top" style="vertical-align: top;font-size: 14px;line-height: 20px;font-family:helvetica, sans-serif;color:#4c4d52;font-weight: normal;">
<div class="mktoText" id="Text1" mktoname="Text">
<div>
<p>Hi,</p>
<p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, minus.</strong>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis non, praesentium iusto in sint dignissimos dolore accusamus cupiditate autem qui totam consequatur? Asperiores hic dolor facere reiciendis dolorem, cupiditate consequuntur.</p>
</div>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Text module V1 end -->
<!-- Button Module starts here -->
<table class="mktoModule" mktoName="Button Module" id="Button-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color: ${whiteBGColor}">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;">
<div class="mktoText" id="Button1" mktoname="Button">
<table align="${btn-alignment}" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="${btn-bgcolor}" style="border:1px solid ${btn-border-color};background-color:${btn-bgcolor};font-family:helvetica, sans-serif;font-size: 14px;text-align: center; color:${btn-text-color};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top">
<a target="_blank" style="text-decoration: none;color:${btn-text-color}; outline: none;" href="${btn-cta-url}">${btn-cta-text}</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Button Module ends here -->
<!-- HTML Button Module starts here -->
<table class="mktoModule" mktoName="HTML Button Module" id="HTMLButton-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color: ${whiteBGColor}">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;">
<div class="mktEditable" id="HTMLButton1" mktoname="HTML Button">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#ff6900" style="border:1px solid #ef5a2c;background-color:#ef5a2c;font-family:helvetica, sans-serif;font-size: 14px;text-align: center; color:#ffffff;padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top">
<a target="_blank" style="text-decoration: none;color:#ffffff; outline: none;" href="#">HTML TEXT BUTTON</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- HTML Button Module ends here -->
<!-- List module starts -->
<table class="mktoModule" mktoName="List Module" id="List-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color:${whiteBGColor};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="vertical-align: top;font-size: 14px;line-height: 20px;font-family:helvetica, sans-serif;color:#4c4d52;font-weight: normal;">
<div class="mktoText" id="List" mktoname="List">
<div> <p style="margin-top: 0;">Lorem ipsum dolor sit amet.</p>
<ul>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem obcaecati maiores veritatis fugiat optio magnam.</li>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem obcaecati maiores</li>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem obcaecati maiores</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- List module end -->
<!-- Button Module Red Background starts here -->
<table class="mktoModule" mktoName="Button Module V2" id="Button-Module-V2" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${red_bg_color}" style="background-color: ${red_bg_color}">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space10}" style="line-height:20px;font-size:1px;"> </td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;">
<h1 class="mktoText" id="Button-V2-Text" mktoname="Button" style="color: #ffffff; text-align: center; padding: 20px 0px 30px 0px; font-weight: bold;">
SAMPLE HEADING
</h1>
</td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;">
<div class="mktoText" id="Button-V2" mktoname="Button">
<table align="${btn-alignment}" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="${btn-bgcolor1}" style="border:1px solid ${btn-border-color1};background-color:${btn-bgcolor1};font-family:helvetica, sans-serif;font-size: 14px;text-align: center; color:${btn-text-color1};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top">
<a target="_blank" style="text-decoration: none;color:${btn-text-color1}; outline: none;" href="${btn-cta-url}">${btn-cta-text}</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="${btm_space20}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Button Module Red Background ends here -->
<!-- Text module V2 starts -->
<table class="mktoModule" mktoName="Text Module V2" id="Text-Module-V2" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color:${whiteBGColor};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space1}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="${text-alignment}" valign="top" style="vertical-align: top;font-size: 14px;line-height: 20px;font-family:helvetica, sans-serif;color:#4c4d52;font-weight: normal;">
<div class="mktoText" id="Text-2" mktoname="Text">
<div> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus possimus asperiores sunt error accusamus sint id laborum obcaecati nihil totam.
<strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, minus.</strong>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis non, praesentium iusto in sint dignissimos dolore accusamus cupiditate autem qui totam consequatur?
<a class="btnLine" href="#" target="_blank">Lorem, ipsum dolor.</a> Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, natus. </p>
<p>lorem ipsum</p>
<p>dolor sit</p>
<p><em><strong>Lorem ipsum dolor sit amet consectetur. <a class="btnLine" href="#" target="_blank">Lorem, ipsum</a> Lorem ipsum dolor sit.</strong></em></p>
</div>
</div>
</td>
</tr>
<tr>
<td height="${btm_space1}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Text module V2 end -->
<!--Spacer Module starts here-->
<table class="mktoModule" mktoName="Spacer Module" id="Spacer-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color: ${whiteBGColor}">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;">
<tr>
<td height="${spacer}" valign="top" style="vertical-align: top;font-size: 1px;line-height: 1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!--Spacer Module ends here-->
<!-- Border Module start-->
<table class="mktoModule" mktoname="Border Module" id="Border-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tbody>
<tr>
<td bgcolor="${whiteBGColor}" style="background-color:${whiteBGColor};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;">
<table width="${border-width}%" align="${border-alignment}" border="0" cellpadding="0" cellspacing="0" style="width:${border-width}%;margin:0 auto;">
<tr>
<td height="${border-height}" style="background-color:${border-bgcolor};line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--Border Module ends here-->
<!-- Footer Snippet starts -->
<table class="mktoModule" mktoName="Footer Module" id="footerModule" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color:${whiteBGColor};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td align="${text-alignment}" valign="top" style="vertical-align: top;font-size: 14px;line-height: 20px;font-family:helvetica, sans-serif;color:#4c4d52;font-weight: normal;">
<div class="mktoText" id="footerText" mktoname="Footer Text">
<div>REPLACE WITH FOOTER SNIPPET</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Footer Snippet end -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Outer table ends here -->
</body>
</html>
This is what it is supposed to look like:
Hi @kenmckown, please check the below code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Email</title>
<meta class="mktoColor" id="BodyBGColor" mktoName="Body Background Color" default="#eff0f4" />
<meta class="mktoColor" id="blue_bg_color" mktoName="Background Color" default="#132C65" mktoModuleScope="true">
<meta class="mktoColor" id="grey_bg_color" mktoName="Background Color" default="#f5f5f5" mktoModuleScope="true">
<meta class="mktoColor" id="dark_grey_bg_color" mktoName="Background Color" default="#54565a" mktoModuleScope="true">
<meta class="mktoColor" id="tire_bg_color" mktoName="Background Color" default="#262626" mktoModuleScope="true">
<meta class="mktoColor" id="black_bg_color" mktoName="Background Color" default="#000000" mktoModuleScope="true">
<meta class="mktoColor" id="yellow_bg_color" mktoName="Background Color" default="#ffce01" mktoModuleScope="true">
<meta class="mktoColor" id="red_bg_color" mktoName="Background Color" default="#ef5a2c" mktoModuleScope="true">
<meta mktoModuleScope="true" class="mktoColor" id="whiteBGColor" mktoName="Background Color" default="#ffffff" />
<meta mktoModuleScope="true" class="mktoColor" id="greyBGColor" mktoName="Background Color" default="#4c4d52" />
<meta mktoModuleScope="true" class="mktoColor" id="redBGColor" mktoName="Background Color" default="#ef5a2c" />
<meta mktoModuleScope="true" class="mktoNumber" id="top_space1" mktoname="Top Space" default="1" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="top_space10" mktoname="Top Space" default="10" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="top_space20" mktoname="Top Space" default="20" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="btm_space1" mktoname="Bottom Space" default="1" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="btm_space10" mktoname="Bottom Space" default="10" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="btm_space20" mktoname="Bottom Space" default="20" step="1" min="0" max="100" />
<meta mktomodulescope="true" class="mktoList" id="logo-alignment" mktoName="Logo Alignment" default="center" values="center,right,left">
<meta mktomodulescope="true" class="mktoList" id="logo-alignment-bar" mktoName="Logo Alignment" default="left" values="center,right,left">
<meta mktomodulescope="true" class="mktoList" id="text-alignment" mktoName="Text Alignment" default="left" values="center,right,left">
<meta mktoModuleScope="true" class="mktoColor" id="btn-bgcolor" mktoName="Button BG Color" default="#ef5a2c" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-bgcolor1" mktoName="Button BG Color" default="#f0f0f0" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-bgcolor2" mktoName="Button BG Color" default="#f96e11" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-border-color" mktoName="Button Border Color" default="#ef5a2c" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-border-color1" mktoName="Button Border Color" default="#f0f0f0" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-border-color2" mktoName="Button Border Color" default="#f96e11" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-text-color" mktoName="Button Text Color" default="#ffffff" />
<meta mktoModuleScope="true" class="mktoColor" id="btn-text-color1" mktoName="Button Text Color" default="#666666" />
<meta mktoModuleScope="true" class="mktoString" id="btn-cta-url" mktoName="Button Url" default="#" />
<meta mktoModuleScope="true" class="mktoString" id="btn-cta-text" mktoName="Button Text" default="Lorem ipsum dolor sit" />
<meta mktomodulescope="true" class="mktoList" id="btn-alignment" mktoName="Button Alignment" default="center" values="center,right,left">
<meta mktoModuleScope="true" class="mktoColor" id="border-bgcolor" mktoName="Border Color" default="#cac9cf" />
<meta mktoModuleScope="true" class="mktoList" id="border-alignment" mktoname="Border Alignment" default="center" values="left,center,right" />
<meta mktoModuleScope="true" class="mktoNumber" id="border-width" mktoName="Border Width(in %)" default="100" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="border-height" mktoName="Border Height" default="1" step="1" min="0" max="100" />
<meta mktoModuleScope="true" class="mktoNumber" id="spacer" mktoname="Spacer Height" default="10" step="1" min="0" max="100" />
<meta mktomodulescope="true" class="mktoList" id="social-alignment" mktoName="Social Icons Alignment" default="right" values="center,right,left">
<!--Background Image-->
<meta class="mktoColor" id="SectionID-bg-color" mktoName="Section: BgColor" default="#54565A" mktoModuleScope="true">
<meta class="mktoString" id="SectionID-bg-gradient-1" mktoName="Section: BgGradient 1" default="rgba(84, 86, 90, .85)" mktoModuleScope="true">
<meta class="mktoString" id="SectionID-bg-gradient-2" mktoName="Section: BgGradient 2" default="rgba(84, 86, 90, .85)" mktoModuleScope="true">
<meta class="mktoImg" id="SectionID-bg-image" mktoName="Section: BgImage" default="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Layer 1.png" mktoModuleScope="true">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if mso]>
<style> body,table tr,table td,a, span,table.MsoNormalTable,td,th,div{ font-family: helvetica, sans-serif !important; }</style>
<![endif]-->
<!--[if mso]>
<style>
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}
</style>
<![endif]–->
<!--[if mso]>
<style type="text/css">
ul {
margin: 0 0 0 40px !important;
}
</style>
<![endif]-->
<style media="all">
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
/* iOS BLUE LINKS */
@-ms-viewport {
width: device-width;
}
</style>
<style media="all">
html {
-webkit-text-size-adjust: none;
}
body {
font-family: helvetica, sans-serif;
}
p,
.undoreset div p,
.undoreset p {
margin-top: 14px;
margin-bottom: 14px;
}
img {
border: 0px !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
a {
outline: none !important;
text-decoration: none !important;
color:#ef5a2c;
}
.btnLine {
text-decoration: underline !important;
}
.headerText {
text-align: center;
font-size: 36px;
font-family:Open Sans,Arial,sans-serif;
font-weight:800;
line-height:150%;
}
.headerText1 {
text-align: center;
font-size: 24px;
font-family:Open Sans,Arial,sans-serif;
font-weight:800;
line-height:150%;
color: #ffffff;
}
@media only screen and (max-width: 640px) {
.main {
width: 100% !important;
min-width: 100% !important;
}
.inner_table {
width: 90% !important;
margin: 0 auto !important;
}
.res {
width: 100% !important;
display: block;
}
.center {
text-align: center !important;
margin: 0 auto;
}
}
</style>
<style>
.transparentbg {
background-size: cover;
width: 640px;
height: 300px;
}
@media screen and (max-width:640px) {
.block { display: block !important; width: 100% !important; }
}
</style>
</head>
<body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0; margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%;">
<!-- Outer table starts here -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; border-spacing: 0; border-collapse: collapse;margin:0 auto;">
<tr>
<td style="background-color:${BodyBGColor};" bgcolor="${BodyBGColor}">
<table class="main" cellpadding="0" cellspacing="0" align="center" border="0" width="600" style="border-collapse: collapse; margin:0 auto;min-width:600px;">
<tr>
<td class="mktoContainer" id="template-wrapper" style="background-color:${BodyBGColor};" bgcolor="${BodyBGColor}">
<!-- Logo module starts -->
<table class="mktoModule" mktoName="Logo Module" id="Logo-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color: ${whiteBGColor}">
<table class="inner_table" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;">
<tr>
<td height="${top_space20}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="${logo-alignment}" valign="top" style="vertical-align:top;">
<div class="mktoImg" id="logo" mktoName="Logo">
<a target="_blank" style="text-decoration: none;outline: none;" href="#">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Original_Product_Logos-RGB_RapidRecon_Horizontal1.png" alt="" width="250" border="0" />
</a>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Logo module end -->
<!-- Banner Image -->
<table class="mktoModule" mktoName="Full Width Image Section" id="full-width-img-section" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td class="full-width" bgcolor="${blue_bg_color}" align="center" valign="top" style="background-color:${blue_bg_color};vertical-align:top;text-align:center;">
<div class="mktoImg" id="image" mktoname="Image">
<img src="https://via.placeholder.com/640X250.png/ccc/fff" width="640" alt="" />
</div>
</td>
</tr>
</table>
<!-- Banner Image End -->
<!-- Top Tire Image -->
<table class="mktoModule" mktoName="Tire Header" id="full-width-img-section-tire" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td class="full-width" bgcolor="${whiteBGColor}" align="center" valign="top" style="background-color:${whiteBGColor};vertical-align:top;text-align:center;">
<div class="mktoImg" id="tireImg" mktoname="Tire Header">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/RR_11.28.22_Open_Road_Video_DIVIDER_2.png" width="640" alt="" />
</div>
</td>
</tr>
</table>
<!-- Top Tire Image End -->
<!-- Black Text module V1 starts -->
<table class="mktoModule" mktoName="Black Text Module V1" id="Black-Text-Module-V1" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${tire_bg_color}" style="background-color:${tire_bg_color};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space1}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="${text-alignment}" valign="top" style="vertical-align: top;font-size: 14px;line-height: 20px;font-family:helvetica, sans-serif;color:#fff;font-weight: normal;">
<div class="mktoText" id="Text" mktoname="Text">
<div>
<p>Hi,</p>
<p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, minus.</strong>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis non, praesentium iusto in sint dignissimos dolore accusamus cupiditate autem qui totam consequatur? Asperiores hic dolor facere reiciendis dolorem, cupiditate consequuntur.</p>
</div>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Text module V1 end -->
<!-- Bottom Tire Image -->
<table class="mktoModule" mktoName="Tire Bottom" id="full-width-img-section-tire1" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td class="full-width" bgcolor="${tire_bg_color}" align="center" valign="top" style="background-color:${tire_bg_color};vertical-align:top;text-align:center;">
<div class="mktoImg" id="tireImg1" mktoname="Tire Bottom">
<img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/SLX_5.25.22_trifecta_ad_TiremarksTopGreySolid.png" width="640" alt="" />
</div>
</td>
</tr>
</table>
<!-- Bottom Tire Image End -->
<!--Background Image Section-->
<table class="mktoModule" mktoName="Background Image Section" id="bgImageSection" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td background="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" style="background-color:#fffffe; background-image: url('https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png'); background-size:cover;background-position:center center;background-repeat:no-repeat;vertical-align:top;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 600px; height: 645px;" src="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 600px; height: 645px;">
<v:fill opacity="0%" color="#fffffe" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style="margin:0 auto;">
<tr><td style="font-size:1px; line-height:1px;" height="30"> </td></tr>
<tr>
<td style="text-align: center; font-size: 36px; font-family: Open Sans, Arial, sans-serif; font-weight: 800; line-height: 150%;"><div class="headerText mktoText" id="bgHeaderText1" mktoName="BG Header Text 1">HERE IS YOUR WHITE PAPER</div></td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="70"> </td></tr>
<tr>
<td style="text-align:center;"><div><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/V3_RR_6.8.23_5_Used_EV_Reconditioning_Whitepaper_Autoresponder_Booklet.png?version=0"></div></td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="20"> </td></tr>
<tr>
<td style="text-align: center; font-size: 24px; font-family: Open Sans, Arial, sans-serif;font-weight: 800; line-height: 150%; color: #ffffff;"><div class="headerText1 mktoText" id="bgHeaderText2" mktoName="BG Header Text 2">Used EV Reconditioning Implications for Auto Dealers</div></td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="50"> </td></tr>
<tr>
<td>
<table align="${btn-alignment}" border="0" cellpadding="0" cellspacing="0" class="mktoText" id="button1" mktoname="Download Button" style="border-collapse:separate;width:225px;line-height:100%;">
<tr>
<td bgcolor="${btn-bgcolor2}" style="border:none;border-radius:60px 60px 60px 60px;cursor:auto;mso-padding-alt:12px 0px 12px 0px;background:#f96e11; text-align:center;" valign="top"><a href="https://my.rapidrecon.com/l/708083/2023-06-14/tz5c8/708083/16867612888EoZj5oz/Used_EV_Recon_Implications_For_Auto_Dealers_v230613.pdf/?utm_medium=email&utm_source=SLX" style="display:inline-block;width:225px;background:#f96e11;color:#ffffff;font-family:Raleway,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:100%;margin:0;text-decoration:none;text-transform:none;padding:12px 0px 12px 0px;mso-padding-alt:0;border-radius:60px 60px 60px 60px;" target="_blank"><span style="font-size:16px;font-family:Raleway,Arial,sans-serif;font-weight:700;color:#ffffff;line-height:119%;">Click Here to Download</span></a></td>
</tr>
</table>
</td>
</tr>
<tr><td style="font-size:1px; line-height:1px;" height="20"> </td></tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
</tr>
</table>
<!--END Background Image Section-->
<!-- Text module V1 starts -->
<table class="mktoModule" mktoName="Text Module V1" id="Text-Module-V1" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color:${whiteBGColor};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space1}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="${text-alignment}" valign="top" style="vertical-align: top;font-size: 14px;line-height: 20px;font-family:helvetica, sans-serif;color:#4c4d52;font-weight: normal;">
<div class="mktoText" id="Text1" mktoname="Text">
<div>
<p>Hi,</p>
<p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, minus.</strong>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis non, praesentium iusto in sint dignissimos dolore accusamus cupiditate autem qui totam consequatur? Asperiores hic dolor facere reiciendis dolorem, cupiditate consequuntur.</p>
</div>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Text module V1 end -->
<!-- Button Module starts here -->
<table class="mktoModule" mktoName="Button Module" id="Button-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color: ${whiteBGColor}">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;">
<div class="mktoText" id="Button1" mktoname="Button">
<table align="${btn-alignment}" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="${btn-bgcolor}" style="border:1px solid ${btn-border-color};background-color:${btn-bgcolor};font-family:helvetica, sans-serif;font-size: 14px;text-align: center; color:${btn-text-color};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top">
<a target="_blank" style="text-decoration: none;color:${btn-text-color}; outline: none;" href="${btn-cta-url}">${btn-cta-text}</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Button Module ends here -->
<!-- HTML Button Module starts here -->
<table class="mktoModule" mktoName="HTML Button Module" id="HTMLButton-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color: ${whiteBGColor}">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;">
<div class="mktEditable" id="HTMLButton1" mktoname="HTML Button">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#ff6900" style="border:1px solid #ef5a2c;background-color:#ef5a2c;font-family:helvetica, sans-serif;font-size: 14px;text-align: center; color:#ffffff;padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top">
<a target="_blank" style="text-decoration: none;color:#ffffff; outline: none;" href="#">HTML TEXT BUTTON</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- HTML Button Module ends here -->
<!-- List module starts -->
<table class="mktoModule" mktoName="List Module" id="List-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color:${whiteBGColor};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="vertical-align: top;font-size: 14px;line-height: 20px;font-family:helvetica, sans-serif;color:#4c4d52;font-weight: normal;">
<div class="mktoText" id="List" mktoname="List">
<div> <p style="margin-top: 0;">Lorem ipsum dolor sit amet.</p>
<ul>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem obcaecati maiores veritatis fugiat optio magnam.</li>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem obcaecati maiores</li>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem obcaecati maiores</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- List module end -->
<!-- Button Module Red Background starts here -->
<table class="mktoModule" mktoName="Button Module V2" id="Button-Module-V2" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${red_bg_color}" style="background-color: ${red_bg_color}">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space10}" style="line-height:20px;font-size:1px;"> </td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;">
<h1 class="mktoText" id="Button-V2-Text" mktoname="Button" style="color: #ffffff; text-align: center; padding: 20px 0px 30px 0px; font-weight: bold;">
SAMPLE HEADING
</h1>
</td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;">
<div class="mktoText" id="Button-V2" mktoname="Button">
<table align="${btn-alignment}" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="${btn-bgcolor1}" style="border:1px solid ${btn-border-color1};background-color:${btn-bgcolor1};font-family:helvetica, sans-serif;font-size: 14px;text-align: center; color:${btn-text-color1};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top">
<a target="_blank" style="text-decoration: none;color:${btn-text-color1}; outline: none;" href="${btn-cta-url}">${btn-cta-text}</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="${btm_space20}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Button Module Red Background ends here -->
<!-- Text module V2 starts -->
<table class="mktoModule" mktoName="Text Module V2" id="Text-Module-V2" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color:${whiteBGColor};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space1}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="${text-alignment}" valign="top" style="vertical-align: top;font-size: 14px;line-height: 20px;font-family:helvetica, sans-serif;color:#4c4d52;font-weight: normal;">
<div class="mktoText" id="Text-2" mktoname="Text">
<div> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus possimus asperiores sunt error accusamus sint id laborum obcaecati nihil totam.
<strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, minus.</strong>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis non, praesentium iusto in sint dignissimos dolore accusamus cupiditate autem qui totam consequatur?
<a class="btnLine" href="#" target="_blank">Lorem, ipsum dolor.</a> Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, natus. </p>
<p>lorem ipsum</p>
<p>dolor sit</p>
<p><em><strong>Lorem ipsum dolor sit amet consectetur. <a class="btnLine" href="#" target="_blank">Lorem, ipsum</a> Lorem ipsum dolor sit.</strong></em></p>
</div>
</div>
</td>
</tr>
<tr>
<td height="${btm_space1}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Text module V2 end -->
<!--Spacer Module starts here-->
<table class="mktoModule" mktoName="Spacer Module" id="Spacer-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color: ${whiteBGColor}">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;">
<tr>
<td height="${spacer}" valign="top" style="vertical-align: top;font-size: 1px;line-height: 1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!--Spacer Module ends here-->
<!-- Border Module start-->
<table class="mktoModule" mktoname="Border Module" id="Border-Module" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tbody>
<tr>
<td bgcolor="${whiteBGColor}" style="background-color:${whiteBGColor};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td height="${top_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;">
<table width="${border-width}%" align="${border-alignment}" border="0" cellpadding="0" cellspacing="0" style="width:${border-width}%;margin:0 auto;">
<tr>
<td height="${border-height}" style="background-color:${border-bgcolor};line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="${btm_space10}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--Border Module ends here-->
<!-- Footer Snippet starts -->
<table class="mktoModule" mktoName="Footer Module" id="footerModule" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
<tr>
<td bgcolor="${whiteBGColor}" style="background-color:${whiteBGColor};">
<table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;">
<tr>
<td align="${text-alignment}" valign="top" style="vertical-align: top;font-size: 14px;line-height: 20px;font-family:helvetica, sans-serif;color:#4c4d52;font-weight: normal;">
<div class="mktoText" id="footerText" mktoname="Footer Text">
<div>REPLACE WITH FOOTER SNIPPET</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Footer Snippet end -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Outer table ends here -->
</body>
</html>
what is it supposed to look like. What did you try after using my snippets?
Can you post your latest code, and a screenshot of the working standard HTML version
Cheers
Jo