General settings

  • Updated

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.

—Table: General properties—
Parameter Description
Newsletter title
Text Appears in the browser window title of the online version.

Layout

Width of the content area Enter between 100 to 650 pixels to ensure that most email clients display the newsletter properly. If you set a greater value, test the newsletter with the deliverability preview.
Alignment Set the alignment for the entire newsletter. But, you define the alignment of content elements in each content paragraph.
Margin Specify up to 1/8 of the total newsletter width; larger margin distance negatively affects the layout.
Padding Specify up to 1/8 of the total newsletter width to define space between borders and content (text or images). Padding is only effective if different background colors or images are defined for the newsletter and content elements.
Space between grouping paragraphs If no other pixel value is set here, the Padding value is used.
Space between texts and images Specify up to 20 pixels.
Image quality

If High-resolution is selected, the uploaded image must be at least double the width of the image in the mailing. Example: For a 640 pixel wide image in the mailing you need an image with a width of 1280 pixels. This ensures that images do not lose sharpness during rendering of the mailing.

Favicon
URL If desired, enter the URL of an externally-stored favicon for the online version of your message.
Inherit
Header The inherit header value affects landing pages, including automatically generated ones. To enter content different from the newsletter header in the respective areas of your landing pages, clear this check box.
Footer The inherit value affects landing pages, including automatically generated ones. To enter content different from the newsletter footer in the respective areas of your landing pages, clear this check box.

Font settings

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

—Table: Font settings properties—
Parameter Description
Headings
Font type Define several font types in a comma-separated list. The browser or email client tries to use the first font in this list. If this font is not installed on the system, the next is tried. The last option should define a generic font.
Color To define the color, enter a hexadecimal value preceded by # (such as #000000). The depiction of non-hex web colors may vary from the original, depending on the browser.
Size Define the size (integer) of heading text.
Line height You can set an integer value greater than the font size; the default integer value is set by recipient's web browser or email client.
Underline Select to underline headings.
Bold Select to bold headings.
Text
Font type Define several font types in a comma-separated list. The browser or email client tries to use the first font in this list. If this font is not installed on the system, the next is tried. The last option should define a generic font.
Color To define the color, enter a hexadecimal value preceded by # (such as #000000). The depiction of non-hex web colors may vary from the original, depending on the browser.
Size Define the size (integer) of the text.
Line height You can set an integer value greater than the font size; the default integer value is set by recipient's web browser or email client.
Links
Font type Define several font types in a comma-separated list. The browser or email client tries to use the first font in this list. If this font is not installed on the system, the next is tried. The last option should define a generic font.
Color To define the color, enter a hexadecimal value preceded by # (such as #000000). The depiction of non-hex web colors may vary from the original, depending on the browser.
Size Define the size of link text.
Line height You can set an integer value greater than the font size; the default integer value is set by the web browser or email client of the recipient.
Underline Select to underline links.
Bold Select to bold links.
Table of contents with links to paragraphs
Font type Define several font types in a comma-separated list. The browser or email client tries to use the first font in this list. If this font is not installed on the system, the next is tried. The last option should define a generic font.
Color To define the color, enter a hexadecimal value preceded by # (such as #000000). The depiction of non-hex web colors may vary from the original, depending on the browser.
Size Define the size of TOC links.
Line height You can set an integer value greater than the font size; the default integer value is set by the web browser or email client of the recipient.
Underline Select to underline TOC links.
Bold

Select to bold TOC links.

Menu items in the navigation menu
Font type Define several font types in a comma-separated list. The browser or email client tries to use the first font in this list. If this font is not installed on the system, the next is tried. The last option should define a generic font.
Color To define the color, enter a hexadecimal value preceded by # (such as #000000). The depiction of non-hex web colors may vary from the original, depending on the browser. If you leave the field blank, the color you specified in the Links area is displayed.
Size Enter the font size for the menu item labels in pixels. If you leave the field blank, the font size you specified in the Links area will be used.
Line height Enter the row height for the menu item labels in pixels. If you leave the field blank, the line height is automatically set by the email client of the recipient.
Underline Select to underline menu items.
Bold

Select to bold menu items.

Custom fonts

To enable this feature, contact customer support. When setting up, provide the path (URL) 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 in the yellow box at the top of the edit area.

—Table: Custom fonts properties—
Parameter Description
Outlook fallbacks
Headings Set Outlook fallbacks for Headings.
Text Set Outlook fallbacks for Text.
Links Set Outlook fallbacks for Links.
Table of contents with links to paragraphs Set Outlook fallbacks for Table of contents with links to paragraphs.
Menu items in the navigation menu Set Outlook fallbacks for Menu items in the navigation menu.
Buttons Set Outlook fallbacks for Buttons.

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.

