Style tools like shared styles and the style indicator will help you to build responsive content faster and manage updates more easily.
Adding Styles
Styles like typography, background, margins, padding, and more can be added to specific elements in the right-side Style Panel.
To add a style to text or other elements:
Select the text element
Navigate to the right-side Style Panel
Customize style options like font color, family, line height, and more
Tip: Depending on the element, your style options may be limited. Remember to double-click on interactive features (e.g. slideshow) to open a separate menu to add things like style and more.
Shared Styles
Shared Styles will help you to manage and organize your styles throughout your content or microsite.
To add your shared styles using our best practices:
Make sure to predefine all your typography styles for H1 to H4 (including elements like lists, quotes, and more). You can do this in a single text element.
Once you have your styles set, navigate to the right-side Style Panel and click the
+icon to create a new shared style. If you've used one textbox this shared style will have all the styles you need for any text element on your site
If you need to update your Shared Style:
Select your element and make the change
Once you've made the edit, you'll see the Shared Style in the right-side Style Panel now notifies you to update the Shared Style
Once updated, the change you've made will update across all text elements set to the same shared style
Style indicator
The Style Indicator is a useful tool to understand where the style of an element originates from — which is usually the main layout (e.g. desktop).
Note: The Style Indicator can also help you to see if your shared styles are correctly updated
There are three main style states:
Style State | Description |
Default | Indicated by a ⚪️ grey-colored icon in the Style Panel. This means the style is the default when you first add elements to the canvas. |
Custom | Indicated by a 🟡 yellow-colored icon in the Style Panel. This means the style of an element is different or 'custom' from the inherited or default style. |
Inherited | Indicated by a 🟢 green-colored icon in the Style Panel. This means the style originates from the main layout. |
When building your content, you can use the style indicator to reduce the number of adjustments needed to make your content fully responsive. Instead of using multiple layouts and adjusting each element which can take hours. You can use sizing values like automatic sizing and the style indicator to create responsive content based on a single layout.
Best practices to keep in mind:
On the main layout (e.g. desktop) the style indicator will remain 🟡 yellow which indicates a custom style for elements
However, when adjusting the design on tablet and mobile (secondary layouts), you want to try to make these styles 🟢 inherited or ⚪️ default
To accomplish this, use size values like percentages or automatic sizing which will allow elements to size correctly on different breakpoints; instead of relying on pixel size which will need to be 🟡 custom adjusted to each layout