Style a single element and text
In the Component builder, elements are assigned one or more styles in the Styles library. When you use an element in a component, it is styled with the default style assigned to the element in the Styles library.
Style an element
You can change the style of a single specific element in a component - as opposed to changing the style of all the elements of the same type in a component as explained here.
To style an element:
-
In the Component builder, select the element you want to style. You can click the element in the canvas, or use the context toolbar in the bottom-left corner of the component.
-
At the top of the right-hand pane, in the Style section, click the style tile.
-
To choose another style for the element, click
on the top tile.
-
In the drop-down menu, click one of the following:
-
Current theme - access the allowed styles from the theme currently applied to the component.
-
All available - access all available styles for the element but that were not assigned to the element for this particular theme.
-
-
Click on a style to apply it to the selected element.
The element is now styled using a style from the current theme, or any styles allowed for that element in the Styles library.
When choosing a style not included in the theme but from the All available list, you detach the element from the theme. To indicate that the theme is altered, its name now appears in an orange tag with a warning sign. In addition, it is possible to customize the style even further with a one-off customization.
Style text
You can style text by making inline edits or by accepting style rules defined in the Styles library.
To style text:
-
In the Component builder, highlight the text you want to style.
-
To change the text style:
-
In the right-hand side, in the Style section, click the tile to open the Styles picker and choose another style for the text.
-
To the left of the text highlighted, click
and select one of the Text elements tags. The styles associated with each tag are saved when defining Text blocks in the Styles library.
-
-
To adjust the text alignment, in the right-hand pane, in the Alignment section, click Text settings.
