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 Localization strategies.
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: