Vous apprendrez
Apprenez à concevoir vos formulaires d'inscription avec des polices personnalisées afin que vos clients bénéficient d'une forte identité de marque et d'une cohérence avec le reste de votre site.
La création d'un formulaire d'inscription bien conçu est essentielle pour les inciter à poursuivre l'objectif de votre formulaire. Si votre marque utilise des polices qui ne sont pas disponibles en mode natif dans l'éditeur de formulaires d'inscription, l'ajout de ces polices personnalisées est un moyen facile de donner à vos formulaires une apparence cohérente avec le reste de votre site. Après avoir ajouté vos polices, vous pouvez les utiliser pour personnaliser votre formulaire d'inscription comme bon vous semble.
DéfinitionsDéfinitions
- Police personnalisée
Toute police qui n'est pas fournie par défaut dans l'éditeur Klaviyo. En voici quelques exemples :- Polices Google
- Polices Adobe
- Polices importées
- Police sûre pour le web
Une police qui est point de vente localement sur la plupart des appareils, et qui n'a donc pas besoin d'être chargée à partir d'une source extérieure pour s'afficher. - Police de secours
Police sûre pour le web qui est utilisée si une page ne peut pas charger la police principale.
Ajouter des polices personnalisées à votre compte
Dans le menu principal situé sur le côté gauche, accédez à la rubrique Contenu > Images & Marque. Cliquez ensuite sur l'onglet Polices. Vous pouvez ajouter une police Google, une police Adobe ou une police importée.
Si vous ajoutez à Klaviyo une police personnalisée qui est déjà utilisée sur votre site, téléchargez le style de police exact (par exemple, léger, gras ou italique) et le poids (par exemple, 400) que votre site utilise actuellement. Si vous téléchargez une police et que vous sélectionnez un style ou un poids légèrement différent, les styles sélectionnés dans Klaviyo peuvent remplacer certains des styles de police existants de votre site.
Ajout d'une police Google
Pour ajouter une police Google :
- Sélectionnez le menu déroulant Nom de la police pour afficher une liste de toutes les polices Google disponibles, à l'exception des polices que vous avez déjà chargées dans votre compte.
- Choisissez la police de caractères que vous souhaitez. Lors de la sélection, vous verrez un aperçu de la police sous la liste déroulante, ainsi que le nombre de variantes possibles (par exemple, gras, italique, etc.).
- Si vous souhaitez ajouter plus d'une variante, cliquez sur la flèche située à côté du nombre de variantes possibles et choisissez les polices que vous souhaitez ajouter.
- Sélectionnez une police de secours.
- Cliquez sur Ajouter une police. La police que vous avez ajoutée s'affiche désormais dans la section Vos polices au bas de la page.
Dans la section Vos polices , vous pourrez voir les polices que vous avez ajoutées à votre compte. Pour modifier ou supprimer l'une des polices de cette section, sélectionnez les trois points sur la police.
Si vous choisissez d'utiliser des polices Google, veuillez noter que les polices Google sont hébergées par Google. En incluant une police Google dans votre bibliothèque de polices, vous utilisez la police Google. Klaviyo dispose d'une sélection de polices personnalisées que nous utilisons dans nos modèles de formulaires d'inscription et que vous pouvez facilement importer et utiliser. Consultez la liste des polices hébergées par Klaviyo.
Ajout d'une police Adobe
Vous devez disposer d'un compte Adobe pour utiliser les polices Adobe.
Pour ajouter une police Adobe :
- Naviguez jusqu'à Adobe Fonts.
- Recherchez le lien de votre police Adobe, puis sélectionnez votre police.
- À côté du nom de votre police, cliquez sur l'icône de code.
- Si nécessaire, saisissez un nouveau nom de projet, puis cliquez sur Enregistrer.
- Dans la fenêtre modale suivante, copiez l'URL https://use.typekit.net de la police que vous souhaitez ajouter. N'incluez pas le fichier .css comme partie de l'URL lorsque vous la copiez.
- Retournez sur Klaviyo et collez l'URL dans le champ d'adresse CSS.
- Sélectionnez Continuer, puis choisissez une police de remplacement pour la police que vous souhaitez télécharger. Notez que si une police est déjà disponible dans votre compte, une coche verte s'affiche à côté de la police et la police de remplacement existante s'affiche.
- Sélectionnez Ajouter une police.
Une fois que vous avez ajouté votre police, elle sera répertoriée dans la section Vos polices en bas de la page . Pour modifier l'une de vos polices dans cette section, sélectionnez les trois points sur la police.
Ajout d'une police importée
Si vous avez acheté ou téléchargé une police personnalisée qui n'est pas hébergée par une source tierce, vous pouvez toujours l'utiliser dans un formulaire Klaviyo. Tout d'abord, hébergez les fichiers de polices dans un endroit accessible à Klaviyo (par exemple, dans les ressources de votre site ou sur une plateforme d'hébergement de polices). Veillez à activer le partage des ressources entre origines (CORS) en définissant l'en-tête Access-Control-Allow-Origin sur *, afin que les appareils de vos destinataires puissent accéder à la police.
Pour ajouter une police importée :
- Donnez un nom à votre police.
- Spécifiez un poids de police, un style et une URL source. L'URL source doit être une URL valide qui se termine par WOFF, WOFF2, TTF, EOT ou SVG.
- Facultatif : Pour ajouter des variantes supplémentaires, sélectionnez Ajouter une variante de police, puis répétez l'étape 2 pour cette variante.
- Sélectionnez Ajouter une police pour ajouter cette police à la section Vos polices.
Dans Vos polices, vous pourrez voir les polices que vous avez importées dans votre compte. Vous pouvez également supprimer ou modifier vos polices en sélectionnant les 3 points sur la police.
Modifier une police
Pour modifier une police personnalisée existante :
- Naviguez vers Contenu > Images & marque > Polices.
- Recherchez la police que vous souhaitez modifier dans la section Vos polices au bas de la page.
- Dans la carte de cette police, cliquez sur les 3 points dans le coin supérieur.
- Sélectionnez Traiter. À partir de là, vous pourrez :
- Modifiez la police de remplacement pour toute police personnalisée.
- Pour les polices Google et Klaviyo-hosted uniquement, modifiez ou ajoutez des variantes en sélectionnant # of font variants pour développer la liste, puis en sélectionnant les polices que vous souhaitez ajouter.
Vous ne pouvez pas ajouter de variantes aux polices Adobe après les avoir téléchargées, car les variantes sont intégrées dans votre lien Typekit. Pour ajouter des variantes à une police Adobe, vous devez supprimer la police existante et la réintroduire en utilisant un lien Typekit différent qui contient toutes les variantes que vous souhaitez inclure.
- Lorsque vous avez terminé de modifier votre police, sélectionnez la police mise à jour.
Supprimer une police
Pour supprimer une police :
- Naviguez jusqu'à la section Vos polices.
- Sur la police que vous souhaitez supprimer, cliquez sur les 3 points, puis choisissez Supprimer. Si vous choisissez de supprimer votre police, une fenêtre modale s'affichera pour vous avertir que, si votre police est utilisée dans un formulaire, votre police de remplacement s'affichera après la suppression de la police que vous avez ajoutée.
- Sélectionnez Supprimer.
Lorsqu'une police personnalisée est supprimée, tous les formulaires de Klaviyo qui utilisent actuellement la police personnalisée reviendront immédiatement à la police de remplacement. Si vous ajoutez à nouveau la police, ces formulaires recommenceront à l'utiliser.
Utilisation de polices personnalisées dans le générateur de formulaires d'inscriptionUtilisation de polices personnalisées dans le générateur de formulaires d'inscription
Pour utiliser votre police personnalisée dans un formulaire d'inscription, il suffit de modifier le texte dans l'aperçu du formulaire :
- Naviguez vers l'onglet formulaire d'inscription.
- Recherchez le formulaire que vous souhaitez modifier et cliquez sur les trois points situés à côté, puis sélectionnez Modifier le formulaire.
- Dans l'aperçu du formulaire, sélectionnez le texte que vous souhaitez modifier.
- Dans le menu Texte à droite, mettez le texte en surbrillance.
- Utilisez la liste déroulante des polices en haut pour sélectionner votre police personnalisée. Notez que les polices de la section Vos polices de votre compte apparaissent en haut de la liste.
Lors de l'édition, votre police personnalisée apparaîtra dans le canevas (par exemple, dans l'aperçu de l'édition), mais pas dans le panneau de gauche. Le panneau de gauche affichera votre police de secours au lieu de la police personnalisée.
- Lorsque vous êtes satisfait de vos modifications, cliquez sur Publier pour les mettre en œuvre.
Police du site impactée par Klaviyo.js
Police du site impactée par Klaviyo.js
Klaviyo active On site tracking (Klaviyo.js), doit être installé manuellement ou par le biais de votre intégration ecommerce afin de publier les formulaires d'inscription Klaviyo sur votre site web. Si vous n'avez chargé que quelques variations de polices, Klaviyo.js charge les variations restantes dans votre bibliothèque lorsqu'il est injecté dans votre site. Pour cette raison, les polices de votre site peuvent être légèrement modifiées au cours de ce processus, par exemple en modifiant le poids de l'en-tête du site.
Il existe deux options pour résoudre les changements apportés à vos polices par Klaviyo.js. Vous pouvez soit
- Supprimez les polices concernées de votre bibliothèque de polices Klaviyo.
- Mettez à jour le CSS de l'en-tête de votre site afin qu'il ne soit pas écrasé lorsque Klaviyo.js charge les variations supplémentaires.
Cette option nécessitant des connaissances approfondies en matière de CSS, vous aurez peut-être besoin de l'aide d'un développeur. Klaviyo ne peut pas vous aider à ajuster le CSS de votre site, mais nous disposons d'un vaste réseau de partenaires.