General settings

Click Settings on the top border of the template editor to define fonts, basic grid, color schemes and other settings that affect the template. The assistant for these settings opens in a new layer with the tabs described in this topic.

General

These settings affect the general layout of the newsletter and content, unless you overwrite them in Content paragraphs. For example, use general settings to adapt your company's corporate design to this template.

Font settings

Define font types, size and line height for headings, text and links.

Custom fonts

To enable this feature, contact customer support. When setting up, provide the path (URL Stands for "Uniform Resource Locator". Also known as a web address such as http://world.optimizely.com.) to your custom fonts. This can be your own server or the server of a font provider (such as Google Fonts). If you want to use a server from Optimizely, Optimizely needs the font files. Optimizely itself cannot provide fonts.

Custom fonts are special fonts (such as your corporate font) that are downloaded from an external source when the email is opened. If you have configured custom fonts in your client, you can find an overview of the available fonts in the yellow box at the top of the edit area.

To use custom fonts, enter the font name in the desired input field in the Font Settings tab. Additionally define alternative fonts, for example Fugaz One, Georgia, serif.

Image: Custom fonts

Outlook fallbacks

Outlook does not support custom fonts. In the Custom Fonts tab under Outlook Fallbacks, specify which alternate fonts Outlook should use. You can find an overview of the defined Outlook fallbacks the default action if no criteria is met; without a fallback, no action occurs. in the yellow box at the top of the edit area.

Outlook only uses the defined fallbacks (except for Buttons) if you have set a custom font in the corresponding area in the Font settings tab. If you set a custom font without defining a fallback, Outlook uses an alternate font.

Color settings

Define general background colors or images and border colors in this tab. You can overwrite these settings in each content block.

Lists

Parameter Description
Options
List type To use a simple bullet, under List type, select Bullet list.

To use a custom bullet character, upload an image and, under List type, select List with custom bullet character.

Custom bullet character Upload a bullet character or, in the Alternatively external URL field, enter an image URL pointing to the image source. The bullet character can be up to 30-pixels wide. Wider graphics are proportionally reduced to this size.

Separator

Use separator paragraphs to structure your newsletter and group paragraphs. Separators may contain a top link for a simple navigation, a separator line, the top link, an image, and free space. You can activate each elements individually in each separator paragraph.

Button template

See Click2Go.

SWYN

If you use the share function for social networks (SWYN Stands for "share with your network"), define the general appearance of your newsletter's SWYN.

Products

This paragraph type contains common fields to enter product details, such as old/current price, product category, description, and so on. You can define the order of these fields.

By default, no formatting is used in the designated fields. To format the text entered in these fields, use the editor's formatting tools. Or, if you use a content interface, commit HTML formatting tags.

Content interface

This tab lets you define up to five alternative layouts for content of the content interface by freely inputting HTML or text. You can select the required layout from within the content interface paragraph.

Source text entered here is adopted into the newsletter with no additional checks.

Text and link formatting must be prepared in HTML format. You need HTML knowledge, particularly HTML in email, to create new layouts or edit the default one. Using corrupt or unsupported code may cause severe errors in the newsletter display.

Parameter Description
Layout 1-5
Desktop version Enter the source text for the desktop version.
Mobile version Enter the source text for the mobile version.
Text version Enter the source text for the text version.

Inserting content

The following Velocity variables are available:

  • Status. Information on current item paragraphs
  • Present. For using queries that check for the presence of an element
  • Value. For issuing the content

Notes for the creation of new layouts

  • Font definitions. If you are using an alternative layout variant, font definitions must exist in the HTML you entered. The texts are not formatted by the Template Kit to give you complete freedom in visual design.
  • Widths. Specify a fixed width or a width in percent. You should enter a percentage, because this prevents elements from sticking out of the layout.
  • Danger of display errors. If you edit the layouts without in-depth knowledge of HTML, serious display errors may occur in your mailings.

Examples of alternative layout variants

The examples show the source text for the default layout and can be adapted for alternative layout variants.

Remove HTML comments, blank lines and spaces when transferring HTML into the Template Kit. If you do not do this, then these elements are included when sending, and will cause the newsletter source text to "swell".

RSS feeds

You can define one or more layout variants for RSS Stands for "RDF Site Summary", also known as Really Simple Syndication, is a standard for distributing information from one website to another. Often used for distributing news feeds. feed articles. Within the RSS feed paragraph you can select the layout to be used.

Source code entered in this tab is rendered into the newsletter without further checking. The formatting of text and links must be written in HTML code.

You need knowledge of HTML and particularly of HTML in emails to setup this paragraph. Using corrupt or not supported code in a layout may cause severe errors in the newsletter display.

Inserting content

Content from an RSS feed is present as velocity variables and can be inserted in the source text this way. These include

  • status variables (information on current article paragraphs)
  • present variables (for using queries that check the presence of an element)
  • value variables (for releasing content)

Important notes

  • Font definitions. When using alternate layout options, font definitions must be set in your HTML. The Template Kit does not format the text, allowing you to choose a design. Conversely, this means that links in continuous text (if used) must be formatted accordingly in the RSS feed.
  • Width specifications. RSS feed paragraphs may vary in width. When using an alternate layout, you should preferably only work with percentages, or not apply width specifications. Otherwise, you can work with fixed widths as long as the RSS feed paragraph is used in the same configuration, or a separate layout variant is defined for each different paragraph width.
  • Aspect ratio. The Template Kit can only edit images to a limited degree if an alternative layout option is used (whatever content width is present is applied as the maximum width). You should provide images with the required width. Also, you can also scale the image by setting a specified width in HTML. This is not recommended, however, because some applications (such as Microsoft Outlook) ignore this information and display the image in its original size.
  • Link alignment/Image position. These options are inoperative when using an alternative layout. The arrangement/positioning of elements is set by the HTML
  • Risk of display errors. When manually entering HTML for desktop and mobile versions, make sure that the content displays properly in a variety of email programs and web mailers. Otherwise, this can lead to serious display errors.

Example for an alternative layout

The example creates a two-columned layout using a width of 580 pixels.

Remove HTML comments, whitespaces, and blank lines when copying the HTML to the Template Kit. They may be sent along with the newsletter and, thus, expand the newsletter source code.

Facebook

The Facebook paragraph contains a default layout for the visual design of Facebook articles. If you want, you can store up to 2 additional layouts as HTML code. You can select custom layouts from a drop-down list in the Facebook paragraph (see Facebook layouts).

If you lack knowledge of HTML, CSS, and Velocity, contact customer support to edit the alternative layouts. If you edit them without in-depth knowledge, serious display errors may occur in your mailings.

Twitter

The Twitter paragraph contains a default layout for the visual design of your Tweets. If you want, you can store up to 5 additional layouts as HTML code. You can select custom layouts from a drop-down list in the Twitter paragraph. (See Twitter layouts).

If you lack knowledge of HTML, CSS, and Velocity, contact customer support to edit the alternative layouts. If you edit them without in-depth knowledge, serious display errors may occur in your mailings.

The navigation menu paragraph contains a default layout for the visual design of navigation menu. If you want, you can store up to 5 additional layouts as HTML code. You can select custom layouts from a drop-down list in the navigation menu paragraph. (see Navigation menu layouts).

If you lack knowledge of HTML, CSS, and Velocity, contact customer support to edit the alternative layouts. If you edit them without in-depth knowledge, serious display errors may occur in your mailings.

Parameter Description
Layout 1-5
Desktop version Enter the source code for the desktop version.
Mobile version Enter the source code for the mobile version.
Text version Enter the source code for the text version.

Structured data

Add structured data to your mailing to present the email more prominently and attractively in the recipient's inbox or to add additional functions. The recipient's email program must support structured data for this. If this is not the case, the structured data is ignored and the email is displayed regularly in the recipient's inbox.

Select the checkbox in the Gmail Promotions tab section to place the email prominently in the Gmail Promotions tab using structured data. Depending on the provided content, Gmail will add a company logo, an image banner, a coupon code and a timer to the email preview.

The structured data generated by Optimizely Campaign is in conformance with Gmail's specifications. However, Optimizely has no influence on how the structured data is ultimately interpreted in Gmail's inbox. For more information on the Gmail Promotions tab, see Gmail developer website.

Alternatively, you can enter structured data directly as JSON-LD script in the JSON-LD source code section. Note that no validation takes place and that even a small error in the JSON-LD source code can result in the structured data not being read. In any case, test the display in advance using a test dispatch.

Tracking

You can extend outgoing links with tracking parameters. With the help of web analytics software, you can use these parameters to analyze click behavior. You can define up to five tracking parameters. Each consists of a key (parameter name) and value.

Parameter Description
Parameter 1-5
Key Enter the name of the parameter.
Value Enter the value of the parameter (integer or string).

Text version

If you do not want to use the automatically generated text version, created from content you enter in the template editor, enter a text version for the complete newsletter. If you enable this option, no content is converted automatically into the text version.

Parameter Description
Alternative text version
Activated By default, this check box is cleared, and the text version is created automatically. If you check this box, you must enter a text version manually in the field below. Otherwise, no text version is sent with your mailing.
Text Enter the newsletter text. You cannot use HTML or other formatting in the text version. Only line breaks and special characters (such as ****** or ++++++) can be used to structure the newsletter.

Mobile

Activate an optimized version of your mailing for mobile devices. This version is sent together with the desktop version and displayed on smart phones and tablets.