Working with style collections (Pro)
There are significant benefits to working with style collections in Maglr Pro. Predefined style collections:
allow designers to work faster;
preserve design continuity, even when working with a large team;
are easily managed from a central space;
are flexible, allowing overrides and exceptions;
can be synced to its style collection with one click.
The styling configuration in Maglr will feel familiar if you have worked with other design software (i.e. Figma) before, though it is tailored to Maglr’s unique capabilities.
A style collection is multiple style sheets existing of your base styles and optional color variants.
Maglr offers two types of style collections: project styles and global styles.
Project styles provide styles that are available for use only within the context of the current project.
Global styles provide styles that are available for use throughout every project in your navigation environment. They can be linked and unlinked from a project at any time.
Notice: Editing a global style collection can affect projects that use its styles and may result in undesirable changes.
When creating a new style collection, it will always be a project style by default. A project style can be converted to a global style, however this action cannot be undone.
To create a new style collection:
Go to the Pro editor in the project you want to have your style collection
Go to the options menu in the top-left corner marked by an M
Find “Manage styles” and click “Style editor”
Click the area underneath “project styles” to create a new style collection and enter the styling module.
Global styles can be used across all projects in your license environment. For that reason, it's important to handle them carefully.
Global style collections are not created directly. Rather, a project style is converted into a global style collection. This action can’t be undone. To convert a project style collection into a global style collection:
Go into your style collection overview
Click the settings icon next to the project style
Check the box indicating you want to convert the current style collection to a global style collection
Click “confirm” followed by “save”
You can link and unlink multiple global style collections to your project(s). To link a global style collection:
Go into your style collection overview
Find your style collection
Click on the checkbox to link it to your project
Good to know:
Editing a global style does not automatically update projects throughout your license environment. The freeform nature of our editor may cause designs to look off when, for example, the sizes of elements change. Hence, a manual check to update each page is necessary.
Applied global styles are marked with a [G] icon. This is a quick way to know that you’re dealing with a shared style.
You can’t directly edit a global style via the style menu in the editor. All changes must be consciously made by navigating to your style collection overview first. This is a preventative measure to reduce the risk of unwanted changes.
Global style collections cannot be deleted at this time, though they can be unlinked. Deleting a global style collection will cause projects to lose their connection to styled elements. If you wish to have a global style collection removed, please contact the support desk via chat or send an email to info@maglr.com.
To help visualize what your branding will look like, we provide a style editor module. From within the module, you can define styles for headings, paragraphs, buttons, shapes, and images and preview both desktop and mobile and mobile versions.
There are two ways to add styles:
If you have not done so, first create a style collection
Click on the + next to the desired element
Click on either the desktop or mobile element and use the panel on the right to change styling properties as you normally would in the editor
Save your changes
The style settings tab lets you change the title of your style sheet and perhaps a background color (for when you want to see what styled elements look like on a certain color).
Saving and updating
When you’re done editing styles, you can choose to only save or save and immediately sync your document. In the case of the latter, you will sync and reset your current page to your style collection. That means that overrides and additions will be lost.
An alternative method to define styles is to first style your element(s) or use existing elements.
Style element on the canvas and select it
Find the style menu on the right and click the ellipses …
Select + add style
The element style has been added to your style collection—don’t forget to press save!
In some scenarios, you may need a slightly different version of your base styles. For example, if your base styles work well on a light background, but don't provide enough contrast on a dark background.
Color variants are style sheets that deviate from your base styles. It inherits the style properties from your base, but you can override them as you please. To create a color variant:
Go into the style editor
Click the + next to your base style sheet
Tip: Go into “style settings” to alter the background color of your style sheet to style variants more accurately.
When defining styles in the styling module, you’ll find that you can set separate configurations for desktop and mobile use. Each view will automatically use the version created for that screen size. It is possible to configure mobile styles later and sync the changes throughout your document.
Since Maglr is highly versatile, we do not enforce the use of semantic HTML for headings (i.e. H1, H2, and so on). If accessibility is of importance to your project (or styles should be tied to a specific type of heading), we recommend including the heading tag as part of your style. Learn more about accessibility.
Styles are flexible. They can be applied, detached, synced, and reset.
Once your style collection is ready, you can start applying styles to elements. To apply a style:
Select the element you'd like to apply a style to
Click on the style menu (that likely says "No style set")
Select your style from the dropdown menu
Sometimes, you may want to deviate slightly from the applied style. It's possible to override or add properties alongside the chosen style without it affecting the style collection
Changes to the applied style will be accompanied by either a pink or a blue marker. The color of each marker tells you more about the type of change that has been made.
Pink for overrides: if a style property has a pink marker, it means the style property is set in the configured style collection, but its value has been overridden in the editor.
Blue for additions: if a style property has a blue dot, it means the property has not been explicitly configured in your style collection but has been added via the editor. Because it was added alongside the configured styles, it is an "additional" styling property.
Styled elements can have properties that are overridden (pink marker) or additional styles (blue marker). That means your element is "out of sync" with its originally applied style. Whether deliberate or not, there is a way to sync or reset such properties back to their original state.
"Syncing" your element(s) to your style collection means that you are bringing an element back to align with the applied style from your style collection. That means that overrides will be removed. You can sync a single property or whole elements to the original style collection as follows:
Clicking the pink marker next to overridden properties
Go into the "style usage" overview and select the elements you wish to sync. Click the "sync styles" button. Choose the option to update overrides.
“Resetting” an element or property means that you are reverting additional styles to their default state. Style additions can be identified by a blue marker. You can reset style additions in two ways.
Manually remove the properties by selecting the element and clicking a blue marker
Go to “Manage styles > Update styles in page”, select the element you wish to reset additions from and click "sync styles". Select the option to reset all additions.
Tip: There’s an option for an element to both sync and reset at the same time. You’ll find it in the style menu in the editor by selecting an element and clicking on the ellipses ….
You can detach a style from an element manually. Visually, a detached element retains its styling, but without a connection to the style collection, it can no longer be synced or overridden.
To detach a style:
Select the element and click the ellipses …
Select “Detach style” from the dropdown menu
Page designs may quickly become bulky and complex. That's why we provide an overview of the usage of predefined styles throughout your document. It shows:
which styles you're drawing from which collection;
the usage count on desktop and mobile;
and how many elements have overrides and/or additions.
The counter for overrides and additions reflects the number of elements affected, rather than the number of individual style properties
allow designers to work faster;
preserve design continuity, even when working with a large team;
are easily managed from a central space;
are flexible, allowing overrides and exceptions;
can be synced to its style collection with one click.
The styling configuration in Maglr will feel familiar if you have worked with other design software (i.e. Figma) before, though it is tailored to Maglr’s unique capabilities.
Style collections
A style collection is multiple style sheets existing of your base styles and optional color variants.
Project styles vs. global styles
Maglr offers two types of style collections: project styles and global styles.
Project styles provide styles that are available for use only within the context of the current project.
Global styles provide styles that are available for use throughout every project in your navigation environment. They can be linked and unlinked from a project at any time.
Notice: Editing a global style collection can affect projects that use its styles and may result in undesirable changes.
Creating a new style collection
When creating a new style collection, it will always be a project style by default. A project style can be converted to a global style, however this action cannot be undone.
To create a new style collection:
Go to the Pro editor in the project you want to have your style collection
Go to the options menu in the top-left corner marked by an M
Find “Manage styles” and click “Style editor”
Click the area underneath “project styles” to create a new style collection and enter the styling module.
Working with global styles
Global styles can be used across all projects in your license environment. For that reason, it's important to handle them carefully.
Creating a global style collection
Global style collections are not created directly. Rather, a project style is converted into a global style collection. This action can’t be undone. To convert a project style collection into a global style collection:
Go into your style collection overview
Click the settings icon next to the project style
Check the box indicating you want to convert the current style collection to a global style collection
Click “confirm” followed by “save”
Linking global styles
You can link and unlink multiple global style collections to your project(s). To link a global style collection:
Go into your style collection overview
Find your style collection
Click on the checkbox to link it to your project
Good to know:
Editing a global style does not automatically update projects throughout your license environment. The freeform nature of our editor may cause designs to look off when, for example, the sizes of elements change. Hence, a manual check to update each page is necessary.
Applied global styles are marked with a [G] icon. This is a quick way to know that you’re dealing with a shared style.
You can’t directly edit a global style via the style menu in the editor. All changes must be consciously made by navigating to your style collection overview first. This is a preventative measure to reduce the risk of unwanted changes.
Global style collections cannot be deleted at this time, though they can be unlinked. Deleting a global style collection will cause projects to lose their connection to styled elements. If you wish to have a global style collection removed, please contact the support desk via chat or send an email to info@maglr.com.
Creating styles
To help visualize what your branding will look like, we provide a style editor module. From within the module, you can define styles for headings, paragraphs, buttons, shapes, and images and preview both desktop and mobile and mobile versions.
There are two ways to add styles:
Adding styles via the style editor
If you have not done so, first create a style collection
Click on the + next to the desired element
Click on either the desktop or mobile element and use the panel on the right to change styling properties as you normally would in the editor
Save your changes
The style settings tab lets you change the title of your style sheet and perhaps a background color (for when you want to see what styled elements look like on a certain color).
Saving and updating
When you’re done editing styles, you can choose to only save or save and immediately sync your document. In the case of the latter, you will sync and reset your current page to your style collection. That means that overrides and additions will be lost.
Adding styles from elements on the canvas
An alternative method to define styles is to first style your element(s) or use existing elements.
Style element on the canvas and select it
Find the style menu on the right and click the ellipses …
Select + add style
The element style has been added to your style collection—don’t forget to press save!
Color variants
In some scenarios, you may need a slightly different version of your base styles. For example, if your base styles work well on a light background, but don't provide enough contrast on a dark background.
Color variants are style sheets that deviate from your base styles. It inherits the style properties from your base, but you can override them as you please. To create a color variant:
Go into the style editor
Click the + next to your base style sheet
Tip: Go into “style settings” to alter the background color of your style sheet to style variants more accurately.
Desktop and mobile
When defining styles in the styling module, you’ll find that you can set separate configurations for desktop and mobile use. Each view will automatically use the version created for that screen size. It is possible to configure mobile styles later and sync the changes throughout your document.
Accessibility of headings
Since Maglr is highly versatile, we do not enforce the use of semantic HTML for headings (i.e. H1, H2, and so on). If accessibility is of importance to your project (or styles should be tied to a specific type of heading), we recommend including the heading tag as part of your style. Learn more about accessibility.
Applying and managing styles
Styles are flexible. They can be applied, detached, synced, and reset.
Applying styles
Once your style collection is ready, you can start applying styles to elements. To apply a style:
Select the element you'd like to apply a style to
Click on the style menu (that likely says "No style set")
Select your style from the dropdown menu
Overrides and additions
Sometimes, you may want to deviate slightly from the applied style. It's possible to override or add properties alongside the chosen style without it affecting the style collection
Changes to the applied style will be accompanied by either a pink or a blue marker. The color of each marker tells you more about the type of change that has been made.
Pink for overrides: if a style property has a pink marker, it means the style property is set in the configured style collection, but its value has been overridden in the editor.
Blue for additions: if a style property has a blue dot, it means the property has not been explicitly configured in your style collection but has been added via the editor. Because it was added alongside the configured styles, it is an "additional" styling property.
Syncing and resetting
Styled elements can have properties that are overridden (pink marker) or additional styles (blue marker). That means your element is "out of sync" with its originally applied style. Whether deliberate or not, there is a way to sync or reset such properties back to their original state.
Sync to remove overrides
"Syncing" your element(s) to your style collection means that you are bringing an element back to align with the applied style from your style collection. That means that overrides will be removed. You can sync a single property or whole elements to the original style collection as follows:
Clicking the pink marker next to overridden properties
Go into the "style usage" overview and select the elements you wish to sync. Click the "sync styles" button. Choose the option to update overrides.
Reset to removing style additions
“Resetting” an element or property means that you are reverting additional styles to their default state. Style additions can be identified by a blue marker. You can reset style additions in two ways.
Manually remove the properties by selecting the element and clicking a blue marker
Go to “Manage styles > Update styles in page”, select the element you wish to reset additions from and click "sync styles". Select the option to reset all additions.
Tip: There’s an option for an element to both sync and reset at the same time. You’ll find it in the style menu in the editor by selecting an element and clicking on the ellipses ….
Detaching styles
You can detach a style from an element manually. Visually, a detached element retains its styling, but without a connection to the style collection, it can no longer be synced or overridden.
To detach a style:
Select the element and click the ellipses …
Select “Detach style” from the dropdown menu
Insight into style usage throughout your page
Page designs may quickly become bulky and complex. That's why we provide an overview of the usage of predefined styles throughout your document. It shows:
which styles you're drawing from which collection;
the usage count on desktop and mobile;
and how many elements have overrides and/or additions.
The counter for overrides and additions reflects the number of elements affected, rather than the number of individual style properties
Updated on: 02/04/2025