Comment ajouter des images latérales dans les formulaires d’inscription

Objectif de cet article

Découvrez comment inclure une image de haute qualité à gauche ou à droite de votre formulaire d’inscription, pour une expérience d’inscription convaincante qui correspond au design de votre marque.

Avant de commencer

Les images latérales apparaissent à gauche ou à droite du contenu de votre formulaire. Lorsque vous utilisez une image dans un formulaire, tenez compte de ces points :

• Il existe de nombreux types de formats d’image. Le format JPEG offre un bon équilibre entre qualité et taille pour les images colorées, tandis que le format PNG permet de conserver la netteté des images transparentes ou des logos.
• Utilisez une image de qualité raisonnablement élevée pour obtenir les meilleurs résultats.
  
  • Essayez de maintenir vos images entre 600 et 1 000 px de largeur et à moins de 2 000 px de hauteur pour les images en pleine largeur, afin de trouver le juste équilibre entre qualité et temps de chargement. Les images qui ne couvrent pas toute la largeur de l’e-mail peuvent faire moins de 600 pixels
• Comme pour toutes les images consultables en ligne, les fichiers de grande taille entraînent des temps de chargement plus longs.
  • Pour préserver la qualité de vos images sans ralentir votre site, elles doivent faire entre 50 et 100 Ko pour les images latérales, et moins de 200 Ko pour les images d’arrière-plan.
• Ajoutez un texte alternatif à votre image afin que vos formulaires soient accessibles à tous les visiteurs du site.

Étant donné que les formulaires d’inscription sont affichés dans les navigateurs (contrairement aux e-mails, qui sont affichés via les fournisseurs de service de messagerie), il existe moins de recommandations concernant leur mise en forme et leur modification. Les navigateurs peuvent restituer des images de tous types et de toutes tailles. En règle générale, il convient donc de s’en tenir à des images de haute résolution, à des fichiers de taille raisonnable et de tester l’apparence sur chaque type d’appareil.

Ajouter une image latérale à votre formulaire

Pour ajouter une image de chaque côté du contenu de votre formulaire d’inscription :

1. Accédez à l’onglet Formulaires d’inscription.
2. À côté de votre formulaire, cliquez sur 3 points > Modifier le formulaire.
   

1. Dans la section Styles, accédez à la section Image latérale et sélectionnez le côté où vous souhaitez ajouter une image (à gauche ou à droite).
   

2. Cliquez sur l’espace réservé à l’image vide dans l’aperçu du formulaire.
3. Cliquez sur Parcourir la bibliothèque d’images pour ajouter une image depuis votre bibliothèque d’images Klaviyo, importer une image, ou importer une nouvelle image depuis une URL.
   

Utilisez une image de bonne qualité pour obtenir les meilleurs résultats. Comme pour toutes les images consultables en ligne, les fichiers de grande taille entraînent des temps de chargement plus longs. Pour préserver la qualité de votre image sans ralentir votre site, visez une taille de fichier de 50 à 100 Ko pour les images latérales.

Options d’affichage de l’image latérale

Styles de formulaire

Par défaut, les formulaires avec des images latérales sont définis sur une largeur de 780 px, avec la largeur de l’image latérale définie sur Moyen. Vous pouvez utiliser les sections Largeur et Hauteur minimale pour ajuster la taille du formulaire. Si vous souhaitez que l’image latérale occupe plus ou moins d’espace dans le formulaire, ajustez la taille dans la section Image latérale (par exemple : petit, moyen, grand, personnalisé).

Par défaut, l’image latérale de votre formulaire sera masquée sur les appareils mobiles afin d’optimiser l’expérience mobile, car l’espace d’écran sur les appareils mobiles est limité. Si vous souhaitez que votre image latérale s’affiche sur tous les appareils, cliquez sur l’image dans l’aperçu, puis faites défiler jusqu’à Afficher sur et sélectionnez Tous les appareils.

Styles d’image de côté

Utilisez la section Styles des paramètres Side Image pour choisir le mode d’affichage de l’image.

• Texte alternatif
  Ajoutez un texte alternatif à votre image afin qu’elle soit accessible à toutes les personnes qui visitent votre site web.
• Position de l’image
  Cela détermine la façon dont l’image s’adaptera à la zone Image latérale. Sélectionnez l’une des options suivantes :
  • Contenir
    L’image complète apparaîtra dans la section et ne sera pas rognée. Si l’image ne s’adapte pas précisément à la zone d’image, la couleur d’arrière-plan de la section remplira les zones non couvertes.
  • Remplir
    L’image remplira entièrement la zone de l’image latérale. Certaines parties de l’image peuvent être coupées afin de permettre à l’image de remplir l’espace.
  • Personnalisé
    Sélectionnez votre propre largeur pour l’image.
• Alignement horizontal et Alignement vertical
  Ces options vous permettent de choisir si l’image est centrée ou alignée en haut, en bas, à gauche ou à droite de la zone de l’image.
• Couleur d’arrière-plan
  Si vous utilisez une image plus petite dans votre formulaire, définissez une couleur d’arrière-plan pour remplir l’espace vide derrière celle-ci.

Ressources supplémentaires