Shared Styles and other style tools are designed to help you build responsive content more quickly and manage design updates with a single click. This guide explains how to add, manage, and use shared styles for consistent design.
Adding Styles
You can quickly manage an element's styles, such as typography, background, margins, and padding, using the Style Panel on the right side of the editor.
To add a style to a text or element:
Select the element: Click on the text or element you want to style.
Go to the Style Panel: The Style Panel will appear on the right side of the canvas.
Customize the options: Adjust styling options like font, color, and line height to your liking.
Note: Some elements have limited styling options. For more complex elements like slideshows, you may need to double-click the element to open a separate menu for additional customization.
Using Shared Styles
Shared Styles are a powerful feature that allows you to manage consistent styles across your entire project.
To create a shared style:
Predefine your styles: As a best practice, predefine typography styles for all headings (H1 to H6), paragraphs, lists, and quotes.
Create the style: After styling an element, go to the Style Panel and click the + icon to create a new shared style. This style will then be available to apply to any other text element in your project.
To update a shared style:
Make changes to an element: Make the desired style changes on any element that is currently using a shared style.
Update the Shared Style: A notification will appear in the Style Panel indicating that the shared style can be updated.
Confirm the update: Click to confirm the update. Once the shared style is updated, the changes will automatically be applied to all other elements that are using that shared style.
Tip: The Style Indicator feature can also help you confirm whether your shared styles have been correctly updated and applied.