Passer au contenu principal

Faites le boulot avec un pro

De la formation aux services marketing complets, notre communauté de partenaires peut vous aider à faire avancer les choses.

Engagez un pro

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

Copier l'URL de l'article
Il a été copié

Remarque

Les informations contenues dans cet article s'appliquent uniquement au créateur classique. Pour découvrir comment utiliser le nouveau créateur, consultez l'article Design an Email with the New Builder (Concevoir un e-mail avec le nouveau créateur).

Pour améliorer davantage le design de vos campagnes de marketing, vous pouvez ajouter une image de fond à un modèle à code personnalisé avec l'éditeur de modèles de Mailchimp. Vous ne pouvez ajouter des images de fond qu'à ces modèles HTML à code personnalisé et celles-ci ne sont pas prises en charge par nos autres types de modèles.

Les modèles à HTML personnalisé sont une fonctionnalité avancée et ne sont recommandés que pour les utilisateurs ayant une certaine expérience du codage personnalisé. Contactez votre développeur ou faites appel aux services d'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 ce qu'il faut savoir avant de commencer ce processus.

  • Les images d'arrière-plan peuvent ne pas s'afficher correctement dans tous les clients de messagerie. Pour connaître les clients de messagerie qui prennent en charge les images d'arrière-plan, consultez notre article Support CSS du client de messagerie.
  • Les images trop volumineuses peuvent causer des problèmes d'affichage dans vos campagnes envoyées vers les boîtes de réception de vos destinataires. Pour de meilleurs résultats, réglez la résolution à 920 x 1080 px ou moins et compressez l'image.
  • Hébergez vos images sur un serveur public ou utilisez un service gratuit comme Imgur ou Flickr, et utilisez un chemin de fichier absolu qui pointe directement vers l'emplacement du fichier dans le code. Sachez que si vous hébergez vos propres images sur un serveur privé, les destinataires sans accès au serveur ne seront pas en mesure de voir l'image.
  • Mailchimp peut également héberger vos images dans le producteur de contenu, à condition que leur taille soit inférieure à 10 Mo.
  • Vous pouvez également ajouter une image d'arrière-plan à une campagne standard. Pour en savoir plus, consultez notre article Ajouter une image d'arrière-plan à une landing page ou un e-mail.

Ajouter une image d'arrière-plan à un modèle HTML personnalisé

Ce processus utilise CSS, HTML et VML pour afficher les images de fond et la couleur. Vous devez coller notre code d'exemple dans votre modèle et changer l'espace réservé à l'image et la couleur de fond en fonction de vos préférences.

Pour ajouter une image de fond à un modèle HTML personnalisé, procédez comme suit.

  1. Cliquez sur Content (Contenu), puis sur Email templates (Modèles d'e-mail).
  2. Cliquez sur Create Template (Créer un modèle).
  3. Cliquez sur l'onglet Code your own (Code personnalisé) et sélectionnez Paste in code (Coller le code).
    Curseur sur le bouton paste in code (coller le code)
  4. Dans l'éditeur de code, insérez le code suivant juste après la balise d'ouverture <body>pour ajouter l'image d'arrière-plan et la couleur de l'espace réservé.
    <div style="background-color:#7bceeb;">
<!--[if gte mso 9]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
 <v:fill type="frame" src="http://www.yoursite.com/yourimages/photo.jpg"color="#7bceeb" />
 <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
     <![endif]-->
 <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
  <td valign="top" align="left" background="http://www.yoursite.com/yourimages/photo.jpg" style="background-repeat:no-repeat; background-size:cover;">

    Ce code affiche les URL et les couleurs des images de l'espace réservé. Vous devrez remplacer celles-ci avec vos propres valeurs d'image et de couleur à l'étape suivante.

  5. Remplacez les deux valeurs de l'URL de l'espace réservé à l'image de fond et les valeurs de l'espace réservé à la couleur de fond dans cet exemple de code avec le code hexadécimal de la couleur de votre choix et le chemin de fichier absolu de l'URL de votre image.

  6. Insérez le code suivant juste avant la balise de fermeture <body>. 

    </td>
</tr>
 </table>
 <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</div>

  7. Remplacez ou modifiez le reste du code de la campagne en utilisant votre propre code HTML personnalisé.

  8. Une fois le code modifié, cliquez sur Save (Enregistrer).
  9. Cliquez sur Save and Exit (Enregistrer et quitter).
  10. Dans la fenêtre contextuelle modale Save Template (Enregistrer le modèle), nommez votre modèle.
  11. Cliquez sur Save (Enregistrer).

Vous pouvez accéder à votre nouveau modèle personnalisé sur la page Templates (Modèles) ou dans le créateur de campagne.

Tests et résolution de problèmes

Avant d'envoyer votre campagne par e-mail, prévisualisez et testez scrupuleusement votre modèle et envoyez-vous quelques e-mails de test. Pour voir comment certains clients de messagerie afficheront votre image de fond, utilisez l'outil Inbox Preview.

Prévisualiser et tester votre campagne par e-mail
Tester à l'aide d'Inbox Preview

Voici quelques conseils supplémentaires lorsque vous travaillez avec les images de fond.

  • L'image de fond ne sera pas affichée si les images sont désactivées dans la boîte de réception de votre destinataire. Pour cette raison, vous devez choisir une couleur de fond qui permette d'afficher votre texte correctement au cas où l'image de fond ne s'afficherait pas.

  • Lors de la modification de votre CSS, assurez-vous de ne pas avoir d'autres données de fond dans votre code, car celles-ci pourraient remplacer l'image de fond.

  • Lorsque vous travaillez dans l'éditeur de modèle, les balises de fusion ne permettent pas d'afficher les aperçus ou les e-mails d'essai. Si vous voulez voir à quoi vont ressembler les balises de fusion pour les contacts, créez une campagne à partir du modèle et utilisez nos options de prévisualisation et de test.

Assistance technique

Vous avez une question?

Les utilisateurs payants peuvent se connecter pour accéder à l'assistance par e-mail et chat.

Cet article vous a-t-il été utile ?

Connexes

Où modifier le code d'un modèle

Si vous avez créé un modèle en utilisant le langage de modèle de Mailchimp ou que vous avez importé un fichier HTML que vous avez codé, vous pouvez en modifier le code directement dans votre compte.

CSS en Email HTML

Cet article donne quelques conseils de base sur l'utilisation de CSS en HTML email.