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

Les informations de cet article s'appliquent uniquement à l' outil de création d'origine . Pour apprendre à utiliser le nouveau constructeur, consultez l'article Créer un e-mail avec le nouveau constructeur .

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 allez coller notre code type dans votre modèle et modifier l'image substituable et la couleur d'arrière-plan selon vos propres paramètres.

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

1. Cliquez sur Campagnes dans le menu de navigation.
2. Dans le menu Campagnes , appuyez sur Modèles d'e-mails .
3. Cliquez sur Codez votre , puis sur Continuer .
4. Dans le menu Code de votre choix , cliquez sur Importer le HTML .
5. Cliquez sur Ajouter un fichier pour importer votre HTML, puis accédez à la page Visualiser et Test.
6. Pour insérer une image de fond, cliquez sur Modifier la conception dans la barre des tâches du bas pour charger le menu Présentation . La taille de votre fichier doit être inférieure à 15 Mo. Il doit contenir un seul fichier HTML, ainsi que des fichiers d'image CSS et compatibles avec le Web.
7. Dans le menu Présentation , sélectionnez Corps .
8. Dans la section Style du corps, l'arrière-plan est répertorié, cliquez sur Ajouter une image .

9. Vous accéderez ensuite à Content Studio . Vous aurez la possibilité d' importer une image ou de sélectionner une image dans Content Studio.

   a. Pour télécharger une image, cliquez sur Télécharger et parcourez vos fichiers pour télécharger votre image.

   b. Pour sélectionner une image dans Content Studio , cliquez sur Insérer .

10. Vous reviendrez à la page Visualiser et Tester ; vous pourrez visualiser votre image de fond et cliquer sur Enregistrer .

    « >< !--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" Nous sommes au courant de ce nom.>
    <v:fill type="encadrement" src="http://www.yoursite.com/yourimages/photo .jpg"jpg="#7bce4" />
    <v:textbox style="mso-Fit-set-to-text:truste" inset="0,0,0,0">
        <![endif]-->
     <haut de la table="100%" largeur="100%" cell compte d="0" cellclus="0" border="0">
       <tr>
     <td valignement=" payée" alignement="left" de fond="http://www.yoursite.com/yourimages/photo .jpg" style="back-repeat:no-repeat ; taille de fond:couverture;">
    

    Ce code affiche l'URL de l'image substituable et les couleurs. Vous les remplacerez par votre image et vos couleurs à l'étape suivante.

11. Remplacez les deux URL d'image de fond 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 hexadécimal de l'URL de votre image.

12. Insérez le code suivant juste avant le tag de fermeture.

       </t>
     </table>
     <!--[if gte mso 9]>
    </v:boîte de texte>
    </v:correct>
    <![endif]-->
    </div>
    

13. Utilisez le menu déroulant Prévisualiser et Tester pour visualiser votre modèle ou envoyer un e-mail de test.

    a. Cliquez sur Modifier la conception | Modifiez les boutons Code pour apporter des changements.

    b. Cliquez sur Content Studio pour afficher les projets.

14. Cliquez sur Enregistrer et quitter , une fenêtre modale s'ouvrira pour afficher le nom de votre conception, puis cliquez sur Enregistrer .

15. Vous allez accéder à la page Modèle d'e-mail . Sélectionnez le modèle de votre choix pour Créer un e-mail .

    a. Utilisez le menu Plus d'options pour :

    • Modifier un modèle
    • Envoyer un mandrinage
    • Répliquer le modèle
    • Partager le modèle
    • Exporter le modèle
    • Renommer le modèle

16. Remplissez le formulaire d'e-mail, ajoutez une publication sociale à votre e-mail , puis Prévisualisez votre modèle et cliquez sur Envoyer .

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.