Tutoriel : Comment ajouter des images d'arrière-plan aux e-mails

Consultez un didacticiel rapide pour apprendre à insérer des images d'arrière-plan dans les e-mails, sur lesquelles vous pouvez superposer du texte, d'autres images et des boutons CTA. Correction de divers problèmes avec l'affichage des images. Pour le tutoriel intéressant d'aujourd'hui, vous découvrirez l'une des fonctionnalités les plus intéressantes de l'éditeur BEE de MailUp, à travers laquelle vous pouvez ajouter des images d'arrière-plan à vos e-mails. Il deviendra à coup sûr votre nouvel outil de conception d'e-mails préféré, alors qu'est-ce que c'est?

Images de fond : quelques exemples

Si vous regardez bien, vous trouverez des images avec du texte superposé sur la plupart des e-mails de votre boîte de réception. Voici un exemple de Skillshare : un de Huckberry, un de Brit Co et un d'Everlane. Vous pouvez continuer à ajouter du texte aux images pour toujours, cependant, même si elles y ressemblent, ces images ne sont pas de véritables images d'arrière-plan. En fait, le texte et l'image font partie du 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é à l'aide de Photoshop ou d'un autre outil. Ainsi, si l'affichage des images est bloqué, le texte ne s'affichera pas non plus. De plus, pour modifier le texte, vous devez modifier l'image. Aujourd'hui, vous verrez comment créer de véritables images d'arrière-plan d'e-mails avec une superposition de texte brut. 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 l'édition de l'image. Apprenez également à répéter une image dans une ligne complète pour créer des motifs ou des textures.

Comment insérer des images d'arrière-plan dans les e-mails

Aujourd'hui, pour vous inspirer, le formulaire de courrier électronique Litmus suivant sera utilisé puis recréé à l'aide de l'éditeur MailUp.

Didacticiel vidéo

Vous voulez savoir comment ajouter des images d'arrière-plan à vos e-mails ? Regardez les didacticiels vidéo et suivez les étapes ci-dessous :

Choisissez un modèle d'e-mail

Ouvrez l'éditeur BEE MailUp (ou créez un compte d'essai) et choisissez un modèle pour commencer. C'est généralement le modèle de base d'une colonne.

Activer l'option Image d'arrière-plan

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

Rechercher une image

Vous pouvez trouver des photos gratuites en haute résolution directement dans l'éditeur, en choisir une pour ce projet (ou télécharger votre propre photo ou coller une URL d'image). Sur l'écran suivant, ouvrez l'un de vos dossiers à partir du gestionnaire de fichiers. Ensuite, cliquez sur le bouton "Trouver des images gratuites" dans le CTA en haut de la page. Inspirez-vous de l'e-mail de Litmus, recherchez "étoiles" ou "ciel nocturne" et voyez ce qui se passe. Sélectionnez une image à importer, puis insérez-la dans l'e-mail.

Faites glisser et déposez du 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 zones de contenu pour le logo Litmus, le texte et le bouton CTA. Après avoir fait glisser et déposer chaque formulaire, examinez la mise en page de l'e-mail que vous créez. Notez que le texte, les images et le bouton CTA sont au-dessus de l'image d'arrière-plan. Cela vous permet d'insérer du texte brut et un bouton CTA à l'épreuve des balles, comme il est toujours recommandé, afin que vous puissiez créer l'intégralité de l'e-mail dans l'éditeur BEE. Enfin, ajoutez plus d'images et de texte selon vos besoins, puis mettez en forme les styles, les couleurs et les remplissages. Voici à quoi ressemble le travail fini. Avec l'éditeur BEE de MailUp, insérer des images d'arrière-plan dans les e-mails est extrêmement simple et rapide. Ainsi, vos messages gagneront non seulement en esthétisme, mais également en efficacité et en fonctionnalité.

Réglage de l'image d'arrière-plan

Une fois que vous avez sélectionné l'image d'arrière-plan, vous pouvez définir comment elle apparaîtra dans l'e-mail. Il existe trois paramètres principaux : Pleine largeur, Mosaïque et Centre. Utilisez ces paramètres pour trouver les meilleurs paramètres pour votre image d'arrière-plan. Par exemple, sélectionnez Mosaïque pour créer un motif. Cette fonctionnalité est particulièrement utile si l'image ne couvre pas toute la largeur de l'e-mail comme souhaité. Comme pour toute autre image dans BEE, vous pouvez également apporter des modifications avec l'éditeur de photos intégré. Vous pouvez recadrer l'image, ajouter des filtres et des effets spéciaux, etc.

Prise en charge des clients de messagerie et définition d'une autre couleur d'arrière-plan

Comme pour tout projet de conception de courrier électronique avancé, vous devez vérifier si vos appareils mobiles et vos clients de messagerie prennent en charge les images d'arrière-plan. D'après des tests récents, les clients de messagerie qui ne prennent pas en charge l'affichage d'images d'arrière-plan dans les e-mails sont :. au cas où l'image d'arrière-plan ne s'afficherait pas. Pour cela, il suffit de sélectionner la ligne puis d'aller dans le menu Structure pour choisir une couleur de fond pour la ligne ou une couleur de fond pour le contenu.

En conclusion

L'optimisation de l'esthétique, des fonctionnalités et de l'efficacité des e-mails est simple et rapide grâce aux fonctionnalités de l'éditeur BEE de MailUp. Une image d'arrière-plan intégrée vous permet de résoudre avec brio certains problèmes critiques liés à l'utilisation d'images dans les e-mails, tout en conservant un impact graphique maximal. Si vous voulez enfin apprendre à créer de beaux e-mails, pourquoi ne pas télécharger le livre blanc gratuit où vous trouverez de nombreux conseils de conception d'e-mails.

Recommended For You

About the Author: RobertP

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *