When creating custom simple or designer email templates, there will be areas of editable content.
Editing this content is another way to customize your email code and design.
This article will provide an overview of naming conventions, attribute values, and coding recommendations for editable content.
Article Contents
| Trial | ✓ | |
| Essential | ✓ | |
| Advanced | ✓ | |
| Ultimate | ✓ |
Email| Administrators | ✓ | |
| Company Managers | ✓ | |
| Marketing Managers | ✓ | |
| Sales Managers | ||
| Salespersons | ||
| Jr. Salespersons |
Accessing the HTML Editor
The Lead Gen & CRM Email Designer gives you the ability to edit and style Content sections based on HTML classes assigned to them. Additionally, there are also editable classes assigned to the drag-and-drop sections in our inline email editor.
In Lead Gen & CRM, you can add editable classes in content fields to your custom email templates.
When creating a new email template or editing an existing template, click 
More Options > View Code to open the HTML window. In the HTML window, you can edit the email as a whole.
This HTML editor is completely separate from the inline editor and template editor.
You can make the content areas of your custom email editable in the Lead Gen & CRM email designer by giving the <td> container table cell a class of .editable.
Refer to For Developers: Customizing Email Templates for more information on customizing email templates through the HTML editor.
Editable Content Areas
When importing certain HTML templates, there are times when the sections may not be editable in the Lead Gen & CRM Email Designer. To be able to access the content and layout editors provided in Lead Gen & CRM, as well as ensure proper styling in the CSS menu, you will need to add the appropriate classes to your template’s content sections.
|
|
|
The following lists provide an overview of all of the available classes and standard styles in the Lead Gen & CRM Email Designer.
Classes
| Email Classes | Description | ||
| Editable | Adding this class to an element will surround it with a blue box and give it access to the content editor. | ||
| Editable- Layout |
Adding this class to an element will surround it with a green box and give it access to the layout editor. | ||
| Header | Adding this class will cause the section to take on the styling of the header color in the email standard styles section. | ||
| Content | Adding this class will cause the section to take on the styling of the content color in the email standard styles section. | ||
| Sidebar | Adding this class will cause the section to take on the styling of the sidebar color in the email standard styles section. | ||
| Footer | Adding this class will cause the section to take on the styling of the footer color in the email standard styles section. | ||
| Body | Adding this class will cause the section to take on the styling of the email background color in the email standard styles section. | ||
| BTN | Adding this class will cause the section to take on the styling of the button color in the email standard styles section. |
Standard Styles
| Email Styles | Description | |
| Header Background |
This styling affects any element with the header class. | |
| Content Background |
This styling affects any element with the content class. | |
| Sidebar Background |
This styling affects any element with the sidebar class. | |
| Footer Background |
This styling affects any element with the footer class. | |
| Email Background |
This styling affects any element with the body class. | |
| Headings | This styling affects any text located within <h> tags. | |
| Text | This styling affects any text located within <p> tags. | |
| Buttons | This styling affects any element with the btn class. | |
| Links | This styling affects any text located within <a href> tags. | |
| Links Hover | This styling affects what color a link will change to when moused over. |
Other Information on the Email Designer
When using the Email Designer, consider the following:
- Certain styles will not be displayed in View Code mode. The email designer takes any of the styles in the HTML for Email Standard Styles, pulls them into the database, and removes them from the HTML. Do not be alarmed when these styles are removed from the HTML in the View Code mode.
- The email designer will look at the first <style> element in the <head> of the HTML and find the CSS for the relevant classes. If the styles are transparent, that means the color is not in the database. It is either in the email’s standard styles or in the head of the email. If that happens, the color will be set in the database. Though it no longer shows in the head, it will appear.
- Use these styles to ensure that your desired global styles are brought in by the email designer. If you make a template outside the Lead Gen & CRM application and import it, you will need to put styles in the head.
Note: Constant Contact's Professional Services are available to assist with custom coding.
- With standard styles, inline email editor styles will override the email standard styles that CSS applied to the header of your email. Overriding the global styles inline is applicable on secondary styles that are exceptions to your primary styles.
- Tables are not available for use in Simple and Designer emails. Tables are only available with Legacy emails. Legacy templates are no longer available for creation.