Vous apprendrez
Apprenez à créer des modèles HTML personnalisés compatibles avec l'éditeur par glisser-déposer de Klaviyo(c'est-à-dire des modèles hybrides). En suivant ces étapes, vous pouvez concevoir un e-mail HTML entièrement personnalisé tout en conservant l'accès aux fonctionnalités disponibles uniquement dans l'éditeur par glisser-déposer (par exemple, bloc de produits ou bloc de contenus universels).
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 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-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.
- Sélectionnez l'onglet modèles d'e-mails.
- Cliquez sur Importer.
- Entrez 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.
- Sélectionnez l'onglet modèles d'e-mails.
- 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. Dans l'étape des contenus, sélectionnez le modèle que vous avez importé.
- 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 de contenu universelAjouter un bloc de contenu universel
Ce processus est soutenu pour les blocs de contenus universels, mais pas pour les sections universelles.
- 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 data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
<div data-klaviyo-universal-block="block_id_1"> & nbsp ;<div>
</td> - Remplacez bloc par l'ID de votre bloc de contenu universel. Trouver l'identifiant d'un bloc de contenus universels :
- En accédant à Contenu > Contenu universel
- Ouvrez un bloc de contenu universel pour le modifier.
- L'URL de cette page suivra le format suivant : https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
- Copiez l'identifiant du bloc à partir de l'URL.
- Dans Klaviyo, naviguez vers Content > Templates.
- Sélectionnez l'onglet modèles d'e-mails.
- 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. Dans l'étape des contenus, sélectionnez le modèle que vous avez importé.
- Notez le(s) bloc(s) de contenu universel.
Vous pouvez ajouter plusieurs contenus universels bloc avec un seul extrait de code. Pour ce faire, ajoutez un autre élément div immédiatement après le premier dans l'extrait de code ci-dessus, en utilisant l'ID d'un autre bloc.
Ajouter un bloc d'un autre type (par exemple, un bloc de produit, un bloc de tableau) Ajouter un bloc d'un autre type (par exemple, un bloc de produit, un bloc de tableau)
- 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.
- Sélectionnez l'onglet modèles d'e-mails.
- 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. Dans l'étape des contenus, sélectionnez le modèle que vous avez importé.
- Notez le bloc de texte qui dit Hello world ! Faites glisser un autre bloc (par exemple, un bloc de produits) 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>
Emojis et modèles hybrides d'e-mails
À partir de février 2024, tous les emojis seront pris en charge dans tous les éditeurs de Klaviyo Email (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