Comment créer un modèle de base

Objectif de cet article

Découvrez comment créer un modèle d’e-mail de base dans Klaviyo. Après avoir créé un modèle de base, vous pouvez l’utiliser dans vos campagnes et vos flux pour accélérer votre processus de création et garantir la cohérence de votre branding dans tous vos messages.

Avant de commencer

Un modèle de base comprend des sections clés telles qu’un en-tête, un corps de texte et un pied de page. Accédez à Contenu > Modèles, puis cliquez sur Créer pour commencer. Suivez ensuite les étapes ci-dessous pour ajouter du contenu réutilisable à votre modèle. 

1. Définir les styles de base

Avant de modifier le style de chaque bloc, définissez vos styles de base. Ces styles, tels que la police, les couleurs, les marges internes, etc., s’appliquent à tous les blocs de votre modèle.

L’ajout de styles de base facilite l’application de votre branding et réduit le poids de votre code, ce qui permet d’éviter les coupures dans Gmail.

Pour ajouter des styles de base : 

1. Cliquez sur Styles (à côté de Contenu).
   
   
   Si vous voyez Options d’affichage à côté de l’onglet Styles au lieu de Contenu, cliquez sur Terminé pour quitter les paramètres de style du bloc/de la section, qui ne s’appliquent qu’à ce bloc ou à cette section. 
2. Définissez une couleur d’arrière-plan pour votre modèle et votre contenu, ainsi qu’une marge et une marge intérieure. Nous vous recommandons de conserver la largeur sur 600 px pour une compatibilité optimale avec les fournisseurs de boîtes de réception.
   
3. Ajoutez des styles de texte, notamment des polices, des tailles de police, des couleurs et des espacement. Veillez à définir des styles pour le texte normal, ainsi que pour H1, H2, H3 et H4. Vous pouvez utiliser ces styles d’en-tête pour mettre en évidence le texte dans votre e-mail. Apprenez à utiliser une police personnalisée dans vos e-mails.
   
4. Ajoutez une couleur et un style de lien.
   
5. Si Optimisation pour mobile est activé, ajoutez des paramètres mobiles. Ceux-ci apparaîtront lorsque quelqu’un ouvrira votre e-mail sur un appareil mobile. En savoir plus sur l’optimisation sur mobile.
   
6. Enfin, sélectionnez la devise de votre boutique dans le menu Devise. Le symbole de la devise sélectionnée est utilisé partout où la balise {% currency_format … %} tag est présente dans un modèle.
   

2. Créer une section d’en-tête

Après avoir configuré vos styles d’e-mail, ajoutez votre section d’en-tête. En général, les sections d’en-tête comprennent un logo, des liens clés et parfois une bannière contenant des informations sur votre nouvelle offre ou sur le statut VIP du destinataire.

1. Si votre modèle comporte déjà une barre d’en-tête, ajoutez-y votre propre logo. Vous pouvez également faire glisser un bloc Header et ajouter votre logo. Découvrez les bonnes pratiques en matière de dimensionnement et de qualité des images.
   
2. Sélectionnez une mise en page dans les menus Mise en page pour ordinateur et Mise en page pour mobile (par exemple, Logo en ligne pour ordinateur et Tout empiler pour mobile). N’oubliez pas que les appareils mobiles sont dotés d’écrans beaucoup plus petits que les ordinateurs. L’empilement des contenus peut donc faciliter la lecture et la navigation. 
3. Dans la section Contenu, ajoutez les principaux liens de navigation du site. Cliquez sur l’icône de la corbeille pour supprimer les liens, ou sur Ajouter des liens pour en ajouter. Les liens les plus courants à inclure dans votre en-tête sont les suivants : Acheter, Nouveautés, À propos, Soldes, FAQ, Sélection de catégories de produits.
   
4. Ajustez les styles de bloc dans les sections situées sous le contenu de votre lien. N’oubliez pas que si vous souhaitez appliquer un paramètre de style à l’ensemble de votre e-mail, vous devez utiliser l’onglet principal Styles, comme indiqué dans la section ci-dessus.
5. Cliquez sur Terminé pour revenir aux options principales de modification du modèle.

Ajouter une bannière d’information facultative

Vous pouvez ajouter une bannière d’information au-dessus ou au-dessous de votre barre d’en-tête.

