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).

Pour reconstruire un modèle HTML existant en tant que modèle glisser-déposer, utilisez la conversion HTML vers glisser-déposer. Klaviyo utilise l’IA pour recréer la conception avec des blocs modifiables. Consultez la mise en page et le contenu convertis avant l’envoi. Utilisez un modèle hybride lorsque vous souhaitez conserver votre HTML personnalisé et ajouter des blocs modifiables uniquement dans des zones spécifiques.

Ajoutez un extrait de code à votre modèle HTML

Chaque extrait de code ci-dessous crée 1 région modifiable. Vous pouvez ajouter plusieurs blocs glisser-déposer dans cette région. Pour rendre des zones distinctes de votre modèle modifiables, ajoutez un extrait de code pour chaque région.

Placez chaque extrait <td> dans un <tr> dans la mise en page du tableau de votre e-mail. Définissez data-klaviyo-region-width-pixels sur la largeur de cette région en pixels ; les exemples utilisent 600.

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.

Avant d’importer un modèle d’e-mail marketing, incluez un tag de désabonnement, tel que {% unsubscribe %}. Enregistrez votre modèle en tant que fichier .html.

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.
   

textCopy

<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 E-mail : enregistré.
3. Cliquez sur Créer > Importer un modèle d’e-mail.
4. Saisissez un nom pour votre modèle, chargez votre fichier HTML, puis cliquez sur Importer le modè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. Si vous êtes invité à choisir un type de modèle, sélectionnez Glisser-déposer.

1. Dans la galerie de modèles, sélectionnez E-mail : enregistrés, sélectionnez le modèle que vous avez importé, puis cliquez sur Utiliser le modèle.
2. Notez le bloc de texte qui indique Hello world! Voici votre bloc de texte modifiable.
3. 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.
   

textCopy

<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, ajoutez une image prédéfinie dans le div. Remplacez l’URL de l’image d’exemple ci-dessous par une URL d’image accessible publiquement, puis remplacez le lien et le texte alternatif par les vôtres :

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block">
        <a href="https://www.klaviyo.com/"><img src="https://example.com/my_image.png" alt="My Image" /></a>
    </div>
</td>

1. Dans Klaviyo, accédez à Contenu > Modèles.
2. Sélectionnez l’onglet E-mail : enregistré.
3. Cliquez sur Créer > Importer un modèle d’e-mail.
4. Saisissez un nom pour votre modèle, chargez votre fichier HTML, puis cliquez sur Importer le modè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. Si vous êtes invité à choisir un type de modèle, sélectionnez Glisser-déposer.
2. Dans la galerie de modèles, sélectionnez E-mail : enregistrés, sélectionnez le modèle que vous avez importé, puis cliquez sur Utiliser le modèle.
3. Notez le bloc image, qui contiendra soit un bouton permettant de téléverser une image, soit l’image que vous avez incluse.
4. 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 de contenu universel après avoir importé votre modèle.
   

textCopy

<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 E-mail : enregistré.
4. Cliquez sur Créer > Importer un modèle d’e-mail.
5. Saisissez un nom pour votre modèle, chargez votre fichier HTML, puis cliquez sur Importer le modè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. Si vous êtes invité à choisir un type de modèle, sélectionnez Glisser-déposer.
2. Dans la galerie de modèles, sélectionnez E-mail : enregistrés, sélectionnez le modèle que vous avez importé, puis cliquez sur Utiliser le modèle.
3. 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.
   

textCopy

<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 E-mail : enregistré.
3. Cliquez sur Créer > Importer un modèle d’e-mail.
4. Saisissez un nom pour votre modèle, chargez votre fichier HTML, puis cliquez sur Importer le modè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. Si vous êtes invité à choisir un type de modèle, sélectionnez Glisser-déposer.
2. Dans la galerie de modèles, sélectionnez E-mail : enregistrés, sélectionnez le modèle que vous avez importé, puis cliquez sur Utiliser le modèle.
3. Notez le bloc de texte qui indique Hello world! Faites glisser un autre bloc (par ex., un bloc de produit) sous ce bloc.
4. 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

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

Prévisualiser votre e-mail hybride

Prévisualisez votre e-mail sur ordinateur et sur mobile, puis envoyez un e-mail test avant de l’envoyer aux destinataires. Vérifiez la mise en page, les images, les liens, ainsi que tout contenu dynamique dans la campagne ou le flux dans lesquels vous prévoyez de l’utiliser. Attendez que l’enregistrement de vos modifications soit terminé avant de quitter l’éditeur.

Résultat

Après avoir effectué ces étapes, vous pouvez ajouter et modifier des blocs glisser-déposer au sein des régions définies par vos extrait de code. Le HTML personnalisé environnant reste en dehors de ces régions modifiables.

Ressources supplémentaires