1. Home
  2. Yottly
  3. Assets
  4. Drag & Drop designer

Drag & Drop designer

Where you can find it?

  • With our Drag & Drop designer you can create now your own newsletters without any need of HTML knowledge
  • The whole process of creation is very intuitive and easy
  • Create your own styles, combine different colours and choose between different campaigns
  • Find the icon for Drag & Drop designer right in the line near your created newsletters or try to create a new one
  • Be aware that once you edited your template in Code Editor you cannot edit it in Drag & Drop designer again since both editors work separately and runs on different platforms
  • It is also impossible to open older templates through Drag & Drop designer. Once you decide to use designer for newsletters creation you need to start from the beginning in Drag & Drop designer

Then you need to choose which template are you going to create.

  • Segmentation: The appeared content is static – determinate. However it is also necessary to adjust the template according our rules what means adding obligatory “Mustache”. This ensures appropriate sending newsletters.
  • Personalized: The appeared content is not static but variable. The included products are appeared dynamically and added automatically by Yottly. Their selection is based on personalization and customer’s previous behavior. Recommended products are based on deep segmentation. That is why we use here more Mustache and define individual tags values.
  • Triggers
  • Custom: Here you can upload your own already prepared template.

templates

How does it work?

  • After opening your newsletter in you will see that your newsletter consists of several sections which can be edited individually according to your needs. You can insert images, links, text and much more.
  • Please find more information about editing your content in following sections:
    • Content
    • Structure
    • Body

Content

  • While working with content section you can use these features below
  • For using them simply drag one inside a column, it will auto-adjust to the column width
  • You can edit every newsletter’s block separately

 


Text

  • Drag this icon to a structure’s section and start typing
  • You can also change the font, size and much more directly in a newsletter
  • On the right side you can change also colours, line highs and proposition of text section

editor text

  • In case you want to customize a link mostly if you do no want to underline it, this can be found in the tab where you inserted URL
  • Link’s color can be changed in links settings

editor link


Image

  • Drag image from the left to newsletter’s section where you want to place it
  • Then several options will show you on the right side
  • Here you can insert URL for image, write alternative text, align and more

editor image


Button

  • Drag button icon to a section where you want to place it in newsletter
  • Then you can find on the right several option for editing color, text of button, aligning, spacing, adjusting borders and much more
  • Do not forget to insert a link where you want to navigate your customers with a button

editor button


Divider

  • Drag Divider icon directly where you want to place it
  • Again on the right side you can find different settings options such as colour, width, spacing, padding and more

editor devider


Social

  • Drag Social icon from the right side to your newsletter and show let your customers find on social pages as well
  • On the right side you can find different settings options
    • Selection icon collection allows you to choose between different buttons designs
    • By using edit you can add URL link for icon
    • Wit Add new icon you can insert more social media icons depending on your needs and preferences

editor sicocial


Dynamic Content

  • Dynamic content includes tracking pixel which needs to be included in all your newsletters so we can see on which product you customer clicked
  • Drag this icon always un the bottom of a newsletter

editor-dynamic content

HTML

  • Adding HTML element to your newsletter enables you to insert your own codes

editor html button


Padding & Bording

  • While editing images or whole sections the editor gives you ability of control on padding and bording. Set either around a content element for all sides at once or individually for each side. This can be found in both – Content and Structure

pedding,bording


Delete, move and copy buttons

  • These buttons are available for both – elements and whole newsletter’s sections

 

Image editing

Use different effect, crop a picture, add sticker or much more with Edit image function.

Edit image

 

Create discount label by using Sticker first and then Text.

sticker+text

 

You can also frame it or use many of other different features &nd effects for updating your images.

framee

 

Structure

Structure

  • Here you can choose between different types of rows and columns. You can use from one to four columns
  • Select and use structure easily by dragging it to your newsletter’s template
  • For every column you can decide for different content – image or text
  • You can easily move, trash or copy whole sections
  • Every row has its own settings, which gives you flexibility in creation. You can for example choose one colour of entire row and different one for message area
  • Keep in mind that from the chosen structure depends also your products layout

structure

  • While clicking on a specific structure there will appear different setting options on the right side such as background colour, padding and bording.

editor structure


Padding & Bording

  • While editing images or whole sections the editor gives you ability of control on padding and bording. Set either around a content element for all sides at once or individually for each side. This can be found in both – Content and Structure

 

