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 :
- Accédez à l’onglet Formulaires d’inscription.
- À côté de votre formulaire, cliquez sur 3 points > Modifier le formulaire.
Si votre formulaire a été créé avant juillet 2021 et utilise une image de fond alignée à droite ou à gauche comme image latérale, supprimez-la avant d’utiliser la fonctionnalité 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 du formulaire et supprimez tout excès de marge intérieure sur le côté droit ou gauche.
- 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).
- Cliquez sur l’espace réservé à l’image vide dans l’aperçu du formulaire.
- 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.
- Contenir
- 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
- Accessibility in emails and forms best practice reference
Learn how to make your emails and sign-up forms more accessible. When designing your emails and signup forms, you’ll want to make sure your designs are accessible to all of your recipients.
- Understanding styles for a sign-up form
Learn how to use Klaviyo’s sign-up form builder to design your form by editing the design settings available in the Styles section. Style settings apply across your sign-up form, including in all of a form’s steps and in its success message.
- Getting started with Canva for Images
Learn how to integrate Klaviyo with Canva in order to bring images from Klaviyo into Canva, and designs from Canva into your Klaviyo image library. Once Canva designs are in your Klaviyo image library, you can use them within email templates, SMS content, sign-up forms, and more.