Nous avons un faible pour les courriels colorés. Un style que nous aimons particulièrement (et que nous voyons souvent utilisé) est celui qui utilise des blocs de couleur, ou blocs de couleur : environ la moitié du courriel a une couleur de fond surlignée tandis que l'autre moitié est blanche. Il s'agit d'une technique simple qui est largement utilisée dans les boîtes aux lettres. Dans ce tutoriel, nous expliquerons comment créer un e-mail avec blocage des couleurs en quelques étapes simples.
Un exemple d’inspiration : Offscreen Dispatch
Offscreen est un magazine imprimé et une newsletter hebdomadaire "qui pose une réflexion réfléchie et anthropocentrique sur la technologie et le web". Le bulletin d'information s'appelle Offscreen Dispatch, dont nous avons maintes fois admiré le design simple et distinct. Offscreen utilise la même technique de blocage des couleurs dans chaque e-mail, ce qui a pour effet de faire ressembler l'e-mail à une page de magazine. La partie supérieure, où le web designer Kai Brach écrit une note aux abonnés, est toujours rose. Le reste de l'e-mail est toujours blanc.
Il n'y a rien de particulièrement pertinent, ni art ni photographie, mais la mise en page dynamique, le texte bien formaté et le design en couleur font de cet e-mail un ensemble bien intégré.
Le design est également facile et ne nécessite aucun codage dans l'éditeur BEE. Plongeons dans le vif du sujet ! Ouvrez l'éditeur BEE et suivez les étapes ci-dessous.
Etape 1 : Créez la structure
Ouvrez l'éditeur BEE dans votre plate-forme MailUp et commencez avec un modèle de base à une colonne, vide. Avant de commencer à faire glisser les éléments de la structure, prenez une minute pour examiner le courriel d'envoi hors écran afin d'identifier les éléments de la structure. Le courriel alterne entre des structures à une et deux colonnes, ce qui est un modèle facile à assembler dans BEE.
Déplacez ensuite les blocs correspondants dans le menu Modules à droite et pour cet e-mail, nous aurons besoin des deux premiers types de modules (un seul bloc et deux blocs).
Etape 2 : Arranger les blocs de contenu avec du texte/des images
Maintenant que nous avons créé le cadre de notre e-mail, faites glisser les blocs de contenu qui correspondent au type de contenu spécifique : texte et/ou image, que nous voulons dans chaque section. Ensuite, collez le texte et faites glisser les images. Je vous donnerai un petit guide en 3 étapes pour placer le contenu. En commençant par la première ligne, l'en-tête, voici comment faire:
- Insérer une structure à deux colonnes:
- Ajouter des blocs de texte à gauche ; un bloc de contenu d'image à droite:
- Insérer le texte et l'image:
Nous répétons la même opération pour chaque module du message et conclure cette étape avec l’ajout de texte.
Etape 3 : Formater les couleurs de fond
C'est maintenant la partie la plus amusante. Voyez comme il est facile de créer l'effet de blocage des couleurs. Tout d'abord, pour faire correspondre la nuance exacte de rose pâle du courriel Offscreen Dispatch, nous avons utilisé HTML-Color-Codes.info pour identifier la couleur de l'image dans l'en-tête. HTML Color Codes identifie notamment le code hexadécimal comme #F5BBA2 pour appliquer la bonne couleur à la première ligne.
La couleur sera ainsi continue bord à bord ! Maintenant, complétons le bloc rose. Nous allons simplement sélectionner la ligne suivante et refaire la même chose. De manière simple et intuitive, nous avons créé des blocs de couleur.
Etape 4 : formatage du texte
Nous allons compléter le courriel avec quelques astuces de formatage. Commençons par le texte.
- Choisissez une police par défaut pour votre courriel
Au lieu de parcourir chaque bloc de contenu pour choisir la police de votre courriel, allez dans le menu Paramètres à droite et sélectionnez la police que vous voulez utiliser pour l'ensemble du courriel.
Ensuite, vous pouvez changer la police de l'en-tête ou sélectionner les sections que vous voulez.
- Ajustez la taille de la police
Prenez n'importe quel bloc de texte et utilisez le menu déroulant pour ajuster la taille de la police.
- Personnalisez les couleurs du texte
Utilisez le même menu pour choisir les couleurs que vous préférez. Encore une fois, utilisez le même code couleur pour obtenir la nuance précise.
- Formater le style des liens
N'oubliez pas les liens ! Dans le même menu Paramètres où vous avez choisi la police de corps par défaut, vous pouvez également formater le style du lien. Dans ce cas, choisissez noir.
- Ajustez l'interligne
Assurez-vous que le corps du texte du courriel comporte de l'espace pour "respirer". Pour tout bloc de contenu que vous modifiez, ajustez la hauteur de l'interligne.
- Tip : Comment dupliquer les formulaires
Si vous avez passé beaucoup de temps à formater le texte d'une ligne particulière, vous pouvez simplement le dupliquer, au lieu de reproduire manuellement les mêmes paramètres dans une autre ligne. Pour ce faire, touchez la ligne que vous voulez copier. Cliquez ensuite sur l'image de la double boîte à droite. La ligne est copiée. Ensuite, faites-le glisser et saisissez l'icône directionnelle à gauche pour placer la nouvelle ligne dans l'e-mail.
Etape 5 : Ajustez le rembourrage et l'espacement
Cette étape est l'une des plus importantes. Avant de remplir le courriel, observez attentivement l'espacement entre les blocs de contenu. S'il y a encore trop d'espaces ou trop peu d'espace, il est très facile de faire des ajustements. Par exemple, il y a encore un espace entre "Hors écran" et "Envoi" dans l'en-tête de notre projet de courriel. Pour augmenter la valeur, touchez le bloc de contenu, faites défiler vers le bas jusqu'à Propriétés de la colonne dans le menu de droite et assurez-vous que Autres options sont activées dans Rembourrage. Ensuite, vous pouvez réduire (ou augmenter) l'espacement sur n'importe quel côté du contenu.
Etape 6 : prévisualisation de l'e-mail fini !
Ok, il manque encore une dernière étape. Lorsque vous créez un courriel, vérifiez toujours l'aperçu pour vous assurer que le message s'affiche correctement sur le bureau et le portable.