User Manual · 2017. 3. 3. · tinue reading on a separate landing page or to purchase an item in an online shop. The Advanced Template Plus allows you to create landing pages with

User Manual Inxmail Professional Advanced Template (Plus) 4.6

Version: TEMPAD-A-EN-17-1.0

© 2017 Inxmail GmbH, Wentzingerstr. 17, 79106 Freiburg, Germany

Tel.: (+49-761) 296979-0 | Fax: (+49-761) 296979-9

[email protected] | www.inxmail.de

This publication is protected by copyright. All rights reserved, especially the right of translation, re-

production, photocopying or copying in any other form, and storage in electronic form.

Names, trade names, commodity names etc. used in this publication may be brand names or

trademarks and therefore subject to legal requirements, despite the fact that they are not labelled

as such.

mailto:[email protected]

http://www.inxmail.de/

I

Contents

1 About this document 1

2 Advanced Template 3

3 Advanced Template Plus 3

4 Basics 4

4.1 Mailing vs newsletter ................................................................................................................... 4

4.2 Understanding the template structure ..................................................................................... 4

4.3 Frame and content elements ...................................................................................................... 5

4.4 The main elements of the Advanced Template ........................................................................ 5

4.5 Your workspace – the Template Editor ...................................................................................... 9

5 Your first steps 13

5.1 Importing the template.............................................................................................................. 13

5.2 Create mailing lists ..................................................................................................................... 14

5.3 Specify colour, font and icon settings ...................................................................................... 15

6 Tips on compiling a newsletter 16

6.1 Inserting a main element .......................................................................................................... 16

6.2 Adding an element to a main element .................................................................................... 16

6.3 Moving or deleting a main element ......................................................................................... 17

6.4 Setting page margins and distances to the next element level ........................................... 18

7 Filling template elements with contents 20

7.1 Creating a right-aligned table of contents ............................................................................... 20

7.2 Creating and editing articles ..................................................................................................... 22

7.2.1 Creating a three-column article ................................................................................................ 22 7.2.2 Highlighting a special article ..................................................................................................... 25 7.2.3 Adjusting text field width ........................................................................................................... 26 7.2.4 Filling an article element with external content ..................................................................... 27 7.2.5 Hiding individual mailing contents on mobile devices .......................................................... 28 7.2.6 Setting social sharing links for an article ................................................................................. 29

7.3 Dynamic landing pages .............................................................................................................. 31

7.3.1 Create dynamic landing page ................................................................................................... 33 7.3.2 Adapt dynamic landing page .................................................................................................... 36

7.4 Inserting images ......................................................................................................................... 39

II

7.4.1 Creating an advanced header ................................................................................................... 39 7.4.2 Creating a mobile teaser ........................................................................................................... 43 7.4.3 Integrating a section bar as an image ..................................................................................... 44 7.4.4 Setting up a graphics container ................................................................................................ 46 7.4.5 Eine Bildunterschrift hinzufügen .............................................................................................. 48

7.5 Set up Web tracking ................................................................................................................... 54

8 Mobile optimisation of the Advanced Template 56

8.1 How mobile optimisation works ............................................................................................... 56

8.2 Factors influencing mobile display ........................................................................................... 58

8.3 Testing display ............................................................................................................................ 58

8.4 Recommendations to facilitate the mobile display of mailings ........................................... 58

1

Inxmail Professional Advanced Template (Plus) 4.6 | 1 About this document

1 About this document

Release This document relates to the following releases/versions:

Inxmail Professional 4.6

Advanced Template and Advanced Template Plus This document relates to both the Advanced Template and the Advanced Template Plus. The additional

functionalities of the Advanced Template Plus that are not found in the Advanced Template are de-

scribed in the section Dynamic landing pages page 31.

Target group This document is intended for users of the Advanced Template or Advanced Template Plus in Inxmail

Professional.

Special information The following terms are used to draw your attention to special information.

Term Explanation

Important Care should be taken here. You should make every effort to observe

the information in this section.

Note Here you will find tips that can make life easier for you.

Example This section provides example procedures or example data to help

guide you.

Structure of individual chapters The individual chapters typically consist of the following sections:

Section Content

Prerequisites This section sets out the conditions that must be met for a particular

task to be performed.

Step by step This section guides you step by step through the application until you

have completed your task.

Additional information Here you can find further information that is relevant to the task be-

ing performed.

Related topics Here you will find a tabular listing of topics that are related to the task

being performed.

2

Inxmail Professional Advanced Template (Plus) 4.6 | 1 About this document

Typographic conventions The formatting options listed below draw your attention to the following:

Formatting Use

User interface Words that appear in this style relate to elements of the Inxmail Profes-

sional user interface.

Code Text that appears in this style represents program code.

Entries

Selections

Words that appear in this style are to be entered in input fields. When making

selections, you must select the value that appears in this style.

User interface This document describes the application based on the Microsoft Windows user interface.

Additional information and documents For a detailed description of the functionality of Inxmail Professional, see the Inxmail Professional

User Manual and online help. The User Manual is supplied with Inxmail Professional as a PDF docu-

ment. It is also available for download from the Inxmail Community at http://community.inxmail.de.

The Inxmail Community offers a range of other documents for Inxmail Professional users, including

Smart Guides and documents for administrators such as installation manuals.

http://community.inxmail.de/

3

Inxmail Professional Advanced Template (Plus) 4.6 | 2 Advanced Template

2 Advanced Template The Advanced Template allows you to create mailings (newsletters) quickly and easily, without any

knowledge of HTML. A template editor is provided for this purpose in the Editing workflow step.

It allows mailings to be created according to a building-block approach: Using numerous main ele-

ments, element modules and special functions such as the integration of external content, you can

design your own mailing and tailor it to the needs of your recipients.

The Advanced Template features considerable scope for creative design. An advanced banner in the

header or footer is created in no time at all, and directs the reader’s eye to additional product offer-

ings, for example. Through use of template elements, the mailing contents can be combined and

positioned in different ways, and there is choice and versatility as regards colour and font. Individual

mailing contents can be shared on social networks using a social sharing functionality.

The Advanced Template is also mobile optimised. Automatic adjustment of the mailing to the mobile

device, as well as the possibility to hide particular mailing contents guarantees an ideal reading ex-

perience for the recipients.

3 Advanced Template Plus The articles of a mailing usually contain summarised texts that either encourage the reader to con-

tinue reading on a separate landing page or to purchase an item in an online shop.

The Advanced Template Plus allows you to create landing pages with further information in an auto-

mated manner. The Dynamic landingpage element provides a range of input fields and dialogs that

you can use to create a landing page directly within the Mailing Editor. The content is displayed in

compliance with the layout. The links from the articles in the mailing to the associated landing pages

are generated automatically.

As a result, you do not require external software to create landing pages or a separate Web server

on which you have to host the landing page(s).

Note The Dynamic landingpage element is only available in the Advanced Template Plus. For infor-

mation on purchasing and implementing the Advanced Template Plus, contact us at

[email protected].


4

Inxmail Professional Advanced Template (Plus) 4.6 | 4 Basics

4 Basics

4.1 Mailing vs newsletter

In this document, the terms newsletter and mailing are used as synonyms. Nevertheless, mailing is

the term mostly used in the GUI of Inxmail Professional. In general language, the term newsletter is

used as well.

4.2 Understanding the template structure

Your newsletter or, rather, your newsletter template has a modular structure in Inxmail Professional,

that is to say, it is made of up building blocks. At the uppermost level, it consists of main elements.

Fig. 1: Modular structure of the newsletter

The main elements contain elements, which, in turn, can contain further elements. This results in

multiple levels of nesting.

Fig. 2: Elements in elements

5


A newsletter might then appear as follows in a stylised view:

Fig. 3: Example of the modular structure

4.3 Frame and content elements

The main elements of the Advanced Template can be categorised into frame elements and content

elements:

Frame elements Some main elements must be present in every newsletter, or rather they must be inserted. These

are the Settings, Header, Introduction and Footer main elements. These main elements represent the

outer frame of the newsletter, and vary comparatively little from newsletter to newsletter. They are

used only once per newsletter.

Content elements The other main elements contain/control the central contents of the newsletter. This is where prod-

ucts that you wish to advertise in the newsletter are presented. Some of these main elements can

be used multiple times in a newsletter. The following content elements are available in the Advanced

Template: Section bar, Article, Article (two-column), Article (three-column), Graphics container, Skyscraper

advertisement, Sharing settings, Web tracking, File attachments and Standard unsubscription page.

Note If you use the Advanced Template Plus, the Dynamic landing page element is also available.

4.4 The main elements of the Advanced Template

By default, the Advanced Template contains the following main elements:

‘Settings’ main element You can use the Settings to adjust the colour and font of your newsletter and select suitable bullet

points for further links or simple lists (Specify colour, font and icon settings Seite 15).

‘Header’ main element In the Header, you set up the browser link, as well as the logo and header. Optional banner elements

can be placed next to the header graphic, for example. A navigation bar links to categories on the

6


web page. Instead of the header graphic, a mobile teaser can be set up and displayed on mobile de-

vices (Creating an advanced header page 39).

‘Introduction with table of contents’ main element In the Introduction, you address the reader personally and briefly summarise the topics of the news-

letter. In this way, you arouse interest. Set the colours and fonts, and insert a signature at the end of

the introduction to give the newsletter a personal note.

The Table of contents can be set in a number of ways in the Advanced Template. It clearly lists the top-

ics of the mailing. The individual categories can be hidden (Creating a right-aligned table of contents

page 20).

‘Article’ main element The Article main element is where you store your mailing content with images and links. You can also

integrate external content from your webshop, CMS, CRM or ERP system. Besides a simple article,

you can also select the Article (two-column) or Article (three-column) main element. This enables you to

combine mailing contents and position them in different ways (Creating and editing articles page 22).

‘Section bar’ main element The Section bar is usually positioned above an article or image. It sorts the mailing contents by topic

and offers the reader a further structure in the mailing. Instead of the text section bar, you can also

insert an image as the section bar if, for example, you would like to draw attention to new products

(Integrating a section bar as an image page 44).

‘Graphics container’ main element Graphics containers are used to store simple images, calls-to-action or advertising banners.

Graphics containers also allow several images to be integrated via so-called slices and to be coupled

with different links (Setting up a graphics container page 46).

‘Footer’ main element The Footer concludes the mailing and contains further service information, as well as the legal notice

and contact address. Here you should also provide the reader with the option to unsubscribe from

the newsletter.

‘Skyscraper ad’ main element Use the Skyscraper ad main element to integrate advertising. The skyscraper is positioned at the

right edge of the mailing and has a preset width of 160px.

‘Sharing settings’ main element In the Sharing settings, you can set up social sharing links and then activate them for articles of your

choice. The recipients of your newsletters can then use these further links to share article contents

on social networks such as Xing, Twitter or Facebook, thereby increasing the distribution of your

newsletter contents (Setting social sharing links for an article page 29).

‘Web tracking’ main element In the Web tracking main element, individual attributes per recipient or recipient group can be added

to links. Linked service portals or web analytics tools will then automatically identify every recipient.

This enables you to generate individual offers or product recommendations for every recipient.

7


‘File attachments’ main element In the File attachments main element, you can attach additional files (for example, vouchers, images

or videos) to the mailing. Try to keep the file size as small as possible. It is recommended that the file

attachments be in PDF format. For each file attachment, you can also specify whether the file should

be sent to all recipients or only to a specific target group.

‘Standard unsubscription page’ main element In the Standard unsubscription page, you set up an unsubscription page. Insert a heading and a text

in the fields provided. It is also possible to add a banner to the landing page.

8


Below is an example of a mailing and its components based on an Advanced Template:

Fig. 4: Structure of a mailing based on the Advanced Template

9


4.5 Your workspace – the Template Editor

The Template Editor is the main work area when creating or editing a mailing based on a newsletter

template. You are directed to the Template Editor as soon as you have created a mailing or when

you open it. You access the first of five workflow steps ( Editing workflow step) that need to be

completed when creating and sending a mailing.

The Template Editor can be subdivided into three main areas: the structure tree, editing area and

preview section. Stylised, the Template Editor appears as follows:

Fig. 5: Template Editor (stylised)

10


The Template Editor also has a toolbar, subject line and further buttons.

Fig. 6: Areas of the Advanced Template Editor

The following contains an overview of the functions of the individual areas.

Toolbar (1)

You use the toolbar to edit the content of your mailing (for example, you can insert images, links

or symbols).

Subject line (2)

You enter the subject of your mailing in the subject line. The mailing name specified beforehand

is entered in the subject line by default.

Structure tree (3)

In the structure tree, you can select individual elements of the template, as well as open ele-

ments (via the symbol in front of the element) and close elements (via the symbol in

front of the element).

Note If you cannot see the structure tree, click the (Show/hide structure tree) button on the

toolbar.

Further buttons (4)

Button Description

(Expand all elements) Click this button to expand the structure tree. All elements are opened.

(Collapse all ele-

ments)

Click this button to collapse the structure tree. All elements are closed.

(Always show only

one element expanded)

Click this button if only the main element currently selected should be ex-

panded in the structure tree. All the other elements are automatically col-

lapsed.

11


(Change design of

the template)

Click this button if you want to change the template design of the current

mailing.

Editing area (5)

The editing area is your main work area. This is where you enter texts and link images. It is also

where you integrate external content into your mailing, if applicable.

Each newsletter template contains predefined template elements that you use to define the

content and layout of your mailing. Some of the template elements have already been prefilled

with mailing content. At particular places, you can also add or remove elements, as well as move

elements.

Preview section (6)

The preview section allows you to see an HTML, text or mobile preview of your current mailing.

Note If you cannot see the preview section, click the (Show/hide quick preview) button on the

toolbar.

‘Click-to-edit’ – navigating in the editing area You can navigate from the HTML preview section directly to the corresponding (main) element in the

editing area. In the HTML preview section, click the (main) element you would like to edit. Inxmail

Professional then positions the cursor at the beginning of the corresponding (main) element in the

editing area. At the same time, the (main) element is highlighted in blue and displayed in the visible

area of the editing area.

Fig. 7: ‘Click-to-edit’

Note Inxmail Professional can automatically position the cursor in the editing area only for such el-

ements that can be edited in the editing area. If, for example, you have inserted a module in the

editing area, its content will be displayed in the preview section, but the module content cannot be

edited in the editing area. This is possible only in the Modules agent.

Similarly, inserted recipient data for personalisation, content from external sources and any com-

ponents of the newsletter template that have been specially programmed for you cannot be edited.

12


If you click an element in the HTML preview section that cannot be edited in the editing area, an

information message is displayed at the upper edge of the HTML preview section.

Calling up external links in the Template Editor Press and hold the Ctrl key and click the link, to call up the corresponding target page.

If you click a link without holding the Ctrl key, Inxmail Professional places the cursor in the corre-

sponding element in the editing area (‘Click-to-edit’).

13

Inxmail Professional Advanced Template (Plus) 4.6 | 5 Your first steps

5 Your first steps Before you can send a mailing based on the Advanced Template, the following fundamental steps

are necessary:

1. Import template

If you are a license customer, you will receive from us an *.itc file containing the template. You

import the template in the Templates agent.

Note If you are an ASP customer, the template will have already been imported.

2. Create mailing list (layout version) and set up master template

Create a new mailing list in which you create a mailing based on the template. Set up the tem-

plate in accordance with your corporate design and preferences.

3. Create mailing list (dispatch)

Create a further mailing list to be used only for sending mailings based on the master template

you have produced. In this way, you ensure that no more layout changes are made to the final

master template.

4. Fill mailing with content and send

Fill the mailing with content, images and links. You can then send the mailing.

Related Topics

» Importing the template page 13

» Create mailing lists page 14

5.1 Importing the template

Note If you are an ASP customer, the template will have already been imported. You can therefore

skip this chapter.

Step-by-step To import the *.itc file with the template to Inxmail Professional, proceed as follows:

1. On the Global settings tab, click the Templates agent.

You will be directed to the template libraries overview.

2. On the Template libraries tab, click Importing the template library on the toolbar.

The Importing the template library dialog box is displayed.

Fig. 8: ‘Import template’ dialog box

14


Click the Search button and select the *.itc file.

3. Confirm your selection with OK.

The File transfer dialog box is displayed.

4. Close the dialog box as soon as the file transfer has been successfully completed.

You have finished importing the template. It will be displayed in the template libraries overview.

Additional information

If you want the template to be available only within a particular mailing list, click the tab of the de-

sired mailing list and then click the Templates agent > Template libraries tab > Importing the

template library button. Now continue the import process as described.

5.2 Create mailing lists

Before creating and sending a mailing based on a smart template, it is advisable to create two mail-

ing lists:

One mailing list is used solely to set up a mailing as a master template (layout version) based on a

smart template. You can give this mailing list the name Mailing list (layout version), for example. The

second mailing list is for sending mailings based on the already created master template. You can

name this mailing list Mailing list (dispatch), for example.

Then copy the mailing for the adjustment of content to the second mailing list. In this way, you pre-

vent layout changes being made to the final master template.

Note Please note that the insertion or removal of template elements can produce layout changes in

the newsletter. Changes of this kind should therefore be made only after prior consultation!

Copy mailing

In the mailing list, select the mailing that serves as the master template and click Copy (Ctrl+C) in

the toolbar. Then switch to the second mailing list (the one that is used solely to send mailings) and

paste the copied mailing using Paste (Ctrl+V).


If you have instructed the Creative Service of Inxmail GmbH to create a design template based on a

smart template, the design template is likewise stored as a final layout version in a specially-created

mailing list. It serves as a design template for future mailings. Make sure that you always work with a

copy when you carry out your editing, and that the version stored as a final layout version remains

unchanged.

15


5.3 Specify colour, font and icon settings

The colours, fonts and icons of the Advanced Template are controlled globally via the Settings main

element. Changes to the colour, font and icon settings will affect a number of elements of the news-

letter.

Set colours You can adjust the colours for numerous elements. For example, you can adjust the background

colour of the newsletter or the font colour of the text elements. Click Select colour to select the

desired colour.

Set font You can set the font for some newsletter elements, for example, the text content of the introduction

or article. Select the font you require from the five fonts available. You can also adjust the font size,

font style and font colour.

Set icons You can use icons for lists or further links. Under Arrow icon in front of further links (linked) and Bullet

icon for lists (linked), you can link image files, for example in the form of single angle quotation marks

or bullet points .

16

Inxmail Professional Advanced Template (Plus) 4.6 | 6 Tips on compiling a

newsletter

6 Tips on compiling a newsletter

6.1 Inserting a main element

You can add any number of main elements to the template and you can add them in any order.

Step-by-step To add a new main element to a newsletter, proceed as follows:

1. Open the Template Editor in the Editing.

2. Click Add element on the toolbar.

Fig. 9: ‘Add new element’ dialog box

3. Select the desired main element, for example, Article.

4. Confirm the dialog box by clicking Add + Close.

You have added a new main element to a newsletter.

The selected element is displayed in the structure tree and in the elements section.

6.2 Adding an element to a main element

Step-by-step To add further elements to a main element, proceed as follows:

1. Open a main element, for example, Article in the Template Editor.

The main element opens and is highlighted in blue.

2. Click Add element after the name of the element.

17


newsletter

3. The Add new element dialog box is displayed.

Fig. 10: Adding an element to a main element

The selection of elements will vary depending on the main element.

4. Select the desired element.


The element is added to the main element.

6.3 Moving or deleting a main element

Many of the elements inserted in your newsletter can be moved or deleted on the highest structure

level and within main elements. This freedom to arrange the elements allows you to design different

layouts.

The example below shows how to move or delete a main element in the template structure.

Step-by-step To move or delete a main element, proceed as follows:

1. Open a main element, for example, Article in the Template Editor.

The main element opens and is highlighted in blue.

2. To move the Article main element, click Move element up or One element down.

To delete the Article main element, click Remove element.

Fig. 11: Moving or deleting a main element

18


newsletter

You have moved the Article main element either up or down, or you have deleted it from the

template structure.

Note The functionality is available for use if you have numerous elements within the main ele-

ments.

6.4 Setting page margins and distances to the next element level

Setting page margins The Advanced Template allows you to set the page margins of the mailing manually. To do this, go to

the Settings main element. Select a distance (in px) from the Configurable page margins (left and right)

drop-down list. The width of 600 px is kept, and only the size of the images is reduced accordingly.

You are thus able to adjust distances from the edge according to your requirements.

Distance to next element You can increase or reduce the distance between articles or elements. The Distance to next element

element required for this is available in almost all main elements. You can set the distance centrally

for all elements (under Predefined distance to next element level in the Settings main element) or spec-

ify the distances individually between elements.

The following instructions demonstrate how to increase the distance between the introduction and

a section bar positioned directly beneath.

Step-by-step To increase the distance between the introduction and a section bar, proceed as follows:

1. Open the Introduction main element in the Template Editor.

2. Select a distance (in px) from the Distance to next element drop-down list, for example 15px.

Note Alternatively, click Add element after the name of the Introduction main element if the

Distance to next element drop-down list is not yet present in the template structure.

Fig. 12: Adjust distance to the next element

19


newsletter

3. Save your settings.

You have increased the distance between the introduction and the section bar directly beneath

to 15 px.

20

Inxmail Professional Advanced Template (Plus) 4.6 | 7 Filling template elements

with contents

7 Filling template elements with contents The following sections introduce some functionalities and settings of the Advanced Template using

selected examples.

7.1 Creating a right-aligned table of contents

The table of contents provides the reader with a quick overview of the newsletter contents. The

reader can also jump directly to an article using links.

In the Advanced Template, you can position the table of contents as desired and make numerous

colour and font settings.

Step-by-step To create a right-aligned table of contents, proceed as follows:

1. Click the Table of contents element in the Template Editor.

2. Enable the Show table of contents? check box.

