Global text styles
Global text styles are styles that you can use for text elements on all site pages. You can create a set of styles that will automatically apply to different elements on the site instead of setting up a style of each individual text element.
There are 8 default styles. You can also add your own style and apply it to separate text elements on the page.
You can set up not only fonts but also other parameters of the text: size, font weight, line height as well as enable responsive mode settings for different viewport sizes.
Special features of global text styles
⛳️ Styles are applied to all pages of the site if they haven't been overridden.
⛳️ Styles are also applied to newly added sections from the section catalog.
⛳️ Styles can apply to system labels and third-party widgets (for example, in forms, quizzes, cart and other standard modules).
⛳️ Long-time users of the platform will see new styles in the list, and their previous styles can be marked with a red asterisk (*) as overridden. We recommend against overriding system styles unless it is absolutely necessary (for example, for highly customized pages).
How to set up global text styles
Click Text styles on the editor panel in the top left corner. The icon can be labeled or not depending on the viewport height of your monitor.
Actions with global text styles
There are the following actions you can do with default global text styles:
- Settings
- Duplicate
- Override / cancel override for a specific page.
If a style on the page was overridden, you will see a red asterisk (*) next to its label.
NOTE
Override option doesn't apply to global sections as they inherit styles of the pages where they're located.
Override option doesn't apply to global sections as they inherit styles of the pages where they're located.
How to add and apply custom styles
Click Add style. Styles that you add are marked with a gray asterisk (*).
Set up all the necessary options: font, size, weight, line height, etc.
If needed, set up the display for mobile devices separately.
Apply the created style to your text element.
CSS class in the custom style
You can change the CSS class for custom styles.
We recommend against changing the CSS class as it can "break" styles of all elements to which the style has been applied.
If you added a custom style and deleted it by accident, you can restore it. To do that, re-add a new style with the same Style name. The old class and all the settings of the deleted style will be pulled up for the style name.
NOTE
Once the style is deleted, the style of the Text element is applied automatically.
Once the style is deleted, the style of the Text element is applied automatically.
If you forgot the name but you can recall the CSS class of the deleted style, then add a new style with any style name and change its CSS class to the previously deleted class name.