---
title: "Creating and using style helpers"
date: "2017-11-10T16:24:07+00:00"
summary: "Streamline your Site Studio workflow with style helpers. Learn to create, save, and apply reusable style configurations across base styles, custom styles, and layout canvas elements for efficient web design."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/creating-and-using-style-helpers"
id: "cb30f7c6-a1a8-4939-8090-7f1c0186a5d3"
---

Table of contents will be added

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
-----------------------------------------------------

Important

When selecting a Style helper, the current form in the Style editor will be replaced by the form configured within the Style helper. 

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.

![d3e7665e-using-a-style-helper.gif](https://acquia.widen.net/content/6793d4d9-470a-4a69-bb82-d0067e13da1e/web/d3e7665e-using-a-style-helper.gif?animate=true)

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.**

![4dc5cf82-creating-a-style-helper.gif](https://acquia.widen.net/content/439da171-ef50-44ed-a9b0-b2dd43448f00/web/4dc5cf82-creating-a-style-helper.gif?animate=true)

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.