L'application d'un style à un message peut s'effectuer de plusieurs façons :
Style global - Définit de manière générale la façon dont les titres et d'autres textes s'affichent, ainsi que l'espacement général, la largeur et la couleur de l'arrière-plan. Le style global s'applique à l'ensemble du message, mais certains styles peuvent être remplacés au niveau des composants et/ou des lignes/colonnes.
Style des composants - Permet de définir la couleur de l'arrière-plan du composant. Un accès direct aux options de style CSS est également disponible. Lorsque des modifications de la disposition sont apportées au composant, le style global est rejeté.
Style des lignes - Offre des options de style au niveau des lignes. Lorsqu'au moins deux colonnes ont été ajoutées, un ratio supplémentaire de largeur de colonne est configurable.
Style des colonnes - Offre des options de style et de disposition au niveau des colonnes.
Style global
Le style global est accessible directement depuis le message en mode Édition, par le biais du panneau situé sur le côté droit, après avoir cliqué sur le lien Style .
Vous pouvez définir un style pour les éléments suivants:
- Couleur de fond - Définit la couleur d'arrière-plan de la fenêtre du navigateur.
- Largeur - Définit la largeur du message dans lequel les lignes et les colonnes peuvent être déplacées. La largeur est par défaut fixée à 600px.
- Titres, Texte normal et Boutons - Définit la police et la couleur du texte. Pour les boutons, la couleur d'arrière-plan peut également être définie.
- Lignes - Définit la couleur d'arrière-plan des lignes.
- Colonnes- Définit la couleur d'arrière-plan des colonnes.
- Espacement - Définit l'espacement entre les lignes et les colonnes. Utilisez le curseur pour augmenter/diminuer l'espacement.
- Marge mobile - Ajoute automatiquement un espacement autour du contenu du message lorsqu'il est affiché sur un appareil mobile.
Il est possible d'éditer les styles de certains de ces éléments directement dans l'éditeur de style. Pour accéder à l'éditeur de style, cliquez sur l'icône de crayon. Un aperçu est disponible.
Remarque: Des variables peuvent également être utilisées pour affecter le style du message final (par exemple, pour définir des couleurs différentes pour des marques différentes).
Remarque: Le style global des templates peut être verrouillé/déverrouillé.
Exemple: Nous
avons changé la couleur de police du texte de notre template, ainsi que les couleurs
utilisées pour les boutons. Nous avons également défini un espacement entre les lignes
et les colonnes. 
Style des composants
Des options de disposition et de style spécifiques peuvent être définies pour certains composants individuels, en cliquant sur le crayon vert lors du survol d'un composant.
Pour plus d'informations sur les options de chaque composant, consultez les sections suivantes :
Style des lignes
Les options de style des lignes peuvent être définies en cliquant sur le crayon bleu en haut à droite, tout en passant la souris sur une ligne.
Les propriétés de la ligne s'affichent alors à droite de l'écran.
Lorsqu'au moins deux colonnes ont été ajoutées à la ligne, le rapport de largeur de colonne peut être défini.
Exemple:
Nous avons un message contenant une ligne d'en-tête avec 3 colonnes (image, liens vers différentes sections du site Web et texte du copyright) :
Définissez
le style de ligne dans l'en-tête à [1
| 2 | 1].
De cette façon, les liens vers les sections spécifiques du site web ont
plus de place dans le message :
La couleur d'arrière-plan, les appareils sur lesquels la ligne sera affichée et le comportement mobile peuvent être définis.
Le comportement mobile définit la manière dont le contenu s'affichera
sur un appareil mobile. Vous pouvez choisir de le laisser en affichage horizontal ou
le modifier en affichage vertical.
Vous pouvez également accéder à l'éditeur
de style (en cliquant sur le crayon) et apporter des modifications directement dans le CSS.
Exemple:
Dans l'exemple d'en-tête ci-dessus, nous définissons le style de ligne comme suit :
- couleur d'arrière-plan : #c3e1e2
Le résultat est le suivant :
Pour affiner le style, nous cliquons sur l'icône de crayon et définissons le style personnalisé suivant :
- padding : 25 px ;
- border-bottom-width : 1 px ;
- border-bottom-style : solid ;
- border-bottom-color : #000000 ;
Le résultat est le suivant :
Remarque: La disposition de la ligne des templates peut être verrouillée/déverrouillée.
Style des colonnes
Le style des colonnes est accessible en cliquant sur l'icône jaune lors du survol d'une colonne.
Les options suivantes sont disponibles :
La couleur d'arrière-plan et la disposition des colonnes (alignement du contenu) peuvent être définies ici. Vous pouvez également accéder à l'éditeur de style (en cliquant sur le crayon) et apporter des modifications directement dans le CSS.
Exemple :
Dans l'exemple d'en-tête mentionné précédemment, nous avons défini le style de la colonne centrale (contenant les liens vers les sections du site Web) comme suit :
- couleur d'arrière-plan : #caf4d6
- disposition des colonnes "horizontale" avec alignement du texte "central"
Le résultat est le suivant :
Pour affiner le style, nous cliquons sur l'icône de crayon et définissons le style personnalisé suivant :
- border-style : dashed ;
- border-color : #4258e8 ;
border-width: 2 px;
Le résultat est le suivant:
