1. Design studio

Experiment with components in Inspect mode

Inspect mode in the Components library enables users to preview, interact with, and configure components without having to add them to a page. This feature is ideal for users who need to test component behavior and appearance in various scenarios.

The Components library lets you visualize components:

  • With its default standard values.

  • Using the visualization values for the fields where no standard values are available.

  • Using the configuration options available in the right-hand pane. You can use these options to experiment with various designs without having to insert the component in a page.

Note

You cannot save the configuration and content changes that you test in the Components library.

The final design and content configurations must be done in the Content Editor, or in the right-hand panel of the Page builder when the component is inserted in a page.

SitecoreAI applies responsive design to the components, so in the Components library, you can adjust to the size of the device they are displayed on.

To play with the styling and content of a component’s variant:

  1. In the navigation header, click Design, then clik the Components tab to open the Components library.

  2. In the left-hand panel, locate and click the component you want to experiment with.

  3. Hover over the card of the variant you want to inspect to reveal action buttons, then click Inspect.

  4. When in Inspect mode, you can use the drop-down menu to display another variant, or a variant from another site.

  5. On the top toolbar, you can choose to display the current component as it will render on Mobile, Tablet Portrait, or Desktop responsive.

  6. In the right-hand panel, on the Content tab, you can enter or edit the value for any field. You can also use the data picker to render the component with different data:

    • If the content is coming from a local data source, use the data picker to change the content item assigned to the component.

    • If the content is retrieved from an external data source using a graphQL query, you can see the query in a code box.

  7. In the right-hand panel, on the Design tab, use the Grid layout, Styling and Advanced styling configuration options to play with the design of the variant.

  8. Click Exit inspect mode to return to the Components library.

If you have suggestions for improving this article, let us know!