Experiences
Experiences by Contentful Studio are the interactive UI inside the web app that allows users to assemble web experiences with their own self-built components and reusable patterns.
NOTE: Experiences require a preliminary setup. After the setup, you can access Experiences from the Experiences tab in the Contentful web app.
The experience editor includes the following elements:
Components — A component is a building block in an experience with its individual set of variables. There are the following categories of components:
Basics - Basic components in the experience editor that are provided by Contentful out-of-the-box.
Structure - Components that help you shape your experience layout, like container, section, and column.
Design system - Components that a user can import to Experiences using the Experiences SDK. These can be your existing design components that you would like to be able to use in Experiences.
Patterns - Component combinations that you can create directly in an experience and save to reuse further in other experiences.
Canvas — A workspace where you can place your components and preview the experience. Drag and drop a component on a canvas, and it is immediately rendered there.
Layers tab — View the hierarchy of your experience. Drag and drop components to adjust their hierarchy and nesting.
Settings tab — You can update your experience name and slug and change the preview platform.
Locale selector - Switch between the locales to display the localized content of your entries. The available locales are defined by the environment locale settings.
The localization in the Experiences is Field-level vs entry-level localization.
Breakpoint switcher - You can create responsive layouts by adjusting component variables per breakpoint. To individually change component variables in a layout, select the desired breakpoint and make the desired adjustments to the components.
NOTE: You can set up your custom breakpoints with custom sizes, names, and icons. To learn more, refer to Register custom breakpoints.
Design tab — Adjust styling and visual representation of a component within the page.
Content tab — Add content or media to your components according to the following options:
Manual - Manually enter text with Rich text formatting options or a link to an asset.
Content binding - Link a new or existing entry or asset to your component.
NOTE: Once the component is dropped on the canvas, unless it was dropped into an existing container component, it is wrapped into a “Section” component by default.
Related articles
To learn how to set up Experiences by Contentful Studio, refer to the following articles:
To learn how to create and manage experiences, refer to the following articles: