Fractionner l'e-mail en sections de contenu

Couper/Coller :

Pour fractionner l'e-mail en différentes sections de contenu, nous pratiquerons un couper/coller à partir du code source dans les différentes sections. L'e-mail est structuré de la manière suivante :

  • Style CSS pour rendre l'e-mail réactif
  • Un tableau entoure tous les éléments avec une seule cellule :

    <table bgcolor="#F5F5F5" border="0" cellpadding="0" cellspacing="0" width="100%">
     <tbody
       <tr>
         <td align="center">
             EVERYTHING ELSE: HEADER, CONTENT AND FOOTER​
          </td>
       </tr>
     </tbody>
    </table>
  • L'en-tête, la partie médiane du contenu et un pied de page

Si nous fractionnons l'e-mail, nous divisons le corps (tout ce qui se trouve entre les balises <body>) en différentes parties. Ce que vous voyez dans l'onglet 'Source' ou 'Conception' est en fait le corps de l'e-mail. Campaign insère les balises du corps <body> autour de ce contenu. Le logiciel ajoute également les attributs de la balise de l'en-tête, du contenu de l'en-tête et de la balise du corps, ainsi que le type de document (doctype). Les attributs du contenu de l'en-tête et de la balise du corps, ainsi que le type de document peuvent être définis dans les propriétés du message.

Nous créons des sections distinctes pour :

  • Style CSS
  • Début de la cellule du tableau autour :

    <table bgcolor="#F5F5F5" border="0" cellpadding="0" cellspacing="0" width="100%">
     <tbody
       <tr>
         <td align="center">
  • En-tête
  • Partie du contenu : le visuel et le texte
  • Pied de page
  • Fin de la cellule du tableau autour :

           </td>
       </tr>
     </tbody>
    </table>

1. Vérifiez que l'e-mail est en mode 'Modifier'. Dans l'onglet 'Conception', cliquez n'importe où avec le bouton droit, puis cliquez sur 'Ajouter section' pour créer la première section. En fait, le corps de l'e-mail est divisé en deux sections, l'intégralité du contenu se trouve dans la première section et une nouvelle section vide est créée en dessous.

2. Cliquez avec le bouton droit dans la deuxième section vide et sélectionnez 'Insérer une section > en dessous' pour créer une troisième section. Continuez d'ajouter des sections, nous avons besoin de six sections au total

3. Cliquez avec le bouton droit dans la première section, sélectionnez 'Propriétés' et renommez-la « Style CSS ». Faites de même pour les autres sections. Les noms sont les suivants :

  • Style CSS
  • Début du tableau
  • En-tête
  • Contenu
  • Pied de page
  • Fin du tableau

4. Maintenant nous arrivons au plus délicat. Tout se trouve encore dans la première section « Style CSS », il nous faut donc couper/coller tout, excepté le style, dans les autres sections. Sélectionnez la première section et ouvrez l'onglet 'Source'.

Les images ci-dessous représentent les tableaux développés, pour que puissiez facilement voir ce que vous devez couper/coller. En résumé, cela va de la ligne de commentaire à la ligne de commentaire. Utilisez les numéros de ligne pour vous guider.

Voici le contenu par section :

  • Section 2, Début du tableau : Couper/coller, après la balise de fermeture </style>, jusqu'à juste avant la ligne de commentaire : <!-- ONLY VISIBLE ON MAIL (START) -->

  • Section 3, En-tête : Couper/coller, à partir de la ligne de commentaire : <!-- ONLY VISIBLE ON MAIL (START) -->, jusqu'à la ligne de commentaire : <!-- /HEADER (END) -->

  • Section 4, Contenu : Couper/coller, à partir de la ligne de commentaire : <!-- VISUAL (START) -->, jusqu'à la ligne de commentaire : <!-- /BODY (END) -->

  • Section 5, Pied de page : Couper/coller, à partir de la ligne de commentaire :  <!-- FOOTER (START) -->, jusqu'à la ligne de commentaire : <!-- /FOOTER (END) -->

  • Section 6, Fin du tableau : Couper/coller les quatre dernières lignes, après la ligne de commentaire : <!-- /FOOTER (END) --> jusqu'à la fin

  • La Section 1, Style CSS ne doit maintenant contenir que la balise <style type="text/css">...</style>

5. Enregistrez votre e-mail.

Le résultat

Si nous voulons dupliquer cet e-mail pour d'autres promotions annuelles, nous suffit de concentrer nos efforts sur la partie Contenu, les autres sections restent les mêmes. Mais cela dépasse le simple cadre de la structuration de l'e-mail. Supposons que l'intégralité de la partie médiane doive être différente pour un autre groupe cible. Nous pouvons maintenant facilement ajouter une seconde partie « médiane » et placer des contraintes sur les deux sections afin de diffuser le contenu à un groupe ou à l'autre, tandis que les autres sections restent les mêmes pour les deux groupes.

Si vous cliquez sur l'icône 'Contrainte' au début de chaque section, l'éditeur de contrainte s'affiche

 

Retour à 'Exemple : un e-mail de base, étape par étape'