Ajouter une image de fond à un modèle HTML personnalisé

Les informations de cet article s'appliquent uniquement à la version classique de . Pour apprendre à utiliser la nouvelle fonctionnalité, utilisez la fonctionnalité Créer un e-mail avec la nouvelle fonctionnalité.

Pour améliorer encore plus la conception de vos campagnes marketing, vous pouvez ajouter une image de fond au modèle Code votre propre modèle dans le système de création de modèles Mailchimp.

Les modèles HTML personnalisés sont une fonctionnalité avancée et sont recommandés pour les utilisateurs qui utilisent le codage personnalisé. Contactez votre développeur ou faites appel à un expert Mailchimp si vous avez besoin d'aide.

Dans cet article, vous apprendrez comment ajouter une image de fond à votre modèle HTML personnalisé.

Avant de commencer

Voici quelques choses à savoir avant de passer à cette étape.

• Il se peut que les images d'arrière-plan ne s'affichent pas dans tous les clients de messagerie électronique. Assurez-vous donc de savoir quels clients par e-mail prennent en charge les images d'arrière-plan en consultant l'article relatif au soutien technique CSS Email Client pour plus d'infos.
• Avec la taille des images, les campagnes peuvent s'afficher incorrectement dans les boîtes de réception de vos destinataires. Pour un meilleur résultat, sélectionnez une résolution de 920 x 1080 px ou moins, puis compressez l'image.
• Importez vos images sur un serveur public ou utilisez un service gratuit comme Imsur ou Flinkr, et utilisez un chemin d'accès HT qui pointe directement vers l'emplacement du fichier dans le code. N'oubliez pas que si vous hébergement vos propres images sur un serveur privé, les destinataires qui n'ont pas accès au serveur ne pourront pas voir l'image.
• Mailchimp peut également accueillir vos images dans le studio de contenu si elles ont une taille inférieure à 10 Mo.
• Vous pouvez également ajouter une image de fond à une campagne régulière. Pour en savoir plus, consultez notre article Ajouter une image de fond à un e-mail ou à une page de destination .

Ajoutez une image de fond à votre modèle HTML personnalisé

Ce processus utilise CSS, HTML et VML pour afficher une image de fond et une couleur. Vous pouvez coller notre code exemple dans votre modèle et modifier l'image substituable et la couleur d'arrière-plan selon vos besoins.

Pour ajouter une image de fond à un modèle HTML personnalisé, suivez les étapes ci-dessous.

1. Cliquez sur Contenu, puis sur Modèles d'e-mails.
2. Cliquez sur Créer un modèle.
3. Cliquez sur l'onglet Créer un code pour vous , puis sélectionnez Copier dans le code.
   
4. Dans l'éditeur de code, insérez le code suivant juste après l'ouverture <corps> tag pour ajouter l'image de fond et la couleur de l'espace réservé.

   <div style=" autre fond:#7bceez;">
   <!--[if mso 9]>
    <v:rect xmlps:v="urn:schemas-microsoft-com:vml" fil=" prévenu" bancaires="false" style="mso-Width-percent:1000;">
    <v:fill type="cadre" src="http://www.yoursite.com/yourimages/photo.jpg" Choisissez une mise à jour =>
    <v:textbox style="mso-if-bullet-to-text:truste" inset="0,0,0,0">
        <![endif]-->
    <hauteur du tableau="100%" largeur="100%" cellpadid="0" cellimping="0" border="0">
   <tr>
     <td vaign="top" alignement="left" fond="http://www.yoursite.com/yourimages/photo.jpg" style="fond-repeat:no-repeat; taille de fond:cover);">
   

   Ce code affiche l'URL de la photo substituable et les couleurs. Vous les remplacerez par vos informations sur l'image et la couleur à l'étape suivante.

5. Remplacez les deux URL d'image de fond d'espace réservé et les valeurs de couleur d'arrière-plan dans cet exemple de code par le code hexadécimal de votre choix et le chemin HT vers l'URL de votre image.

6. Insérer le code suivant juste avant la fermeture <corps> tag.

   </td>
   </t>
    </table>
    <!--[if mso 9]>
   </v:textbox>
   </v:direct>
   <![endif]-->
   </div>
   

7. Remplacez ou modifiez le code de campagne restant par votre HTML personnalisé.

8. Une fois que vous avez terminé de modifier le code, cliquez sur Enregistrer.
9. Cliquez sur Enregistrer et quitter.
10. Dans la fenêtre modale Enregistrer le modèle , nommez votre modèle.
11. Cliquez sur Enregistrer.

Vous pouvez accéder à votre nouveau modèle dans l'outil de création de campagne ou sur la page Modèles.

Test et dépannage

Avant d'envoyer votre campagne par e-mail, vérifiez et testez votre modèle, puis envoyez-vous quelques e-mails test. Pour voir comment certains e-mails clients afficheront votre image de fond, utilisez l’outil de prévisualisation de la boîte de réception.

Visualiser et tester votre campagne par e-mail
Tester avec l'aperçu de la boîte de réception

Voici d'autres conseils pour travailler avec les images de fond.

• L'image de fond ne s'affichera pas si les images sont désactivées dans la boîte de réception du destinataire. C’est pourquoi il est préférable de choisir une couleur d’arrière-plan qui s’affichera correctement si l’image de fond ne se charge pas.

• Lorsque vous modifiez votre fichier CSS, assurez-vous de ne pas avoir d'autres propriétés d'arrière-plan dans votre code, car elles peuvent remplacer l'image d'arrière-plan.

• Lorsque vous travaillez dans l'éditeur de modèles, les tags de fusion ne s'affichent pas dans les aperçus ni dans les e-mails test. Si vous souhaitez voir comment fusionner les tags pour les contacts, créez une campagne à partir du modèle et utilisez nos options d'aperçu et de test.