Nouvel éditeur sur Klaviyo

novembre 22, 2023
17 minutes de lecture
Traffic management
décembre 2, 2022

Comment utiliser le nouvel éditeur Klaviyo ?

Vous avez créé un compte Klaviyo récemment ?

ou vous avez toujours utilisé l’éditeur classique pour réaliser vos emails ?

Découvrez ici comment fonctionne le nouvel éditeur de modèles d’e-mails de Klaviyo, comment utiliser les styles de modèles et configurer chaque type de bloc.

Le nouvel éditeur de modèles comprend de toutes nouvelles fonctionnalités telles que des sections pour organiser votre contenu, la possibilité d’ajouter une image d’arrière-plan derrière un appel à l’action et un bouton d’annulation.

(Pour les comptes créés avant le 28/09/2022) Accédez au nouvel éditeur de modèles de Klaviyo à partir de l’onglet Modèles d’e-mail en cliquant sur

Créer un modèle > Utiliser le nouvel éditeur.

Après avoir créé un modèle avec le nouvel éditeur, vous pouvez le personnaliser et l‘envoyer en tant que campagne ou l’utiliser dans des e-mails de flux en sélectionnant le nouveau modèle dans le processus de configuration de la campagne ou du flux.

Pour convertir un modèle classique vers le nouvel éditeur :

Bientôt disponible, cet outil vous permettra de créer des plans de campagnes et observer l’impact des évolutions de budgets sur la réalisation de vos objectifs. Vous pourrez adapter votre stratégie d’enchères et vos cibles en fonction.

1. Ouvrez le modèle que vous souhaitez convertir.

2. Cliquez sur Passer au nouvel éditeur dans le coin supérieur droit.

La conversion de votre modèle commencera et après quelques instants, le modèle s’ouvrira dans le nouvel éditeur de Klaviyo.

Une fois votre modèle converti, vérifiez-le pour vous assurer que tous les paramètres sont corrects. Le modèle doit apparaître de la même manière que dans l’éditeur précédent dans les vues de bureau et mobiles.

Les comptes créés le 28/09/2022 ou après cette date utilisent par défaut le nouvel éditeur de modèles de Klaviyo. Ces comptes n’auront pas la possibilité de revenir à l’éditeur de modèles classique.

À propos des blocs et des mises en page

Lorsque vous ouvrez l’éditeur de modèle d’e-mail Klaviyo, la barre latérale affiche une sélection d’options de bloc et de section parmi lesquelles choisir.

Choisissez entre les blocs par défaut, qui sont des blocs vierges pour créer des e-mails à partir de zéro, et le contenu universel, qui est le contenu que vous avez créé dans d’autres modèles et enregistré pour une utilisation ultérieure.

Notez que seul le contenu créé et enregistré dans le nouvel éditeur est disponible pour utilisation ; les blocs enregistrés de l’éditeur classique ne peuvent pas être ajoutés aux nouveaux modèles d’éditeur.

Dans la section Par défaut, vous trouverez une sélection de blocs et de mises en page. Utilisez des blocs pour ajouter du contenu, comme du texte, des images ou des boutons.

Utilisez des mises en page (c’est-à-dire des sections et des colonnes) pour regrouper vos blocs et les configurer.

Les blocs et les sections peuvent être clonés, supprimés ou enregistrés à l’aide des icônes qui apparaissent lorsque vous survolez le bloc ou la section.

Styles de modèles

L’onglet Styles principal contient plusieurs options de style qui s’appliqueront à l’ensemble de votre modèle. Pour accéder aux principaux paramètres de style d’un modèle, naviguez hors de tous les blocs ou sections dans lesquels vous travaillez à l’aide du bouton Terminé, puis cliquez sur Styles.

C’est ici que vous pouvez définir l’apparence de votre e-mail. Si vous avez suivi l’assistant de configuration, cette zone contiendra déjà certains de vos styles de marque.

