Images in email campaigns

Affichez des galeries d’images dans votre campagne et ajoutez des légendes et des liens de destination.

Dernière mise à jour le 16 janvier 2025

Utilisez une section Image pour ajouter des images à votre campagne. Vous pouvez ajouter plusieurs images, chacune avec des légendes et des URL de destination, et choisir différentes dispositions pour modifier l’emplacement des images et des légendes.

Suivez ce guide pour savoir comment configurer des sections Image dans vos campagnes et pour connaître les autres endroits de votre campagne où les images peuvent s’afficher.

Image formatting

To prevent blurry images, we recommend keeping your image width 750px or less. For more help with image formatting, visit Formatting your images for display on the web.

Multiple images display in a vertical stack, but you can choose different layouts to change the placement of images and captions.

Ajouter une section Image

To add an image section to a campaign:

  1. Create or open your campaign draft. For more help, visit Building email campaigns.
  2. Cliquez sur + n’importe où dans la campagne, entre l’en-tête et le pied de page.
  3. Cliquez sur Image.
  4. Dans le panneau de droite, cliquez sur Ajouter des images pour charger jusqu’à quatre images depuis votre appareil, ou cliquez sur Sélectionner dans la bibliothèque pour sélectionner des images de votre bibliothèque ou d’Unsplash. Il n’est pas possible d’utiliser des images premium dans les Campagnes e-mail, mais vous pouvez utiliser des images Getty sous licence.
  5. After uploading at least one image, click Manage Images below the thumbnail to add, rearrange, or delete images.
  6. Cliquez sur Sans lien à côté du nom d’une image pour ajouter une URL de destination.
  7. Cliquez sur le menu déroulant Disposition pour modifier la disposition de la section Image.
  8. Cliquez sur Espacement et Couleur de la section pour modifier le style.
  9. En fonction de votre disposition, ajoutez une légende à vos images.

All changes save automatically. You can undo or redo changes as long as the draft is open.

Astuce

pour ouvrir l’éditeur d’image survolez l’image que vous souhaitez modifier dans le brouillon et cliquez sur l’icône du crayon.

Add, rearrange, or delete images

Après avoir ajouté au moins une image, cliquez sur Gérer les images. Ici, vous pouvez :

  • Ajoutez d’autres images en cliquant sur Ajouter une image. Vous pouvez ajouter jusqu’à quatre images dans toutes les dispositions.
  • Rearrange images by clicking and holding the six dots to the right of the filename and dragging the image to a new position.
  • Delete an image by clicking - to the left of the filename.

Une fois les modifications apportées, cliquez sur Retour pour revenir au panneau Images.

Add a clickthrough URL

Image clickthrough URLs turn the whole image into a link, so when a subscriber clicks the image, it opens the link.

To add a clickthrough URL:

  1. Click Unlinked beside the images name in the right panel. If an image already has a clickthrough URL, the URL displays beside the image name. If you don't see Unlinked or a URL beside your image name, you might be in the Manage images panel. Click Back to return to the Images panel.
  2. In the clickthrough URL field, you can add a web address directly, or click the gear icon to open the link editor for more options.
  3. In the link editor, you can link to an external web address, a page on your site, an email address, or a phone number. To learn more about links in Squarespace, visit Adding links to your site.
  4. Après avoir configuré l’URL dans l’éditeur de liens, cliquez sur Enregistrer.

Ajouter du texte de remplacement

L’ajout d’un texte de remplacement aux images améliore leur niveau d’accessibilité pour les visiteurs. Le texte de remplacement s’affiche pour les lecteurs d’écran et les autres outils d’accessibilité, mais n’apparaît pas autrement dans votre campagne.

Si vous n’ajoutez pas de texte de remplacement manuellement, aucun texte de remplacement ne s’affiche. Pour ajouter du texte de remplacement à une image dans une section Image :

  1. Cliquez sur la section Image, puis sur le nom du fichier image dans le panneau de droite.
  2. Cliquez dans le champ situé sous Texte de remplacement de l’image et ajoutez la description de votre image.
  3. Le texte de remplacement s’enregistre automatiquement.

Vous pouvez également ajouter du texte de remplacement aux sections Blog et aux sections Produit en suivant les mêmes étapes. Pour en savoir plus sur le texte de remplacement en général, y compris les bonnes pratiques, consultez l’article Ajouter du texte de remplacement aux images.

Dispositions des sections Image