—Table: Color settings properties—
Parameter Description
Newsletter background
Color To define the color, enter a hexadecimal value preceded by # (such as #000000). The depiction of non-hex web colors may vary from the original, depending on the browser. If you leave the field blank, the color you specified in the Links area is displayed.
Image Because email clients do not support the display of background images, they should not contain important information.

If you use a background image, the parameters Alignment and Repeat become effective.

Be aware that a background image is only visible at border areas and free spaces, being masked by content and other backgrounds.

Alignment Only effective if a background image is uploaded. Sets alignment for the entire newsletter. Alignment of the content elements is defined in the content paragraphs.
Repeat Only effective if a background image is uploaded. Repeats the background image.
Content area background
Color To define the color, enter a hexadecimal value preceded by # (such as #000000). The depiction of non-hex web colors may vary from the original, depending on the browser. If you leave the field blank, the color you specified in the Links area is displayed.
Border
Show Check to apply a border around the paragraph.
Border width Enter an integer value in pixel. If you set this value to 0, no border will be displayed. The default border thickness is 1 pixel.
Color To define the color, enter a hexadecimal value preceded by # (such as #000000). The depiction of non-hex web colors may vary from the original, depending on the browser. If you leave the field blank, the color you specified in the Links area is displayed.
Layout Specify whether the newsletter should be displayed with or without pre-header, header and footer.

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.

—Table: Separator properties—
Parameter Description
Separator line
Width The maximum width equals the total newsletter width minus padding. If a top link icon with text is set on the separation line, the width of the line is reduced by the width of this element.
Alignment The alignment parameter is only effective if the width is smaller than the total available width.
Border width Enter an integer value in pixel.
Color To define the color, enter a hexadecimal value preceded by # (such as #000000). The depiction of non-hex web colors may vary from the original, depending on the browser.
Mobile
Width of the separator Set the width (in percent) of the separator line for the mobile version.
Top link
Icon You can replace the default icon with an uploaded custom icon. The maximum width equals the maximum width of the newsletter minus padding. Be aware that if you use wide graphics, the separator line, if used, is proportionally smaller.

Graphics larger than the maximum width are scaled down.

Text The text is shown. If the recipient's email client does not display the icon, the recipient sees only the text.
Text position Select the position of the link text relative to the icon.
Position Select the vertical position of the top link (text AND icon) relative to the separator line. By default, the top link is placed on the separator line.
Alignment Select the horizontal position of the top link (text AND icon).
Image
Image Upload an image from your computer or enter an image URL in the Alternatively external URL field that points to the image file.
Alternative text This text appears if a recipient blocks or disables images in his/her email client, or if the image cannot be displayed for another reason. You should enter an alternative text containing a short description of the image.
Link You can link the image to a landing page or a page from your website. If you entered a text link in this paragraph, use the same link for the image.
Position Specify the positioning of the image relative to the separator line and the top link. This positioning affects only the appearance if at least one or both of these elements are selected in a separator.
Alignment Select the horizontal position of the image. If the image occupies the entire width, this parameter has no effect.
Spacing
Above separator You can optionally add this space later in each separator paragraph to improve the clarity of the newsletter.
Between top link and separator line and/or icon You can optionally add this space later in each separator paragraph to improve the clarity of the newsletter.
Below separator You can optionally add this space later in each separator paragraph to improve the clarity of the newsletter.

Button template

See Click2Go.

SWYN

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

—Table: SWYN properties—
Parameter Description
Introduction
Text Enter an introduction text that is shown together with the network icons. This text may contain a call-to-action for recipients to share content in their networks.

Each paragraph for which the SWYN function is activated displays this text and the network icons.

Layout
Space between elements

By default, the Space between texts and images setting from the General tab is used. The maximum space is 20 pixels.

Image quality

Select Same as image quality in template settings to use the image quality specified under Settings > General. The Normal and High-resolution options allow you to set the image quality independently of the template settings.

If High-resolution is selected, the uploaded image must be at least double the width of the image in the mailing. Example: For a 640 pixel wide image in the mailing you need an image with a width of 1280 pixels. This ensures that images do not lose sharpness during rendering of the mailing.

Icons

SWYN must be enabled for each symbol to be displayed in the mailing. The maximum width of the SWYN icons is 30 pixels, or 60 pixels if you select High-resolution for image quality.

Facebook Upload a custom Facebook icon or enter a URL pointing to your custom Facebook icon.
Twitter Upload a custom Twitter icon or enter a URL pointing to your custom Twitter icon.
WhatsApp Upload a custom WhatsApp icon or enter a URL pointing to your custom WhatsApp icon.
Email Upload a custom email icon or enter a URL pointing to your custom email icon.
Xing Upload a custom Xing icon or enter a URL pointing to your custom Xing icon.

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.

—Table: Products properties—
Parameter Description
Order
Position 1 Enter a product name or title.
Position 2 Enter the product category, article group or genre. If you do not enter anything here, this position is not displayed.
Position 3 Enter an author, artist or manufacturer of the product or work. If you do not enter anything here, this position is not displayed.
Position 4 Enter a description of the product or work. If you do not enter anything here, this position is not displayed.
Position 5 Use this field in combination with the field Current Price for price reductions, bargains, special offers, and so on.
Position 6 Enter the current or new price here.

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.
—Table: Status variables—
Parameter Default Description
$first Boolean true if it is the first item in the content interface paragraph; otherwise false.
$index Integer The position of the item within the content interface paragraph as a number (1 for the first item, 2 for the second item...).
$last Boolean true if it is the last item in the content interface paragraph; otherwise false.
—Table: Present variables—
Variable Type Description
$text1Present Boolean true if content is present for the Text 1 field; otherwise false.
$text2Present Boolean true if content is present for the Text 2 field; otherwise false.
$text3Present Boolean true if content is present for the Text 3 field; otherwise false.
$text4Present Boolean true if content is present for the Text 4 field; otherwise false.
$text5Present Boolean true if content is present for the Text 5 field; otherwise false.
$text6Present Boolean true if content is present for the Text 6 field; otherwise false.
$text7Present Boolean true if content is present for the Text 7 field; otherwise false.
$text8Present Boolean true if content is present for the Text 8 field; otherwise false.
$text9Present Boolean true if content is present for the Text 9 field; otherwise false.
$text10Present Boolean true if content is present for the Text 10 field; otherwise false.
$link1TextPresent Boolean true if content is present for the Text field in the Link 1 group; otherwise false.
$link1UrlPresent Boolean true if content is present for the URL field in the Link 1 group; otherwise false.
$link2TextPresent Boolean true if content is present for the Text field in the Link 2 group; otherwise false.
$link2UrlPresent Boolean true if content is present for the URL field in the Link 2 group; otherwise false.
$link3TextPresent Boolean true if content is present for the Text field in the Link 3 group; otherwise false.
$link2UrlPresent Boolean true if content is present for the URL field in the Link 3 group; otherwise false.
$image1ImageUrlPresent Boolean true if content is present for the Image field in the Image 1 group in the Images tab; otherwise false.
$image1AltTextPresent Boolean true if content is present for the Alternative text field in the Image 1 group in the Images tab; otherwise false.
$image1LinkPresent Boolean true if content is present for the Link field in the Image 1 group in the Images tab; otherwise false.
$image2ImageUrlPresent Boolean true if content is present for the Image field in the Image 2 group in the Images tab; otherwise false.
$image2AltTextPresent Boolean true if content is present for the Alternative text field in the Image 2 group in the Images tab; otherwise false.
$image2LinkPresent Boolean true if content is present for the Link field in the Image 2 group in the Images tab; otherwise false.
$image3ImageUrlPresent Boolean true if content is present for the Image field in the Image 3 group in the Images tab; otherwise false.
$image3AltTextPresent Boolean true if content is present for the Alternative text field in the Image 3 group in the Images tab; otherwise false.
$image3LinkPresent Boolean true if content is present for the Link field in the Image 3 group in the Images tab; otherwise false.
$image4ImageUrlPresent Boolean true if content is present for the Image field in the Image 4 group in the Images tab; otherwise false.
$image4AltTextPresent Boolean true if content is present for the Alternative text field in the Image 4 group in the Images tab; otherwise false.
$image4LinkPresent Boolean true if content is present for the Link field in the Image 4 group in the Images tab; otherwise false.
$image5ImageUrlPresent Boolean true if content is present for the Image field in the Image 5 group in the Images tab; otherwise false.
$image5AltTextPresent Boolean true if content is present for the Alternative text field in the Image 5 group in the Images tab; otherwise false.
$image5LinkPresent Boolean true if content is present for the Link field in the Image 5 group in the Images tab; otherwise false.
$image6ImageUrlPresent Boolean true if content is present for the Image field in the Image 6 group in the Images tab; otherwise false.
$image6AltTextPresent Boolean true if content is present for the Alternative text field in the Image 6 group in the Images tab; otherwise false.
$image6LinkPresent Boolean true if content is present for the Link field in the Image 6 group in the Images tab; otherwise false.
—Table: Value variables—
Variable Type Environment Description
$text1Value String Desktop, mobile, text The unchanged content from the Text 1 field.
$text1FormattedValue String Desktop, mobile The edited content from the Text 1 field.
$text1FormattedAsHeadlineValue String Desktop, mobile The edited content from the Text 1 field. The text is provided in the formatting for headings, and is linked to the URL for Link 1.
$text2Value String Desktop, mobile, text The unchanged content from the Text 2 field.
$text2FormattedValue String Desktop, mobile The edited content from the Text 2 field.
$text3Value String Desktop, mobile, text The unchanged content from the Text 3 field.
$text3FormattedValue String Desktop, mobile The edited content from the Text 3 field.
$text4Value String Desktop, mobile, text The unchanged content from the Text 4 field.
$text4FormattedValue String Desktop, mobile The edited content from the Text 4 field.
$text5Value String Desktop, mobile, text The unchanged content from the Text 5 field.
$text5FormattedValue String Desktop, mobile The edited content from the Text 5 field.
$text6Value String Desktop, mobile, text The unchanged content from the Text 6 field.
$text6FormattedValue String Desktop, mobile The edited content from the Text 6 field.
$text7Value String Desktop, mobile, text The unchanged content from the Text 7 field.
$text7FormattedValue String Desktop, mobile The edited content from the Text 7 field.
$text8Value String Desktop, mobile, text The unchanged content from the Text 8 field.
$text8FormattedValue String Desktop, mobile The edited content from the Text 8 field.
$text9Value String Desktop, mobile, text The unchanged content from the Text 9 field.
$text9FormattedValue String Desktop, mobile The edited content from the Text 9 field.
$text10Value String Desktop, mobile, text The unchanged content from the Text 10 field.
$text10FormattedValue String Desktop, mobile The edited content from the Text 10 field.
$link1TextValue String Desktop, mobile, text The unchanged content from the Text field in the Link 1 group.
$link1UrlValue String Desktop, mobile, text The unchanged content from the URL field in the Link 1 group.
$link1FormattedValue String Desktop, mobile The edited content from the Text field in the Link 1 group. The text is provided in the formatting for links, and is linked to the URL for Link 1.
$link2TextValue String Desktop, mobile, text The unchanged content from the Text field in the Link 2 group.
$link2UrlValue String Desktop, mobile, text The unchanged content from the URL field in the Link 2 group.
$link2FormattedValue String Desktop, mobile The edited content from the Text field in the Link 2 group. The text is provided in the formatting for links, and is linked to the URL for Link 2.
$link3TextValue String Desktop, mobile, text The unchanged content from the Text field in the Link 3 group.
$link3UrlValue String Desktop, mobile, text The unchanged content from the URL field in the Link 3 group.
$link3FormattedValue String Desktop, mobile The edited content from the Text field in the Link 3 group. The text is provided in the formatting for links, and is linked to the URL for Link 3.
$image1ImageUrlValue String Desktop, mobile The image address of Image 1.
$image1AltTextValue String Desktop, mobile, text The unchanged content from the Alternative text field in the Image 1 group.
$image1LinkValue String Desktop, mobile, text The unchanged content from the Link field in the Image 1 group.
$image1FormattedValue String Mobile The complete HTML source text from Image 1 with alternative text and link. The image width is set to 100% (available width).
$image1FullFormattedValue String Desktop The complete HTML source text from Image 1 with alternative text and link. The maximum image width is the available paragraph width.
$image1HalfFormattedValue String Desktop The complete HTML source text from Image 1 with alternative text and link. The maximum image width is half of the available paragraph width.
$image2ImageUrlValue String Desktop, mobile The image address of Image 2.
$image2AltTextValue String Desktop, mobile, text The unchanged content from the Alternative text field in the Image 2 group.
$image2LinkValue String Desktop, mobile, text The unchanged content from the Link field in the Image 2 group.
$image2FormattedValue String Mobile The complete HTML source text from Image 2 with alternative text and link. The image width is set to 100% (available width).
$image2FullFormattedValue String Desktop The complete HTML source text from Image 2 with alternative text and link. The maximum image width is the available paragraph width.
$image2HalfFormattedValue String Desktop The complete HTML source text from Image 2 with alternative text and link. The maximum image width is half of the available paragraph width.
$image3ImageUrlValue String Desktop, mobile The image address of Image 3.
$image3AltTextValue String Desktop, mobile, text The unchanged content from the Alternative text field in the Image 3 group.
$image3LinkValue String Desktop, mobile, text The unchanged content from the Link field in the Image 3 group.
$image3FormattedValue String Mobile The complete HTML source text from Image 3 with alternative text and link. The image width is set to 100% (available width).
$image3FullFormattedValue String Desktop The complete HTML source text from Image 3 with alternative text and link. The maximum image width is the available paragraph width.
$image3HalfFormattedValue String Desktop The complete HTML source text from Image 3 with alternative text and link. The maximum image width is half of the available paragraph width.
$image4ImageUrlValue String Desktop, mobile The image address of Image 4.
$image4AltTextValue String Desktop, mobile, text The unchanged content from the Alternative text field in the Image 4 group.
$image4LinkValue String Desktop, mobile, text The unchanged content from the Link field in the Image 4 group.
$image4FormattedValue String Mobile The complete HTML source text from Image 4 with alternative text and link. The image width is set to 100% (available width).
$image4FullFormattedValue String Desktop The complete HTML source text from Image 4 with alternative text and link. The maximum image width is the available paragraph width.
$image4HalfFormattedValue String Desktop The complete HTML source text from Image 4 with alternative text and link. The maximum image width is half of the available paragraph width.
$image5ImageUrlValue String Desktop, mobile The image address of Image 5.
$image5AltTextValue String Desktop, mobile, text The unchanged content from the Alternative text field in the Image 5 group.
$image5LinkValue String Desktop, mobile, text The unchanged content from the Link field in the Image 5 group.
$image5FormattedValue String Mobile The complete HTML source text from Image 5 with alternative text and link. The image width is set to 100% (available width).
$image5FullFormattedValue String Desktop The complete HTML source text from Image 5 with alternative text and link. The maximum image width is the available paragraph width.
$image5HalfFormattedValue String Desktop The complete HTML source text from Image 5 with alternative text and link. The maximum image width is half of the available paragraph width.
$image6ImageUrlValue String Desktop, mobile The image address of Image 6.
$image6AltTextValue String Desktop, mobile, text The unchanged content from the Alternative text field in the Image 6 group.
$image6LinkValue String Desktop, mobile, text The unchanged content from the Link field in the Image 6 group.
$image6FormattedValue String Mobile The complete HTML source text from Image 6 with alternative text and link. The image width is set to 100% (available width).
$image6FullFormattedValue String Desktop The complete HTML source text from Image 6 with alternative text and link. The maximum image width is the available paragraph width.
$image6HalfFormattedValue String Desktop The complete HTML source text from Image 6 with alternative text and link. The maximum image width is half of the available paragraph width.
$editBar String Desktop, mobile Inserts the paragraph button bar. This is required to integrate the button bar into the table, such as when implementing adjacent items. If this variable is not available, the button bar is placed above the item.

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".

