Experiment with components in the Studio
The Studio lets you visualize components:
-
With its standard values.
-
Using the Design studio's 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.
You cannot save the configuration and content changes that you test in the Design library.
The final design and content configurations must be done in the Content Editor, or in the right-hand panel of Pages when the component is inserted on a page.
SitecoreAI applies responsive design to the components, so in the Studio View mode, 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:
-
In the navigation header, click Design library.
-
For the component you want to experiment with, click Open in Studio. When in the Studio, you can use the drop-down menu to display another variant, or a variant from another site.
-
On the top toolbar, in View mode, you can choose to display the current component as it will render on Mobile, Tablet Portrait, or Desktop responsive.
-
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.
-
-
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.