Pour ajuster les styles de marque qui s’affichent dans les nouveaux modèles :

accédez à Bibliothèque de marques > Marque.

Coupes et styles de coupe

Tout le contenu du nouvel éditeur de modèles est organisé en sections. Lorsque vous créez un nouveau modèle, il contient une ou plusieurs sections par défaut, et vous pouvez ajouter ou supprimer des sections selon vos besoins.

Pour ouvrir les paramètres d’une section, cliquez sur la zone à droite ou à gauche du contenu de cette section. Notez que cliquer sur un bloc ouvrira les paramètres de ce bloc, plutôt que la section qui le contient.

Chaque section comporte un onglet Styles et un onglet Options d’affichage.

Utilisez les styles de la section pour ajouter des images d’arrière-plan, du remplissage et d’autres styles à cette section. Utilisez les options d’affichage de la section pour choisir les types d’appareils et les destinataires devant voir les sections.

Les paramètres de style de section seront appliqués à votre modèle après vos styles de modèle, mais avant tout style spécifique à un bloc.

Si les styles de modèle sont en conflit avec vos styles de section, le style de section sera utilisé. Si les paramètres d’un bloc entrent en conflit avec vos styles de section, le style du bloc sera utilisé.

Blocs et styles de bloc

Dans les sections, ajoutez des blocs pour remplir votre e-mail avec du contenu.

La plupart des blocs de contenu ont un onglet Styles, où vous pouvez configurer l’apparence du bloc, et un onglet Options d’affichage, où vous pouvez choisir qui doit voir le bloc et sur quels types d’appareils il doit s’afficher.

Les paramètres de styles spécifiques disponibles sont différents pour chaque type de bloc, mais les mêmes options d’affichage sont disponibles pour tous les blocs.

Texte

Utilisez un bloc de texte pour ajouter du texte à vos e-mails. Choisissez un style de texte (Normal ou Titre 1 à 4) pour appliquer les paramètres de style à partir des styles de votre modèle principal, ou personnalisez le contenu du texte avec les paramètres de l’éditeur de texte.

Vous pouvez ajouter du contenu dynamique à votre bloc de texte pour personnaliser le message pour chaque destinataire.

Ajoutez du code personnalisé à votre modèle ou personnalisez le code HTML du bloc à l’aide du bouton de code source, indiqué par ce symbole : </>.

Réduisez la section Contenu ou faites-la défiler pour ajuster les styles du bloc. Choisissez une couleur d’arrière-plan pour la zone de contenu de bloc ou de texte et ajoutez un rembourrage.

Si vous écrivez votre copie en dehors de l’éditeur Klaviyo (par exemple, dans Google Docs ou Microsoft Word), assurez-vous de coller en texte brut lorsque vous collez votre texte dans l’éditeur.

Utilisez Commande + Maj + V ou Ctrl + Maj + V pour coller en texte brut. Sinon, certaines balises de style seront collées avec le texte, ce qui peut entraîner des problèmes de conception.

Image

Utilisez un bloc d’image pour insérer une image dans votre e-mail. Vous pouvez ajouter des images à partir des sources suivantes :

Bibliothèque d’images (images que vous avez téléchargées dans le passé)
Télécharger une image (JPEG, PNG ou GIF)
Importer une image (en utilisant son URL d’image)
Image dynamique (affichez une image personnalisée pour chaque destinataire à l’aide d’une variable d’image dynamique ; par exemple, en référençant une URL d’image stockée dans les données d’événement d’un destinataire ou en tant que propriété de profil)

Une fois que vous avez sélectionné votre image, ajustez vos paramètres d’image, y compris le texte alternatif (une description de l’image), une adresse de lien pour que l’image soit cliquable, la largeur de l’image, l’alignement et d’autres styles.

Split

Utilisez un bloc fractionné pour afficher le contenu dans deux colonnes de n’importe quelle largeur. Le contenu de chaque côté d’un bloc fractionné doit être soit une image, soit du texte.

