Create a pattern

What is a pattern?

A pattern is a combination of components that you can group in an experience and save for reuse in other experiences.

A pattern is a saved layout that can be reused statically across experiences. Changes to a pattern propagate to all experiences in which it is reused.

A pattern itself doesn’t hold any content. You can bind unique content to the same pattern in each of the experiences where it is used.

A pattern can be created and edited according to the following options:

• In the experience editor - Group components in your existing experience and save them as a pattern.

• From the All patterns view - Create and configure a pattern using a pattern editor. 

After a pattern is created, it is added to the experience components and is available under the Patterns area in the left sidebar.

NOTE: You can detach a pattern in a specific experience by clicking the Detach pattern option in the pattern actions menu. Once the pattern is detached, its components are editable. Changes to the components are no longer associated with the pattern.

Add a pattern

In the experience editor

You can group components in the experience editor and save them as pattern to be further reused in other experiences.

To create a pattern:

1. Log in to the Contentful web app.

2. Go to the Experiences tab.

3. Either go to your existing experience or create a new one.

4. Start creating your pattern by dragging and dropping components on the canvas. They are wrapped into a "Section" component. 

5. Click menu button in the "Section" component and select Create pattern.

   

6. Enter a custom name for your pattern.

7. Click Save. Your pattern is saved.

From the All patterns view

You can create a new pattern from scratch to further reuse it in multiple experiences.

To create a pattern:

1. Log in to the Contentful web app.

2. Go to the Experiences tab.

3. In the left sidebar, click All patterns to open the All Patterns view.

4. Click + Add pattern.

   

5. Start creating your pattern by dragging and dropping a "Section" component on the canvas.

6. Add the desired components to the "Section" component. Adjust them as desired, and bind content.

7. Click Save to save your pattern.