Editer des contenus existants avec Creative Designer

Pour tirer pleinement parti des possibilités d'édition de Creative Designer, votre code HTML importé doit contenir des balises spécifiques qui le rendent compatible avec l'éditeur WYSIWYG.

Si tout ou partie du code HTML ne contient pas ce balisage, le contenu est alors chargé en 'mode de compatibilité'.

Remarque :

Dans la mesure où ils ne contiennent pas les balises spécifiques, les modèles de contenu par défaut d'Adobe Campaign ne sont actuellement pas pris entièrement en charge par Creative Designer.

Pour créer un modèle Adobe Campaign ou un contenu externe existant entièrement modifiable dans Creative Designer, vous avez deux possibilités :

Remarque :

Adobe recommande la première possibilité qui est plus rapide et qui ne nécessite aucune compétence technique spécifique. La deuxième possibilité est réservée aux utilisateurs plus expérimentés.

Vous pouvez également créer une diffusion avec Creative Designer, copier-coller le code HTML de l'email d'origine à l'aide des composants de contenu Html et les ajuster en fonction de vos besoins. Voir à ce propos la section A propos des composants de contenu.

Cependant, tout comme le mode de compatibilité, un composant HTML est éditable avec des options limitées. Si vous créez un email à l'aide de composants de contenu Html, vous ne pourrez pas utiliser toutes les fonctionnalités d'édition de Creative Designer.

Utiliser des fragments et des composants pour créer des contenus pris en charge par Creative Designer

Pour rendre un contenu externe compatible avec Creative Designer, Adobe recommande de créer entièrement une diffusion et de copier le contenu de votre email existant dans des fragments et des composants.

Un exemple complet est présenté ci-après.

Remarque :

Le nouveau contenu ne sera pas une copie exacte de votre email d'origine, mais les étapes ci-après vous guideront tout au long de la création d'une diffusion qui sera aussi ressemblante que possible.

Supposons que vous souhaitez utiliser une newsletter existante créée sans Adobe Campaign :

des_newsletter_example

Vous voulez que l'en-tête et le pied de page soient identiques dans tous les emails que vous envoyez à l'aide d'Adobe Campaign. Le corps de l'email changera en fonction du contenu que vous envisagez d'afficher dans chaque newsletter.

Prérequis

  1. Dans votre email d'origine, identifiez les sections réutilisables et celles qui seront uniques à chaque email que vous enverrez.

  2. Enregistrez toutes les images et les ressources que vous souhaitez utiliser.

  3. Si vous maîtrisez le langage HTML, divisez votre contenu HTML d'origine en plusieurs parties différentes.

Créer des fragments pour le contenu réutilisable

A l'aide de Creative Designer, créez un fragment pour chaque section réutilisable. Dans cet exemple, vous allez créer deux fragments : un pour l'en-tête et un autre pour le pied de page. Vous pouvez ensuite copier les parties pertinentes de votre contenu existant dans ces fragments.

Pour ce faire, procédez comme suit :

  1. Dans Adobe Campaign, accédez à Ressources > Modèles et fragments de contenu, puis créez un fragment pour votre en-tête. Voir à ce propos la section Créer un fragment de contenu.

  2. Ajoutez autant de composants de structure que vous le souhaitez à votre fragment.

    des_loading_compatible_fragment_1
  3. Ajoutez des composants d'image et de texte à votre structure.

    des_loading_compatible_fragment_2
  4. Téléchargez l'image correspondante, saisissez votre texte et ajustez les paramètres.

    Pour plus d'informations sur la gestion des paramètres de style et les attributs intégrés, voir Editer les styles d'un email.

    des_loading_compatible_fragment_3
  5. Enregistrez votre fragment.

  6. Procédez de la même manière pour créer votre pied de page et enregistrez-le.

    des_loading_compatible_fragment_4

    Si vous maîtrisez le langage HTML, vous pouvez copier-coller le code HTML du pied de page d'origine à l'aide du composant de contenu Html. Voir à ce propos la section A propos des composants de contenu.

    des_loading_compatible_fragment_9

Vos fragments peuvent maintenant être utilisés dans un modèle.

Insérer des fragments et des composants dans votre modèle

Vous pouvez maintenant créer un modèle d'email à l'aide de Creative Designer. Utilisez des composants de contenu pour représenter les différentes sections de votre email et ajustez les paramètres pour qu'ils ressemblent autant que possible à votre newsletter d'origine. Insérez enfin les fragments que vous venez de créer.

  1. A l'aide de Creative Designer, créez un modèle. Voir à ce propos la section Modèles de contenu.

  2. Insérez plusieurs composants de structure dans votre modèle, correspondant à l'en-tête, au pied de page et au corps de votre email. Pour plus d'informations sur l'ajout de composants de structure, voir Editer la structure d'un email à l'aide de Creative Designer.

  3. Insérez autant de composants de contenu que nécessaire pour créer le corps de votre newsletter. Il s'agit du contenu éditable de l'email que vous mettrez à jour tous les mois.

    des_loading_compatible_fragment_5

    Si vous maîtrisez le code HTML, Adobe recommande d'utiliser les composants Html dans lesquels vous pouvez copier-coller les éléments les plus complexes de l'email d'origine. Utilisez d'autres composants comme Button, Image ou Text pour le contenu restant. Voir à ce propos la section A propos des composants de contenu.

    Remarque :

    L'utilisation du composant Html entraîne la création de composants éditables avec des options limitées. Vous devez savoir gérer le code HTML pour sélectionner ce composant.

  4. Ajustez les composants du contenu pour qu'ils correspondent autant que possible à l'email d'origine.

    des_loading_compatible_fragment_6

    Pour plus d'informations sur la gestion des paramètres de style et les attributs intégrés, voir Editer les styles d'un email.

  5. Insérez les deux fragments (en-tête et pied de page) que vous avez précédemment créés dans les composants de structure de votre choix.

    des_loading_compatible_fragment_10
  6. Enregistrez votre modèle.