1. Faites glisser un bloc de texte dans la même section que votre barre de liens.
   
2. Définissez une couleur principale pour l’arrière-plan et ajoutez un message, comme « Utilisez le code BIENVENUE pour bénéficier d’une réduction de 15 % sur votre première commande ! ».
3. Vérifiez que votre bannière et votre barre de liens se trouvent dans la même section en survolant l’espace à gauche ou à droite des blocs. Une bordure Section grise doit entourer les deux blocs au survol, et elle devient bleue lorsque l’on clique sur la section.
   
4. Facultatif : cliquez sur l’icône en forme d’étoile pour enregistrer la section en tant que contenu universel. Les blocs et sections universels peuvent être utilisés dans plusieurs modèles et vous pouvez modifier toutes les instances du bloc/de la section en même temps. En savoir plus sur le contenu universel. 

3. Ajouter le corps du texte

1. Faites glisser un bloc Section depuis la section Mise en page de la barre latérale Contenu et placez-le sous votre en-tête.
   
2. Ajoutez des blocs de remplissage pour le contenu du corps de votre e-mail. Il peut s’agir de blocs de texte qui contiennent des descriptions de votre marque ou des messages promotionnels, des mises en page courantes que vous avez l’intention d’utiliser, des images de produits de remplissage, etc. Apprenez à placer le contenu côte à côte à l’aide de colonnes, de blocs fractionnés et de tableaux.
   

4. Créer une section de pied de page

Klaviyo exige que vous incluiez un lien de désabonnement dans vos e-mails, et ce lien est généralement placé dans le pied de page. En outre, les éléments de pied de page suivants sont recommandés :

• Adresse de votre entreprise
• Lien vers votre politique de confidentialité
• Liens vers vos profils sur les réseaux sociaux (par exemple, Facebook, Instagram, Twitter, Tiktok)
• Lien vers votre site web
• Lien vers les préférences en matière d’envoi d’e-mails

Pour ajouter un pied de page à votre modèle de base :

1. Faites glisser une nouvelle section sous votre corps de texte ou modifiez le pied de page par défaut.
2. Ajouter un bloc de texte.
3. Cliquez sur Personalization. 
4. Dans le champ Rechercher des personnalisations, recherchez « se désabonner ».
5. Sélectionnez Unsubscribe pour ajouter un lien de désabonnement à votre bloc de texte.
6. Utilisez ce même menu pour ajouter une adresse d’organisation, un lien de gestion des préférences, un lien d’affichage web et plus encore.
   
7. Lorsque vous enverrez l’e-mail, ces tags seront remplacés par le texte ou les liens appropriés.
   
8. Ensuite, faites glisser un bloc Liens vers les réseaux sociaux dans votre modèle, directement au-dessus du bloc de texte des étapes précédentes. 
9. Sélectionnez vos réseaux sociaux dans le menu déroulant pour les ajouter au bloc.
   
10. Dans le champ Link address de chaque réseau social, ajoutez un lien vers votre profil. 
11. Choisissez un style d’icône.
    
12. Cliquez sur Terminé pour revenir aux options principales de modification du modèle.
13. Si vous le souhaitez, vous pouvez enregistrer l’ensemble de la section du pied de page en tant que contenu universel. 

5. Aperçu

Une fois que vous avez ajouté un en-tête, un corps de texte et un pied de page, prévisualisez l’e-mail.

1. Cliquez sur Preview & test dans le coin supérieur droit de l’éditeur d’e-mail. 
2. Testez les affichages sur ordinateur et sur mobile pour vous assurer que le modèle s’affiche comme prévu dans les deux formats. 
3. Cliquez sur Send test pour vous envoyer un e-mail de test. 
4. Cliquez sur Terminé pour fermer la fenêtre d’aperçu. 
5. Cliquez sur Enregistrer pour enregistrer votre modèle. 

Une fois que vous avez enregistré le modèle de base, vous pouvez l’utiliser comme base pour tous les futurs e-mails de campagne et de flux. 

Ressources supplémentaires

• Formation : Bonnes pratiques pour améliorer le contenu de vos e-mails
• Comment créer, modifier, supprimer et gérer des modèles
• Comment ajouter un prénom à un e-mail ou à un SMS
• Comment afficher ou masquer des blocs et des sections de modèles en fonction de variables dynamiques