Adding Styles

Shared Styles

Style indicator

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

Did this answer your question?