Image

In a contentImageEditable tag, an image accepts the following arguments:

data-max-width and data-max-height represent the maximum width and height the image can take. Those dimensions will be used in the Resize panel to display the maximum dimensions the image has the right to be resized to. For the width, if you put a wider dimension than the one used for the main container, the layout will break. By default, if you don't specify the dimensions, the image will have a max-width of 600 pixels, and a max-height of 300 pixels.

data-default="placeholder" is used to indicate that an image in the template is a placeholder only, and that if the user edits it, they should be prompted to add an image instead of editing an existing image.

Image+text

This is a table that contains one column of text, and one column of image. This is how we usually set this up in a template:

data-customIcon="true" is used to indicate that the template provides a custom Facebook/Twitter icon and that you want to force the user to use this icon. That way, the icon will not be replaceable. However, clicking on the icon in the template will open a popup that will let the user indicate their twitter username or Facebook page link.

data-noText="true" indicates that clicking on the icon will not open the description popup.

Theming / Color Schemes

The new editor supports the notion of color schemes. Each template should have at least one color scheme that will be available by default. If you don't supply one, the default theme will be loaded (details below). Moreover, users can modify your color scheme by manipulating each individual color with a color picker.

In the campaign builder, there are five distinct colors that can be included in a color scheme (for now):

The background color

Color of the text (body)

Color of the links

Color of the text background

Color for the tag.

To add a color scheme, you need to add the following into the <head> of your template:

All the colors should be transcoded into their hexadecimal values, without the #. Moreover, you should use the full 6 digits for their values (that means the value fff will not work, it has to be ffffff).

The active class indicates that this color scheme will be loaded when the editor loads.

Custom zones

There is one last thing you can add to a template. Because we allow users to dynamically add new content zones into their campaign, we need to ensure that each new zone that is added has the same layout, color scheme, typography, and alignment as the default content zones.

This is why we have created custom zones. By adding them at the end of your template, the new editor is able to grab the code of each new content zone that is added and overwrite the style with the one you provided for the template.

To add custom zones in your template, place them just before the </body> tag.