Add CTA to the Image in HTML code | Community
Skip to main content
Nimisha_Garg
Nimisha_Garg
Level 4
April 26, 2019
Question

Add CTA to the Image in HTML code

  • April 26, 2019
  • 2 replies
  • 5127 views

HTML help needed:

We have an image and want to add two clickable CTAs to the image. Can someone tell me what HTML code will look like?

This link had some details but an HTML guru if you can reply it will be great.

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

2 replies

Grace_Brebner3
Grace_Brebner3
Level 10
April 28, 2019

Hi Nimisha,

This will require you to code the image as a background image (note that background images aren't accepted by all clients, and some MSO versions require VML to ensure display), with a two column table overlaid to contain the two buttons.

The exact best code to enable this will vary depending on the way your template is set up, to ensure it uses existing/creates new css styles effectively, and works seamlessly in the overall layout. This is really a good couple of hours of work when you factor in testing, so if you're looking for someone to provide the code for you, you're better off directing this request to a third party who can develop one quickly + at an affordable rate. There's plenty of recommendations around community for agencies that can assist with these kinds of things.

    Sant_Singh_Rath
    Adobe Champion
    Sant_Singh_RathAdobe Champion
    Adobe Champion
    April 29, 2019

    Hi @Nimisha Garg​, As grace mentioned you would need to define the banner image in the background and then you can add the code for button within the body of that image. You can have a look into marketo template. There are plenty of example.

    For example:

    <table id="hero" 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_hero" mktoname="Hero">

    <tbody>

    <tr>

    <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;font-family: 'Montserrat', Arial, sans-serif;-ms-text-size-adjust: 100%;vertical-align: middle;height: 353px;background-repeat: no-repeat;background-position: center;background:${heroBackgroundImage};background-color:${heroBackgroundColor};padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;background-image:${heroBackgroundImage};border-collapse: collapse;" height="353" background="${heroBackgroundImage}" bgcolor="${heroBackgroundColor}" valign="top" width="700">

    <center>

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

    <td class="cta" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family: 'Montserrat', Arial, sans-serif; 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;" align="left" border="0" cellpadding="0" cellspacing="0">

    <tbody>

    <tr>

    <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" align="center" bgcolor="${heroButtonBackgroundColor}"> <a href="${heroLink}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;font-size: 14px;font-family:'Montserrat', Arial, sans-serif;color: white;padding-top: 12px;padding-right: 18px;padding-bottom: 12px;padding-left: 18px;border-top-width:${heroBorderSize};border-right-width:${heroBorderSize};letter-spacing: 2px;border-left-width:${heroBorderSize};border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-bottom-width:${heroBorderSize};text-decoration: none;border-top-color:${heroBorderColor};border-right-color:${heroBorderColor};border-bottom-color:${heroBorderColor};border-left-color:${heroBorderColor};background-color:${heroButtonBackgroundColor};">${heroLinkText}</a> </td>

    <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" align="center" bgcolor="${heroButtonBackgroundColor}"> <a href="${heroLink}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;font-size: 14px;font-family:'Montserrat', Arial, sans-serif;color: white;padding-top: 12px;padding-right: 18px;padding-bottom: 12px;padding-left: 18px;border-top-width:${heroBorderSize};border-right-width:${heroBorderSize};letter-spacing: 2px;border-left-width:${heroBorderSize};border-top-style:

    solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-bottom-width:${heroBorderSize};text-decoration: none;border-top-color:${heroBorderColor};border-right-color:${heroBorderColor};border-bottom-color:${heroBorderColor};border-left-color:${heroBorderColor};background-color:${heroButtonBackgroundColor};">${heroLinkText}</a> </td>

    </tr>

    </tbody>

    </table>

    </center> </td>

    </tr>

    <tr>

    <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" height="86"> </td>

    </tr>

    </tbody>

    </table>

    ~ Sant Singh Rathaur
      Grace_Brebner3
      Grace_Brebner3
      Level 10
      April 29, 2019

      Though it's again worth highlighting like I mentioned originally, if you don't know how to code for email or don't have a developer resource (which from your question I suspect you don't), then you will get the best result by contacting a third party who can develop and test it for you in the context of your existing template. While you/your developer could use this example as a starting point, it references styles, classes and variables that are likely not included in/inconsistent with your template - which means it won't work as intended.

      It's also worth noting that (a) the two buttons are identical code, referencing identical variables, which wouldn't work in a real world scenario, and (b) there's no VML in this example, which means the background image is going to have lower client acceptance rate.

        SanfordWhiteman
        SanfordWhiteman
        Level 10
        April 29, 2019

        Couldn't agree more w/this and your earlier response, Grace!

        Some questions fall outside the reasonable abilities of a volunteer community. An experienced email developer should be engaged; the Nation can't support ongoing email development/design.

          Terms & ConditionsAccessibility statement

          Loading footer...