Par défaut, votre bloc fractionné utilisera une répartition 50/50 ; accédez à l’onglet Paramètres de fractionnement pour ajuster ce ratio. Vous pouvez également utiliser la disposition Colonnes pour diviser votre contenu en deux colonnes ou plus.

Bouton

Les blocs de boutons créent des liens volumineux qui sont plus évidents que les liens textuels ordinaires et parfaits pour mettre l’accent sur les appels à l’action (CTA) importants.

Parce qu’ils sont utilisés pour les CTA, vous voudrez probablement n’en utiliser que quelques-uns dans chaque e-mail.

Au minimum, remplissez les champs Texte et URL.

Le texte est ce que le destinataire verra dans le bouton, et l’URL est l’endroit où le visiteur sera redirigé lorsqu’il cliquera sur le bouton.

Ajustez l’apparence, la forme et la taille du bouton à l’aide des options de couleur, de rayon d’angle et de remplissage. Vous pouvez également ajuster la police du bloc et d’autres styles ci-dessous.

En-tête/barre de liens

Utilisez le bloc en-tête/barre de liens pour ajouter un logo et des liens de navigation qui redirigent vers différents contenus de votre site.

Lorsque vous faites glisser le bloc, vous serez présenté avec quelques dispositions communes d’en-tête/barre de liens parmi lesquelles choisir. Vous pouvez sélectionner différentes dispositions pour le bureau et le mobile, afin de mieux s’adapter à la taille de chaque appareil. (responsivité)

En raison des moteurs de rendu HTML uniques d’Outlook, une bordure peut être ajoutée à vos éléments d’en-tête/barre de liens pour les destinataires utilisant Outlook comme boîte de réception. Pour éviter cela, créez un en-tête en utilisant un bloc image pour votre logo et un tableau pour vos liens.

Ombre portée

Utilisez une ombre portée pour ajouter de la profondeur à votre message ou souligner une certaine zone.

Les options de couleur pour l’ombre incluent clair, foncé et plus foncé, et vous pouvez définir une couleur d’arrière-plan et un rembourrage pour le bloc.

Règle horizontale

Ajoutez une simple ligne entre les autres blocs de contenu. Choisissez entre des lignes pleines, en pointillés ou en pointillés. La couleur, la taille et le rembourrage sont entièrement personnalisables.

Lien social

Le bloc de liens sociaux est un moyen simple d’ajouter des icônes sociales pour votre Instagram, Pinterest, Facebook, Twitter, etc. Klaviyo propose les icônes standard en couleur pour une variété de sites, ainsi que des options simplifiées en noir, blanc ou gris.

Si vous préférez utiliser des icônes sociales entièrement personnalisées, utilisez l’option personnalisée et téléchargez vos propres fichiers image.

Si vous suivez cette voie, nous vous recommandons d’utiliser des images de 96 pixels carrés. Pour maintenir l’espacement et l’alignement entre les icônes sociales de Klaviyo et vos images personnalisées, utilisez des icônes de 50 pixels de large et centrées verticalement et horizontalement dans le fichier image.

Espaceur

Le bloc d’espacement ajoute une quantité personnalisable d’espace entre les blocs empilés verticalement.

Pour personnaliser l’espace entre les blocs qui sont côte à côte (par exemple, dans une colonne), utilisez le remplissage gauche/droite.

Produit

Utilisez un bloc de produits pour ajouter des articles recommandés du catalogue de votre magasin. Lorsque vous ajoutez un bloc produit, vous aurez deux options : Dynamique ou Statique.

Un flux dynamique se met à jour automatiquement et est configuré via un flux de produits. Pour en savoir plus sur la configuration d’un flux de produits, lisez notre article Comment utiliser les flux de produits et les recommandations.

Un bloc de produit statique affiche uniquement les éléments du catalogue que vous sélectionnez manuellement dans l’éditeur de modèles et ne sera pas mis à jour automatiquement ni ciblé sur des destinataires individuels.

