Modèles imbriqués

Les modèles imbriqués vous permettent de réutiliser des modèles à l’intérieur d’autres modèles. Les structures de modèle résultantes peuvent en outre être réutilisées dans les expériences. Avec les modèles imbriqués, vous pouvez créer des mises en page à plusieurs calques et modifier les propriétés de conception à différents calques. Cela signifie que vous pouvez configurer des modèles de conception une fois et les réutiliser dans vos expériences en modifiant leurs styles et en leur associant différents contenus.

À l’aide des modèles imbriqués, vous pouvez créer des modèles de page ou des sections de modèle plus grandes à partir de modèles. Ils servent d’outil pour améliorer l’efficacité des éditeurs et des spécialistes du marketing en réutilisant les modèles existants plutôt que d’en créer de nouveaux, et évitent les problèmes de page blanche.

Dans Experiences, vous pouvez imbriquer des modèles jusqu’à trois niveaux de profondeur, y compris un modèle parent, donc un modèle parent plus deux couches de modèles imbriqués. Vous pouvez ensuite ajouter le modèle parent avec les modèles imbriqués à une expérience, ce qui fait quatre couches d’imbrication :

Nested patterns layers

Les exemples d’expériences A et B ci-dessous réutilisent le même modèle qui contient un autre modèle imbriqué. Le modèle parent est configuré comme un modèle à trois colonnes, le modèle imbriqué étant une seule colonne avec une image, un titre et du texte. Au niveau de l’expérience, des modifications sont apportées aux propriétés de conception par défaut des deux modèles, de sorte que les expériences semblent différentes tout en réutilisant la même mise en page. En outre, certains composants de texte sont affichés dans l’expérience A tout en étant cachés dans l’expérience B, et vice versa :

Expérience A

Nested patterns columns layout brands

Expérience B

Nested patterns columns layout Contentful

Les propriétés de conception par défaut d’un modèle peuvent être remplacées (modifiées) à chaque couche d’imbrication suivante - modèle et/ou expérience parent. De même, la visibilité des composants peut être configurée - vous pouvez activer un paramètre de visibilité pour que tout composant ait la possibilité de le masquer ou de l’afficher dans les couches d’imbrication suivantes.

Les modifications apportées aux propriétés de conception, y compris la visibilité, sont appliquées à une instance de modèle et n’affectent pas le modèle d’origine.

Vous ne pouvez modifier que les propriétés de conception d’un modèle imbriqué qui ont été définies comme modifiables dans l’éditeur de modèles. Seul un utilisateur disposant de l’autorisation Modifier les modèles peut définir les propriétés modifiables. Pour en savoir plus, reportez-vous à la section Modèles modifiables.

Important : chaque fois que vous modifiez un modèle imbriqué, vous devez l’enregistrer ainsi que tous les modèles qui l’intègrent, afin que les changements se propagent à travers les différents calques d’imbrication. Il en va de même pour la publication : lorsque vous publiez un modèle imbriqué, assurez-vous de publier le ou les modèles parents pour refléter les modifications.

Vous devez avoir installé Experiences SDK v1.29+.

Pour ajouter un modèle à un autre :

  1. Connectez-vous à l’application web Contentful.

  2. Accédez à l’onglet Experiences.

  3. Dans la barre latérale gauche, cliquez sur Tous les modèles pour ouvrir la vue Tous les modèles.

  4. Créez un nouveau modèle en cliquant sur +Ajouter un modèle ou ouvrez un modèle existant.

  5. Dans la barre latérale gauche, recherchez le modèle souhaité dans la zone Modèles . Glissez-déposez-le sur le plan de travail.

  6. Facultatif : répétez l’étape précédente pour ajouter d’autres modèles au plan de travail. Cliquez sur Enregistrer pour appliquer les modifications au modèle. Vous avez maintenant une structure d’un modèle parent et d’un ou de plusieurs modèles imbriqués. Vous pouvez l’ajouter à une expérience et lui lier du contenu.

Nested patterns nest a pattern

Lorsque vous ajoutez un modèle avec un ou plusieurs modèles imbriqués à une expérience, vous pouvez modifier leurs propriétés de conception en fonction de vos besoins. Par exemple, vous pouvez réutiliser la même mise en page de grille pour les pages représentant différentes catégories d’éléments sur votre site web. Vous pouvez également masquer ou afficher des composants, par exemple, afficher un badge ou un bouton dans une expérience tout en le masquant dans une autre.

REMARQUE : pour qu’un éditeur puisse modifier les propriétés de conception d’un modèle dans une expérience, des propriétés modifiables doivent être configurées. Seul un utilisateur disposant de l’autorisation Modifier les modèles peut définir les propriétés de conception d’un modèle comme étant modifiables. Pour en savoir plus, reportez-vous à la section Modèles modifiables.

Définir des propriétés modifiables dans un modèle imbriqué

Pour rendre un modèle modifiable :

  1. Accédez au modèle souhaité, sélectionnez le composant souhaité et définissez les propriétés modifiables comme décrit dans modèles modifiables.
    Dans notre exemple, l’une des colonnes a sa visibilité d’élément activée, elle peut donc être masquée ou affichée dans l’expérience.

    Nested patterns select editable properties
  2. Répétez l’étape précédente pour le modèle imbriqué.
    Dans notre exemple, la taille de l’image, l’ajustement de l’image et l’optimisation de l’image du composant Image sont définis comme modifiables.

    Nested patterns select editable properties in a nested pattern
  3. Enregistrez le modèle imbriqué et le modèle parent.

Important : une fois que vous avez apporté et enregistré des modifications au modèle imbriqué, vous devez également enregistrer les modifications apportées à son ou ses modèles parents. De cette façon, le modèle parent se synchronise avec les modifications apportées au modèle imbriqué. Pour voir la liste des modèle parents, survolez le badge de références dans l’en-tête de l’éditeur d’expérience :

Nested patterns references badge in experience

Créer une expérience avec un modèle imbriqué

Pour ajouter un modèle imbriqué à une expérience :

  1. Ouvrez l’entrée d’expérience requise.

  2. Dans la barre latérale gauche, recherchez le modèle requis dans la zone Modèles . Glissez-déposez-le sur le plan de travail.

    Nested patterns add nested pattern to experience
  3. À l’aide de l’onglet Contenu, liez le contenu aux composants sur le plan de travail comme vous le souhaitez.

  4. À l’aide de l’onglet Conception, ajustez les propriétés de conception du modèle. Vous pouvez modifier les valeurs par défaut des propriétés de conception modifiables pour qu’elles correspondent au schéma de couleurs de votre page et masquer des éléments si nécessaire.

REMARQUE : vous ne pouvez ajuster que les propriétés de conception et masquer uniquement les éléments définis comme modifiables.

Nested patterns columns layout brands