Body

  • This feature allows you to adjust whole content area width, its background and more
  • Always make sure that products will be shown appropriate after changing width by sending testing mail

editor bodyy

How to add products, price & description

Before you start adding products you need to choose Structure you want to use and Image elements. These elements depend on sort of campaign you are going to run.

It can look like this for example:

structure example


Then you drag image element for all 6 boxes (it can be more or less depending on your structure choice).

images example


StaticRecommender:

Since products shown in staticRecommender are static you can add them directly to a template by inserting their URL (link from your e-sop) or upload picture from media library. How can you upload them to media library?

  • Click on “Browse” button
  • Browse
  • Now you can choose between Adding new file or Importing file from your PC
  • add,import
  • In case you use Add new file you can upload images directly from your PC or laptop.

 

  • If you choose the second option – Import file, you can import file directly from web by using URL link
  • Import files

 

Price & description

Adding price and description is very simple. The only thing you need to do is to insert under your products images text elements and then add right tags. For example:

products

Template placeholders

In your image library you can find the Template_placeholders file or in this list. Here are place all placeholders which are needed while creating Standard recommender e-mails or triggers.

The templates are replacing product images in your templates. The main reason of their usage is that products in these mails are personalized and so different products are generated for different audience group (depends on your filter settings).

template_placeholders

 

Here you can see all placeholders for different types of campaigns. So you choose from the file based on newsletter type you are creating.

placeholders_types

 

  • Standard recommender (personalised products) may includes up to 10 recommended products based on personalization.
  • Triggers have specific personalised engines.

Then you choose the “image” based on structure you are using (if you are using structure with 2 columns, 1 column, 3 or 4 columns and so). Product images are then automatically resized in order they fit into the template.

structure

 

 

Price & description

Adding price and description for personalized emails is very simple. The only thing you need to do is to insert under your products images text elements and then add right tags according to defined placeholders. For example:

products

Other attributes

You can easily insert custom customer parameters, discount coupons and other dynamic content into text area in a template by clicking on Merge tags

merge_tags1

and select an attribute. The placeholder for the attribute will be automatically inserted into the template. Not supported characters in the attribute’s name such as space or “_” will be encoded, the value of the attribute will remain the same as in data source.

If there is no data for the customer in the selected attribute, Yottly will not generate anything into the template.

 

Example

You want to insert the actual credit value of a customer (the parameter is called “Bonus klub body”). Click on Merge tags and find this value:insert_custom1

Appropriate dynamic placeholder for this attribute is automatically inserted into the text:

insert_custom15

If you want to show specific message only in case existing value of the attribute for each customer, you need to apply “IF” statement using # and / before and after the placeholder, respectively.

insert_custom2

List of template image placeholders

In the list below, you can find the list of image URL for template personalisation. First, you need to insert any static image into the template. To replace this image by a personalised product, paste this URL into the Image URL content in Drag&Drop editor like this:

https://s3.amazonaws.com/templateplaceholders/abandoned+cart+trigger/main/hero_product2/hero_product2_col2.png

paste_image_template_placeholder_url

 

Personalised Template

https://s3.amazonaws.com/templateplaceholders/personalised+products/product*X*_image/product*X*_image_*Y*.png

  • *X* = 1,2,…,10
  • *Y* = col1,col2,col3,col4,2col3,no_resize

Abandoned Cart Trigger

https://s3.amazonaws.com/templateplaceholders/abandoned+cart+trigger/complements/cart_complement*X*/cart_complement*X*_*Y*.png

https://s3.amazonaws.com/templateplaceholders/abandoned+cart+trigger/main/hero_product*Z*/hero_product*Z*_*Y*.png

https://s3.amazonaws.com/templateplaceholders/abandoned+cart+trigger/substitutes/substitute*X*_image/substitute*X*_image_*Y*.png

  • *X*=1,..,3
  • *Z*=1,..,4
  • *Y* = col1,col2,col3,col4,2col3,no_resize

Shopping Intention Trigger

https://s3.amazonaws.com/templateplaceholders/shopping+intention+trigger/main/zsv1_image_*Y*.png

https://s3.amazonaws.com/templateplaceholders/shopping+intention+trigger/substitutes/substitute*X*_image/substitute*X*_image_*Y*.png

https://s3.amazonaws.com/templateplaceholders/shopping+intention+trigger/complements/zsv_complement*X*_image/zsv_complement*X*_image_*Y*.png

  • *X*=1,..,3
  • *Y* = col1,col2,col3,col4,2col3,no_resize

Right Before Consumption Trigger

https://s3.amazonaws.com/templateplaceholders/right+before+consumption+trigger/complements/fmcg_complement*W*_image/fmcg_complement*W*_image_*Y*.png

https://s3.amazonaws.com/templateplaceholders/right+before+consumption+trigger/main/fmcg*Z*_image/fmcg*Z*_image_*Y*.png

  • *W*=1,2
  • *Z*=1,..,4
  • *Y* = col1,col2,col3,col4,2col3,no_resize

 

Save, preview, testing mail

Saving your template is important part of process. Since a template is not saved automatically during whole creation. You always need to press for saving Save button place in the right corner.

editor save

After cilcking on save you will se a tab which confirms you that templaete (and all included components) are valid and you can press Save.

editor Save1

Then you can save chnages cintinuosly by clicking on Save. Thak you will see similar tab, please click againg on Save button.

Saave2


You can also preview your template or send testing mail at the end. Both these options can be found in the left corner. How exactly testing e-mails work you can find here.

editor preview, test mail

Must-included elements

There is several elements which you always need to include in your newsletter. Otherwise the template would not work appropriately.


Mirror text

  • Always placed on the top
  • You can find it under “Merge tags”

editor mirror text


  • Needs to be placed right under the mirror text
  • You can find it under “Required fields”

editor external link


  • Insert unsubscribe link at the bottom before Dynamic Content

editor unsubscribe

 

Add Product function

Add product

 

This function of drag&drop editor will allow you to easily add products from your e-shop to the e-mail.

 

Insert the “Add product” placeholder

 

To the structure where you want to add the product you need to place the HTML element (if you want products in 3 columns you need to place the HTML elements three times in every column).

html_element

 

Into this element insert this code:

<a id="product****" class="X" href="http://yottly.com"><img src="https://via.placeholder.com/120x200.png?text=product****" style="max-width:100%; "alt="Yottly" /></a>

 

  • Where “****” you need to change to attribute 1 – 10. Every added product needs to have a different attribute.
  • X – select 1,2,3, or 4 according to the number of columns in your row

 

If you set it up right, in 3-column structure you should see these placeholders:

add_product_1

Add and adjust product visualisation

 

Then you can begin with adding the products:

 

  • Choose “Add product” from main editor menu

add_product_2

  • Then choose which of the placeholder you want to edit

add_product_3

  • Choose product you want to add – you can decide if you want just products in stock or all and search by title of by ID

add_product_4

  • Afterwards in editor you are able to style the product visualisation fully:
    • Container: depending on width of the e-mail and number of columns you are using set up the size of the container (for 3 columns and width of the whole e-mail 750 pxls you set up width of the container to 250 pxls)
    • Image: You can set up size and a position of product image
    • Title, description, price, priceBefore, button: You are able to change colors, fonts, sizes, styles and a position of the elements, also if you click into the view on the text elements, you can rewrite it directly.

add_product_5

  • Every element can be hidden by the Show/Hide switch in the editor

add_product_6

  • Also a position can be altered by dragging chosen element if you select “Position absolute”.
  • When finished with styling the product visualisation you can save the settings as a template by “Save as template” button. Also already saved templates can be edited (Load template in Templates tab) and saved again by “Save” button.
  • Already prepared templates you can find in Templates tab and load those for chosen product.

add_product_7

  • To add prepared product visualisation into the e-mail use “Generate” button.

 

Default template

If you logged into Yottly for the first time, or you are just wondering how to create a new template and set it as default, well then you’ve come to the right place.

 

How to create new template

In the section Assets – Emails, click on the button +Add template.

Screenshot_79

Now you need to choose the type of the template you want to create.

Screenshot_80

As you can see, we prepared a few templates in each category.

Click on the Select button and the editor will open. Here you can edit and adjust the design and structure of your template, so it matches with the design of your e-shop.

Screenshot_81

Once you’re satisfied with the look of your new template, click on the Save or Save as new button in the top left corner. Then just name the new template, make sure, that the type is selected correctly and hit Save.

Screenshot_82

The new saved template can be seen in the list of templates.

Screenshot_83

If you want to set the template you just created as a default one, hit the sprocked on the right side. Then just choose the Set as default template option.

Updated on October 24, 2019

Was this article helpful?

Related Articles