Desktop version
<table width="100%" border="0" cellpadding="0" cellspacing="0">    <tr>        <td width="100%">            #set($displaySeparator = false)            #if("$text1Present" == "true")                $text1FormattedAsHeadlineValue                #set($displaySeparator = true)            #end                         #if("$image1ImageUrlPresent" == "true")                #if("$text1Present" == "true")                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                    #set($displaySeparator = false)                #end                <table border="0" cellspacing="0" cellpadding="0" align="right">                    <tr>                        <td width="10"></td>                        <td>                            #if("$image1LinkPresent" != "true" && "$link1UrlPresent" == "true")                                <a href="$link1UrlValue" target="_blank">                            #end                            $image1HalfFormattedValue                            #if("$image1LinkPresent" != "true" && "$link1UrlPresent" == "true")                                </a>                            #end                        </td>                    </tr>                </table>            #end                         #if("$text2Present" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $text2FormattedValue                #set($displaySeparator = true)            #end                         #if("$text3Present" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $text3FormattedValue                #set($displaySeparator = true)            #end                         #if("$text4Present" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $text4FormattedValue                #set($displaySeparator = true)            #end                         #if("$text5Present" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $text5FormattedValue                #set($displaySeparator = true)            #end                         #if("$text6Present" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $text6FormattedValue                #set($displaySeparator = true)            #end                         #if("$text7Present" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $text7FormattedValue                #set($displaySeparator = true)            #end                         #if("$text8Present" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $text8FormattedValue                #set($displaySeparator = true)            #end                         #if("$text9Present" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $text9FormattedValue                #set($displaySeparator = true)            #end                         #if("$text10Present" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $text10FormattedValue                #set($displaySeparator = true)            #end                         #if("$link1TextPresent" == "true" && "$link1UrlPresent" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $link1FormattedValue                #set($displaySeparator = true)            #end                         #if("$link2TextPresent" == "true" && "$link2UrlPresent" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $link2FormattedValue                #set($displaySeparator = true)            #end                         #if("$link3TextPresent" == "true" && "$link3UrlPresent" == "true")                #if($displaySeparator)                    <table width="10" border="0" cellpadding="0" cellspacing="0">                        <tr>                            <td width="10" height="10"></td>                        </tr>                    </table>                #end                $link3FormattedValue                #set($displaySeparator = true)            #end        </td>    </tr>    <tr>        <td width="100%" height="10"><!-- --></td>    </tr></table>
Mobile version
#set($displaySeparator = false)#if("$text1Present" == "true")    $text1FormattedAsHeadlineValue    #set($displaySeparator = true)#end#if("$image1ImageUrlPresent" == "true")    #if("$text1Present" == "true")        <div style="height: 10px;"></div>        #set($displaySeparator = false)    #end    <div style="float: right; margin-left: 10px; max-width: 50%;">        #if("$image1LinkPresent" != "true" && "$link1UrlPresent" == "true")            <a href="$link1UrlValue" target="_blank">        #end        $image1FormattedValue        #if("$image1LinkPresent" != "true" && "$link1UrlPresent" == "true")            </a>        #end    </div>#end#if("$text2Present" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $text2FormattedValue    #set($displaySeparator = true)#end#if("$text3Present" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $text3FormattedValue    #set($displaySeparator = true)#end#if("$text4Present" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $text4FormattedValue    #set($displaySeparator = true)#end#if("$text5Present" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $text5FormattedValue    #set($displaySeparator = true)#end#if("$text6Present" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $text6FormattedValue    #set($displaySeparator = true)#end#if("$text7Present" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $text7FormattedValue    #set($displaySeparator = true)#end#if("$text8Present" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $text8FormattedValue    #set($displaySeparator = true)#end#if("$text9Present" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $text9FormattedValue    #set($displaySeparator = true)#end#if("$text10Present" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $text10FormattedValue    #set($displaySeparator = true)#end#if("$link1TextPresent" == "true" && "$link1UrlPresent" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $link1FormattedValue    #set($displaySeparator = true)#end#if("$link2TextPresent" == "true" && "$link2UrlPresent" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $link2FormattedValue    #set($displaySeparator = true)#end#if("$link3TextPresent" == "true" && "$link3UrlPresent" == "true")    #if($displaySeparator)        <div style="height: 10px;"></div>    #end    $link3FormattedValue    #set($displaySeparator = true)#end<div style="clear: both; height: 10px;"><!-- --></div>
Text version
#set($displaySeparator = false)#if("$text1Present" == "true")#if($displaySeparator)#end$!{null}$text1Value#set($displaySeparator = true)#end$!{null}#if("$text2Present" == "true")#if($displaySeparator)#end$!{null}$text2Value#set($displaySeparator = true)#end$!{null}#if("$text3Present" == "true")#if($displaySeparator)#end$!{null}$text3Value#set($displaySeparator = true)#end$!{null}#if("$text4Present" == "true")#if($displaySeparator)#end$!{null}$text4Value#set($displaySeparator = true)#end$!{null}#if("$text5Present" == "true")#if($displaySeparator)#end$!{null}$text5Value#set($displaySeparator = true)#end$!{null}#if("$text6Present" == "true")#if($displaySeparator)#end$!{null}$text6Value#set($displaySeparator = true)#end$!{null}#if("$text7Present" == "true")#if($displaySeparator)#end$!{null}$text7Value#set($displaySeparator = true)#end$!{null}#if("$text8Present" == "true")#if($displaySeparator)#end$!{null}$text8Value#set($displaySeparator = true)#end$!{null}#if("$text9Present" == "true")#if($displaySeparator)#end$!{null}$text9Value#set($displaySeparator = true)#end$!{null}#if("$text10Present" == "true")#if($displaySeparator)#end$!{null}$text10Value#set($displaySeparator = true)#end$!{null}#if("$link1TextPresent" == "true" && "$link1UrlPresent" == "true")#if($displaySeparator)#end$!{null}$link1TextValue$link1UrlValue#set($displaySeparator = true)#end$!{null}#if("$link2TextPresent" == "true" && "$link2UrlPresent" == "true")#if($displaySeparator)#end$!{null}$link2TextValue$link2UrlValue#set($displaySeparator = true)#end$!{null}#if("$link3TextPresent" == "true" && "$link3UrlPresent" == "true")#if($displaySeparator)#end$!{null}$link3TextValue$link3UrlValue#set($displaySeparator = true)#end$!{null}#if("$image1ImageUrlPresent" == "true" && "$image1AltTextPresent" == "true"     && ("$image1LinkPresent" == "true" || "$link1UrlPresent" == "true"))#if($displaySeparator)#end$!{null}$image1AltTextValue#if("$image1LinkPresent" == "true")$image1LinkValue$!{null}#else$!{null}$link1UrlValue#end#end$!{null}

RSS feeds

You can define one or more layout variants for RSS 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.

—Table: RSS feeds properties—
Parameter Description
Placeholder for the RSS feed URL
Value for {placeholder1}...Value for {placeholder1} In the RSS feed paragraph, open the RSS feed tab and insert the placeholder {placeholder1}, {placeholder3} or {placeholder3} in the URL box. Before the RSS feed is retrieved, this placeholder is replaced with the value entered here.
Order (default layout)
Position 1 Select the content to be displayed here.
Position 2 Select the content to be displayed here.
Position 3 Select the content to be displayed here.
Position 4 Select the content to be displayed here.
Layout 1-5
Desktop version Enter the source code for the desktop version of your newsletter.
Mobile version Enter the source code for the mobile version of your newsletter.
Text version Enter the source code for the text version of your newsletter.

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.
—Table: Status variables—
Variable Type Description
rssItemFirst Boolean Is true, if it is the first article of the RSS feed paragraph, otherwise false.
rssItemIndex Integer Shows the position of the article within the RSS feed paragraph as a number (1 for the first article, 2 for the second article and so on).
rssItemLast Boolean Is true, if it is the last article of the RSS feed paragraph, otherwise false.
—Table: Present variables—
Variable Type Description
rssTitlePresent Boolean Contains true, if content is present for the Title box, otherwise false.
rssTextPresent Boolean Contains true, if content is present for the Text box, otherwise false.
rssAuthorPresent Boolean Contains true, if content is present for the Author box, otherwise false.
rssDatePresent Boolean Contains true, if content is present for the Date box, otherwise false.
rssCategoriesPresent Boolean Contains true, if content is present for the Categories box, otherwise false.
rssLinkTextPresent Boolean Contains true, if content is present for the Text box in the Link group, otherwise false.
rssLinkUrlPresent Boolean Contains true, if content is present for the URL box in the Link group, otherwise false.
rssCommentsLinkTextPresent Boolean Contains true, if content is present for the Text box in the Link to the comments group, otherwise false.
rssCommentsLinkUrlPresent Boolean Contains true, if content is present for the URL box in the Link to the comments group, otherwise false.
rssImageUrlPresent Boolean Contains true, if content is present for the Image box (Upload file) in the Image tab, otherwise false.
rssImageAltTextPresent Boolean Contains true, if content is present for the Alternative text box in the Image tab, otherwise false.
rssImageLinkPresent Boolean Contains true, if content is present for the Link box in the Image tab, otherwise false.
—Table: Value variables—
Variable Type Description
rssTitleValue String Text for the Title box.
rssTextValue String Text for the Text box.
rssAuthorValue String Text for the Author box.
rssDateValue String Text for the Date box.
rssCategoriesValue String Text for the Categories box.
rssLinkTextValue String Text for the Text box in the Link group.
rssLinkUrlValue String Text for the URL box in the Link group.
rssCommentsLinkTextValue String Text for the Text box in the Link to the comments group.
rssCommentsLinkUrlValue String Text for the URL box in the Link to the comments group.
rssImageUrlValue String Image URL (Upload Image) for the Image tab.
rssImageAltTextValue String Text for the Alternative Text for the Image tab.
rssImageLinkValue String Text for the Link box for the Image tab.
editBar String Inserts the button bar for the RSS feed article.

