Nested patterns
What are nested patterns?
Nested patterns allow you to reuse patterns inside other patterns. The resulting pattern structures can further be reused in experiences. With nested patterns, you can create multi-layer layouts and edit the design properties at different layers. It means you can set up design templates once and reuse them across your experiences modifying their styles and binding different content to them.
Using the nested patterns, you can create page templates or bigger template sections out of patterns. They serve as a tool to improve efficiency for editors and marketers through reusing the existing templates rather than setting up new ones, and prevent a blank page problem.
How many nesting levels are there?
In Experiences, you can nest patterns up to three levels deep including a parent pattern - so a parent pattern plus two layers of nested patterns. You can then add the parent pattern with the nested ones to an experience - that makes four layers of nesting:
Example experience with a pattern structure
The example experiences A and B Below are reusing the same pattern that has another pattern nested in it. The parent pattern is set up as a three-column template, with the nested pattern being a single column with an image, heading, and text. On the experience level, changes are made to both patterns’ default design properties, so that the experiences look different while reusing the same layout. Also, some text components are displayed in the Experience A while being hidden in the Experience B, and vice versa:
Experience A
Experience B
Overriding pattern design properties
Default design properties of a pattern can be overridden (changed) at every next nesting layer - parent pattern and/or experience. Similarly, component visibility can be set up - you can activate a visibility setting for any component to have the flexibility to either hide or show it in the next nesting layers.
Changes made to the design properties, including the visibility, are applied to a pattern instance and don’t affect the original pattern.
You can change only those design properties of a nested pattern that were set as editable in the pattern editor. Only a user with Edit patterns permission can set the editable properties. To learn more, refer to Editable patterns.
Important: Whenever changing a nested pattern, you must save it, as well as every pattern that nests it, for the changes to propagate across nesting layers. The same applies to publishing - when publishing a nested pattern, make sure to publish parent pattern(s) to reflect the changes.
Prerequisites
You must have Experiences SDK v1.29+ installed.
Nest a pattern
To add a pattern to another pattern:
Log in to the Contentful web app.
Go to the Experiences tab.
In the left sidebar, click All patterns to open the All Patterns view.
Either create a new pattern by clicking +Add pattern or open an existing one.
In the left sidebar, search for the required pattern under the Patterns area. Drag and drop it on the canvas.
Optional: Repeat the previous step to add more patterns to the canvas. Click Save to apply changes to the pattern. Now you have a structure of a parent pattern and a pattern(s) nested in it. You can add it to an experience and bind content to it.
Reuse nested patterns in an experience
When adding a pattern with a nested pattern(s) to an experience, you can change their design properties according to your needs. For example, you can reuse the same grid layout for pages representing different categories of items on your website. You can also hide or show components - for example, display a badge or a button in one experience while hiding it in another.
NOTE: For an editor to be able to modify the design properties of a pattern in an experience, editable properties must be set up. Only a user with Edit patterns permission can set design properties in a pattern to be editable. To learn more, refer to Editable patterns.
Set editable properties in a nested pattern
To make a pattern editable:
Go to the required pattern, select the desired component and set editable properties as described in Editable patterns.
In our example, one of the columns has its element visibility on, so it can be hidden or shown in the experience.
Repeat the previous step for the nested pattern.
In our example, the Image size, Image fit, and Image optimization of the Image component are set as editable.
Save the nested pattern and the parent pattern.
Important: Once you make and save changes to the nested pattern, you must save changes to its parent pattern(s) as well. This way the parent pattern synchronizes with the changes made to the nested pattern. To see the list of parent patterns, hover over the references badge in the header of the experience editor:
Create an experience with a nested pattern
To add a nested pattern to an experience:
Open the required experience entry.
In the left sidebar, search for the required pattern under the Patterns area. Drag and drop it on the canvas.
Using the Content tab, bind content to the components on the canvas as desired.
Using the Design tab, adjust the design properties of the pattern. You can edit the default values of editable design properties to match your page color schema and hide elements if necessary.
NOTE: You can adjust only those design properties and hide only those elements that are set as editable.