Skip to main content
A
Anonymous
October 15, 2014
Question

Editable Banner Text in Email

  • October 15, 2014
  • 5 replies
  • 1260 views
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
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

5 replies

A
Anonymous
October 15, 2014
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! 
A
Anonymous
October 15, 2014

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
Grant_Booth
Level 9
October 15, 2014
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".
A
Anonymous
October 20, 2014
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..


 
A
Anonymous
October 20, 2014
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
Terms & ConditionsAccessibility statement

Loading footer...