Patterns imbriqués

Les patterns imbriqués vous permettent de réutiliser des patterns à l’intérieur d’autres patterns. Les structures de pattern résultantes peuvent en outre être réutilisées dans les expériences. Avec les patterns 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 patterns imbriqués, vous pouvez créer des modèles de page ou des sections de modèle plus grandes à partir de patterns. 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 patterns jusqu’à trois niveaux de profondeur, y compris un pattern parent, donc un pattern parent plus deux couches de patterns imbriqués. Vous pouvez ensuite ajouter le pattern parent avec les patterns imbriqués à une expérience, ce qui fait quatre couches d’imbrication :

Les exemples d’expériences A et B ci-dessous réutilisent le même pattern qui contient un autre pattern imbriqué. Le pattern parent est configuré comme un modèle à trois colonnes, le pattern 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 patterns, 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

Expérience B

Les propriétés de conception par défaut d’un pattern peuvent être remplacées (modifiées) à chaque couche d’imbrication suivante - pattern 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 pattern et n’affectent pas le pattern d’origine.

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

Important : chaque fois que vous modifiez un pattern imbriqué, vous devez l’enregistrer ainsi que tous les patterns 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 pattern à 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 patterns pour ouvrir la vue Tous les patterns.

4. Créez un nouveau pattern en cliquant sur +Ajouter un pattern ou ouvrez un pattern existant.

5. Dans la barre latérale gauche, recherchez le pattern souhaité dans la zone Patterns. 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 pattern. Vous avez maintenant une structure d’un pattern parent et d’un ou de plusieurs patterns imbriqués. Vous pouvez l’ajouter à une expérience et lui lier du contenu.

Lorsque vous ajoutez un pattern avec un ou plusieurs patterns 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 pattern dans une expérience, des propriétés modifiables doivent être configurées. Seul un utilisateur disposant de l’autorisation Modifier les patterns peut définir les propriétés de conception d’un patterns comme étant modifiables. Pour en savoir plus, reportez-vous à la section Patterns modifiables.

Définir des propriétés modifiables dans un pattern imbriqué

Pour rendre un pattern modifiable :

1. Accédez au pattern souhaité, sélectionnez le composant souhaité et définissez les propriétés modifiables comme décrit dans patterns 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.
   
   

   

2. Répétez l’étape précédente pour le pattern 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.
   
   

   

3. Enregistrez le pattern imbriqué et le pattern parent.

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

Créer une expérience avec un pattern imbriqué

Pour ajouter un pattern imbriqué à une expérience :

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

2. Dans la barre latérale gauche, recherchez le pattern requis dans la zone Patterns. Glissez-déposez-le sur le plan de travail.
   
   

   

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