Skip to main content
All CollectionsElement TutorialsAdvanced
Applying Saved Styles to your content
Applying Saved Styles to your content

Saved styles allow you to create default styles that can be used across your pages to create a consistent style.

Updated over 10 months ago

Getting a consistent look and feel for your site is essential to creating your brand.

Saved styles make it possible to save style setting configurations for specific Shogun elements and update them globally. Each element can have a library of Saved Styles created so you can choose to apply the styles are you wish.

How to create a Saved Style

Creating a saved style within Shogun is super easy. First, use the right sidebar of the Shogun editor to apply styles to a selected element, such as button color, font family, and border color. Once you've designed the element to your liking select the element then go to the "Saved styles" menu at the top of the right sidebar.

Click the "Save new style" option. Give your style a memorable name so you can remember its purpose, such as "Primary button," then click the Save style button.

The Saved Style can now be applied to any element of the same type.

How to apply a Saved Style

Applying a saved style to your elements is just as easy as creating one! Simply drag an element into the page, navigate to the saved styles dropdown, then select one of the saved styles you've defined.

Once selected, the element's appearance will automatically update to match the Saved Style.

Please note: this dropdown will only show styles that have been created for the element. For example, styles created on the Heading element will only be available on other Heading elements.

Setting a default Saved Style for an element

Did you know you can set a Saved Style to be the default style for an element? This means that all elements of the same type will automatically use the saved style as soon as they are dragged into the visual editor. To do this, click the "Set default style" option under the saved style's name.

In the example below, since the "Primary Button" style is set as the default, any Button element added into the Shogun pages will match that style.

Note: only one default style can be added to each element, meaning you can have one default style for Heading elements, one default style for Button elements etc.

What does a Saved Style save?

Saved Styles will save any visual style settings from the right sidebar of the editor, such as fonts, colors, and spacing.

The feature will not save content-based fields, such as heading text or button URLs; using Snippets would be a better option if you wish to do this.

Please note: This will not save styles settings that exist outside of the sidebar. For example, styles applied through the Text element's rich text element cannot be saved with this feature.

Can I modify a saved style?

Absolutely! When an element with a saved style has been modified, an "Edited" tag will appear next to the style name. To save this change across all elements leveraging this style, open up the dropdown and select Update style.

Once the saved style has been updated, all pages that use this style will become outdated and will be required to be republished in order for the new style to appear on live pages. (Select Shogun plans do have an option to bulk publish pages.)

More information on the 'outdated' status can be found here: Page Statuses

Can I modify an element without updating the style?

Yes! Head back up to the Saved Styles dropdown and select Detach style to keep the current styles without impacting any other elements. This will remove the saved style from the selected element and will allow you to edit it independently.


FAQs

I'm using Brand Styles to set the default fonts and colors of my headings. Can I still use Saved Styles?

Yes. Saved Styles will override Brand Styles.

Did this answer your question?