This is necessary when placing articles side-by-side, for example, to integrate the button bar into the table. If this variable is not present, the button bar is placed above the article.

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.

Sample code
<!-- This query ensures that content is only displayed if the contents used for this layout are available. -->#if($rssTitlePresent || $rssImageUrlPresent || $rssAuthorPresent || $rssDatePresent || $rssTextPresent || ($rssLinkTextPresent && $rssLinkUrlPresent))    <!-- To enable the two-column layout, a border table is opened in the first RSS feed article. -->    #if($rssItemFirst)        <table border="0" cellpadding="0" cellspacing="0">            <tr>    #end          <!-- For every article, a table cell with half the width is created. This table cell contains the entire contents of the RSS feed item. -->    <td width="280" align="left" valign="top">              <!-- The button bar is placed here so it is displayed above the corresponding RSS feed article. -->        $editBar        #if($rssTitlePresent)            <font size="2" face="Arial, sans-serif" color="#000001" style="font-size: 14px;"><b>                #if($rssLinkUrlPresent)                    <a href="$rssLinkUrlPresent" style="color: #000001; text-decoration: none;" target="_blank">                #end                    <font size="2" face="Arial, sans-serif" color="#000001" style="font-size: 14px;"><b>$rssTitleValue</b></font>                #if($rssLinkUrlPresent)                    </a>                #end            </b></font>            <table width="100%" cellspacing="0" cellpadding="0" border="0">                <tr>                    <td width="100%" height="10"></td>                </tr>            </table>        #end                  #if($rssImageUrlPresent)            #if($rssImageLinkPresent)                <a href="$rssImageLinkValue" target="_blank">            #end            #if(!$rssImageLinkPresent && $rssLinkUrlPresent)                <a href="$rssLinkUrlValue" target="_blank">            #end            <!-- An image width of 130 pixels is specified. You should provide an image that already have the required width. Otherwise it will be stretched or compressed. -->            <img src="$rssImageUrlValue" alt="$rssImageAltTextValue" width="130" border="0" align="right" style="display: block; float: right;" />            #if($rssImageLinkPresent || $rssLinkUrlPresent)                </a>            #end        #end                  #if($rssAuthorPresent || $rssDatePresent || $rssTextPresent)            <font size="1" face="Arial, sans-serif" color="#666666" style="font-size: 11px;">                #if($rssDatePresent || $rssAuthorPresent)                    <span style="font-size: 10px;">                        $rssDateValue                        #if($rssDatePresent && $rssAuthorPresent)                            |                        #end                        $rssAuthorValue                    </span>                    <table width="100%" cellspacing="0" cellpadding="0" border="0">                        <tr>                            <td width="100%" height="10"></td>                        </tr>                    </table>                #end                $rssTextValue            </font>        #end                  #if($rssLinkTextPresent && $rssLinkUrlPresent)            <font size="1" face="Arial, sans-serif" color="#666666" style="font-size: 11px; line-height: 11px;">                &ndash;                <nobr>                    <a href="$rssLinkUrlValue" style="line-height: 11px; color: #666666; text-decoration: underline;" target="_blank">                        <font size="1" face="Arial, sans-serif" color="#666666" style="font-size: 11px;">                            <u>$rssLinkTextValue</u>                        </font>                    </a>                </nobr>            </font>        #end    <!-- After every first (left-aligned) RSS feed article, the table cell is closed and a new one is opened. -->    #if($rssItemIndex % 2 == 1)        </td>        <td width="20"></td>    <!-- After every second (right-aligned) RSS feed article, the above opened table is closed, some space is inserted and a table is opened. -->    #else                </td>            </tr>        </table>        #if(!$rssItemLast)            <table width="580" border="0" cellpadding="0" cellspacing="0">                <tr>                    <td width="580" height="20"></td>                </tr>            </table>        #end        <table border="0" cellpadding="0" cellspacing="0">            <tr>    #end                  <!-- After the last RSS feed article the table is closed. -->    #if($rssItemLast)            </tr>        </table>    #end      #end

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.

