Tutoriel : comment ajouter des images de fond aux courriels

Publié le : 03 décembre 20207 mins de lecture

Découvrez un tutoriel rapide pour apprendre à insérer des images de fond dans les e-mails, sur lesquelles vous pouvez superposer du texte, d’autres images et des boutons CTA. Résolution de divers problèmes liés à l’affichage des images. Pour le tutoriel intéressant d’aujourd’hui, vous allez découvrir l’une des fonctionnalités les plus intéressantes de l’éditeur BEE de MailUp, grâce à laquelle vous pouvez ajouter des images de fond à vos messages électroniques. Il est sûrs qu’il deviendra votre nouvel outil de conception d’e-mails préféré, alors, de quoi s’agit-il ?

Images de fond : quelques exemples

Si vous cherchez bien, vous trouverez des images avec du texte qui se chevauchent dans la plupart des e-mails de votre boîte de réception. Voici un exemple tiré de Skillshare : un autre de Huckberry, un de Brit Co et un d’Everlane. Vous pouvez continuer éternellement l’ajout de texte aux images cependant, même si elles y ressemblent, ces images ne sont pas de véritables images de fond. En fait, le texte et l’image font partie d’un seul et même format de fichier JPG, PNG ou autre. Le texte n’est pas du texte brut, mais fait partie de l’image et a été ajouté avec Photoshop ou un autre outil. Par conséquent, si l’affichage des images est bloqué, le texte ne sera pas non plus affiché. De plus, pour modifier le texte, vous devez modifier l’image. Aujourd’hui, vous allez voir comment créer de véritables images de fond par courrier électronique avec du texte en clair superposé. Cela signifie que le texte est affiché même si les images ne sont pas chargées. De plus, l’édition du texte ne nécessite pas de modifier l’image. Découvrez également comment répéter une image sur une ligne entière pour créer des motifs ou des textures.

Comment insérer des images de fond dans les e-mails

Aujourd’hui, comme source d’inspiration, le formulaire d’e-mail Litmus suivant sera utilisé puis recréé avec l’éditeur MailUp.

Tutoriel vidéo

Voulez-vous voir rapidement comment ajouter des images de fond à vos e-mails ? Regardez les tutoriel vidéo (en anglais) et suivez les étapes ci-dessous:

Choisissez un modèle de courriel

Ouvrez l’éditeur BEE MailUp (ou créez un compte de test) et choisissez un modèle pour commencer. Il est généralement le modèle de base à une colonne.

Activer l’option Image de fond

Cliquez simplement sur n’importe quelle ligne de contenu pour afficher l’option Image de fond dans le menu Structure du panneau de droite. Activez cette option (cliquez simplement sur le bouton de droite et assurez-vous qu’il est bleu), puis cliquez sur Changer d’image pour rechercher une photo.

Rechercher une image

Vous pouvez trouver des photos de stock gratuites et en haute résolution directement dans l’éditeur, choisissez-en une pour ce projet (ou bien, téléchargez votre propre photo ou collez l’adresse URL d’une image). Sur l’écran suivant, ouvrez un de vos dossiers à partir du gestionnaire de fichiers. Ensuite, cliquez sur le bouton « Recherche d’images gratuites » du CTA en haut de la page. S’inspirant du courriel de Litmus, recherchez « étoiles » ou « ciel nocturne » et voyez ce qui en ressort. Sélectionnez une image à importer, puis saisissez-la dans le courriel.

Glissez et déposez le contenu

En utilisant la boîte déjà dans le modèle, ajoutez l’image du calendrier en la faisant simplement glisser. Continuez à ajouter les boîtes de contenu pour le logo Litmus, le texte et le bouton CTA. Après avoir glissé et déposé chaque formulaire, jetez un coup d’œil à la mise en page du courriel que vous créez. Notez que le texte, les images et le bouton CTA sont au-dessus de l’image de fond. Cela vous permet d’insérer du texte en clair et un bouton CTA à l’épreuve des balles, comme il est recommandé toujours, afin de pouvoir créer l’intégralité du courriel dans l’éditeur BEE. Pour finir, ajoutez d’autres images et du texte si nécessaire, puis mettez en forme les styles, les couleurs et remplissez. Voici à quoi ressemble le travail fini. Avec l’éditeur BEE de MailUp, l’insertion d’images de fond dans les courriels est extrêmement rapide et facile. Ainsi, vos messages gagneront non seulement en esthétique, mais aussi en efficacité et en fonctionnalité.

Paramètres de l’image de fond

Une fois que vous aurez sélectionné l’image de fond, vous pourrez définir la façon dont elle apparaîtra dans le courriel. Il existe trois principaux paramètres : Full Width, Tile and Center. Utilisez ces paramètres pour trouver le meilleur réglage pour votre image de fond. Par exemple, sélectionnez Tile pour créer un motif. Cette fonction est particulièrement utile si l’image ne couvre pas toute la largeur du courriel comme vous le souhaitez. Comme pour toute autre image dans BEE, vous pouvez également effectuer des modifications à l’aide de l’éditeur de photos intégré. Vous pouvez découper l’image, ajouter des filtres et des effets spéciaux, etc.

Compatibilité avec les clients de messagerie électronique et définition d’une autre couleur de fond

Comme pour tout projet de conception avancée de messagerie électronique, vous devez vérifier si vos appareils mobiles et vos clients de messagerie électronique prennent en charge les images de fond. Selon les récents tests, les clients de messagerie qui ne prennent pas en charge l’affichage d’images d’arrière-plan dans les messages électroniques sont les suivants : pour ces clients de messagerie (et pour garantir les meilleurs résultats si l’affichage de l’image est bloqué), veillez à définir une couleur d’arrière-plan dans la ligne concernée comme alternative au cas où l’image d’arrière-plan ne serait pas affichée. Pour ce faire, il suffit de sélectionner la ligne puis de se rendre dans le menu Structure pour choisir une couleur de fond de la ligne ou une couleur de fond du contenu.

En conclusion

Optimiser le courrier électronique en termes d’esthétique, de fonctionnalité et d’efficacité est rapide et facile grâce aux fonctionnalités de l’éditeur BEE de MailUp. Une image de fond insérée vous permet de résoudre brillamment certains problèmes critiques liés à l’utilisation d’images dans les courriels, tout en conservant un impact graphique maximal. Si vous voulez apprendre à créer de beaux courriels, enfin, pourquoi ne pas télécharger le livre blanc gratuit où vous trouverez de nombreux conseils de conception de courriels ?