Cliquez sur le menu déroulant Disposition pour choisir le mode d’affichage des images et des légendes. Par défaut, lorsque vous ajoutez une nouvelle section Image, elle est définie sur la disposition Bannière.

You can choose from these layouts:

  • Banner - Full-bleed images with captions below.
  • Grille - Les images s’affichent sous la forme d’une grille d’images miniatures. Il n’est pas possible d’ajouter des légendes dans cette disposition.
  • Card - Images with captions displaying on an overlapping card. The captions display on alternating sides for each image, starting on the right.
  • List (Left) - Images in a list on the left side with captions on the right.
  • List (Right) - Images in a list on the right side with captions on the left.
  • Side - Images in a list with captions displaying on alternating sides.

Un seul style de disposition est possible pour chaque section. Pour ajouter une autre image avec une disposition différente, ajoutez une nouvelle section.

Personnaliser la section Image

Utilisez les options de taille, d’espacement et de couleur pour personnaliser votre section Image. Vos options peuvent varier en fonction de votre disposition.

Image size

Avec les dispositions en grille, latérale et en liste, vous pouvez modifier directement la taille de l’image.

Cliquez sur Taille de l’image, puis sur S, M ou L, ou cliquez sur ... pour définir la taille manuellement.

Pour la disposition des bannières et des cartes, utilisez la Marge intérieure latérale sous Espacement pour modifier la largeur de l’image. N’oubliez pas que quels que soient ces paramètres, certaines applications affichent toujours les images en pleine largeur.

Spacing

Cliquez sur Espacement pour modifier la marge intérieure de la section Image. En fonction de votre disposition, vos options d’espacement peuvent varier :

  • Marge intérieure latérale : ajoutez un espace blanc de chaque côté de l’image. Pour les dispositions de bannières et de cartes, utilisez cette modification pour modifier la largeur de l’image.
  • Marge intérieure entre les sections : ajoutez un espace blanc en haut et en bas de la section Image.
  • Padding between rows - Add vertical white space between images in the section. This only appears if you add multiple images to a single section.
  • Alignement horizontal et Alignement vertical : alignez les images dans la disposition en grille.
  • Center padding - Add white space between the images and captions in the side and list layouts.

Color

You can change the following section-specific colors:

  • Section color - Change the color that appears behind images and captions. If set to transparent, the content background or email background appears instead.
  • Couleur du texte - modifiez la couleur des légendes. La police et la taille du texte suivent les styles généraux des campagne.
  • Card color - Change the background of the captions on the card layout.

Pour en savoir plus, consultez l’article Mettre en forme les campagnes e-mail.

Add captions

To add captions:

  1. Si vous utilisez la disposition de la bannière, activez Afficher la légende dans le panneau des images.
  2. Cliquez sur Écrivez ici... dans l’aperçu et ajoutez votre texte.
  3. Highlight text to format it or add a link.

Keep in mind:

  • La disposition en grille ne prend pas en charge les légendes.
  • Les légendes des campagnes par e-mail ne deviennent pas du texte de remplacement.
  • Text added to images is image-specific. If you delete an image, its caption is deleted too.
  • Use the side panel to style the text color. The font matches your global fonts.

Add an image without a caption

To add an image without a caption:

  1. Ajoutez une section Image.
  2. Après avoir ajouté votre image, choisissez la disposition Grille ou Bannière.
  3. On the banner layout, switch the Show Caption toggle off to hide the caption.

Can I add an image slideshow?

Il n’y a pas de disposition en diaporama intégrée. Pour ajouter un effet de diaporama, créez un .gif animé à partir d’un ensemble d’images, puis chargez-les dans la section Image.

Header images

Vous pouvez charger ou réutiliser une image de votre bibliothèque dans l’en-tête de votre campagne, ou inclure le logo de votre site s’il en utilise un. Pour en savoir plus, consultez l’article Créer une Campagne e-mail.

Blog and product images

Les sections Blog et produits intègrent les billets de blog et les produits de votre site à votre campagne, y compris les images mises en avant du billet ou du produit.

Il n’est pas possible de modifier les images des publications ou des produits présentés dans ces sections, mais vous pouvez les survoler et cliquer sur l’icône du crayon pour ouvrir l’éditeur d’images. Pour ajouter une image complètement différente, modifiez les images mises en avant sur votre page Blog ou votre page Boutique, ou utilisez une section Image pour choisir directement l’image et la légende.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.