3. Use the Orientation of 'Contents' drop-down list to select where you want to position the table of

contents.

If you select right or left, the table of contents will be positioned next to the introduction in the

mailing. If you select below, the table of contents will be positioned beneath the introduction.

4. Enable the Hide categories? check box if there are to be no section headlines displayed in the

table of contents.

5. Enter a name for the table of contents in the Headline field.

6. Use the Add element button to add further elements to the table of contents if necessary.

Element Description

Colours and fonts In this element, you set the colours and fonts. You can also link arrow

icons as images.

Font settings for text Here you can select the font, font

size and colour, as well as a font

style (bold, italic, underline) for the

headline.

Font settings for links Here you can select the font, font

size and colour, as well as a font

style (bold, italic, underline) for the

links in the table of contents.

Article colours Here you can specify the back-

ground colour of the articles, the

headline and border, and enable the

internal spacing.

21


with contents

Arrow icon in front of further links

(linked)

Here you can link arrow icons (used

as bullet points) as images.

To do this, click the Link image

button and select an image source.

Hide on mobile devices Enable the check box if the table of contents should not be displayed on

mobile devices.


You have inserted a table of contents.

Fig. 13: A right-aligned table of contents


The table of contents normally comprises the article headlines. The article headlines can however be

replaced by short headlines; in other words, the short headline is displayed instead of the headline

in the table of contents.

Note If neither the headline nor the short headline should be visible in the table of contents, leave

the Short headline field empty. The entry in the table of contents will be removed.

You can also use subheadlines in articles. The article subheadline is only displayed in the table of

contents if no headline exists for the article.

22


with contents

7.2 Creating and editing articles

In the Advanced Template, you store your mailing contents in articles. You can combine these mailing

contents and position them in different ways, or hide them in the mobile display, for example.

The Template Editor offers three main elements for setting up the contents: Article, Article

(two-column) and Article (three-column). You can make different settings for each article element, for

example, you can highlight particular content or couple it with social sharing links.

Fig. 14: Example of a three-column article

7.2.1 Creating a three-column article

Step-by-step To create a three-column article, proceed as follows:

1. Open the Article (three-column) main element in the Template Editor.

Note By default, the element is displayed with the following elements: Left article, Middle article,

Right article.

2. You can enter an internal name for the element in the Headline field. The chosen name is dis-

played directly beneath the template element in the structure tree of the Template Editor. It al-

lows you to quickly locate the contents of the newsletter in the structure tree. The name is not

visible in the newsletter.

3. Enable the Hide on mobile devices check box if the three-column article should not be displayed

on mobile devices.

23


with contents

4. Then click Add element.

The Add new element dialog box is displayed.

Fig. 15: Elements for a three-column article

Element Description

Distance to next

element

Select the individual distance to the next element level.

Note If you do not select a distance, the preset distance from the Settings

main element is used.

Background co-

lour

Here you can change the background colour of the three-column article.

To do this, click the Select colour button.

Note If you do not select a colour, the preset background colours from the

main element Settings > Colours, fonts and icons are applied.

Target group Select a target group if the three-column article should be displayed only

to particular recipients.

5. Select the elements from the Element drop-down list if required.


7. Then set up the Left article, Middle article and Right article elements.

8. To do this, click Add element after each element.

24


with contents


Element Description

Article colours Select a background colour for the article and the headline. In addi-

tion, enable the Content padding check box if space is to be inserted

between the article content and the article’s colour border.

Fonts for article In the Fonts for article element, you select the font colour for the

headlines and subheadlines, article text, prices and any further links.

Headline Enter an article headline in the Headline field.

Note If you do not want the headline to be displayed in the table of

contents, you can add the Short headline element. The element re-

places the headline in the table of contents if the field remains empty.

Short headline A short headline replaces the headline entry in the table of contents.

If neither the headline nor the short headline should be visible in the

table of contents, leave the ‘Short headline’ field empty.

Subheadline Enter a subheadline in the Subheadline field.

Image Link an image, for example, an image of the offered product. You can

also couple the image with a link.

Text Add a text to the article.

Price Enter all the price information for your offered product.

Alignment Here you can position the price

in the article. Select between

left-aligned, right-aligned or

centred.

Price Enter the price of the offered

product. You can also specify a

Text in front of the price or Price

information (for example, Only 3

still available).

Was price Specify a ‘was’ price if applica-

ble. By default, the ‘was’ price is

formatted with the

strikethrough font style. You

can also specify a Text in front of

the ‘was’ price.

Button Add a button that directs the user to the offered product or the arti-

cle. Link an image for this purpose and couple the image with a link.

List Add a numbered list or a list with bullet points.

25


with contents

Sharing links Enable the ‘Sharing links’ check box. All created sharing elements are

added beneath the article.

Further link Add further links to the article, for example, a link to the company

web page.

9. Select the desired element.



You have set up a three-column article with the desired elements.

Fill the elements with contents.

Note Avoid manual HTML formatting for content elements, for example, for a Text element. The

optimum client display can enable rendering on different devices, and content may be displayed

incorrectly.

7.2.2 Highlighting a special article

You can specify the colour settings individually for an article. This makes it easy for you to highlight a

particular article or webshop product in the mailing.

Fig. 16: To highlight an article in the mailing

Note Colour settings that you have selected in the Settings main element are overwritten.

Step-by-step To highlight a special article in a three-column article, proceed as follows:

1. Open the Article (three-column) main element in the template editor.

2. Open the article that you would like to highlight as a special article.

3. Click Add element after the element.

26


with contents


4. Select the Article colors element from the Element drop-down list.

The Article colors element is added to the article.

Specify the following settings:

Element Description

Background Click Select colour to select the colour background of the article.

You can select the colour settings on the HSB/RGB or Range tab.

Enter the colour code 3399CC in the Hex field on the HSB/RGB tab, for ex-

ample, to get the blue background shown in the example above.

Headline background Click Select colour to select the colour background of the headline.

You can select the colour settings on the HSB/RGB or Range tab.

Internal spacing Enable the Internal spacing check box.


You have changed the background colours of the article.

7.2.3 Adjusting text field width

In the Article element, you can adjust the ratio of the text field width to image size individually using

a drop-down list. The setting enables automatic calculation of the image size. You can thus insert

your article dynamically and design an individual mailing layout.

Fig. 17: Example: 30% Image / 70% Text

Step-by-step To adjust the text field width in proportion to the image size, proceed as follows:

1. Open the Article element in the template editor.

2. Switch to the Image and text ratio element.

27


with contents

3. Select a possible combination from the drop-down list, for example, 30% Image / 70% Text.

Fig. 18: ‘Image and text ratio’ drop-down list


The image width is automatically calculated and the text field width is adjusted.

7.2.4 Filling an article element with external content

The Advanced Template allows you to integrate external content (for example, product data from

online shops) in article elements. To do so, you create a corresponding data source for an element.

The Fill in element button is then displayed directly next to the element name in the Template

Editor.

Note We would be happy to set up the data source for you. Contact us at

[email protected] if you would like to discuss this.

Step-by-step To fill an element with external content, for example, product data from Magento, proceed as fol-

lows:

1. In the template element, open an article element into which you want to integrate external

content.

2. Click the Fill in element button directly after the element name.


28


with contents

The Fill in element dialog box is displayed.

Fig. 19: ‘Fill in element’ dialog box

3. Use the drop-down list to select a data source from which external content is to be integrated.

The selection of data sources can vary per article element, depending on how many data

