Création de fragments

Après avoir créé un fragment, utilisez l’espace de conception visuelle pour créer les composants de structure et de contenu dans votre fragment.

Ajouter la structure et le contenu design-fragment

  1. Pour commencer la conception de votre contenu, faites glisser un élément du Structures et déposez-le sur la zone de travail.

    Ajoutez autant d’éléments de Structures que nécessaire et modifiez les paramètres de chacun dans le volet de droite.

    note tip
    TIP
    Sélectionnez le composant n:n colonne pour définir le nombre de colonnes de votre choix (entre trois et 10). Vous pouvez également définir la largeur de chaque colonne en déplaçant les flèches situées sous celle-ci.

    Faites glisser une structure sur la zone de travail et ajustez les paramètres{width="800" modal="regular"}

    La taille de chaque colonne ne peut pas être inférieure à 10 % de la largeur totale du composant de structure. Seules les colonnes vides peuvent être supprimées.

    Pour plus d’informations sur l’utilisation et la mise en forme de ces composants, voir Composants de structure.

  2. Développez la section Contenu et ajoutez autant de composants de contenu que nécessaire dans un ou plusieurs composants de structure.

    Faites glisser un élément de contenu sur la zone de travail et ajustez les paramètres{width="800" modal="regular"}

  3. Si nécessaire, vous pouvez effectuer des personnalisations supplémentaires pour chaque composant dans les onglets Paramètres ou Style.

    Par exemple, vous pouvez modifier le style de texte, la marge intérieure ou la marge de chaque composant.

  4. Pour ajouter du contenu conditionnel et adapter le contenu aux profils ciblés en fonction de règles conditionnelles, sélectionnez un composant de contenu et cliquez sur l’icône Activer le contenu conditionnel dans la barre d’outils du composant.

    Pour plus d’informations, voir ​ Contenu conditionnel ​.

Ajout de ressources add-assets

Dans l’espace de conception visuelle, sélectionnez l’icône __ ( icône Assets ) dans la barre de navigation de gauche pour parcourir et sélectionner des ressources d’image dans la bibliothèque de ressources d’Marketo Optimizer.

Pour connaître les étapes de sélection, de remplacement ou de chargement de ressources d’image, consultez Utilisation de ressources pour la création de contenu.

Parcourir les calques, paramètres et styles navigate-layers-settings-styles

Lorsque vous travaillez avec le contenu dans l’espace de conception visuelle, vous pouvez accéder aux composants, colonnes et éléments de contenu à l’aide de l’arborescence de navigation. Cliquez sur l’icône Arborescence de navigation ( Icône d’arborescence de navigation ) à gauche pour afficher l’arborescence.

Accéder aux calques de contenu{width="800" modal="regular"}

L’exemple suivant décrit les étapes à suivre pour ajuster la marge intérieure et l’alignement vertical dans un composant de structure avec des colonnes.

  1. Sélectionnez la colonne dans le composant de structure directement dans la zone de travail ou à l’aide de l’arborescence de navigation affichée à gauche.

  2. Dans la barre d’outils Colonne, cliquez sur l’outil Sélectionner une colonne et choisissez celle à modifier.

    Vous pouvez également la sélectionner dans l’arborescence. Les paramètres modifiables de cette colonne sont affichés dans les onglets Paramètres et Styles sur la droite.

    Composants de colonne affichés dans le concepteur visuel{width="800" modal="regular"}

  3. Pour modifier les propriétés de la colonne, cliquez sur l’onglet Styles à droite et modifiez-les selon vos besoins :

    • Pour Arrière-plan, modifiez la couleur d’arrière-plan si nécessaire.

      Décochez la case pour un arrière-plan transparent. Activez le paramètre Image d’arrière-plan pour utiliser une image comme arrière-plan au lieu d’une couleur unie.

    • Pour Alignement, sélectionnez l’icône Haut, Milieu ou Bas.

    • Pour Marge intérieure, définissez la marge intérieure pour tous les côtés.

      Sélectionner Marge intérieure différente pour chaque côté si vous souhaitez mieux définir la marge intérieure. Cliquez sur l’icône Verrouiller pour interrompre la synchronisation.

    • Développez la section Avancé pour définir les styles intégrés de la colonne.

    Modifier les styles de la colonne sélectionnée{width="700" modal="regular"}

  4. Si nécessaire, répétez ces étapes pour ajuster l’alignement et la marge intérieure des autres colonnes du composant.

  5. Enregistrez vos modifications.

Personnaliser le contenu personalize-content

Marketo Optimizer utilise la syntaxe Handlebars pour la personnalisation. Les jetons sont remplacés au moment de l’envoi par des valeurs provenant des données de profil de chaque destinataire.

Pour ajouter de la personnalisation :

  1. Sélectionnez le composant de texte et cliquez sur l’icône Ajouter une personnalisation ( Icône Personnaliser ) dans la barre d’outils.
  2. Dans la boîte de dialogue de personnalisation, parcourez l’arborescence du schéma à gauche et sélectionnez un attribut de profil. L’éditeur insère l’expression Handlebars correspondante, par exemple, {{profile.firstName}}.
  3. Ajoutez une valeur de secours pour gérer les données manquantes, si nécessaire, par exemple, {{profile.firstName | default: "there"}}.
  4. Cliquez sur Confirmer ou Insérer. L’expression apparaît en ligne dans le champ.

Pour plus d’informations sur les outils et la syntaxe de l’éditeur d’expression, voir Éditeur ​.

Modifier le tracking des URL liées edit-linked-url-tracking

Le panneau de suivi des liens fournit une vue centralisée où vous pouvez facilement localiser chaque URL dans le contenu. Cliquez sur l’icône Liens ( Afficher l’icône des liens ) à gauche pour afficher toutes les URL liées dans votre contenu. Il s’agit des liens dans les composants texte, bouton ou image.

Pour définir le tracking d’un lien de contenu répertorié, cliquez sur l’icône Modifier ( icône Modifier ) et modifiez le Type de tracking ou Libellé.

recommendation-more-help
marketo-optimizer-help-user-guide