Avec l’une ou l’autre option, une fois que vous avez sélectionné le flux ou les éléments, vous pouvez personnaliser l’apparence du bloc.

Les blocs de produits peuvent afficher uniquement des images ou inclure le nom et le prix de chaque article. Faites défiler toutes les options de l’onglet Styles du bloc de produit pour personnaliser entièrement le bloc.

Table

Les blocs de tableau peuvent vous aider à structurer des images et du texte dans un modèle d’e-mail. Le bloc de tableau vous donne la possibilité d’ajouter autant de colonnes ou de lignes que vous le souhaitez (qui s’espaceront automatiquement, ou vous pouvez définir une largeur dans le paramètre Largeur de l’onglet Colonnes ).

Lorsqu’un bloc de tableau est déplacé pour la première fois dans votre modèle, il comporte une ligne avec deux colonnes. Utilisez l’onglet Paramètres du tableau pour ajouter des lignes et des colonnes supplémentaires, puis revenez à l’onglet Contenu pour configurer le contenu du tableau.

Utilisez la section Sélecteur de cellule pour ouvrir le contenu d’une cellule spécifique. Utilisez la section Contenu de la cellule pour choisir entre le contenu Texte ou Image, puis ajoutez votre contenu.

Notez que si vous basculez entre les types de contenu texte et image, vous risquez de perdre le contenu qui se trouvait auparavant dans cette cellule ; utilisez le bouton Annuler pour annuler vos modifications.

Pour modifier les couleurs, les polices, les bordures et la disposition du tableau, ouvrez l’onglet Paramètres du tableau.

Colonnes

Il existe deux blocs différents que vous pouvez utiliser pour faire glisser des colonnes dans vos modèles d’e-mail : le bloc Fractionner et la disposition Colonnes.

Avec un bloc divisé, vous êtes limité au contenu texte et image dans deux colonnes, mais vous pouvez ajuster précisément la largeur de chaque colonne.

Avec une disposition en colonnes, vous pouvez ajouter n’importe quel type de contenu à chaque colonne, mais vous êtes limité à une poignée d’options de largeur de colonne présélectionnées. Cependant, la disposition des colonnes autorise entre une et quatre colonnes.

Une fois que vous avez ajouté des colonnes à votre modèle, déposez des blocs de contenu dans chaque colonne pour la remplir. Vous n’êtes pas limité à un seul bloc de contenu par colonne : ajoutez autant de blocs de contenu que vous le souhaitez, empilés les uns sur les autres.

Colonnes

Vous pouvez enregistrer des blocs ou des sections dans de nouveaux modèles d’éditeur pour les utiliser dans n’importe quel nouveau modèle d’éditeur à l’aide de l’icône étoile.

Si vous enregistrez un bloc ou une section, il apparaîtra dans l’onglet Universel de vos blocs de modèle d’e-mail. Lorsque vous apportez des modifications à un bloc universel ou à une section, vous pouvez choisir d’appliquer ces modifications à toutes les instances du contenu enregistré.

Annuler et refaire

Si vous faites une erreur lors de la modification de votre modèle, utilisez le bouton Annuler. Vous pouvez également utiliser le bouton Rétablir pour annuler cette modification.

Votre modèle sera automatiquement enregistré tout au long de votre session d’édition, et les boutons Annuler/Rétablir enregistreront vos modifications tant que vous modifiez le modèle.

Cependant, les modifications passées ne seront stockées que pendant votre session d’édition. Si vous quittez le modèle et y revenez plus tard, le bouton Annuler sera désactivé jusqu’à ce que vous apportiez de futures modifications.

Aperçu de votre e-mail

Utilisez le bouton Aperçu et test pour prévisualiser l’apparence de votre e-mail dans la boîte de réception d’un destinataire.

Assurez-vous de tester sur des devices, des webmails et navigateur différents pour être certain que l’affichage est optimal partout !