Using the Library of Modules
Not finding the proper block layout in a template from the standard library ?
In addition to the default selection of blocks, Actito gives you access to an extended library of modules !
This allows you to add a wide range of designs to your campaigns.
Reaching the library of modules
The library of modules is available on every default template, as well as any custom template (designed by Actito teams) with a width of 640 pixels.
To enter the library, click on the "+" icon at the top left of the template editor.
The Actito Library
The module library is divided into categories that group together blocks sharing a similar layout or purpose.
- One to four columns : the four first categories will help you design most of the main content of your e-mail. Their blocks contains a combination of images, titles, texts, CTA buttons,... with the content space divided in to one, two, three or four columns. 2 columns blocks all include their mirror (e.g. : image to the left, or to the right)
- Standard : This category offers variations of the common blocks found in all templates : headers, footer, dividers, ...
- RSS : This category give you the possibility to use blocks filled in by RSS feeds without having to use the "RSS newsletter" standard template. They allow you to paste the URL of an RSS feed and automatically retrieve the items from this feed. They are identified with the RSS symbol
. - Loop : These blocks allow you to use loop personalizations without having to edit the HTML code. Loops allow you to personalize your e-mails with several lines of data, which is very useful for order confirmations or abandoned cart reminders, for example. They are identified with the loop symbol
. For more info about loops, see the Transactional e-mails section.
Adding a module
To add a module to your e-mail, go to the relevant category, select the block(s) of your choice, and simply click "Add".
The chosen blocks will be available in your template, under the "Library of modules" category.
Blocks will remain in the module selection to the left of the editor (including in campaign templates) as long as they are used in the e-mail content.
Non-used blocks are not kept in the selection upon exiting the template editor or the e-mail.
Editing the structure of a module
The ability to edit the structure of certain blocks gives marketers greater autonomy and flexibility in the creation of their e-mail campaign designs. Indeed, by editing the structure of your module, you have greater control over the appearance and organization of the content of your message.
From the e-mail editor, you can edit the structure of the following blocks:
- Txt
- Img
- Btn
- Title
Other modules in the library will gradually benefit from this functionality.
To do so, select on of these blocks from the library of modules and had it to your e-mail. Once the module has been inserted, you can edit its structure.
You can easily recognize them by the little blue pictogram on the preview:
To do this, hover over the block in question and click on 'Edit structure'. A side menu will open allowing you to add new elements to your block, reorganize them, delete them, etc.
To insert an element into your block, the principle is the same as for inserting modules: simply select it by holding down the mouse button, then drag and drop it where you wish to insert it.
You can also:
- Reorganize elements inside of the block
- Duplicate elements
- Delete elements
As long as you are in the ‘Edit structure’ menu, you will not be able to modify the style/content of your elements. To do so, you will have to quit the editing menu and go back to the editor.
There are different types of elements that you can add to your bloc :
- Text zone
- Call to action buttons
- Images
Changes applied to your block will not be automatically saved. Do not forget to save your changes before quitting the editing menu and go back to the editor.
Once the structure of your module is finalized, you can edit the style of the elements inside your block.
If you change the style of a dynamic module, the changes will be applied to all the elements in the module. Therefore, if you want to display a different style for each of your elements, spread your elements over different blocks.
Editing the button style
When you add a button in a dynamic module, you will be able to edit the style of the button.
Like for the other modules, go to the button style editor.
A specific menu will open in the left tab.
From this menu, you will be able to define some parameters such as the background color, the texts size, police, etc. like you do it for button of fix module.
In addition to these parameters, a series of additional options specific to dynamic modules are available:
- The padding
- The width
- And position options
For each one of these options, you also have the possibility to apply your modifications for the web version and for the mobile version or keep the same modifications for both versions.
To set different options for the mobile version, simply go to the mobile version of the editor and set the options you wish to give it. A small 'Mobile' popup will appear next to each menu, to let you know that the options you have set apply only to the mobile version.
If you wish to keep the same options for web and mobile version, simply click on the cross in the popup.
Size
You can choose to keep the size auto or to define a specific size.
When you check the option, a specific menu will appear, allowing you to choose the size of the button.
The percentage you choose corresponds to the percentage of the module width occupied by the button.
For multi-columns modules, this percentage corresponds to the percentage of the column width occupied by the button.
Padding
You can choose to define the overall spacing of the button, relative to all sides. This padding is defined in pixels.
If you wish to define a specific padding for each side of the button, please check 'More options'.
A specific menu will appear, allowing you to define a specific padding for each side of the button.
Block options
You can also modify the alignment of your button in the module and choose whether or not to hide it for either version.
Here also, you have the possibility to define different options according the web or mobile version.
Editing the image style
When you add an image in a dynamic module, you will be able to edit its style.
To do so, click on 'Edit image style'.
A specific menu will open in the left tab.
From this menu, you will be able to define some parameters for your picture:
- The size
- The Border
- And block options
For each one of these options, you also have the possibility to apply your modifications for the web version and for the mobile version or keep the same modifications for both versions.
To set different options for the mobile version, simply go to the mobile version of the editor and set the options you wish to give it. A small 'Mobile' popup will appear next to each menu, to let you know that the options you have set apply only to the mobile version.
If you wish to keep the same options for web and mobile version, simply click on the cross in the popup.
Size
You can choose to keep the size auto or to define a specific size.
When you check the option, a specific menu will appear, allowing you to choose the size of the image.
The percentage you choose corresponds to the percentage of the module width occupied by the image.
For multi-columns modules, this percentage corresponds to the percentage of the column width occupied by the image.
Border
This option allows you to define the border radius of your image.
The border radius allows you to define the roundness of the corners of the image. If you set it to 0 pixels, the image will have right angles. By increasing this radius, you will round the corners of the image, to get a more or less rounded corners depending on the value.
Please note that Outlook has limited support for border styling in emails. If you apply borders styles (buttons and images) in your campaign design, the message may not appear as intended for your profiles viewing it in Outlook.
Block options
You can also modify the alignment of your image in the module and choose whether or not to hide it for either version.
Here also, you have the possibility to define different options according the web or mobile version.
Saving your own module library
In addition to the standard categories, Actito also gives you the opportunity to save your own modules in the library, so you can fill in existing blocks with your logo, your corporate colors, etc, and reuse them !
This is also very useful to transfer a block designed in a campaign to another e-mail, in order to save it in a campaign template, for example.
To save your own module, click on the 'save' icon at the top left corner of the module.
Saving a module in the library is an advanced feature and is tied to a specific user right. If you need access to this feature, please contact your Admin User or Actito contact person.
If you didn't create your own specific library, the module will be saved in an auto-generated library.
As module cannot be moved once they're saved, we advise you to set up your library beforehand. To learn how to do so, see the following section "Editing your module library".
If you have already set up your own libraries, you will be able to choose in which library and in which category the block will be saved.
When you save a dynamic module in your library, its thumbnail will be a representation of that module, so you can easily identify it.
Editing your module library
To manage your own module library, go to the standard library and enter "Edit mode" in the top right corner.
Adding a library
From edit mode, you can add a new library. We advise you to do so if you want to save you own module, as you cannot add them to the common Actito library.
When you "Add a library", a new Library 1 (and so on) will be automatically created. You will be able to rename your library by clicking on it in edit mode.
You can have several libraries, which is useful if you manage more than one brand, for instance.
Your custom libraries are tied to the entity of the e-mail campaign from which it was created.
Adding a category
Like the common library, you can organize your own library in several categories to group your blocks together.
Click on a "Add category" to create a new Category 1 (and so on), which can be renamed.
Deleting elements from the library
In edit mode, you can delete one of your own module by selecting the 'cross' icon in the top right corner, then confirming the deletion.
You cannot delete modules from the common Actito library.
You can also delete categories with the 'cross' icon to the left of their name, as long as they do not contain any block anymore. You should therefore delete the blocks first.
Likewise, to delete a library, it cannot contain any category anymore.
