Create a new HTML Template with the CRM 360 editor

Follow

From your Templates library select a category / folder and click on Capture_plus.PNG the top right of the screen

You then arrive on the creation page :

 mceclip0.png

Via the internal editor in CRM360 you can create your own emails without having any HTML knowledge. Your email will have the following characteristics:

  • a width of 600 pixels
  • responsive content (which adapts to mobile)
  • content that is displayed correctly on most email viewing tools (OUTLOOK, GMAIL, YAHOO, ....)

Les différents composants :

 The name of the Template: It is mandatory to fill it

mceclip1.png

------------------------------------------------------------------------------------------------------------------

 

The structures :

They allow you to structure your model. You can insert images, texts, buttons or bar codes. To add a structure in your email, you must "select / drag / drop" (Drag & Drop) the structure chosen at the desired location in the email.

Once added, a structure can be moved using the button fleche.PNG or duplicated using the button

. Duplication is done in the same structure.

  • The "1 column" structure will be 600 pixels wide

600.PNG

  • The "2 columns" structure contains 2 columns 300 pixels wide. In responsive / mobile mode the right column goes under the left column

300_par_300.PNG

  • The "3 columns" structure contains 3 columns 200 pixels wide. In responsive / mobile mode the right column goes under the left column

200_par_200_par_200.PNG

  • The structure "2 columns 2/3 - 1/3" contains 1 column of 400 pixels wide and 1 column of 200 pixels wide. In responsive / mobile mode the right column goes under the left column

400_par_200.PNG

  • The structure "2 columns 1/3 - 2/3" contains 1 column 200 pixels wide and 1 column 400 pixels wide. In responsive / mobile mode the right column goes under the left column

200_par_400.PNG

 

A structure can contain several elements. Indeed for the responsive display of an image followed by a button then a text, the elements must be put in the same structure.

--------------------------------------------------------------------------------------------------------------

 

Contents :

The contents are to be inserted inside the structures. To add content to a structure, you must "select / drag / drop" (Drag & Drop) the content selected at the desired location in the desired structure of your email.

Content will never be wider than the structure that contains it.

 

  • Text:

bloc_texte.PNG

By clicking on your email, you can add / edit the text using an "in line" editor in the WORD way. On this editor, you have 2 additional options:

  • "Plugin": which allows you to simply add your Mirror and Unsubscribe links in your text.
  • "Custom zones": which allows you to add custom variable zones in your text.

mceclip2.png

Note: Text content always has a margin below, above and on the sides.

- It is possible to add vertical or horizontal padding.

PLEASE NOTE: the padding is the same size at the top and bottom or at the right and left.

- It is possible to add a background color to the text by clicking on "Background color"

mceclip3.png

  • Picture : 

image_1.PNG

By clicking on your email and then clicking on stylo.PNG you can edit this content

  • Url address: corresponds to your images imported beforehand in your template library
  • The width: corresponds to the width that the image will have. If the width is smaller than the width of the structure the image will be centered in the structure
  • The title: when the image does not appear it is the text that appears instead in the email received by your customers
  • The link: it allows you to put a clickable link to another web page 

An image is always centered (even in responsive mode)

Note: The image content has no margin below, above and on the sides. If the width of the image is equal to the width of the structure, the image will take 100% of the available space.

The size of the image must be at most that of the structure either:

- 600 wide if it is in a 1 column structure

- 300 wide if it is in a 2 column structure

- 200 wide if it is in a 3 column structure

 mceclip5.png

  • Button :

bouton_1.PNG

By clicking on your email and then clicking on stylo.PNGyou can edit this content

mceclip0.png

  • The text of the button is to be added in this pop in by clicking directly on the button
  • The link: it allows you to add a clickable link to another web page
  • The width: it corresponds to the size of the button you want
  • Color: it is possible to choose the background color and the text color
  • Thickness & color: they correspond to the thickness of the border of the button and the color of this border
  • Rounding: this makes it possible to round the corners of the button (CAUTION: this is not compatible with all email viewing tools. In this case the corners still appear "square")

A button is always centered (even in responsive mode)

Note: Button content always has a margin below, above and on the sides

 

The size of the button must take into account the margins on both sides:

- 580 wide if it is in a 1 column structure

- 280 wide if it is in a 2 column structure

- 180 wide if it is in a 3 column structure.

 It is possible to add a background color on the button

mceclip6.png

  • Voucher code:

code_barre.PNG

By clicking on your email and then clicking on stylo.PNG you can edit this content

mceclip1.png

Type: corresponds to the type of barcode you want to add to the content

The content: it corresponds to the numbers or letters that you want to put below the bar code

Width and height: they correspond to the dimensions of the barcode

The title: when the bar code does not appear it is the text that appears instead in the email received by your customers

Custom fields: they allow you to customize the content of the barcode

 

A barcode is always centered (even in responsive mode)

Note: The barcode content systematically has a margin below, above and on the sides

  • Separator:

separateur_1.PNG

By clicking on your email and then clicking onstylo.PNG you can edit this content

mceclip2.png

The width: it is maximum 100% and minimum 5%

Thickness: it enlarges the dividing line

Type: corresponds to the type of separator desired (continuous, dashed ...)

 

If you want to add a margin to an image or text, just do the same manipulation but select the type "transparent" and select the width and thickness of your choice.

------------------------------------------------------------------------------------------------------------------

 

On a row or on a column, it is possible to insert a background image or a background color:

You must therefore click on a pen to edit. It is possible to edit a column or a total structure.

mceclip7.png

mceclip8.png

------------------------------------------------------------------------------------------------------------------

 

The display order on mobile can be reversed when there is more than one structure:

It is therefore necessary to click on "stacking order of columns for mobile display" when editing the structure by clicking on the pen.

mceclip9.png

------------------------------------------------------------------------------------------------------------------

 

At the end of your model creation save it by clicking on enregistrement_de_la_cible.PNG

You can view your creation according to the different media (computer, tablet or smartphone) at the bottom right of your screen

dossier.PNG

It is still possible to make changes by clicking on  at the bottom right of your screen.

 

 

Have more questions? Submit a request