La librairie de templates personnalisés

Il s'agit des templates propres à votre licence, disponibles dans la zone supérieure de la page de sélection de template.

En effet, Actito vous donne la possibilité de commander des templates spécifiques à vos besoins. Ceux-ci peuvent par exemple :

• Reprendre votre charte graphique

• Afficher des images ou des logos par défaut

• Ajouter des blocs spécifiques à vos besoins

Pour demander la création d'un template personnalisé ou pour plus d'informations concernant les modalités s'y rapportant, nous vous invitons à vous adresser à votre gestionnaire de compte.

La librairie de templates Actito

Actito dispose d'une librairie de templates reprenant des configurations adaptées aux situations les plus fréquentes, telles qu'une newsletter, une invitation à un événement ou un e-mail de bienvenue. Ceux-ci sont disponibles dans la zone inférieure de la page de sélection.

Ces templates ne concernent que la disposition des blocs et des images, tout en vous laissant définir le contenu librement. De même, vous gardez la possibilité de les modifier selon vos besoins.

La librairie de modules

Sur la gauche de l'écran, la librairie de modules vous donne un aperçu des blocs que vous pouvez ajouter à votre e-mail. Pour insérer un module, il vous suffit de le sélectionner en maintenant le clic enfoncé, puis de le faire glisser et de le déposer à l'endroit de votre e-mail où vous voulez l'insérer.

Il existe différents types de blocs :

• Les entêtes : le bloc "pre-header", qui pourra contenir le pre-header ainsi que le lien de version web, et le bloc "header", où vous pouvez insérer un logo et rappeler l'intitulé de l'e-mail.

• Les images : il peut s'agir aussi bien de grandes bannières prenant toute la largeur de l'e-mail que de plus petites images disposées à côté ou au-dessus de zones de de texte.

• Les titres : avec ou sans sous-titre.

• Les zones de texte : avec ou sans titre, avec ou sans image.

• Les séparateurs

• Les boutons "call to action" : ces boutons servent à insérer des liens vers des pages web.

• Le pied de page : il contient le lien de désinscription, un lien vers les informations légales, ...

Certains modules sont propres à des templates spécifiques, comme des blocs de programme, d'adresse, de partage sur les réseaux sociaux, ...

En plus des modules par défaut disponibles dans les templates de la librairie Actito, il est possible de demander une adaptation d'un bloc existant ou même la création d'un bloc spécifique à vos besoins.

Pour commander un bloc personnalisé ou pour plus d'informations concernant les modalités s'y rapportant, nous vous invitons à vous adresser à votre gestionnaire de compte.

Éditer les modules

Vous avez ensuite la possibilité de modifier la structure des modules qui composent le template, ainsi que d'en remplir le contenu.

Vous pourrez :

• Écrire votre texte

Lors de la rédaction de votre texte, vous allez avoir accès à un éditeur de texte enrichi, où vous pourrez effectuer les mises en forme classiques, telles que modifier les styles, l'alignement, la taille et la couleur du texte, insérer des listes, ainsi qu'ajouter des liens (comme expliqué ci-dessus).

Il s'agit d'un éditeur WYSIWYG, ce qui signifie que vous verrez directement les modifications dans votre texte sans passer par l'affichage des balises de mise en forme.

Durant l'écriture de votre texte, vous avez la possibilité de faire appel à des personnalisations, c'est à dire à utiliser des données de votre table de Profils ou d'autres données qui y sont liées, afin d'adapter le contenu à votre contact. Cela peut aller de simplement s'adresser au lecteur par son prénom jusqu'à des personnalisations bien plus avancées.
Pour davantage d'information à ce sujet, nous vous invitons à lire le chapitre "Personnaliser un E-mail".

• Ajouter des logos ou des images

Partout où s'affiche le petit pictogramme "Choisir votre image", vous avez la possibilité de personnaliser votre message avec une image de votre choix.

Cela concerne les grandes bannières, les images d’accompagnement, les logos, mais aussi toutes les icônes spécifiques à certains blocs, comme l'icône représentant les intervenants ou les icônes de réseaux sociaux. Si vous ne modifiez pas ces icônes, elles apparaîtront telles quelles, mais rien ne vous empêche de remplacer le bouton facebook noir par un bouton facebook aux couleurs de votre société.

La taille attendue des images est renseignée sur le fond gris pour chacune des bannières et des images d'accompagnement. Si l'image que vous décidez d'ajouter ne correspond pas à la taille requise, elle sera automatiquement redimensionnée à la bonne largeur, tout en restant proportionnelle en matière de hauteur. Toute déformation sera ainsi évitée, mais cela peut changer l'agencement de votre e-mail.