Vous pouvez maintenant gérer entièrement ce modèle dans Creative Designer afin de créer et mettre à jour la newsletter que vous enverrez tous les mois à vos destinataires.

Pour l'utiliser, créez un email et sélectionnez le modèle de contenu que vous venez de créer.

des_loading_compatible_fragment_7

Rubrique connexe :

Balisage HTML pour garantir la compatibilité avec Creative Designer

Creative Designer utilise un balisage spécifique. Les contenus HTML standard téléchargés dans Adobe Campaign doivent correspondre au balisage attendu pour être entièrement compatibles et éditables.

Cette section répertorie la hiérarchie et les attributs spécifiques nécessaires pour qu'un modèle ou un autre type de contenu soit compatible avec Creative Designer.

Hiérarchie DOM

Utilisez la hiérarchie DOM suivante :

<HTML>
│
└─ <BODY>
  |
  └─ <DIV> Main container [1]
    |
    └─ <DIV> Structure [2]
      |
      └─ <TABLE> Structure table [3]
        |
        └─ <TBODY>
          |
          └─ <TR>
            |
            └─ <TH> Structure column [4]
              |
              └─ <DIV> Fragment/component container [5]
                |
                └─ <DIV> Fragment/component content wrapper [6]
                  |
                  └─ <DIV> Fragment/component content [7]

Noms de classes CSS

Utilisez les noms de classes CSS suivants dans la hiérarchie DOM décrite ci-dessus :

  • container - sur le nœud principal &lt;div&gt; [1] : définit le premier élément conteneur du contenu.

  • structure - sur un nœud &lt;div&gt; [2] : définit un nœud en tant que conteneur structure.

  • structure__table - sur un nœud &lt;table&gt; [3] : définit un nœud en tant que wrapper table structure.

  • colspan1 / colspan2 / colspan3 / colspan4 - sur un nœud &lt;th&gt; [4] : définit le nombre de colonnes qui composeront une structure.

  • fragment - sur un nœud &lt;div&gt; [5] : définit un nœud en tant que fragment.

  • component - sur un nœud &lt;div&gt; [5] : définit un nœud en tant que component.

  • button-container - sur un nœud &lt;div&gt; [6] : nom de la classe wrapper du composant button.

  • text-container - sur un nœud &lt;div&gt; [6] : nom de la classe wrapper du composant text.

  • image-container - sur un nœud &lt;div&gt; [6] : nom de la classe wrapper du composant image.

  • divider-container - sur un nœud &lt;div&gt; [6] : nom de la classe wrapper du composant divider.

Attributs de données

Utilisez les attributs de données suivants dans la hiérarchie DOM décrite ci-dessus :

  • data-structure-id - sur un nœud structure &lt;div&gt; [2] : définit l'identifiant de la structure correspond à sa disposition de colonnes.

    Valeurs possibles : 1-1-column | 1-2-column | 1-3-column | 2-1-column | 2-2-column | 3-1-column | 3-3-column | 4-4-column

  • data-structure-name - sur un nœud structure &lt;div&gt; [2] : définit le nom de la structure. Un espace de nommage lui est attribué avec richtext.

    Exemple : richtext.structure_1_1_column

  • data-component-id - sur un nœud component &lt;div&gt; [5] : définit l'identifiant d'un component.

    Valeurs possibles : button | image | text | divider | social | carousel

  • data-component-name - sur un nœud component &lt;div&gt; [5] : définit le nom du component. Un espace de nommage lui est attribué avec richtext.

    Exemple : richtext.component_button

Autres attributs

  • contenteditable - sur un nœud component wrapper &lt;div&gt; [6] : permet de rendre le contenu éditable (pour les composants de type texte).

    Valeurs possibles : true | false

    Remarque :

    Le nœud du conteneur component ([5]) doit avoir l'attribut contenteditable="false".

Exemple DOM

<html>
  <head></head>
  <body>
    <divclass="container">
      <divclass="structure"data-structure-id="1-1-column"data-structure-name="richtext.structure_1_1_column">
        <tableclass="structure__table"align="center">
          <tbody>
            <tr>
              <thclass="colspan1" >
                <divclass="fragment component"data-component-id="button"data-component-name="richtext.component_button"contenteditable="false">
                  <divcontenteditable="true"class="button-container">
                    <ahref="#">Button</a>
                  </div>
                </div>
              </th>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne