Stage and publish styles
The style library built in Components is available in the page builder, so you can style your components in the context of a webpage, with the other components placed around them. Published styles are also applied to components on your live website.
A style library on a new Component app starts with style presets that are both staged and published. Any further changes, whether you are changing an existing style or adding more styles to the library, will need to be staged and published.
Working on styles in the Component app is safe, because the changes do not get propagated to the page builder or the live website until you are ready.
To have the updated styles available in the page builder, you must stage the updated style library in Components. Similarly, to have the updated styles available on your live website, you must publish the updated style library in Components.
Staging or publishing a brand new style does not affect existing components. However, staging or publishing an update to an existing style will affect all components that use this style, including components that were previously staged and published. To ensure that you do want to synchronize the styles update from XM Cloud Components, you can preview thumbnails of the affected components in the Publishing tab of XM Cloud Components:
-
On the Draft page, you can see a component with the styles as they are saved in Components, comparing them to how they look with the currently staged and published styles.
-
On the Staged tab, you can compare styles staged to the page builder to the library currently saved in Components.
-
On the Published tab, you can compare published styles to the library currently saved in Components.
Publishing styles automatically stages them.
Stage and publish your style library
To stage or publish new or updated styles:
-
In XM Cloud Components, open the Publishing tab.
-
In the left-hand pane, click Draft, Staged,or Published, depending on the changes differences you want to compare.
-
Choose in the drop-down menu a component where the updated style is visible, as not all style changes can be seen on all components. For example, if you have changed the background color of an element, you need to select a component that includes that element to review the change.
Also, remember that the displayed changes may not be exhaustive. For example changes may affect a version that isn't displayed, or the style may apply to dynamic content that isn't present during reviewing.
-
To synchronize the library between what is currently saved in Components, the page builder, or on the live website, on the bottom bar, click Revert, Stage, or Publish accordingly.