Vous apprendrez
Apprenez à créer des modèles HTML personnalisés compatibles avec l'éditeur "drag-and-drop" de Klaviyo (c'est-à-dire des modèles hybrides). En suivant ces étapes, vous pouvez concevoir un courriel HTML entièrement personnalisé tout en conservant l'accès aux fonctionnalités disponibles uniquement dans l'éditeur par glisser-déposer (par exemple, les blocs de produits ou le contenu universel).
Nous ne recommandons l'utilisation du HTML personnalisé qu'aux spécialistes du marketing techniquement avertis, ou à toute personne ayant accès à un développeur. Bien que notre produit prenne en charge le HTML personnalisé, notre équipe d'assistance n'est pas en mesure de vous aider à créer vos modèles personnalisés au-delà des conseils généraux fournis dans cette documentation. Besoin d'aide ? Contactez un partenaire de Klaviyo.
Pour maintenir la sécurité de vos données, l'équipe d'assistance de Klaviyo n'est pas en mesure d'ouvrir vos fichiers HTML.
Ajoutez un extrait de code à votre modèle HTML
N'ajoutez qu'un seul des extraits de code décrits ci-dessous par modèle d'e-mail. Un extrait de code vous permet d'ajouter plusieurs blocs par glisser-déposer, de sorte que vous n'avez pas besoin d'ajouter plusieurs extraits de code.
Par exemple, si vous souhaitez ajouter une image et un bloc de tableau à l'aide de l'éditeur par glisser-déposer, il vous suffit de suivre les étapes ci-dessous pour ajouter un bloc d'image personnalisable. Une fois que vous aurez téléchargé votre modèle sur Klaviyo et que vous l'aurez utilisé dans une campagne ou un flux, vous pourrez ajouter des blocs au-dessus ou au-dessous du bloc d'image.
Ajouter un bloc de texte modifiable Ajouter un bloc de texte modifiable
- Créez un modèle HTML personnalisé à l'aide de votre éditeur HTML préféré.
- Ajoutez l'extrait de code suivant à votre modèle HTML. Placez-le à l'endroit où vous souhaitez ajouter votre bloc de texte dans votre modèle.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> < div class="klaviyo-block klaviyo-text-block"> Hello world !</div> </td> - Dans Klaviyo, naviguez vers Content > Templates.
- Cliquez sur Importer.
- Saisissez un nom pour votre modèle, téléchargez votre fichier HTML et importez-le.
- Si vous ouvrez le modèle à partir de l'onglet Modèles, vous verrez le code de votre modèle dans l'éditeur HTML de Klaviyo.
- Pour accéder au modèle dans l'éditeur par glisser-déposer de Klaviyo, ajoutez-le à une campagne ou à un flux.
- Sélectionnez Glisser-déposer comme type de modèle.
- Notez le bloc de texte qui dit Hello world ! Il s'agit de votre bloc de texte modifiable.
- Faites glisser et déposez des blocs supplémentaires au-dessus ou au-dessous du bloc de texte, au besoin.
Ajouter un bloc d'images personnalisableAjouter un bloc d'images personnalisable
- Créez un modèle HTML personnalisé à l'aide de votre éditeur HTML préféré.
- Ajoutez l'extrait de code suivant à votre modèle HTML. Veillez à le placer à l'endroit où vous souhaitez ajouter votre bloc d'images après avoir importé votre modèle.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> < div class="klaviyo-block klaviyo-image-block"></div> </td>- En option, vous pouvez ajouter une image prédéfinie dans la div. Si vous choisissez de le faire, votre code ressemblera à ceci :
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> < div class="klaviyo-block klaviyo-image-block"> < a href="http://klaviyo.com>< img src="example.com/my_image.png" alt="Mon image" /></a>
</div> </td>
- En option, vous pouvez ajouter une image prédéfinie dans la div. Si vous choisissez de le faire, votre code ressemblera à ceci :
- Dans Klaviyo, naviguez vers Content > Templates.
- Cliquez sur Importer.
- Saisissez un nom pour votre modèle, téléchargez votre fichier HTML et importez-le.
- Si vous ouvrez le modèle à partir de l'onglet Modèles, vous verrez le code de votre modèle dans l'éditeur HTML de Klaviyo.
- Pour accéder au modèle dans l'éditeur par glisser-déposer de Klaviyo, ajoutez-le à une campagne ou à un flux.
- Sélectionnez Glisser-déposer comme type de modèle.
- Notez le bloc d'image, qui contiendra soit un bouton pour télécharger une image, soit l'image que vous avez incluse.
- Faites glisser et déposez des blocs supplémentaires au-dessus ou au-dessous du bloc d'image, comme vous le souhaitez.
Ajouter un bloc d'un autre type (par exemple, un bloc de produit, un bloc de tableau, un contenu universel) Ajouter un bloc d'un autre type (par exemple, un bloc de produit, un bloc de tableau, un contenu universel)
- Créez un modèle HTML personnalisé à l'aide de votre éditeur HTML préféré.
- Ajoutez l'extrait de code suivant à votre modèle HTML. Placez-le à l'endroit où vous souhaitez ajouter vos blocs après avoir importé votre modèle.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> < div class="klaviyo-block klaviyo-text-block"> Hello world !</div> </td> - Dans Klaviyo, naviguez vers Content > Templates.
- Cliquez sur Importer.
- Saisissez un nom pour votre modèle, téléchargez votre fichier HTML et importez-le.
- Si vous ouvrez le modèle à partir de l'onglet Modèles, vous verrez le code de votre modèle dans l'éditeur HTML de Klaviyo.
- Pour accéder au modèle dans l'éditeur par glisser-déposer de Klaviyo, ajoutez-le à une campagne ou à un flux.
- Sélectionnez Glisser-déposer comme type de modèle.
- Notez le bloc de texte qui dit Hello world ! Faites glisser un autre bloc (par exemple, un bloc produit ou un contenu universel) sous ce bloc.
- Supprimez le bloc de texte et ajoutez d'autres blocs personnalisés, si vous le souhaitez.
Exemple de code hybride pour un modèle d’e-mail
L’exemple ci-dessous montre un fichier HTML fonctionnel avec l’extrait de code hybride pour un bloc de texte. Utilisez ce code pour tester la fonctionnalité de l’éditeur hybride.
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Un simple e-mail hybride</title>
<style>
body {
background-color: #f6f6f6;
font-family: sans-serif;
margin: 20px;
}
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.container {
margin: 0 auto !important;
width: 600px;
}
.wrapper {
box-sizing: border-box;
padding: 15px;
}
table {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<table class="main">
<tr>
<td class="wrapper">Ceci est un e-mail HTML très simple</td>
</tr>
<tr>
<td class="wrapper">
<table>
<tr>
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
<div class="klaviyo-block klaviyo-text-block">
Bonjour !
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="wrapper">{% unsubscribe %}</td>
</tr>
</table>
</div>
</body>
</html>
Emoji et modèles d'e-mails hybrides
À partir de février 2024, tous les emoji seront pris en charge dans tous les éditeurs de messagerie de Klaviyo (c'est-à-dire l'éditeur par glisser-déposer, l'éditeur hybride, l'éditeur de texte seul et l'éditeur HTML personnalisé).
RésultatsRésultats
Après avoir suivi ces étapes, vous serez en mesure d'ajouter et de modifier certaines zones d'un modèle HTML personnalisé. Notez que vous ne pouvez pas ajouter ou modifier des blocs par glisser-déposer dans n'importe quelle zone du modèle personnalisé, sauf à l'endroit où le bloc initial a été placé.
Ressources complémentaires