Editable patterns

What are editable patterns?

By design, a pattern is a fixed layout and can be edited only in the pattern editor. In the context of an experience, an editor can only update pattern content properties and not its design properties.

As a user with Set up role for Experiences, you can set specific design properties in a pattern to be editable. This way your editors can change the design properties of a pattern while staying in the context of an experience editor. These changes apply only to the pattern in this specific experience but don't affect other pattern instances.

You can select the properties to be edited in the pattern editor. In the experience editor, an editor can view and modify those selected properties as desired - for example, change layout, background color, or border:

Element visibility

Element visibility allows an editor to hide or show a specific element in a pattern instance. As a user with Set up role for Experiences, you can activate element visibility to control whether editors can hide or show elements in a pattern instance.

With element visibility, you can reuse the same pattern applying minor changes to it in multiple experiences, rather than duplicating this pattern. For example, you have a hero banner pattern used across multiple experiences. In some instances, you want to include a call-to-action button, while in others, you prefer to leave it out. This is where the element visibility comes in, enabling editors to easily show or hide the CTA without the need to use multiple patterns.

Editable patterns CTA shown vs hidden

What editors can view and change

After an editor selects a specific component of a pattern in the experience editor, they can interact with the following:

  • Design properties - In the Design tab, the editor can view and modify the editable design properties.

  • Hide/show elements- If the Element visibility is on for the selected component, the editor can hide or show this component either from the Design tab or using the experience hierarchy in the Layers tab.

Editable patterns editors view

Requirements

  • To be able to select the design properties to be edited and switch Element visibility on/off, you must have Edit experiences and patterns access level in your user's role.

  • A user that can view and change the selected design properties, and hide or show elements - the editor - must have Edit experiences access level in their role.

NOTE: To learn more about access levels in Experiences, refer to Set up role for Experiences.

Select editable properties

To select the design properties to be editable:

  1. In the left sidebar, click Patterns and select All patterns to go to the patterns view.

  2. Go to the desired pattern and open it. The pattern editor is displayed.

  3. In the pattern canvas, select the required component.

  4. In the right sidebar, click What editors can change. The Design tab switches to the editor’s view mode.

  5. Click Select properties. The Select properties panel is displayed.

  6. Select one or multiple options to enable your editors make changes per pattern instance:

    • Design properties -  Select one or multiple properties that you would like your editors to be able to change. The selected properties are added to the editor’s view. The editors can now view and change them in an experience editor.

    • Element visibility - Select to enable editors show or hide the selected component per a pattern instance.

      Editable patterns select property

  7. Click Save to apply changes to the pattern.