de en


Email

 
If you want to create your own template(s), you have to have a appropriate knowledge in HTML. Over this, you have to be informed about the different versions of e-mail clients and their displaying features.
Templates consist of HTML source code with special placeholders for later content. So you don't need HTML knowledge to populate your Template.


Create a Template

In 'Modules' → Templates → E-Mail you can create a new Template by clicking the button 'create new Template'. Then it opens a new tab.

Tab basic settings:

In box „Name“ you have to name your Template. You can also insert a thumbnail, if you want. Use the 'Durchsuchen...' button to upload a thumbnail.

Tab HTML input:

Insert your entire HTML source code here. Every text or image, which shouldn't be changed (p.e. Fixed legal notice), set in HTML as usual. You have to create elements which should be changed (p.e. Articles) with placeholders.
Now, we'll create an article with headline, text, read-more-link and an image for a little example

The base of a Template you can see here:



The basic structure of a document is structured as follows:
-------------------------------------------------------------------------------------------------
[CONTAINER name='artikel']

[ELEMENT name='articel_text']

[INDEXITEM]<a href="[INDEXITEMANCHOR]"> [INDEXITEMNAME]</a>[/INDEXITEM]

[ELEMENTTOOLS][ANCHOR][UPDATE][REMOVE][/ELEMENTTOOLS]

[BLOCK name='image' edit='true']
<a href="[INPUT name='Link URL' type='char' default='']">
<img src="[INPUT name='image' type='image' default='http://www.youredomain.de/images/links.jpg']"
width="[INPUT name='Bildbreite_max145px' type='image' default='145']"
border="0" />
</a>
[/BLOCK]

[BLOCK name='Headline']
[INPUT name='Headline' type='char' default='Headline' index='true']
[/BLOCK]

[BLOCK name='text']
[INPUT name='text' type='text' default='... text ...']
[/BLOCK]

[BLOCK name='Link']
<a href="[INPUT name='Link' type='url' default='http://www.link.de']">
[INPUT name='Linktext' type='char' default='Webpage']
<img src="http://www.IhreDomain.de/images/arrow.jpg" width="19" height="18" border="0" />
</a>
[/BLOCK]

[/ELEMENT]

[CONTAINERTOOLS][CEATE][SORT][/CONTAINERTOOLS]

[/CONTAINER]
-------------------------------------------------------------------------------------------------

The container encloses the dynamic article-sector and must to be created necessarily at the beginning. The end-tag of a container means the end of the dynamic sector.
A container consits of one or more different elements.

In space of this container you can create and sort your elements. An element means for example an article with an image on the rightend side, or an article without an image or just an image.

Open and close elements with the element-tags.

To realize the input of content, every element needs as many as one block. Contents of an article can be sorted and edited seperately with the help of blocks.
Eyery block-element includes one or more inputfields again. Those are the input screens for populating your email with content. 

Depending on the desired content, input fields can exist of different types:

  • text (multiline text)
  • char (singleline text)
  • html (WYSIWYG editor)
  • link (linkurl)
  • image (picture)

Don't forget saving and closing of all open blocks, elements and containers after placing all inputfields.
Now you've created your first container. You can create any number of containers in your Template. Don't discount the clearness!




You can chose and place all described placeholders in Shared Services - Graubünden Ferien with the „input assistance“ (last tab: template assistance).

Tab HTML Preview:

HTML preview shows your created basic layout. So you can proof the structure of your elements and contents.

Tab Text input

This tab gots the function, that your newsletter can also be shown just in textformat (p.e. For email clients, who don't support multipart-formats). Here you need the same placeholders like before, but without html source code.


-------------------------------------------------------------------------------------------------
[CONTAINER name='article']

[ELEMENT name='article_text']

[INDEXITEM][INDEXITEMANCHOR][INDEXITEMNAME][/INDEXITEM]

[BLOCK name='headline']
[INPUT name='headline' type='char' default='headline' index='true']
[/BLOCK]

[BLOCK name='text']
[INPUT name='text' type='text' default='... text ...']
[/BLOCK]

[BLOCK name='Link']
[INPUT name='Linktext' type='url' default='Webpage']
[INPUT name='Linkt' type='char' default='http://www.link.de']
[/BLOCK]

[/ELEMENT]

[/CONTAINER]
-------------------------------------------------------------------------------------------------

Images aren't displayed in the textpart of a newsletter, so you don't have to populate those image-inputs compulsory into the textpart. If you still want to incluce those image-inputs into your textpart, there just will be shown the url of the image in the text.

Just place fixed elements of your newsletter between the placeholders. Don't forget to save your text input.

Tab Text preview:

Here you can check your text and the structure of your different inputfields.

For further comprehension:

With Element- and Container-Tools you have the possibility to define icons in your E-Mail-Template for editing, creating, sorting and removing your elements in your newsletter. They are just displayed in editing-mode of your html-email.
Define your Element-Tools inside of your element - at the beginning.  Define your Container-Tools inside of your element, at the beginning or the end.




List of content:

If you want to merge the contents of your mailing in an index, you can either enter it manually or generate it automatically in the template. Such an index can be created for all elements in one container and is clearly defined automatically to the content of your newsletter. First you have to define your index and the attached container at the part of your template - where the index should be placed – like this:  [INDEX name='contants' container='article'] ... [/INDEX] The single items of your index are defined in their respective elements by the Indexitem tag. [ELEMENT name='article_text'] [INDEXITEM][INDEXITEMANCHOR][INDEXITEMNAME][/INDEXITEM] ... [/ELEMENT] The name of the element ist used by default as indexitem. If you want to use an extra indexitem, which is not a content of your element, you can create it analogically with a new inputfield.

You just have to set the attribute index='true' in your field. [INPUT name='headline' ... index='true']

SWYN-function:

For the integration of 'social media function' you first have to define a block element as follows:
[BLOCK name='Swyn' swyn='true'] … [/BLOCK]

The block contains the individual social network provider, the following are defined in the source code:

For example:
[FACEBOOK img =''http://www.Domain.de/images/facebook.jpg' width='24' height='24']

[TWITTER img=''http://www.Domain.de/images/twitter.jpg' width='24' height='24']

[XING img=''http://www.Domain.de/images/xing.jpg' width='24' height='24' ]

[LINKEDIN img=''http://www.Domain.de/images/linkedin.jpg' width='24' height='24']

[MYSPACE img=''http://www.Domain.de/images/my.spacejpg' width='24' height='24']

[STUDIVZ img=''http://www.Domain.de/images/studivz.jpg' width='24' height='24' ]

[SPREADLY img='http://www.Domain.de/images/spreadly.jpg' width='24' height='24']

[GPLUS img='http://www.IhreDomain.de/images/spreadly.jpg' width='24' height='24']

Note: You must include your own images as icons in each state (img) and the right size.

Examplae for RSS:

[CONTAINER name='container_1' feed-url='http://www.mein-rss-feed.de/feed/']
[ELEMENT name='element_1' feedable='true' feed-category='Hauptthema'] <div style="margin:10px; padding:10px; border:solid 3px #33c;">
[BLOCK name='block_1' edit='true']<h1>[INPUT feed-path='title' name='headline' type='char' default='headline' index='true']</h1>[/BLOCK]
[BLOCK name='block_2' edit='true']<p>[INPUT feed-path='description' name='text' type='text' default='text']</p>[/BLOCK]
[BLOCK name='block_3' edit='true']<a target="_blank" href="[INPUT feed-path='link' name='url' type='char' default='http://...']">[INPUT name='linktext' type='char' default='link-text']</a>[/BLOCK]
</div>[/ELEMENT]

[ELEMENT name='element_2' feedable='true'] <div style="margin:10px; padding:10px; border:solid 3px #333;">
[BLOCK name='block_1' edit='true']<h1>[INPUT feed-path='title' name='headline' type='char' default='headline' index='true']</h1>[/BLOCK]
[BLOCK name='block_2' edit='true']<p>[INPUT feed-path='description' name='text' type='html' default='text']</p>[/BLOCK]
[BLOCK name='block_3' edit='true']<a target="_blank" href="[INPUT feed-path='link' name='url' type='char' default='http://...']">[INPUT name='linktext' type='char' default='link-text']</a>[/BLOCK]
</div> [/ELEMENT][/CONTAINER]

Tags: