Points clés à retenir

• Canva gère le design visuel. Le HTML gère la structure de l’email. Ce sont deux éléments distincts, et le workflow les relie. Vous créez votre design dans Canva, exportez les visuels, puis utilisez l’IA pour générer le HTML qui transforme ces visuels en un email prêt à être envoyé.
• Concevez pour l’email avant d’exporter. Les emails font généralement 600 px de large et sont présentés sur une seule colonne. Configurer ce format dans Canva avant de commencer votre design vous évite de devoir tout refaire plus tard.
• Hébergez vos images avant de construire le HTML. Un email n’intègre pas les images comme le fait un document. Vos images doivent disposer d’une URL publique, et le HTML pointe vers cette URL.
• L’IA génère la structure de l’email autour de vos visuels Canva. Vous décrivez votre design et fournissez les URL des images, et l’IA produit un HTML compatible avec les emails, avec vos images correctement positionnées.
• Les outils d’IA peuvent générer, déboguer et convertir du code HTML d’email à partir de descriptions en langage courant, mais testez toujours le code généré par l’IA avant l’envoi.
• L’éditeur HTML de Benchmark Email constitue la dernière étape. Collez le HTML, prévisualisez-le et envoyez. Inutile de reconstruire votre design dans un outil glisser-déposer.

 

Si vous êtes marketer dans une petite entreprise, Canva est probablement déjà ouvert dans un autre onglet. C’est là que vous créez vos posts pour les réseaux sociaux, vos visuels promotionnels, vos annonces de soldes, voire vos flyers d’événements. Les designs sont superbes. Puis vous essayez d’en transformer un en email, et vous vous heurtez à un mur.

Canva n’envoie pas d’emails. Vous ne pouvez pas simplement exporter un design et le déposer dans votre plateforme d’emailing comme vous le feriez en enregistrant un JPEG pour le publier sur Instagram. L’email a sa propre structure, son propre format de fichier et ses particularités quant au chargement des images et au comportement des mises en page selon les clients de messagerie.

Pourtant, l’écart entre un design Canva terminé et un email envoyé est moins grand qu’il n’y paraît. Cet article vous guide à travers l’ensemble du processus : ce qu’il faut concevoir en pensant à l’email, comment exporter ce dont vous avez besoin, comment utiliser l’IA pour construire la structure HTML autour de vos éléments visuels, et comment tout assembler dans l’éditeur HTML de Benchmark Email avant de l’envoyer.

Pourquoi vous ne pouvez pas simplement exporter un design Canva sous forme d’email

Le réflexe le plus courant consiste à exporter votre design Canva en JPEG ou en PNG et à le coller dans un email sous la forme d’une seule grande image. Techniquement, cela fonctionne, mais cela pose de vrais problèmes :

• La plupart des clients de messagerie bloquent les images par défaut. Un abonné qui ne vous a pas autorisé voit un email vide, sans aucun contexte.
• Les emails composés d’une seule image nuisent à la délivrabilité. Les filtres anti-spam vérifient l’équilibre entre texte et images. Un email composé à 100 % d’images et à 0 % de texte déclenche des alertes.
• Les images ne s’adaptent pas correctement sur mobile. Une image de 600 px de large réduite à 375 px sur un téléphone peut rester lisible, mais vos polices deviennent minuscules et votre bouton CTA devient difficile à toucher.
• Vous ne pouvez pas personnaliser ni suivre les liens intégrés à une image. Si votre design inclut un bouton « Acheter maintenant » en tant qu’élément visuel dans un JPEG, ce n’est pas un lien cliquable. Vous ne pouvez pas savoir qui a cliqué dessus, ni utiliser des champs de fusion pour personnaliser le texte.

La bonne approche consiste à utiliser Canva pour ce qu’il fait de mieux, à savoir concevoir les éléments visuels, et le HTML pour ce qu’il fait de mieux : structurer un email fonctionnel et lisible autour de ces éléments.

Étape 1 : concevoir dans Canva en pensant à l’email

Vous n’avez pas besoin de refaire ce que vous avez déjà créé. Mais pour vos prochains designs d’emails sur Canva, quelques choix en amont vous feront gagner du temps par la suite.

• Définissez la taille de votre canvas sur 600 x 800 px. C’est la largeur standard d’un email. La hauteur peut varier, mais commencer à 800 px vous laisse assez de place pour un en-tête, une section de corps de texte et un CTA, sans impression d’encombrement.
• Concevez des sections claires et distinctes. Un email est composé de modules empilables : un en-tête avec votre logo, une image principale ou un visuel, une section de texte, un bouton CTA, éventuellement un pied de page. Si vous concevez votre mise en page Canva en bandes horizontales distinctes, ces bandes deviennent les blocs de construction de votre structure HTML.
• Utilisez du vrai texte pour tout ce qui doit être lisible, cliquable ou personnalisé. Votre image principale ou votre photo de produit reste un fichier image. Votre titre, le corps du texte et le bouton CTA doivent exister en tant que véritable texte HTML dans l’email, et non comme du texte intégré à une image. Concevez le texte dans Canva comme référence visuelle, mais prévoyez de le reproduire en HTML.
• Exportez les éléments visuels séparément. Votre image principale, votre photo produit, votre graphique d’arrière-plan et votre logo doivent chacun faire l’objet d’un export distinct depuis Canva, et non d’une seule image combinée contenant du texte que vous voudrez reproduire en HTML.

Étape 2 : exportez vos ressources depuis Canva

Une fois votre design prêt, exportez chaque composant visuel dans un fichier séparé.

• Pour les photos et les graphiques en couleurs : exportez au format JPG. Vous obtenez une bonne qualité avec un fichier plus léger qu’en PNG.
• Pour les logos, les icônes et les images à fond transparent : exportez au format PNG. La transparence est conservée.
• La taille des fichiers compte. Les images volumineuses ralentissent le chargement et peuvent alourdir la taille de votre email. Dans Canva, vous pouvez redimensionner votre export. Pour une image principale dans un email de 600 px de large, l’image ne doit pas dépasser 1 200 px de large (2x pour les écrans Retina). Réduisez sa taille avant l’export plutôt que de laisser le client de messagerie s’en charger.
• Nommez vos fichiers clairement. Vous y ferez référence par leur nom de fichier lors de leur hébergement : un nom comme promotion-juin-image-principale.jpg est donc plus utile que design-export-final-v3.jpg.

Étape 3 : hébergez vos images

Un email n’intègre pas les images comme le fait un document Word ou un PDF. Un email HTML pointe vers des images hébergées en ligne à l’aide d’une URL. Si l’image n’est pas hébergée publiquement, vos abonnés ne la verront pas.

Options d’hébergement d’images :

• Votre propre site web. Si vous avez un site WordPress, Webflow ou Squarespace, vous pouvez importer vos images dans votre médiathèque et utiliser leur URL publique.
• Google Drive ou Dropbox avec partage public. Importez le fichier, réglez le partage sur « Tous les utilisateurs disposant du lien » et utilisez le lien direct. Sachez que certains clients de messagerie et filtres anti-spam peuvent se méfier des liens d’hébergement de fichiers : il est donc préférable d’utiliser votre propre domaine lorsque c’est possible.
• Un service d’hébergement d’images gratuit. Si vous n’avez pas de site web, des outils comme Imgur, Cloudinary (offre gratuite) ou Postimages vous permettent d’importer une image et d’obtenir instantanément une URL publique. Importez votre fichier exporté depuis Canva, copiez le lien direct de l’image, et le tour est joué.

Une fois chaque image hébergée, copiez et enregistrez chaque URL avant de commencer à construire le HTML. Vous en aurez besoin à l’étape suivante.

Étape 4 : utiliser l’IA pour générer le HTML de l’email autour de vos éléments visuels

C’est ici que tout le processus prend forme. Vous avez conçu votre email dans Canva, exporté les éléments visuels et vos URL d’images sont prêtes à l’emploi. Il ne vous reste plus qu’à décrire la mise en page à un outil d’IA et à lui demander de générer la structure HTML.

Voici un exemple de prompt :

« Génère un modèle d’email HTML responsive avec une mise en page basée sur des tableaux et du CSS inline. L’email doit faire 600 px de large, centré sur un fond clair (#f8f8f8).

Zone de contenu : fond blanc, remplissage de 32 px.

La structure doit être la suivante :

1) Une image de logo en haut, centrée, avec cette URL : [your-logo-url].

2) Une image hero pleine largeur en dessous, avec cette URL : [your-hero-url].

3) Un titre centré en Arial gras 26 px, couleur #1A1A1A, texte : « Nos soldes d’été commencent maintenant. »

4) Deux courts paragraphes de corps de texte en Arial 16 px, couleur #555555, interligne 1,6.

5) Un bouton CTA centré : couleur de fond #E83030, texte blanc, texte : « Profiter des soldes », lien vers [your-url], remplissage de 14 px en haut et en bas, de 28 px à gauche et à droite, rayon de bordure de 4 px. Ajoute des media queries pour qu’il soit responsive sur mobile à 600 px. »

L’IA vous renverra un code HTML complet, prêt à l’envoi. Vos images Canva apparaissent en contexte, votre texte est intégré en véritable texte HTML et votre CTA est un bouton correctement lié, et non une image.

Quelques conseils pour rédiger vos prompts :

• Indiquez les URL des images dans le prompt. L’IA ne peut pas accéder aux fichiers de votre ordinateur, mais elle peut utiliser une URL que vous lui fournissez.
• Décrivez les sections dans l’ordre. De haut en bas, comme un lecteur parcourrait l’email.
• Demandez explicitement du CSS inline. C’est essentiel pour la compatibilité avec les clients de messagerie. Si l’IA utilise par défaut un bloc <style> dans le head, demandez-lui de passer les styles en inline.
• N’hésitez pas à itérer. Collez le code HTML dans un navigateur pour le prévisualiser. Si quelque chose ne va pas, décrivez le problème à l’IA : « Le bouton est aligné à gauche, centre-le » ou « Ajoute 20 px d’espace supplémentaire entre l’image principale et le titre. »

Étape 5 : collez le code dans Benchmark Email et envoyez

Une fois votre code HTML prêt, passez à Benchmark Email :

1. Créez une nouvelle campagne et sélectionnez l’éditeur HTML.
2. Collez le code HTML généré dans l’éditeur.
3. Prévisualisez l’email en vue ordinateur et mobile.
4. Envoyez-vous un email de test pour le vérifier dans Gmail, Apple Mail et sur votre téléphone.
5. Apportez les derniers ajustements dans la vue code, mettez à jour votre objet d’email et le nom de l’expéditeur, puis envoyez.

Votre design Canva est désormais un email entièrement fonctionnel et délivrable, avec du vrai texte, de vrais liens et le suivi des clics. Ce qui ressemblait à une lacune importante dans votre flux de travail s’est révélé n’être qu’une série de petites étapes faciles à gérer.

Quelques points à surveiller

• Vérifiez que vos images se chargent bien. Dans votre email de test, regardez chaque image. Si certaines apparaissent comme des liens brisés ou des cadres vides, soit l’URL d’hébergement est incorrecte, soit l’image n’est pas accessible publiquement.
• Assurez-vous que tous les liens fonctionnent. Cliquez sur chaque lien de votre test : le CTA, le lien éventuel du logo et tous les liens textuels. Repérer une URL cassée lors d’un test vaut bien mieux que de la découvrir dans un rapport de campagne.
• Vérifiez l’affichage sur mobile. Ouvrez l’email de test sur votre téléphone. Vérifiez la taille des polices, les zones tactiles des boutons et le bon empilement des sections à deux colonnes.
• Surveillez la version texte brut. Benchmark Email génère automatiquement une version texte brut de votre email. Relisez-la pour vous assurer qu’elle est claire et que tous les liens importants apparaissent sous forme d’URL complètes.

Questions fréquentes

Puis-je utiliser un design Canva tel quel, exporté sous forme d’une seule grande image ?

Techniquement, oui, mais ce n’est pas recommandé. Une seule grande image est bloquée par défaut chez la plupart des abonnés, nuit à la délivrabilité, ne permet pas d’intégrer des liens cliquables dans le design et s’adapte mal aux mobiles. L’approche HTML décrite dans cet article donne de meilleurs résultats sur tous ces points.

Canva propose-t-il une option d’export intégrée pour les emails ?

Canva propose une fonctionnalité « Envoyer un email » dans certains plans, mais elle se limite à des modèles basiques et ne se connecte pas à des plateformes d’email marketing complètes. Pour des campagnes avec une véritable gestion de listes, un suivi des performances et une infrastructure de délivrabilité, la méthode décrite dans cet article (Canva pour le design et Benchmark Email pour l’envoi) reste la meilleure option.

Et si je ne veux pas utiliser l’IA pour générer le code HTML ?

Plusieurs options s’offrent à vous. Vous pouvez utiliser un modèle d’email préconçu dans Benchmark Email et y insérer vos images et textes Canva. Ou, si vous êtes à l’aise avec le HTML, vous pouvez écrire la structure manuellement en suivant les modèles de notre guide sur les emails HTML. L’IA reste la solution intermédiaire la plus rapide pour ceux qui ne sont pas développeurs.

Comment héberger mes images si je n’ai pas de site web ?

L’option la plus simple consiste à utiliser un service d’hébergement d’images gratuit. Des outils comme Imgur, Postimages ou Cloudinary (offre gratuite) vous permettent de télécharger une image et de générer une URL publique en quelques secondes. Vous pouvez aussi utiliser Google Drive ou Dropbox en activant le partage par lien public ; assurez-vous simplement que l’URL pointe directement vers le fichier image, et non vers une page d’aperçu.

À quelle fréquence puis-je réutiliser ce workflow ?

Aussi souvent que vous le souhaitez. Une fois que vous disposez d’un template HTML fonctionnel issu de votre premier projet Canva-vers-email, vous pouvez réutiliser cette structure pour toutes vos futures campagnes. Mettez à jour les images et les textes, ajustez les liens, et le cadre aux couleurs de votre marque reste en place. Le workflow complet ne prend plus de temps que la première fois.

Le HTML généré par l’IA fonctionne-t-il sur tous les clients de messagerie ?

Le HTML basé sur des tableaux avec du CSS inline est l’approche la plus compatible pour l’email, et c’est précisément ce que produisent les prompts de cet article. Il est toutefois conseillé de tester dans Gmail, Outlook et Apple Mail, car chaque client affiche le contenu de façon légèrement différente. La structure générée par l’IA gère les différences les plus courantes, et l’étape d’envoi de test permet de repérer tout le reste.