Comment ajouter une image d’arrière-plan à un modèle ou à une section d’e-mail
Objectif de cet article
Découvrez comment superposer du texte, des images et d’autres contenus d’e-mail sur des images d’arrière-plan. Vous pouvez ajouter une image d’arrière-plan à l’intégralité d’un e-mail ou à une seule section. En utilisant cette fonctionnalité, vous pouvez superposer une image sur une autre, ou ajouter un bouton ou du texte sur une image.
À propos des images d’arrière-plan
Vous pouvez ajouter une image d’arrière-plan à l’intégralité d’un modèle d’e-mail ou à une section spécifique du modèle. Les arrière-plans de modèle sont ajoutés à l’aide du panneau Styles du modèle, et s’étendent généralement sur toute la largeur et la hauteur de l’e-mail.
Les arrière-plans de section s’appliquent uniquement à certaines zones de l’e-mail. Ils permettent d’ajouter des images qui attirent l’attention et des appels à l’action dynamiques. Vous pouvez également ajouter plusieurs appels à l’action sur une même image (par exemple, « Acheter les chaussures » et « Acheter les accessoires »). Ces images d’arrière-plan spécifiques à la section peuvent être ajoutées via l’onglet Styles d’une section.
Vous pouvez améliorer l’accessibilité de votre e-mail en utilisant une image d’arrière-plan avec du texte et d’autres contenus superposés plutôt qu’une seule image avec du texte. Si votre message contient essentiellement des images et peu de texte, les destinataires qui utilisent des lecteurs d’écran et d’autres dispositifs d’accessibilité qui n’affichent pas les images se reportent au texte alternatif pour comprendre le contenu du message.
De plus, les destinataires qui utilisent des boîtes de réception en texte clair ou qui ont configuré leur boîte de réception pour masquer les images par défaut peineront à saisir le sens de votre message. Lorsque vous utilisez des blocs de texte standard avec une image en arrière-plan, il est plus facile pour les destinataires ayant des besoins en matière d’accessibilité ou utilisant des appareils alternatifs de comprendre votre message.
Sélectionner des images d’arrière-plan
Lorsque vous sélectionnez une image d’arrière-plan pour une section ou un modèle, choisissez une image dont la résolution est suffisamment élevée pour s’afficher en bonne qualité sur l’écran du destinataire. Veillez toutefois à ne pas utiliser un fichier inutilement volumineux, car cela pourrait ralentir le temps de chargement de vos e-mails. En général, utilisez des images de 1 Mo ou moins comme arrière-plans de section.
Définir une image d’arrière-plan de section
Une fois que vous avez choisi une image à utiliser, ouvrez votre modèle dans l’éditeur d’e-mail par glisser-déposer. Sélectionnez une section existante, ou ajoutez une nouvelle section.
- Dans l’onglet Styles de la section, activez Image d’arrière-plan.
- Cliquez sur Sélectionner une image.
- Dans Bibliothèque d’images, cliquez sur Sélectionner à côté d’une image. Pour importer une nouvelle image, ouvrez Importer une image, puis choisissez votre fichier. Si vous êtes invité à comparer les versions, choisissez Original ou Compressé, puis cliquez sur Importer.
- Une fois l’image d’arrière-plan mise en forme, ajoutez du contenu à la section. Vous pouvez ajouter n’importe quel type de bloc (p. ex., un bloc de texte, un bloc de bouton, un bloc de tableau) et n’importe quel nombre de blocs à votre section.
Une fois l’image d’arrière-plan définie, choisissez une couleur d’arrière-plan. Cette couleur s’affiche si l’image d’arrière-plan ne peut pas être chargée pour une raison quelconque.
- Ouvrez l’onglet Styles de la section.
- Pour une image affichée dans Contenu, définissez Couleur du contenu sur Personnalisé. Pour une image affichée dans Section, activez Couleur de la section.
- Choisissez une couleur qui correspond étroitement à l’image et qui garde votre texte lisible si l’image ne se charge pas.
Pour afficher une image d’arrière-plan de section en pleine largeur derrière le contenu, définissez Couleur du contenu sur Aucune. Sinon, la couleur d’arrière-plan du contenu peut recouvrir l’image.
Options de style de l’arrière-plan de section
Sous Image d’arrière-plan, choisissez Contenu pour conserver l’image dans la zone de contenu de l’e-mail, ou Section pour l’étendre sur toute la largeur.
Dans la section Format, choisissez parmi les options suivantes :
- Taille d’origine
Votre image conserve ses dimensions d’origine. Les parties qui dépassent de la zone de la section ne seront pas visibles. - Ajuster
Votre image est ajustée pour couvrir la zone de la section. La couleur d’arrière-plan peut apparaître en dessous si l’image est plus petite que la section. - Remplir
Votre image couvre entièrement la zone de la section et une partie de l’image peut être recadrée. - Vignette
L’image est dupliquée pour couvrir toute la zone de la section. Vous pouvez modifier la taille de la vignette pour choisir l’échelle.
Définir une image d’arrière-plan de modèle
Pour ajouter une image d’arrière-plan à un modèle d’e-mail :
- Ouvrez Styles dans la barre latérale de l’éditeur.
- Activez Image d’arrière-plan, puis cliquez sur Sélectionner une image.
- Dans Bibliothèque d’images, cliquez sur Sélectionner à côté d’une image. Pour importer une nouvelle image, ouvrez Importer une image, puis choisissez votre fichier. Si vous êtes invité à comparer les versions, choisissez Original ou Compressé, puis cliquez sur Importer.
Utilisez Format pour choisir Taille d’origine, Ajuster, Remplir ou Mosaïque, comme décrit ci-dessus. Utilisez Position de l’image pour aligner l’image. Si vous choisissez Mosaïque, utilisez Taille de la mosaïque pour choisir Origine ou Ajuster.
Les images définies comme images d’arrière-plan pour un modèle peuvent couvrir toute la largeur de la zone du modèle. Vous pouvez définir une couleur d’ arrière-plan du modèle dans une teinte similaire à celle de votre image, car la couleur d’arrière-plan peut s’afficher pendant le chargement de l’image ou si un destinataire a désactivé les images dans son e-mail.
Les arrière-plans de section peuvent recouvrir l’image du modèle. Pour laisser apparaître l’image du modèle à travers une section, désactivez Image d’arrière-plan et Couleur de section, puis définissez Couleur du contenu sur Aucune dans l’onglet Styles de cette section.
Lorsque vous avez terminé de modifier un modèle d’e-mail enregistré, cliquez sur Quitter pour enregistrer vos modifications et quitter l’éditeur.
Prise en charge des images d’arrière-plan dans les boîtes de réception
La plupart des boîtes de réception prennent en charge les images d’arrière-plan, mais il arrive que celles-ci ne s’affichent pas. Dans ce cas, c’est la couleur d’arrière-plan qui s’affiche.
Les boîtes de réception suivantes ne prennent pas en charge les images d’arrière-plan :
- Outlook pour Windows
- Yahoo! Mail (prise en charge partielle)
- AOL (prise en charge partielle)
En outre, si le destinataire dispose d’un accès limité à Internet ou que son débit est lent, l’image d’arrière-plan peut prendre du temps pour se charger ou ne pas se charger du tout, laissant apparaître la couleur d’arrière-plan.
Ressources supplémentaires
- About email images best practices
Learn about best practices when using images in Klaviyo emails, including size recommendations and how to add images.
- Dark mode email design best practices
Learn about dark mode, a device setting some users turn on to darken their displays. This setting impacts how emails are displayed. Dark mode is an end user setting that is selected at the device level, and Klaviyo does not have direct control over how dark mode is implemented on each device.
- Coding HTML email backgrounds