—Table: Facebook properties—
Parameter Description
Order (default layout)
Position 1–3 Specify where to display the date, author, and text by selecting the desired option from the drop-down list. To specify distance between them, in the General tab under Layout, change the value of Space between texts and images.
Layout 1 and 2
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.

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.

—Table: Twitter properties—
Parameter Description
Order (default layout)
Position 1 – 3 Specify where to display the date, author, and text by selecting the desired option from the drop-down list. To specify the distance between these information, in the General tab under Layout, change the value of the Space between texts and images box.
Layout 1 and 2
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.

Navigation menu

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.

—Table: Structured data properties—
Parameter Description
Gmail Promotions tab
Activate Check to add structured data to your mailing. By clicking Apply, a yellow box at the top of the edit area labeled Structured data is activated for this mailing appears. Click Display to display the JSON-LD script in the head section of the HTML code.

If you have knowledge of JSON-LD, you can use the code preview to review, copy, and modify the code in the JSON-LD source code section.

Start date To promote a limited time offer, you must specify a start date. The start date must lie before the mailing's send date to ensure that Gmail considers the structured data. Use the indicated date format.
Start time Define a start time. Use the time format hh:mm:ss.
End date From the end date and end time, Gmail calculates the timer until the end of the offer. The end date must lie after the mailing's send date to ensure that Gmail considers the structured data. Use the indicated date format.
End time Define the end time of the offer. Use the time format hh:mm:ss.
Time zone Select the time zone to which your time specifications refer. Gmail uses this to calculate the end time for the recipient's time zone. Example: An offer that ends at 10:00 AM in the UK ends at 6:00 PM in Japan.
Logo Upload your company logo. The logo will be displayed next to the mailing preview. Alternatively, you can enter an external URL where the logo can be found. Use a square image format with an image size of at least 40 x 40 pixels.
Coupon description Enter a description to your coupon code. Example: 30% discount.
Coupon code Insert a coupon code or placeholder depending on how you generate the coupon code. For information on how to create and include coupon codes with Optimizely Campaign, see Coupon system.
Image Upload an image that will be displayed below the text in the email preview. Alternatively, you can enter an external URL where the logo is to be found. Use a rectangular image format with an image size of at least 324 x 83 pixels.

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).

Do not add URLs as values! They will not be transmitted correctly.

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.

—Table: Mobile properties—
Parameter Description
General
Activate mobile version Check to create a mobile version of the newsletter. By default, newsletter content is included in the mobile version. For each paragraph, you can define whether it is displayed or omitted in the mobile version. Note that the size of each email that contains a mobile version will increase by approximately 50-100 KB.
Click profile Select a click profile that is assigned to each recipient who clicks in the mobile version. Use the click profile to analyze the usage of the mobile version or to create target groups containing mobile users.
Activate link extension If you want to track mobile version links separately so that they are available in advanced reports, check this box. If you do, an additional parameter mobile with a value of 1is appended to mobile newsletter links.

You can also use click profiles to achieve more convenient reporting.