Comment créer un modèle d’e-mail hybride

Objectif de cet article

Découvrez comment 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 à des fonctionnalités disponibles uniquement dans l’éditeur par glisser-déposer (par exemple, les blocs de produits ou les blocs de contenu universel).

Ajoutez un extrait de code à votre modèle HTML

N’ajoutez qu’un seul extrait de code décrit ci-dessous par modèle d’e-mail. Un extrait de code vous permet d’ajouter plusieurs blocs glisser-déposer, afin que vous n’ayez 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, suivez simplement les étapes Ajouter un bloc d’image personnalisable ci-dessous. Une fois que vous avez importé votre modèle dans Klaviyo et que vous l’utilisez dans une campagne ou un flux, vous pourrez ajouter des blocs au-dessus ou en dessous du bloc d’image.

Ajouter un bloc de texte modifiable

1. Créez un modèle HTML personnalisé à l’aide de votre éditeur HTML préféré.
2. 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.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. Dans Klaviyo, accédez à Contenu > Modèles.
2. Sélectionnez l’onglet Modèles d’e-mail.
3. Cliquez sur Importer.
4. Saisissez un nom pour votre modèle, chargez votre fichier HTML et importez-le.
5. Si vous ouvrez le modèle depuis votre onglet Modèles, vous verrez le code de votre modèle dans l’éditeur HTML de Klaviyo.
   

1. Pour accéder au modèle dans l’éditeur glisser-déposer de Klaviyo, ajoutez-le à une campagne ou à un flux.
2. Sélectionnez Glisser-déposer comme type de modèle.
   

1. Notez le bloc de texte qui indique Hello world! Voici votre bloc de texte modifiable.
2. 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 personnalisable

1. Créez un modèle HTML personnalisé à l’aide de votre éditeur HTML préféré.
2. Ajoutez l’extrait de code suivant à votre modèle HTML. Veillez à le placer à l’endroit où vous souhaitez ajouter votre bloc d’image après avoir importé votre modèle.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block"></div>
</td>

1. Si vous le souhaitez, vous pouvez ajouter une image prédéfinie dans la div. Si vous choisissez de le faire, votre code ressemblera à ceci :
   

text Copy

<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="My Image" /></a>    </div>
</td>

1. Dans Klaviyo, accédez à Contenu > Modèles.
2. Sélectionnez l’onglet Modèles d’e-mail.
3. Cliquez sur Importer.
4. Saisissez un nom pour votre modèle, chargez votre fichier HTML et importez-le.
5. Si vous ouvrez le modèle depuis votre onglet Modèles, vous verrez le code de votre modèle dans l’éditeur HTML de Klaviyo.
   

1. Pour accéder au modèle dans l’éditeur glisser-déposer de Klaviyo, ajoutez-le à une campagne ou à un flux. À l’étape de contenu, sélectionnez le modèle que vous avez importé.
2. Notez le bloc image, qui contiendra soit un bouton permettant de téléverser une image, soit l’image que vous avez incluse.
3. Faites glisser et déposez des blocs supplémentaires au-dessus ou au-dessous du bloc d’image, au besoin.
   

Ajouter un bloc de contenu universel

Ce processus est pris en charge pour les blocs de contenu universel, pas pour les sections universelles.

1. Créez un modèle HTML personnalisé à l’aide de votre éditeur HTML préféré.
2. Ajoutez l’extrait de code suivant à votre modèle HTML. Veillez à le placer à l’endroit où vous souhaitez ajouter votre bloc d’image après avoir importé votre modèle.
   

text Copy

<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">     <div data-klaviyo-universal-block="block_id_1">&nbsp;<div></td>

1. Remplacez block_id_1 par l’ID de votre bloc de contenu universel. Pour trouver l’ID d’un bloc de contenu universel :
   1. Accédez à Contenu > Contenu universel.
   2. Ouvrez un bloc de contenu universel pour le modifier.
   3. L’URL de cette page suivra ce format : https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
   4. Copiez l’ID du bloc depuis l’URL.
2. Dans Klaviyo, accédez à Contenu > Modèles.
3. Sélectionnez l’onglet Modèles d’e-mail.
4. Cliquez sur Importer.
5. Saisissez un nom pour votre modèle, chargez votre fichier HTML et importez-le.
6. Si vous ouvrez le modèle depuis votre onglet Modèles, vous verrez le code de votre modèle dans l’éditeur HTML de Klaviyo.
   

1. Pour accéder au modèle dans l’éditeur glisser-déposer de Klaviyo, ajoutez-le à une campagne ou à un flux. À l’étape de contenu, sélectionnez le modèle que vous avez importé.
2. Notez le(s) bloc(s) de contenu universel.

Vous pouvez ajouter plusieurs blocs de contenu universel 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.

Ajoutez un bloc d’un autre type (c.-à-d. bloc de produit, bloc de tableau)

1. Créez un modèle HTML personnalisé à l’aide de votre éditeur HTML préféré.
2. Ajoutez l’extrait de code suivant à votre modèle HTML. Placez-le où vous souhaitez ajouter vos blocs après avoir importé votre modèle.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. Dans Klaviyo, accédez à Contenu > Modèles.
2. Sélectionnez l’onglet Modèles d’e-mail.
3. Cliquez sur Importer.
4. Saisissez un nom pour votre modèle, chargez votre fichier HTML et importez-le.
5. Si vous ouvrez le modèle depuis votre onglet Modèles, vous verrez le code de votre modèle dans l’éditeur HTML de Klaviyo.
   

1. Pour accéder au modèle dans l’éditeur glisser-déposer de Klaviyo, ajoutez-le à une campagne ou à un flux. À l’étape de contenu, sélectionnez le modèle que vous avez importé.
2. Notez le bloc de texte qui indique Hello world! Faites glisser un autre bloc (par ex., un bloc de produit) sous ce bloc.
3. Supprimez le bloc de texte et ajoutez des blocs personnalisés supplémentaires, selon vos besoins.
   

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>A simple hybrid email</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">This is a very simple HTML email</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">
                    Hello world!
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="wrapper">{% unsubscribe %}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Émojis et modèles d’e-mails hybrides

Depuis février 2024, tous les émojis sont pris en charge dans tous les éditeurs Klaviyo Email (c’est-à-dire l’éditeur glisser-déposer, l’éditeur hybride, l’éditeur texte uniquement et l’éditeur HTML personnalisé).

Résultat

Après avoir suivi ces étapes, vous pourrez ajouter et modifier certaines zones d’un modèle HTML personnalisé. Notez que vous ne pouvez pas ajouter ni modifier des blocs par glisser-déposer dans une zone du modèle personnalisé, sauf à l’endroit où le bloc initial a été placé.

Ressources supplémentaires