sources have been created for this element.

4. Enter the product ID of the webshop article in the Product ID field.

5. Confirm the dialog box by clicking OK.

You have successfully inserted external content into the mailing.

Note Update the content before sending the mailing if changes have occurred. The content is

not updated automatically. All adjustments made to this content in the mailing will be overwrit-

ten.


Detailed information on the integration of product data from Magento can also be found in the Con-

figuration instructions – Inxmail Professional Email Marketing for Magento CE and EE.

Related Topics

» Integrating external content

7.2.5 Hiding individual mailing contents on mobile devices

You can adjust the view and structure of your mailing individually on mobile devices. If, for example,

you do not wish to display a three-column article in the mobile version, you can easily hide it.

29


with contents

Step-by-step To prevent the display of a three-column article in the mobile version, proceed as follows:

1. Open the Article (three-column) main element in the template editor.

The three article elements are displayed.

2. Click Add element.


Fig. 20: Adding the ‘Hide on mobile devices’ element

3. Select the Element Hide on mobile devices.


The Hide on mobile devices element is displayed in the Article (three-column) main element.

5. Enable the Hide on mobile devices check box.

Fig. 21: Enable the ‘Hide on mobile devices’ check box


The three-column article will not be displayed on mobile devices after sending.

Note Check the display of your mailing on mobile devices before sending. To do this, use the

Mobile preview on the toolbar in the Editing or Check workflow step.

7.2.6 Setting social sharing links for an article

In the Advanced Template, the functionality for sharing individual article contents on social networks

is implemented through the setup of social sharing links. Thus, particular article contents can be

shared on social networks, such as Facebook, Twitter or Xing, via the link.

30


with contents

Step-by-step To allow an individual article to be shared in social networks, proceed as follows:

1. Open the Sharing settings main element in the Template Editor.

2. Click Add element.


Fig. 22: Add Sharing elements

3. Select the desired sharing elements (for example, Facebook, LinkedIn, and so on).


5. Click Link image for every element you have added, and enter the appropriate image.

Important Do not enter a separate link in the Couple image with link dialog box. Otherwise the social

sharing setting will not take effect – the reader will no longer be able to share article contents on

social networks.

6. You can change the order of the sharing elements using the Move element up or One

element down function.

7. Then switch to an article element for which you want to allow sharing on social networks.

8. Add the Sharing links element.

31


with contents

9. Enable the Sharing links check box.

Fig. 23: Enable Sharing links for an article element


The adjusted social sharing links are displayed for the article element in the mailing, in the order

selected beforehand.

7.3 Dynamic landing pages

Note The Dynamic landingpage element is only available in the Advanced Template Plus. For infor-

mation on purchasing and implementing the Advanced Template Plus, contact us at custom-

[email protected].

Introduction The articles of a mailing usually contain summarised texts that either encourage the reader to con-

tinue reading on a separate landing page or to purchase an item in an online shop.

The Advanced Template Plus allows you to create landing pages with further information in an auto-

mated manner. The Dynamic landingpage element provides a range of input fields and dialogs that

you can use to create a landing page directly within the Mailing Editor. The content is displayed in

compliance with the layout. The links from the articles in the mailing to the associated landing pages

are generated automatically.

As a result, you do not require external software to create landing pages or a separate Web server

on which you have to host the landing page(s).



32


with contents

Structure of the dynamic landing pages The system applies the header and footer of the mailing by default to create a dynamic landing

page. Note, however, that only text and banners (and no graphics containers) are used from the

footer. The specific content of the respective landing page is placed in between. This results from

the information in the Dynamic landingpage element.

Fig. 24: Element "Dynamic landingpage"

You can design the header of the dynamic landing page differently from the header of the mailing.

For example, you can hide specific elements of the mailing header or use a different banner for the

dynamic landing page. Detailed information can be found in the section Adapt header for dynamic

landing pages page 36.

33


with contents

Example of a dynamic landing page

Fig. 25: Example "Dynamic landingpage"

The newsletter features an article about making payments with MasterCard. Clicking ‘VIEW DETAILS’

opens the dynamic landing page. It features the header and footer of the newsletter and, in be-

tween, further detailed information on making payments with MasterCard.

7.3.1 Create dynamic landing page

Article and dynamic landing pages You can use one-column, two-column and three-column articles in the Advanced Template. These

articles are located at the highest hierarchical level of the template structure. These are main ele-

ments. Two-column and three-column articles contain articles in turn. Articles within articles con-

cern elements. Accordingly, the Article (two-column) main element contains the Article element

twice, for example.

You can create dynamic landing pages for the Article main element and within two-column and

three-column articles for each Article element.

34


with contents

The following step-by-step instructions describe creating a dynamic landing page for an article with-

in a two-column article. The process is the same for three-column articles and the Article main ele-

ment.

Step-by-step Proceed as follows to create a dynamic landing page for the Article element within a two-column

article:

1. In the template editor, open the two-column article for which you want to create one or two

dynamic landing pages.

2. Open the two-column article of the Article element for which you want to create the landing

page.

The Add element button is displayed.

3. Click the Add element button.


Fig. 26: Element "Dynamic landingpage"

5. Select the Dynamic landingpage element.


35


with contents

The Dynamic landingpage element is displayed.

Fig. 27: Elements of a dynamic landing page

The following elements are available for the Dynamic landingpage element.

Element Description

List You can enter lists for the dynamic landing page here.

The List element may be inserted multiple times.

Image You can link an image for the dynamic landing page here.

The Image element may be inserted multiple times.

Button to dynamic

landingpage

This element allows you to use an image or button as an anchor for the

link to the dynamic landing page.

Advanced Template Plus automatically links the image with the Link to a dy-

namic landing page element.

Note If you have created a link text in the Link to a dynamic landing page

element, this is no longer displayed once you have selected an image or

button as an anchor for the link to the dynamic landing page.

Individual banner You can link a personalised banner for the dynamic landing page here. The

personalised banner replaces the banner from the Header of the mailing.

You can link a different banner for each page.

36


with contents

Link to a dynamic land-

ing page

The link address to the landing page is automatically generated by Ad-

vanced Template Plus.

You can create a link text via the Link editing dialog box. This is particularly

helpful if you do not want to use a button as an anchor for the link to the

landing page.

If you do not create a link text, Advanced Template Plus uses the URL to the

landing page as the link text.

You can still adapt the name in the report via the Link editing dialog box.

This is particularly necessary if you are creating multiple dynamic landing

pages. In this case, the names must differ from one another in order to

generate differentiated reports.

Text Create the text for the dynamic landing page here.

The Text element may be inserted multiple times.

Headline Enter the headline for the dynamic landing page here.

The format of the Headline corresponds to the format of the article head-

lines.

Web address You can store a link here that leads from the dynamic landing page to an-

other website. This link is only displayed on the dynamic landing page and

not in the newsletter.

The Web address element may be inserted multiple times.

Subheading You can enter a subheadline for the dynamic landing page here.

The Subheading element may be inserted multiple times.

7. Use the Add element button to add the desired element to the dynamic landing page and

create the desired content.


You have created a dynamic landing page for the Article element within a two-column article.

7.3.2 Adapt dynamic landing page

It is possible to adapt the header and return link to the mailing for dynamic landing pages.

7.3.2.1 Adapt header for dynamic landing pages

You can individually adapt the header of a dynamic landing page to ensure that the mailing header

