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

Vous apprendrez

Apprenez à inclure une image de haute qualité à gauche ou à droite de votre formulaire d'inscription pour une expérience d'inscription attrayante 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, vous devez tenir compte de quelques éléments :

• Il existe de nombreux types de formats d'image. Les JPEG équilibrent bien la qualité et la taille pour les images colorées, tandis que les PNG permettent de conserver la netteté des images transparentes ou des logos. 
• Veillez à utiliser une image de qualité raisonnable pour obtenir les meilleurs résultats. 
  
  • Essayez de maintenir vos images entre 600 et 1000 px de largeur et moins de 2000 px de hauteur pour les images pleine largeur afin d'équilibrer la qualité et le temps de chargement. Les images moins larges peuvent être inférieures à 600 px.
• Comme pour toutes les images visualisées sur le web, les fichiers de grande taille entraînent des temps de chargement plus lents.
  • Visez une taille de fichier de 50 à 100 Ko pour les images latérales et de moins de 200 Ko pour les images d'arrière-plan, afin de garantir la qualité de votre image sans ralentir votre site.
• Ajoutez un texte alt à votre image afin que vos formulaires soient accessibles à tous les visiteurs du site. 

Étant donné que les formulaires d'inscription sont affichés sur les navigateurs (contrairement aux e-mails, qui sont affichés sur les ESP), il existe moins de recommandations sur la manière de les formater et de les ajuster. 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. 

Ajoutez une image latérale à votre formulaire

Pour ajouter une image de part et d'autre du contenu de votre formulaire d'inscription :

1. Naviguez jusqu'à l'onglet Formulaires d'inscription.
2. A côté de votre formulaire, cliquez sur les 3 points > Editer le formulaire.
   

   Si votre formulaire a été créé avant juillet 2021 et qu'il utilise une image d'arrière-plan alignée à droite ou à gauche comme image latérale, supprimez-la avant d'utiliser la fonction d'image latérale. Pour ce faire, accédez à la section Arrière-plan du formulaire de la section Styles et supprimez l'image d'arrière-plan. Faites ensuite défiler vers le bas jusqu'à Styles de formulaire et supprimez tout rembourrage excessif sur le côté droit ou gauche. 

3. 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).
   
4. Cliquez sur l'espace vide de l'image dans l'aperçu du formulaire.
5. Cliquez sur Parcourir la bibliothèque d'images pour ajouter une image à partir de votre bibliothèque d'images Klaviyo, télécharger une image ou importer une nouvelle image à partir d'une URL.
   

Veillez à utiliser une image de qualité raisonnable pour obtenir les meilleurs résultats. Comme pour toutes les images visualisées sur le web, les fichiers de grande taille entraînent des temps de chargement plus lents. Visez une taille de fichier de 50 à 100 Ko pour les images latérales afin de garantir la qualité de votre image sans ralentir votre site. 

Options d'affichage des images latérales

Modèles de formulaires

Par défaut, les formulaires comportant des images latérales ont une largeur de 780 px et la largeur de l'image latérale est réglée sur Moyenne. Vous pouvez utiliser les sections Largeur et Hauteur minimale pour ajuster la taille du formulaire. Si vous souhaitez que l'image latérale prenne plus ou moins de place dans le formulaire, réglez la taille dans la section Image latérale (par exemple, petite, moyenne, grande, personnalisée). 

L'image latérale de votre formulaire sera masquée par défaut 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'images latérales

Utilisez la section Styles des paramètres de l'image latérale pour choisir le mode d'affichage de l'image. 

• Texte Alt
  Ajoutez un texte alt à votre image afin qu'elle soit accessible à tous ceux qui visitent votre site web.
• Position de l'image
  Cette fonction détermine la façon dont l'image s'insère dans la zone d'image latérale. Sélectionnez l'une des options suivantes : 
  • Contenir
    L'image complète apparaîtra dans la section et ne sera pas recadrée. Si l'image ne s'inscrit pas précisément dans la zone d'image, la couleur d'arrière-plan de la section remplit les zones non couvertes. 
  • Couvrir
    L'image remplit entièrement la zone d'image latérale. Certaines parties de l'image peuvent être coupées pour 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 d'image.
• Couleur d'arrière-plan
  Si vous utilisez une petite image dans votre formulaire, définissez une couleur d'arrière-plan pour remplir l'espace vide derrière l'image.

Ressources complémentaires

• Meilleures pratiques pour créer des e-mails et des formulaires accessibles 
• Comprendre les styles de formulaires d’inscription
• Démarrer avec Canva