From your template library, please select a category/folder and click on at the top right of the screen :
You then arrive on the creation page :
Via CRM360's internal editor, you can create your own emails without having any knowledge of HTML. Your email will have the following characteristics:
- A width of 600 pixels,
- Responsive content (which adapts to mobiles)
- Content that displays correctly on the majority of email viewing tools (Outlook, Gmail, Yahoo...)
The different components :
The name of the template : it is mandatory to fill it in to save the template.
--------------------------------------------------------------------------------------------------------------------
The structures :
They allow you to structure your model. You can insert images, texts, buttons or barcodes. To add a structure to your email, you must "select/drag/drop" (Drag & Drop) the chosen structure to the desired location in the email.
Once added, a structure can be moved using the button or duplicated using the button
.
The duplication is done in the same structure.
- The "1 column" structure will be 600 pixels wide :
- The "2 columns" structure contains 2 columns of 300 pixels wide. In responsive/mobile mode the right column goes under the left column :
- The "3 columns" structure contains 3 columns of 200 pixels wide. In responsive/mobile mode the right column goes under the left column :
- 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 :
- The structure "2 columns 1/3 - 2/3" contains 1 column of 200 pixels wide and 1 column of 400 pixels wide. In responsive/mobile mode the right column goes under the left column :
A structure can contain several elements. Indeed, for the responsive display of an image followed by a button then a text, you have to put the elements 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 chosen content to the desired location in the desired structure of your email.
A content will never be larger than the structure that contains it.
- Text :
By clicking on your email, you can add/edit the text thanks to an "in line" editor like Word. On this editor, you have 2 additional options:
- "Plugin": allows you to simply add your "Mirror" and "Unsubscribe" links in your text.
- "Custom areas": allows you to add custom variable areas in your text.
Note: Text content always has a margin below, above and on the sides.
- It is possible to add vertical or horizontal paddings.
ATTENTION : the paddings have the same size at the top and bottom or on the right and on the left.
- It is possible to add a background color to the text by clicking on "Background color".
- Image :
By clicking on your email and then clicking on , you can edit this content.
- The URL address : corresponds to your images previously imported into 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 : allows you to put a clickable link to another web page
An image is always centered (even in responsive mode).
Note: The "image" content does not have a 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 up 100% of the available space.
The size of the image must be at most that of the structure, i.e.:
- 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.
- Button :
By clicking on your email and then clicking on you can edit this content
- The button text is to be added in this pop in by clicking directly on the button,
- The link: allows you to add a clickable link to another web page,
- The width: corresponds to the size of the button you want,
- Color: possibility to choose the background color and the color of the text,
- Thickness & color: correspond to the thickness of the border of the button and the color of this border,
- Rounded: allows you to round the corners of the button (WARNING: 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: The button content always has a margin below, above and on the sides.
The size of the button should 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 to the button.
- Barcode :
By clicking on your email and then clicking on ,you can edit this content.
The type : corresponds to the type of barcode you want to add to the content,
The content : corresponds to the numbers or letters you want to put below the barcode,
The width and height : correspond to the dimensions of the barcode,
The title : when the barcode does not appear, it is the text that appears instead in the email received by your customers,
Custom fields : allow you to customize the content of the barcode.
A barcode is always centered (even in responsive mode).
- Separator:
By clicking on your email and then clicking on , you can edit this content.
The width : it is maximum 100% and minimum 5%,
Thickness : allows you to enlarge the separation line,
The type : corresponds to the type of separator desired (continuous, dashed, etc.).
If you want to add a margin to an image or text, just do the same manipulation but select the "transparent" type and select the width and thickness of your choice.
- Social :
By clicking on your email and then clicking on , you can edit this content.
This tool allows you to insert the social networks you want to highlight, and according to the design of your email.
-------------------------------------------------------------------------------------------------------------------
The Pre-Header of an email can be defined as the text summary located next to the subject line when you view the email in the inbox.
The primary purpose of its use is to capture attention even before the email is opened.
--------------------------------------------------------------------------------------------------------------------
On a line or on a column, it is possible to insert a background image or a background color :
So you have to click on a pen to edit. It is possible to edit a column or a total structure.
--------------------------------------------------------------------------------------------------------------------
The display order on mobile can be reversed when there is more than one structure :
It is therefore necessary to click on "stack order of columns for mobile display" when editing the structure by clicking on the pen.
--------------------------------------------------------------------------------------------------------------------
At the end of your model creation, save it by clicking on .
You can view your creation according to the different media (computer, tablet or smartphone) at the bottom right of your screen.
1- View the mobile version
2- Display the Tablet version
3- Display widescreen version
It is still possible to make changes by clicking on at the bottom right of your screen.