and the header of the dynamic landing page are different from one another. In doing so, you can

use a personalised banner that replaces the banner from the mailing header and you can hide vari-

ous elements from the mailing header.

37


with contents

Example

Mailing header The header shown contains optional banner graphic elements, among other things.

Fig. 28: Header as in mailing

Header of dynamic landing page The header of the dynamic landing page contains an alternative

banner that does not feature any optional banner graphic elements.

Fig. 29: Modified header

7.3.2.1.1 Specify personalised banner

Step-by-step Proceed as follows to specify a personalised banner for a dynamic landing page:

1. In the template editor, open the article for whose dynamic landing page you would like to spec-

ify a personalised banner.

2. Open the Dynamic landingpage element.

The Add element button is displayed.


38


with contents


Fig. 30: Element "Individual banner"

5. Select the Individual banner element.


The Individual banner element is displayed.

7. Click Link image and link the personalised banner.


You have specified a personalised banner for a dynamic landing page.

The personalised banner replaces the banner from mailing header.

7.3.2.1.2 Hide elements from the mailing header Hiding elements from the header or hiding the Skyscraper ad main element is done using the Settings

main element.

Open the settings for the dynamic landing page using the following path:

Settings > Colors, fonts and icons > Dynamic landingpage

The following settings are possible:

Element Description

Hide header elements on the landing page

Hide banner? You can specify which elements from the mailing header are to

be hidden in the header of the dynamic landing page.

Note As soon as you have linked a personalised banner in the

Dynamic landingpage main element, the banner from the mailing

header is automatically hidden.

Hide navigation bar (text links)

Hide grafics container?

Hide social media

Hide Skyscraper ad You can specify here whether the Skyscraper ad main element in

the header of the dynamic landing page is to be hidden.

39


with contents

7.3.2.2 Adapt return link to mailing

Adapting the return link to the mailing is done using the Settings main element.

Open the settings for the dynamic landing page using the following path:

Settings > Colors, fonts and icons > Dynamic landingpage

The following settings are possible:

Element Description

Dynamic landingpage

Link text: Back to newsletter A link that leads back to the newsletter is automatically placed

on the dynamic landing page.

You can create the text for this return link here. If you do not

create any text, the Back text is automatically inserted.

Button: Back to newsletter You can use a graphic instead of a text link for the link back to

the newsletter.

Once you link a graphic, the system ignores the information used

for the text link.

7.4 Inserting images

General information on images Make sure there is sufficient space between links, so that they can be selected via mobile touch in-

put (with a pressed thumb). (Recommendation: at least 40 x 40 px)

Avoid using overlong words.

Pay attention to the scaling of images and narrow columns.

To ensure an optimal display on devices with Retina displays, always add images in double

resolution, e.g. 400x400 px instead of 200x200 px. The Smart Template automatically scales the

images to the correct size. In the mobile display the higher scaled image file can be accessed.

Save the images with 72 dpi using the RGB colour model.

Keep the data contained in the mailing to a minimum.

7.4.1 Creating an advanced header

The Advanced Template allows you to insert images at numerous positions, for example, as a banner

or header graphic. For this, you can use the Link image function. A linked image is not a fixed

component of your mailing, but is uploaded onto a web server in advance. It is then linked in the

mailing.

Note We recommend to use the image formats JPG or GIF. Make sure that the image files are opti-

mized for the Web.

40


with contents

Optional banner elements (for example, for drawing attention to special discount promotions) can

be added to a header graphic in the Advanced Template.

Fig. 31: A header with optional banner elements

Note We recommend storing the header graphic in graphics containers. That way you can arrange

the position of the header graphic in a number of ways, and set several further links. If, on the other

hand, you create the header graphic in the Banner element, the graphic is always positioned at the

very top.

Step-by-step To link an advanced header in the mailing, proceed as follows:

1. Click the Header main element in the Template Editor.

2. Add the Graphics container > Image element to the header using the Add element function.

3. Click the Link image button in the Image element.

The Link image dialog box is displayed.

Fig. 32: 'Link image' dialog box

41


with contents

The following settings need to be specified:

Field Description

Image source Enter the Web address (URL) of the image.

You can either link the image file from a webspace or enter a link address

manually in the field.

Note Make sure that the image you insert has a width of at least 480 px, in

order to ensure an optimum display in the mobile view. There is no ex-

pected quality loss in the desktop version, as the image size is reduced

accordingly.

Preview Here you can see a preview of the image file.

Alternative text Enter an alternative text, for example, Header. The alternative text will be

displayed in place of the image if the image is blocked by the recipient’s

email program.

Tooltip Enter a tooltip here.

The tooltip will be displayed if the recipient hovers the mouse pointer over

the image.

Name in the report Note You can skip the entry of a name. The Track graphic call-up check box

must be enabled before you can enter a specific ‘name in the report’ for

the tracked image. When using an Inxmail Professional smart template,

the graphic call-up is already counted via a tracking pixel, so that separate

image tracking is unnecessary.

Track graphic call-up Note You can skip the Track graphic call-up setting. When using an Inxmail

Professional smart template, the graphic call-up is already counted via a

tracking pixel.

Couple graphic call-up

with action

Note You can skip the Couple graphic call-up with action setting. This setting

is only meaningful if used in combination with the ‘Track graphic call-up’

setting.

Options Note You can skip the settings under Options. The scaling of the images is

already controlled via the Inxmail Professional smart template.

4. Specify your settings in the fields.


6. Click the Couple image with link button if you want to add a link to the image.

Field Description

Link type Select a link type.

Standard link (simple) Select the standard link if you do not

want to track the image, in other

words, you do not want to count

how many times the image is called

up.

42


with contents

Tracking link (unique-count) A tracking link is used to track the

image, in other words, to count how

many times the image is called up.

Choose between personalised and

anonymous tracking.

Link address Enter a link address here.

Click the Select web page button to select the address, or enter the

address manually in the field.

Link text Enter a link text that will be displayed instead of the link address.

Name in the report Select a unique name that will be used for the link in the reports.

Couple link with action You can couple the link with an action.

To do so, enable the check box and select an action from the drop-down

list.



You have linked a header graphic as an image.

9. In the Header main element, switch to the Banner element.

10. Open the Optional graphic element for banner (left) or Optional graphic element for banner (right)

element.

Click Link image and specify your settings in the fields as described above.

Note The optional banner graphic elements have a preset fixed image width (left: 100 px, right:

180 px). If the image width does not correspond to the requirements, the images are automati-

cally adjusted when you confirm the dialog box.

11. Couple the image with a link if necessary.


The header is displayed with the additional banner elements.


If you would like to embed an image (for example, your corporate logo) rather than link it, select the

Embedding an image function using the Insert commands drop-down list in the Template

Editor toolbar. Then specify the required image source in the Embedding an image dialog box.

43


with contents

Note If the image is larger than 300 px, you must also integrate the ncs class, which scales the image

to 100% of the available width in the mobile view. Open the Options dialog box from within the Em-

bedding an image dialog box, and under Optional HTML parameters enter the command class="ncs".

Fig. 33: Integrate the 'ncs' class

7.4.2 Creating a mobile teaser

Instead of the advanced header, a mobile teaser with an alternative graphic can be set up and dis-

played on mobile devices.

Step-by-step To insert a mobile teaser, proceed as follows.

1. Open the Header main element in the Template Editor.

2. Then click the Mobile teaser element.

3. Click the Link image button and insert the image that is to be displayed instead of the header

graphic. Continue with the linking of the image in the usual way.

Fig. 34: Set up a mobile teaser

You have inserted a mobile teaser.

Note Enable the Hide on mobile devices check box for the header graphic and the optional banner

graphic elements, so that only the mobile teaser is displayed on mobile devices (Hiding individual

mailing contents on mobile devices page 28).

44


with contents

Insert mobile teaser multiple times To improve the readability and view of the header on mobile devices, you can insert mobile teasers

multiple times and thereby design an alternative header to the HTML version. The inserted teasers

are displayed one beneath the other, and thus improve readability and usability in the mobile view.

It can be advantageous to use multiple mobile teasers for the navigation bar in the header, in partic-

ular. This enables improved display and usability of the individual categories of the linked target

page.

Related Topics

» Creating an advanced header page 39

7.4.3 Integrating a section bar as an image

Instead of a simple section bar, you can also insert an image as a section bar and couple it with a

link. Your readers are then directed to your webshop or your company page when they click a cate-

gory.

Fig. 35: Example of a section bar integrated as an image

Step-by-step To integrate a section bar as an image, proceed as follows:

1. In the Template Editor, open the Section bar main element into which you would like to insert a

section bar as an image.



3. Select the Section bar as image element.


The Section bar as image element is displayed in the Section bar element.

Fig. 36: 'Section bar as an image' element

45


with contents

5. Click Link image in the Section bar as image element.

The Link image dialog box is displayed.

Field Description

Image source Enter the Web address (URL) of the image.

You can either link the image file from a webspace or enter a link address

manually in the field.

Note Make sure that the image you insert has a width of at least 480 px, in

order to ensure an optimum display in the mobile view. There is no ex-

pected quality loss in the desktop version, as the image size is reduced

accordingly.

Preview Here you can see a preview of the image file.

Alternative text Enter an alternative text, for example, Header. The alternative text will be

displayed in place of the image if the image is blocked by the recipient’s

email program.

Tooltip Enter a tooltip here.

The tooltip will be displayed if the recipient hovers the mouse pointer over

the image.

Name in the report Note You can skip the entry of a name. The Track graphic call-up check box

must be enabled before you can enter a specific ‘name in the report’ for

the tracked image. When using an Inxmail Professional smart template,

the graphic call-up is already counted via a tracking pixel, so that separate

image tracking is unnecessary.

Track graphic call-up Note You can skip the Track graphic call-up setting. When using an Inxmail

Professional smart template, the graphic call-up is already counted via a

tracking pixel.

Couple graphic call-up

with action

Note You can skip the Couple graphic call-up with action setting. This setting

is only meaningful if used in combination with the ‘Track graphic call-up’

setting.

Options Note You can skip the settings under Options. The scaling of the images is

already controlled via the Inxmail Professional smart template.



8. Click the Couple image with link button if you want to add a link to the image.

Field Description

Link type Select a link type.

Standard link (simple) Select the standard link if you do not

want to track the image, in other

words, you do not want to count

how many times the image is called

up.

46


with contents

Tracking link (unique-count) A tracking link is used to track the

image, in other words, to count how

many times the image is called up.

Choose between personalised and

anonymous tracking.

Link address Enter a link address here.

Click the Select web page button to select the address, or enter the

address manually in the field.

Link text Enter a link text that will be displayed instead of the link address.

Name in the report Select a unique name that will be used for the link in the reports.

Couple link with action You can couple the link with an action.

To do so, enable the check box and select an action from the drop-down

list.



You have linked an image as a section bar and have coupled it with a link.

7.4.4 Setting up a graphics container

You can set up a graphics container to store one image or several images that together form a

graphic. You can couple each image with a different link, so that when the reader clicks an adver-

tised product in the graphic, he/she is directed to that product in the webshop. The Graphics con-

tainer element is a purely graphical element – texts cannot be added.

A special feature of the graphics containers is the integration of slices from Photoshop. Slices divide

graphics into individual image elements that can then be integrated as a linked image.

Important When using slices, it is important to note that all slices when put together must not ex-

ceed an image width of 600 px.

Fig. 37: Slices divide the graphic into image elements

47


with contents

Each image element can then be provided with a separate link, so that the reader is directed to the

desired (product) page. In this way, very individual graphics can be integrated and are also displayed

optimally on mobile devices.

Step-by-step To integrate a graphic using slices, proceed as follows:

1. In the Template Editor, open the Grafic container element at the desired place.



3. Insert the Image element into the graphics container in accordance with the number of slices.

4. Link each slice in the respective Image element using Link image.

Fig. 38: Graphics container with two slices which together add up to an image width of 600px

Note Keep in mind the maximum image width of 600 px. Create further graphics containers if

the maximum image width has been reached within a graphics container.

5. Then click the Couple image with link button.

The Couple image with link dialog box is displayed.

6. Couple every image element with an individual link that directs the reader to the appropriate

(product) page.


48


with contents

You have created a graphic using slices and have provided it with individual links.

Fig. 39: Graphic composed of individual slices


To help you quickly find particular image elements, you can give graphics containers an additional

name. The chosen name is displayed in the Template Editor, both in the structure tree and in the

template element. The name is not displayed in the newsletter.

Fig. 40: Zusätzliche Bezeichnung eines Grafikcontainers

To give a graphics container an additional name, add the Description element to the Grafic container

main element using the Add element button. Then enter the desired name in the Description

field.

7.4.5 Eine Bildunterschrift hinzufügen

Many providers of licensed images insist that they are specifically named in the image caption. It is

therefore useful to add image captions when using images – even in cases where this is not specifi-

cally required.

49


with contents

For this purpose, image captions are inserted as an optional HTML parameter for images. To do this,

open the Link image dialog box, click the Options button and enter the required parameters in the

Optional HTML parameters field.

Fig. 41: Inserting the HTML parameters in the ‘Options’ dialog box

In the guides below, we will explain how to add a simple image caption and an image caption with a

link.

7.4.5.1 Adding a simple image caption

Step-by-step To add a simple image caption, proceed as follows:

1. Open the Link image dialog box.

Note If you have not yet done so, enter the image source and an alternative text.

2. Then click the Options button.

50


with contents

3. Enter the following HTML command into the Optional HTML parameters field: img_desc=“TEXT“,

for example, img_desc=“Elizabeth Knit Top“.

Fig. 42: Entering the HTML command img_desc="Elizabeth Knit Top"

4. If you wish to select a different text colour, enter the colour as follows:

img_desc=“TEXT”, for example, img_desc=“Elizabeth Knit Top“

Note In this case, the text must be enclosed by the HTML parameter ‘span’ and ‘style’.

Fig. 43: Adding the text colour

51


with contents

Important In this special case, please make sure that there are no quotation marks after the ‘style’

tag. This will ensure that the image caption displays correctly.

5. Confirm your entries by clicking OK.

In the newsletter, the image will appear with a simple image caption and the text will be blue.

Fig. 44: Die eingefügte Bildunterschrift

7.4.5.2 Eine Bildunterschrift mit Link hinzufügen

In order to create an image caption with a link, you must first generate a link in the Text element.

Note Skip this step if you are familiar with the Inxmail syntax.

You can then copy the generated link from the template editor and insert it into the optional

img_desc HTML parameter.

Step-by-step To generate a link in the text editor and then insert it into the optional img_desc HTML parameter,

proceed as follows:

1. From within the Text element (e.g., in the Introduction), click the Insert link button in the

template editor toolbar.

52


with contents

2. In the Insert link dialog box, select a type of link and enter the link address (e.g., example.com)

and link text (e.g., Click here).

Fig. 45: ‘Insert link’ dialog box

3. Click the Options button if you want to select your choice of text colour for the link.

4. To do this, enter the HTML command style=”color:#COLOUR:”, e.g., style=“color:#BA2A28:“ into

the Optional HTML parameters field.

Fig. 46: Entering the font colour of the link


53


with contents

The link will be inserted into whichever Text element you selected.

6. You can now copy the generated link, including the Inxmail syntax, from the Text element.

Fig. 47: The generated link in the ‘Text’ element

Important You should then delete the link, unless you wish for it to appear within the text.

7. As usual, you then need to insert the copied link into the optional img_desc HTML parameter.

8. To do this, open the Image > Link image element that relates to the image caption you are

creating.

9. Then click the Options button.

10. Enter the link as follows:

img_desc=”TEXT and [LINK]”, e.g., img_desc=”Elizabeth Knit Top [%url; http://example.com; “Click here“; “style=\“color:#BA2A28;\““]“

Fig. 48: Entering the HTML command img_desc with text and link


http://example.com/

54


with contents

The image has now been assigned an image caption with a link. The link text in the caption is

red.

7.5 Set up Web tracking

The main element Web tracking is associated with web analytics tools such as Google Analytics or the

web analytics by econda. Each web analytics tool expects specific tracking parameters. These pa-

rameters must be attached to the links in the mailing that need to be tracked. Based on these pa-

rameters web analytics tools can generate reports.

In the main element Web tracking you can enter the parameters for the different web analytics tools.

Subsequently, the Advanced Template automatically creates the links with the associated parameters.

The Advanced Template provides for the following web analytics tools default values for the associ-

ated tracking parameters:

Google Analytics

eTracker

econda Webanalyse (standard and for Websale)

For all other web analytics tools, you can enter the parameters in the appropriate fields.

Step-by-step To insert tracking parameters into the Inxmail Professional Advanced Template, proceed as follows:

1. Open the appropriate mailing in the Editing workflow step.

2. Click the button (Add element) in the Web tracking main element.

3. Add the Tracking container element.

55


with contents

4. Click (Fill element) in the Tracking container element.

Fig. 49: Filling in tracking container

The Fill in element dialog box is displayed.

Fig. 50: Select web tracking parameters

5. Select the desired web analytics tool.


The tracking parameters of the selected web analytics tool are displayed.

Fig. 51: Tracking parameter

You have successfully inserted tracking parameters in the Inxmail Professional Advanced Tem-

plate.

All links in the mailing are automatically provided with the appropriate tracking parameters.

If required, you can change the tracking parameters manually or add tracking parameters or

remove them.

Note The [Link-Name] parameter is replaced by the respective values in the Name in the report field

when the mailing is generated. Generally speaking, this parameter should not be overwritten, as this

can result in all links receiving the same name and tracking for individual links will no longer be pos-

sible.

56

Inxmail Professional Advanced Template (Plus) 4.6 | 8 Mobile optimisation of the

Advanced Template

8 Mobile optimisation of the Advanced Template The Advanced Template is optimised for display on mobile devices. Depending on the mobile device,

newsletters are shown in single-column format or are scaled.

8.1 How mobile optimisation works

Mobile optimisation is based on the adjustment of image and table widths. The mobile clients select

a display variant of the Inxmail smart templates, depending on the device properties. The width and

the resolution of the display screen play a role here. If the screen pixel width is below a particular

dimension, the individual mailing elements are divided up anew and displayed one beneath the

other on supported devices and clients. Elements such as text or images are reduced in size, but are

clearly legible. Section bars and navigation bars are always shown in a reduced size, that is, even

with the single-column display.

In the mobile version, the newsletter is scaled to the screen width of the device. However, not every

mobile device is able to display emails correctly.

You can create your mailings in the usual way, irrespective of the display format. Inxmail automati-

cally ensures their optimum display. The switch from portrait to landscape format is also performed

automatically, although this is not supported and displayed by all clients.

Examples

Mailing with standard articles

(Elements are stacked one beneath the other from left to right.)

Fig. 52: Mobile device screen, 400 pixels

Fig. 53: PC screen

Mailing with multi-column articles

57


Advanced Template

(Elements are stacked one beneath the other from left to right.)

Fig. 54: PC screen

Fig. 55: Mobile device screen, 400 pixels

Display of standard or multi-column articles if the ‘Display multi-column articles side by side’

global setting is enabled.

(Elements are scaled.)

Fig. 56: PC screen

Fig. 57: Smartphone

58


Advanced Template

8.2 Factors influencing mobile display

Certain factors influence the display of a mailing on mobile devices. The combination of device and

its pixel width and the operating system installed on the device – on which, in turn, a variety of email

clients can be used – are the essential influencing factors. The different combination options in-

crease the complexity involved in template display, as each combination must be individually de-

veloped and tested in respect of mobile optimisation.

8.3 Testing display

The behaviour of a mailing can be easily tested. Send a test email and reduce the window width in

the browser after opening the email.

Inxmail Professional also offers an integrated display test with approximately 30 common email

clients (optional).

Related Topics

User manual Inxmail Professional

» Display test (optional)

8.4 Recommendations to facilitate the mobile display of mailings

Make sure there is sufficient space between links, so that they can be selected via mobile touch in-

put (with a pressed thumb). (Recommendation: at least 40 x 40 px)

Avoid using overlong words.

Pay attention to the scaling of images and narrow columns.

To ensure an optimal display on devices with Retina displays, always add images in double

resolution, e.g. 400x400 px instead of 200x200 px. The Smart Template automatically scales the

images to the correct size. In the mobile display the higher scaled image file can be accessed.

Save the images with 72 dpi using the RGB colour model.

Keep the data contained in the mailing to a minimum.

The social media icons in the mail element footer must not be larger than 600 px in total (total

width).


For free practical tips on creating mobile optimised newsletters, visit www.inxmail.de/praxistipps or

contact us at [email protected].

http://www.inxmail.de/praxistipps


Imprint

Editor:

Address:

Telephone:

Telefax:

Email:

Internet:

Author:

Inxmail GmbH

Wentzingerstr. 17, 79106 Freiburg, Germany

+49 761 296979-0

+49 761 296979-9

[email protected]

www.inxmail.de

Inxmail GmbH

About Inxmail More than 15 years of expertise in email marketing: Over 2.000 customers and more than 200 agen-

cies in more than 20 countries worldwide realize successful campaigns and newsletters with the

powerful solutions of the email marketing provider Inxmail. The company has subsidiaries in Ger-

many, Italy, France and Australia.

For its excellent customer service Inxmail was honoured with the award "Germany's most custom-

er-oriented service provider" in 2014. Customers include Robinson, s.Oliver and well-known agen-

cies. Inxmail also strongly promotes fair email marketing. It is co-founder and member of the Certi-

fied Senders Alliance (CSA).

+49 761 296979-0

Subscribe to the Inxmail Newsletter

[email protected]

Visit the Inxmail Blog


http://www.inxmail.de/

http://www.inxmail.de/unternehmen/newsletter/anmeldung


http://blog.inxmail.de/

Documents

User Manual · 2017. 3. 3. · tinue reading on a separate landing page or to purchase an item in an online shop. The Advanced Template Plus allows you to create landing pages with