Dans ma mission de passer en revue les différents constructeurs d’email du marché, difficile de ne pas croiser la route de Klaviyo : j’en vois fleurir des spécialistes de la solution sur Linkedin – alleeeeez ne me dites pas que ça ne pullule pas dans votre fil d’actu ! Quoiqu’il en soit, je vous propose de faire un tour d’horizon honnête et objectif (promis-juré, croix d’boix croix d’fer… j’vais voir c’que j’peux faire !) des forces de l’email builder de Klaviyo… et de ses limites.
Table des matières
Paramétrer les styles généraux des futures campagnes
Il est primordial de procéder à la complétion de certaines informations afin de définir des styles généraux pour toutes les futures campagnes email générées depuis l’Email Builder de Klaviyo.
Je me rends donc tout d’abord dans la liste déroulante Contenu, puis je choisis Images et marque.
- Dans l’onglet Marque, trois choix me sont proposés :
- Onglet Styles : j’importe mon logo et définis les couleurs de mes textes, liens et boutons. Je peux aussi définir la police – parmi une liste de typographies websafe – par défaut de mes contenus textuels.
- Onglet Liens d’en-tête : je crée un rapide menu avec plusieurs onglets – et les liens hypertextes qui vont avec. Pratique !
- Enfin, dans l’onglet Icônes, je renseigne les réseaux sociaux sur lesquels ma marque est présente et les liens associés.
- Dans l’onglet Polices : J’ai ici le choix d’appeler des Google Font, des polices Adobe, ou ma propre typographie. Je remarque au passage que Klaviyo affiche un message d’information stipulant que l’appel à une Google Font est plus ou moins contraire au RGPD – c’est rare de voir cette mention !
- Dans l’onglet Style : deux choix s’offrent à moi :
- Descripteurs de style : définir mon style de communication ou la personnalité de ma marque afin de garantir la cohérence des messages via un champ texte.
- Règles d’écriture : C’est en quelque sorte la charte rédactionnelle ou le « Tone of voice » de ma marque. Je créé donc des instructions spécifiques qui structurent et renforcent l’identité de ma marque (c’est eux qui le disent !). Par contre, l’option bugue une fois sur deux, mais soit…
- Une fois ces deux champs remplis, Klaviyo génèrera un objet et un « Contenu de l’email » types pour trois typologies de message : les messages promotionnels, les messages de réengagement, et les messages d’information et relatifs aux contenus. Après, à vous de voir si vous voulez user de cette fonctionnalité à base d’IA – qui n’en est qu’à sa version Bêta pour le moment. Vous retrouverez, en remplissant ces champs, des propositions de contenu ou de reformulations lors de la rédaction de vos textes – d’objet d’email par exemple.
Puis définir les styles généraux d’une campagne email en particulier
C’est ici que je commence à définir les styles globaux d’une campagne email en particulier : réglage de la couleur d’arrière-plan ou image de fond du <body> – avec choix du background-repeat, du background-size, et du background-position – couleur de fond, largeur, coins arrondis, marge supérieure, marges internes, bordure du message… Mais aussi déclaration de la mise en forme des textes de corps et de titres – <h1> à <h4> -, des liens, préférence de la devise – c’est la première fois que je vois ça -, interrupteur pour optimiser automatiquement l’affichage sur mobile… C’est très complet, et j’apprécie grandement le fait qu’il ne s’agisse pas de rich text editor basiques !
Et compléter ensuite le contenu de l’email
Ca y est, je suis prêt à ajouter du contenu à ma campagne email. Je démarre…
Avec des éléments « Basiques »
Et d’abord, la mise en page
- Avec des Sections, tout d’abord : une section, c’est l’équivalent d’une stripe sur l’email builder Stripo par exemple. C’est une bande horizontale, qui peut contenir plusieurs structures à l’intérieur, structures faites d’une ou plusieurs colonnes.
- Et des Colonnes donc : lors de l’ajout d’un module Colonnes, je peux choisir entre 1 à 4 colonnes, et choisir des ratios égaux ou différents pour chacune des colonnes – 50%, 25%, 25% pour un module de 3 colonnes par exemple. A l’intérieur de ces colonnes seront déposés des blocs, que nous allons voir maintenant en détail.
Besoin d’aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
J’utilise les Blocs mis à disposition dans l’Email Builder de Klaviyo
- Texte : A moi la configuration de la couleur de fond et des marges internes du bloc, et même la couleur de fond et les marges internes de la zone de texte, ce qui me donne l’occasion de créer des textes « encapsulés » : j’adore ! De plus, je peux renseigner des valeurs individuelles sur les marges internes, avec la valeur de mon choix – ce n’est pas le cas sur les derniers Email Builder que je j’ai pu analyser. J’attire aussi votre attention sur le fait que le code source du bloc est accessible ET modifiable ! C’est beau… En revanche, je constate que les textes « basiques » – qui ne sont pas des titres – ne sont pas dans des balises
<p>. C’est moins beau.
- Image : Ce qui est assez fou ici, c’est les petits plus proposés par l’email Builder de Klaviyo. Par exemple, je peux connecter mon compte Canva pour récupérer facilement les visuels travaillés sur l’éditeur d’image. Je peux aussi renseigner des urls d’images déjà hébergées sur un serveur. Enfin, je peux insérer des images dynamiques selon les données de mon destinataire – pour afficher un article récemment ajouté dans le panier par exemple. Enfin, si votre compte Klaviyo est connecté à votre site boutique – Shopify ou WooCommerce – vous pourrez sélectionner les visuels de vos produits, tout simplement. Je note aussi la capacité de compresser directement vos images à leur import dans la bibliothèque, avec estimation du poids ainsi gagné. Magnifique ! Alors oui, c’est vrai, il n’y a pas de solution de retouche photo directement intégrée dans la solution, mais est-ce bien là le plus important ? A chaque solution son usage ! Par contre, un petit encart pour ajouter un style graphique sur les textes alternatifs aurait été bienvenu !
- Séparation : C’est assez étrange comme nomenclature, car il ne s’agit pas d’un séparateur mais d’un fonctionnement en deux colonnes. En gros, lorsque j’utilise ce bloc, j’ai le choix de mettre soit un texte ou une image à gauche, soit un texte ou une image à droite. C’est un fonctionnement en zigzag quoi – avec le potentiel de changer la largeur des colonnes en pourcentage, et leur espacement en pixels.
- Bouton : Rien de bien spécial à dire, une configuration assez basique – texte, lien, typo, mise en forme, couleur de fond, arrondis, alignement, marges internes… – mais il manque un point en particulier : la configuration d’un effet au survol du bouton. Mis à part cela, je note tout de même l’option d’ajout d’une ombre portée – assez rare pour être soulignée – même si elle se limite à une ombre portée sans choix sur le flou ni le positionnement. Mais c’est sympathique quand même !
- Barre d’en-tête : Par défaut, l’Email Builder de Klaviyo insérera la barre d’en-tête générée ou travaillée dans les styles généraux du compte Klaviyo – comme je l’ai mentionné dans le chapitre précédent. Mais il est tout à fait possible de modifier cet élément comme bon me semble !
- Ombre portée : Quelque chose que je n’avais jamais vu sur aucun Email Builder jusqu’à présent mais qui fait son petit effet : l’insertion d’une ombre portée – une image d’ombre portée sur fond transparent. C’est pas grand-chose, mais ça fait son petit effet !
- Séparateur : une simple ligne – dont je peux tout de même choisir qu’elle soit en trait continu, en pointillés, ou en tirets – avec gestion de l’épaisseur et de la couleur. Ca fait largement le travail !
- Liens vers les réseaux sociaux : Autant d’icônes que souhaité, avec l’opportunité de renseigner un libellé sous l’icône de chaque réseau, et de choisir la mise en forme du picto du réseau social – blanc, gris, noir, ou original – ainsi que sa taille et l’espacement entre chaque icône. C’est assez simple mais efficace !
- Espacement : Bon bah là, c’est tout ce qu’il y a de plus basique hein : vous choisissez une hauteur – en pixels – pour votre espacement, et p’is ch’est tout’ !
- Produit : Et là, j’ai deux options :
- Dynamique : pour mettre mes produits en avant avec un flux de produits. Ces flux de produits sont disponibles avec les intégrations d’e-commerce suivantes : Shopify, WooCommerce, BigCommerce, Magento 1 et 2, Prestashop, Salesforce Commerce Cloud, Spree, Square, Wix, Mi9, et Shift4Shop. Apparemment, il serait aussi possible de synchroniser son catalogue produits personnalisé en suivant un tutoriel.
- Statique : Je choisis les produits à afficher pour tous les destinataires via ma banque de produits Klaviyo.
- Tableau : Ca, c’est plutôt cool : j’indique le nombre de lignes et de colonnes souhaitées – je peux toujours en ajouter par la suite – et je viens insérer texte ou image à l’intérieur de chacune des cellules. En plus, je peux même définir des conditions dynamiques pour la ligne – si jamais il devait y avoir répétition pour un tableau de récapitulatif de commande par exemple. Pratique ! Ce genre de fonctionnalité, pour faire une mosaïque de produits par exemple, est toujours la bienvenue !
- Citation : Alors, là ça demande de récolter des avis et citations dynamiques avec Klaviyo Reviews. Etttt oui, pas folle la bête : Klaviyo fait tout pour que vous passiez par d’autres services de leur part, et c’est bien normal. Je n’ai donc pas pu tester la fonctionnalité puisque je n’ai pas souscrit à cette solution, mais ça envoie du rêve !
- Video : Un champ url à renseigner, une vignette à remplacer si besoin, un texte alternatif à remplir, un interrupteur pour activer le bouton de lecture en superposition sur la vignette… Et le tour est joué ! Bon, ne nous y trompons pas hein, il s’agit bien d’un simple visuel avec un lien qui amène vers la page en question où la vidéo est hébergée… Mais c’est sans surprise, sans (relative) fausse promesse !
- HTML : Un éditeur de code, tout simplement, pour venir développer son propre code HTML. Attention, soyez sûr de vous y connaître un peu dans les contraintes du développement HTML des emails avant de l’utiliser !
Tous ces blocs sont conditionnés à deux, voir trois « onglets » : Contenu, Styles, et Affichage. Vous vous en doutez, l’onglet Contenu est dédié au contenu brut du bloc, quand l’onglet Styles s’attarde plus sur sa mise en forme graphique. L’onglet Affichage donne en revanche plusieurs orientations :
- Visibilité : un radio pour définir que le bloc – ou la section – ne doit être affichée que sur ordinateur, sur mobile, ou sur les deux types de support.
- Logique Afficher/Masquer : pour décider d’afficher ou masquer l’élément concerné selon des conditions – propriétés ou événements enregistrés des abonnés – avec deux méthodes :
- Utiliser le générateur de logique : si une condition est vraie, le bloc s’affiche. Si elle est fausse, le bloc est masqué. A base de select pour se simplifier la vie !
- Utiliser le code : si vous avez déjà votre propre code de conditionnement – répondant bien sûr à la nomenclature de Klaviyo – alors vous êtes libre de rédiger vos conditionnements vous-même ! N’hésitez pas à utiliser la première solution et à convertir votre condition en code pour vous faciliter la tâche !
- Utiliser le générateur de logique : si une condition est vraie, le bloc s’affiche. Si elle est fausse, le bloc est masqué. A base de select pour se simplifier la vie !
- Répétition du contenu : Il est possible de créer des boucles sur un contenu, et ça c’est tout à fait pertinent : qu’il s’agisse de produits dans un email promotionnel ou d’articles dans une newsletter, cela évite la duplication de blocs ou sections à la main, et représente clairement un gros gain de temps !
Des sections préconçues à ma disposition !
Klaviyo me propose un ensemble de blocs préconçus pour me faire gagner un peu de temps ! Chacun de ces blocs préconçus est une section à part entière, faite de plusieurs modules et dispositions. A vous de les utiliser comme bon vous semble, si jamais vous manquez d’inspiration !
Et maintenant, j’enregistre mes blocs comme bloc « Universel »
Une fois que j’ai développé une section ou un bloc, Klaviyo me donne la possibilité d’enregistrer l’élément comme bloc universel. Et ça c’est top parce que ça me donne la possibilité de glisser-déposer des blocs déjà travaillés dans des prochaines campagnes, avec l’accès à deux options :
- Modifier dans toutes les instances : si je modifie le bloc que je viens de déposer, je peux enregistrer les modifications pour qu’elle se répercute sur le bloc d’origine et sur toutes les instances de ce bloc. Quel gros gain de temps !
- Dissocier et modifier de manière indépendante : L’option précédente ne serait pas intéressante si cette seconde option de dissocier l’instance pour la modifier séparement n’existait pas, c’est évident !
Je pense avoir fait le tour des principales fonctionnalités de l’email Builder de Klaviyo, mais je vais prendre le temps de noter quelques points en plus.
Les petits plus de l’email builder de Klaviyo
- L’interface de la solution est particulièrement sobre et claire. Voilà un travail UI poussé qui donne rapidement envie d’utiliser la solution. Un vrai travail de design a été amené sur l’outil Email Builder de Klaviyo.
- En plus d’une UI travaillée, j’ajouterai que l’UX est particulièrement agréable, avec une prévisualisation mobile intégrée dans la solution, et un temps de latence particulièrement réduit. La fonctionnalité d’envoi d’email de test – avec, en plus, une estimation du poids total du fichier HTML – est aisée, avec l’option de choisir un profil de destinataire pour la prévisualisation. Et cerise sur le gâteau, l’enregistrement automatique (quasi instantané) vous évitera de perdre votre travail après une mauvaise manipulation.
- Vous pouvez enregistrer vos créas comme des modèles, pour les retrouver ensuite dans Contenu > Modèles. Ainsi, vous pouvez tout à fait créer des templates pour les différentes typologies de vos campagnes emailing, et les utiliser dans vos différents emails en n’en modifiant que le contenu !
Et ses points d’amélioration
- Je ne comprends pas : les valeurs des marges internes ne peuvent pas être différentes – que celle sur desktop – sur mobile ? Comment est-ce possible en 2025 ? Tout email builder digne de ce nom devrait pourtant proposer cette option à mon sens ! Ca veut dire que si je mets des marges à droite et à gauche de
48pxsur mon bloc texte sur desktop, elles seront toujours de48pxsur mobile, et je ne peux rien y faire ! Ô rage, ô désespoir ! - C’est un truc auquel je pense régulièrement sur les email builder que j’analyse, mais un petit aperçu de ce que risque de donner l’email en Dark Mode, ça ne serait pas du luxe. Après, j’ai bien concience qu’il est difficile de garantir le rendu en question, mais ça pourrait être une feature pertinente !
L’email builder de Klaviyo n’est pas le pire – loin de là. Il est efficace, bien pensé pour les marketeux, et bourré de fonctions e-commerce intelligentes. C’est un outil qui vise l’agilité, pas le pixel perfect. Bref, Klaviyo fait – largement – le job. Voilà un email builder qui sait rester à sa place.
Laisser un commentaire