Vous pouvez directement sélectionner les images parmi vos dossiers, soit en cliquant sur le bouton "Chargez une image", soit via un "Glissez-déposez". Vous avez également la possibilité d'introduire l'adresse URL d'une image déjà en ligne.

Cet écran vous permettra également de définir le titre de l'image et un texte alternatif. Ce texte alternatif sera affiché à la place de l'image si celle-ci est bloquée ou ne peut pas être chargée. Il est donc important de ne pas le négliger.

• Ajouter des liens

Vous aurez la possibilité d'ajouter un lien partout où le pictogramme "Ajouter un lien" est affiché.

Cela inclut :

• Les images

• Les petites icônes

• Les boutons "call to action"

• Directement dans le texte

La fenêtre d'édition du lien vous permettra d'indiquer l'adresse URL vers laquelle il doit renvoyer. Vous pouvez aussi insérez une personnalisation ($ suivi du nom de la personnalisation), dans le cas où le lien doit renvoyer vers un formulaire Actito ou vers une page de désinscription, par exemple.

Vous aurez également la possibilité de définir un titre et un nom pour ce lien :

• Le titre est un concept HTML (correspondant à la balise title) : il apparaît lorsqu'on survole le lien avec sa souris.

• Le nom sera affiché dans les rapports de campagne : il sert à simplifier le suivi des clics dans vos e-mails.

Éditer les styles d'un module

Pour customiser votre e-mail, vous avez la possibilité de modifier de nombreux paramètres du module, comme certaines couleurs, ou mettre en place des bordures Pour ce faire, cliquez sur le pictogramme "Éditer les styles" qui est affiché dans le coin supérieur droit des chaque module individuel.

Ce bouton ouvrira l'éditeur des styles sur la gauche de l'écran.

• Couleur d'arrière plan

Vous pourrez éditer :

• La couleur de la ligne : il s'agit de la couleur d'arrière plan de l'e-mail, qui est affichée de chaque côté du corps de l'e-mail. Ce bouton ne permet que de modifier la couleur de la fraction de l'arrière-plan directement adjacente au module édité. Pour changer la couleur de tout l'arrière-plan à la fois, il est nécessaire de se rendre dans les styles globaux (voir la section "Éditer les styles globaux" par après).

• La couleur du contenu : ceci vous permet de modifier la couleur de remplissage du bloc en lui-même.

Par défaut les couleurs initiales du template sont utilisées. Celles-ci sont paramétrées dans les styles globaux (voir la section "Éditer les styles globaux" par après). Si vous customisez la couleur d'un bloc, la case "Utiliser la valeur globale du template" sera automatiquement décochée. Il suffit de la recocher pour rétablir la couleur initiale.

Le picker de couleur vous permet de sélectionner la couleur directement dans une palette, ou de renseigner un code au format hexadécimal ou RGB. Les dernières couleurs utilisées ainsi que les couleurs du template sont gardées en mémoire.

• Espacement

L'espacement d'un bloc vous permet de régler l'alignement du contenu d'un bloc par rapport à l'arrière-plan et aux autres blocs, c'est-à-dire à quel point le contenu est centré par rapport aux contours du bloc.

Ceci est particulièrement visible pour les images, par exemple.

L'espacement à gauche et à droite va rajouter une marge sur les côtés, avec la "couleur du contenu". Souvent, on préférera aligner l'image au centre en définissant le même espace des deux côtés, mais ils peuvent être définis indépendamment.

L'espacement en haut et en bas permet de rajouter une marge de la "couleur du contenu" entre le contenu du module et le bloc précédent/suivant.

L'espacement maximum est de 200 pixels.

• Bordure

L'éditeur des styles du module vous permet également de paramétrer une bordure autour du bloc (pour encadrer une image ou un morceau de texte, par exemple).

Vous avez la possibilité de paramétrer :

• la couleur de la bordure

• son épaisseur (en pixels)

• son style (simple, pointillé, double,...)

Pour encore plus de customisation, vous pouvez activer le bouton "Plus d'options" pour avoir la possibilité de définir un style de bordure spécifique pour chaque côté du bloc.

Vos modifications seront sauvegardées lorsque vous cliquez sur le bouton "Sauver" en bas ou si vous cliquez dans l'éditeur.

Éditer les styles de bouton

Dans tous les blocs contenant des boutons de type "call to action", vous avez également la possibilité de customiser l'apparence de ceux-ci. Cette option n'est pas définie dans les styles du module, mais directement sur chaque bouton du bloc.

Cliquez sur l'icône de droite pour y accéder.

• Arrière-plan

Ceci vous permet de modifier la couleur de fond principale du bouton, en utilisant le picker de couleur identique à celui utilisé dans la gestion des styles du module.

• Texte

Cela permet de modifier le style du texte du bouton, c'est-à-dire sa police, la couleur et la taille du texte, ainsi que les différents effets de styles, comme mettre le texte en gras ou en italique.

• Bordure

Deux paramètres importants sont définis dans cet encadré :

• Le rayon de bordure permet de définir l'arrondi des coins du bouton. En le définissant à 0 pixel, le bouton aura des angles droits. En augmentant ce rayon, vous arrondirez les coins du bouton, pour obtenir un bouton plus ou moins ovale selon la valeur choisie.

• Le style de bordure permet de définir le contour du bouton, ce qui comprend la couleur du contour, son épaisseur et le style de trait. Cela vous permet d'afficher des boutons avec un contour différent du fond du bouton. Si vous voulez un bouton uniforme, gardez la couleur de la bordure identique à celle du fond, ou sélectionnez le style "Aucune bordure".

Exemple de bouton arrondi avec une bordure :

Éditer les styles globaux

Cliquez sur "Styles Globaux" à côté de la librairie de modules pour appliquer des paramètres de style à la totalité de l'e-mail.

Les styles de chaque module/bouton restent modifiable individuellement, mais ils prendront par défaut la valeur définie dans les styles globaux.

• Couleurs du template

Ceci vous permet d'enregistrer des couleurs à utiliser dans l'e-mail. C'est très pratique si votre organisation utilise certaines nuances de couleur spécifique dans sa charte graphique : pas besoin de retenir par coeur le code RGB de telle nuance de bleu, en la définissant une fois dans les couleurs du templates, elle sera disponible dans chaque picker de couleur de l'e-mail.

• Styles du module

Cela permet de définir les couleurs (d'arrière-plan global et du contenu de bloc) ainsi que les espacements de manière uniforme (voir "Éditer les styles d'un module" ci-dessus pour plus de détails).

La différence ici est que ces couleurs sont appliquées à l'ensemble de l'e-mail, donc la couleur d'arrière-plan correspond à la "couleur de ligne" pour tous les modules.

• Styles de texte

Cela permet également de définir des styles de texte applicables à l'ensemble de votre template. Par défaut, 3 styles de titre, 1 style pour les paragraphes, 1 style dit "en ligne" (permettant de modifier le style d'un fragment de texte en particulier sans modifier tout le style du paragraphe), 1 style pour les liens et 1 style pour les boutons sont disponibles. Si vous utilisez un template de design personnalisé, d'autres styles peuvent être disponibles.

Pour chaque style, vous avez la possibilité de paramétrer :

• la couleur du texte

• sa taille en pixels

• la police du texte, parmi une liste étendue de polices pré-sélectionnées compatibles avec les différents moteurs e-mails. Si vous bénéficiez d'un template personnalisé, d'autres polices peuvent être disponibles.

Les intitulés des styles sont une suggestion sur leur usage, mais si vous avez besoin de 2 polices différentes pour votre corps de texte, rien ne vous empêche d'utiliser le style 'Heading 3' à cet effet, par exemple.

En effet, vous pouvez directement changer le style d'un morceau de texte dans le corps du template, ou en appliquez un s'il n'a pas de style par défaut.

• Styles bouton

Ceci vous permet de modifier les styles de tous les boutons "call to action" de votre e-mail à la fois (voir "Éditer les styles de bouton" ci-dessus pour plus de détails).

Limitations Outlook

Outlook est la messagerie d'entreprise par excellence. Si elle est moins présente dans un contexte B2C, la compatibilité avec Outlook n'en reste pas moins un enjeu important de la conception de vos e-mails.

Un enjeu, mais aussi un challenge, car de tous le marché, Outlook est la messagerie offrant le moins de compatibilité avec les fonctionnalité modernes du monde de l'e-mail. En effet, le moteur de cette messagerie est basé sur un autre logiciel bien connu de Microsoft, à savoir... Word, le traitement de texte.

Cela implique des contraintes et des limitations sur ce qui est possible dans les différentes modifications de style (sans qu'elles soient liées à l'éditeur Actito, mais bien aux fonctionnalités compatibles avec Outlook).

• Polices

Toutes les polices disponibles, y compris l'extension de la liste en été 2022, sont des polices dites "web safe", c'est-à-dire qu'elles sont pré-installées sur tous les systèmes d'exploitation. Les polices dites "google fonts" proposent plus de possibilités mais aussi une bien moins grande compatibilité, si bien qu'elles nécessitent toujours une police de remplacement. Elles ne sont pas disponibles par défaut dans l'éditeur mais uniquement sur demande dans les templates personnalisés.

• Boutons

  • Si un bouton est laissé sans lien, Outlook va casser l’affichage comme si le texte collait aux bords.

  • Les rayons de bordure (coins arrondis) ne sont pas pris en charge.

  • Les boutons avec deux lignes de texte pourraient afficher un “double-bouton” (le bouton double de volume en hauteur).

• Bordures/Espacement

L'affichage des bordures en bas et les bordures à droites peut causer des problèmes d'affichage : pas d'affichage pour une bordure de 1 pixel, affichage de moitié (1 pixel) pour une bordure de 2 pixels, etc.

Il en va de même pour les bordures des boutons.

Changements historicisés

Les actions suivantes sont enregistrées dans l'historique de session :

• Modification de texte

• Modification d'une image

• Changement de couleur d'un bouton

• Suppression d'une condition d'affichage

• Ajout d'une condition d'affichage

• Modification d'une boucle de personnalisation

• Suppression d'une boucle de personnalisation

• Suppression du lien d'une image

• Import du contenu d'une autre langue

• Import du contenu d'une autre version

• Import du contenu d'un fichier Zip

• Import d'un produit du catalogue

• Import d'un article RSS

• Import de tous les articles RSS

• Changement des styles globaux

• Déplacement d'un module

• Ajout d'un module

• Suppression d'un module

• Changement des styles d'un module

• Suppression de tous les modules

Restaurer une version précédente

Cliquez sur n'importe quelle version enregistrée pour la prévisualiser.

Si vous voulez retourner à une version précédente de votre contenu, sélectionnez sa prévisualisation, puis cliquez sur "Restaurer" au dessus du volet latéral.

Vous quitterez l'historique de session pour revenir dans l'éditeur... tel qu'il était auparavant !

Restaurer une version précédente est un changement enregistré. Cela signifie que vous pouvez aussi l'annuler.

Visualiser le rendu sur smartphone

A tout moment, vous avez la possibilité d'afficher un aperçu de ce que donnerait votre message sur un smartphone en cliquant sur le l'icône "smartphone" en haut de la page, au milieu.

Vous pouvez ensuite rebasculer sur l'affichage sur ordinateur en cliquant sur l'icône "écran d'ordinateur".

Importer le contenu

Ce bouton vous permet d'importer un contenu HTML. Le fichier doit préalablement être zippé.

Vous pouvez choisir d'importer les styles ou pas.

Importer le contenu d'une autre langue

Si votre campagne est multilingue, vous avez la possibilité d'importer le contenu d'une autre langue de la campagne.

Ceci vous permettra, par exemple, de ne pas avoir à charger toutes les images deux fois si elles doivent rester identiques, ou à redéfinir les styles. Vous pourrez ainsi vous concentrer exclusivement sur l'édition du texte et à la définition des éventuels liens.

Cette action remplacera le contenu actuel par celui de la langue choisie, sans aucune possibilité de retour en arrière.

Supprimer l'ensemble des modules

Ce bouton vous permet de supprimer tout le contenu pour recommencer depuis un canevas vide.

Cette opération est irréversible.

Modifier la langue d'édition

Si votre campagne est multilingue, la langue d'édition actuelle est renseignée à droite des boutons "Options" et "Personnalisations".

Vous pouvez directement changer de langue via le menu déroulant. Le changement n'est possible que quand l'e-mail est en statut "Enregistré" (et non "En cours d'enregistrement" après une modification).

Vous pouvez également sélectionner la langue à droite de l'écran quand vous êtes hors de l'éditeur, puis retourner en mode édition en cliquant sur le bouton "Éditeur" tout à gauche

Créer un nouveau message

Depuis l'écran de définition, vous avez la possibilité de supprimer tout le contenu de votre e-mail pour créer un nouveau en repartant de zéro.

Pour cela, sélectionnez le bouton "Plus" puis "Supprimer le message existant".

Ce bouton vous permettra notamment de retourner à la page de sélection du template pour vous baser sur un tout autre template.