Editable Banner Text in Email

[Anonymous]

Hi

I want Banner with Editable Text in Email. If this is possible please tell me code or steps to get this done.

Thanks
Sachin

[Anonymous]

Hi Sachin - I am pretty sure that in the HTML for the email, just make sure that the section you want to be editable has "class="mktEditable" - that should do it, although I am not 100% positive.

I hope that helps/works! 

[Anonymous]

Here's some code to play with 🙂  Feel free to make the classes whatever you want in the CSS

<table class="row" style="display:table !important; border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; padding:0px; " ><tr style="vertical-align:top; text-align:left; padding:0; background:#65b2bf; " class="bg-white" align="left" ><td class="wrapper" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; margin:0; padding:0px; " align="left" valign="top" ><table class="six columns" width="280" style="width:280px; border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; padding:0; " ><tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:1px; font-size:14px; margin:0; padding:0px; " class="center-table" align="left" valign="top" ><div class="mktEditable" id="banner" ><img src="#" alt="banner"></div>

  </td>

  <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>

  </tr>

  </table>

  </td>

  <td class="wrapper last" id="banner-content" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; background:#65b2bf; margin:0; padding:0px; " align="left" bgcolor="#65B2BF" valign="top" ><table class="six columns" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:280px; padding:0; " ><tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td style="color:#fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; line-height:24px; word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; font-weight:normal; margin:0; padding:20px 0px 0px 20px; " class="center-table" align="left" valign="top" ><div class="mktEditable" id="content-one" ><h6 style="color: #fff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 1.3; word-break: normal; font-size: 20px; margin: 0; padding: 0;" align="left">Lorem Ipsum Dolor Siecit</h6>

  </div>

  </td>

  </tr>

  <tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td style="color:#fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; line-height:24px; word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; font-weight:normal; margin:0; padding:5px 0px 10px 20px; " align="left" valign="top" ><div class="mktEditable" id="content-two" >Enim ad minim veniam, quisantsas noastrud exearcitation ullasmco.</div>

  </td>

  </tr>

  <tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; margin:0; padding:0px 0px 10px 20px; " align="left" valign="top" ><table class="button" width="130" style="width:130px !important; border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; overflow:hidden; padding:0; " ><tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td style="width:130px !important; text-transform:uppercase; word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; color:#ffffff; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; display:block; background:#304f6d; margin:0; padding:8px 0; border:1px solid #304f6d; " align="center" bgcolor="#304F6D" valign="top" ><div class="mktEditable" id="CTA" ><a href="#" style="color: #ffffff; text-decoration: none; font-weight: normal; font-family: Helvetica, Arial, sans-serif; font-size: 15px;">Contact Now</a></div>

  </td>

  </tr>

  </table>

  </td>

  </tr>

  </table>

  </td>

  </tr>

  </table>

[Grant_Booth]

Right, you would need to use tables and CSS styling  to make the banner, rather than an image. Just put it all inside a div with the class "mktEditable".

[Anonymous]

Hi Stephen,

Is there any limitation of using this code, Like banner should have solid color , will work on limited mail clients (gmail, hotmail, yahoo,Outlook etc..)

Thanks to all for your replies..


 

[Anonymous]

Outlook is always a tricky one to please but as long as you have some alt text and a backup background color Just incase theimagse dont load I think you will be fine 🙂 It's also responsive. 

Use your own classes to make it however you want but I think you should be fine. If you would like someone else to take a look at your code i'm more then willing to look at it. Or if you have any more questions.

Feel free to email : stephen.stouffer@mygenfcu.org