You can save the configuration of a style (the form and all of its settings) as a Style helper. This does not create any CSS, it only saves the style's settings. You can create as many Style helpers as you like and your CSS won't increase in size.

Style helpers are a useful way of reusing style configuration when you create new styles. For example, you could create a Style helper for a complex list style so that the next time you want to create something similar, you can use your Style helper as a quick starting point.

Using style helpers for custom styles and base styles¶

To use a Style helper

1. Navigate to Site Studio > Styles > Custom styles
2. Select a custom style
3. At the top of the Style editor click on the List icon button
4. In the menu, click on a style helper category
5. Click one of the options
6. Click Ok in the confirmation modal
7. The Style editor form will update with the form for the Style helper you selected
8. You can repeat the steps above for different styles and Style helpers.

Creating style helpers from your styles¶

You can save styles you have created as Style helpers. This is helpful if you want to save the configuration of a style and apply it to a different style at a later point.

To save a Style helper from a Base style or Custom style:

1. Navigate to Site Studio > Styles > Base styles (or) Custom styles > Click Edit next to an existing style
2. At the top of the Style editor click on the List icon button
3. At the bottom of the menu and click Save as style helper
4. In the modal, enter a name in the Title field and select a category in the drop-down for the Style helper
5. Click Ok.

Saving a style as a style helper from a layout canvas element¶

You can save Style helpers from styles created within the Styles tab on the Layout canvas elements. This provides a quick way of copying styles within your elements and applying them to a Custom style to be used globally.

To save a Style helper from within a Layout builder element:

1. Navigate to the element on your Layout canvas which includes the styles
2. Double click the element to edit its settings
3. Click on the Styles tab
4. At the top of the Style editor click on the List icon button
5. At the bottom of the menu and click Save as style helper
6. In the modal, enter a name in the Title field and select a category in the drop-down for the Style helper
7. Click Ok.

The Style helper will be created and available to use within Base styles and Custom styles.