[Chapitre : Editeur responsive]
Construire en responsive

Structure du message

L'architecture globale du message responsive se construit par blocs.

1 - Éléments structurants
1.1 - Bloc
Les blocs définissent la structure de votre message. Il est possible d'imbriquer plusieurs blocs.
Dans l'idéal, lorsque le message a fini d'être structuré, chaque sous-conteneur ne doit avoir qu'une fonction.

Sur cet exemple, on retrouve la largeur (en jaune), un premier bloc, à l’intérieur duquel se trouvent quatre conteneurs.
Chacun de ces quatre blocs a une fonction différente, le premier est un titre, le deuxième une image, le troisième un texte et le dernier un bouton.

 

Cela se vérifie par le fil d'ariane (en haut à gauche, entouré ici en rouge), on retrouve bien les deux blocs imbriqués puis le titre.

1.2 - Multicilonne

L'outil "Multicolonne" se place à l’intérieur d'un bloc et permet également de structurer l'email. Il permet de construire une section en plusieurs blocs et mettre plusieurs types de contenu dans la même ligne.

2 - Éléments de remplissage

Ce sont les outils qui vont permettre d'insérer le contenu dans votre message. Il suffit donc de les glisser au sein des conteneurs et colonnes.

Pour avoir plus d'impact...

Pour améliorer le rendu visuel de votre création et qu'il soit plus impactant, certains paramètres peuvent être personnalisés tels que les espacements et marges, les bordures ou encore le fond.

1 - Les marges et les espacements d'un élément par rapport aux autres peuvent être modifié en jouant sur les espaces en haut, bas, gauche, et droite.

2 - Une bordure peut être ajoutée. Vous pourrez en modifier l'aspect (en continu, pointillés ou tirets), la largeur et la couleur.

3 - Il vous est possible d'ajouter une couleur de fond unie sous certains éléments de votre message.

4 - Vous pouvez aussi activer ou désactiver l’affichage d'un élément sur le desktop ou mobile selon le besoin.

La prévisualisation

La prévisualisation vous permet de tester si votre message a un rendu efficace sur les différents supports.

Vous pouvez ainsi voir le rendu de votre emailing sur les ordinateurs et mobiles selon la taille des écrans.

This post is also available in: English (Anglais)

Laisser un commentaire?

You must be logged in to post a comment.