Articles on: The editor

Working with style collections

A style collection is a set of reusable styles for headings, rich text, buttons, shapes and images. When you apply a style to an element, the element stays linked to it, so you can keep designs consistent and bring elements back in line with the style later.



Style collections


A style collection holds your styles, grouped by element type: Headings, Rich text, Buttons, Shapes and Images. Each style has separate settings for desktop and mobile, and each style can have color variants that change only its colors.


You can apply styles from two kinds of style collection:


  • Project styles: available only in the current project. Each project has one project style collection, named "Project styles". It is created automatically the first time you save a style in the project.
  • Global styles: shared across all projects in your account. They are available in the style dropdown of every project and are marked with a G badge.


Global style collections


A global style collection is shared across all projects in your account. Its styles appear in the style dropdown of every project, marked with a G badge, so you can tell a shared style from a project style.


NoteEditing a global style collection can affect projects that use its styles and may result in undesirable changes.



  • Editing a global style does not automatically change elements in existing pages. A changed style can make a design look off, for example when element sizes change, so check each page that uses the style.
  • For a global style, the … menu next to the style selector shows Edit in library. It opens the library the style belongs to. Changes there affect every project that uses the style.
  • To create a global style collection, turn a project style collection into a global one, or remove a global style collection, contact Maglr support via chat or send an email to info@maglr.com.


Creating your first style


To create a style, style an element on the canvas and save its settings as a new style:


  1. Select an element on the canvas, for example a heading.
  2. Style the element in the right panel the way you want the style to look.
  3. In the right panel, click the … next to the style selector.
  4. Select Add style. The Custom styles window opens with a new style based on the element's current settings.
  5. Change the style's name or properties, if needed.
  6. Click Save styles.


The element is now linked to the new style. The first time you save a style in a project, this also creates the project's style collection, "Project styles".



Adding and editing styles


You add, edit and organize the styles of your project style collection in the Custom styles window. To open it, select an element that uses a project style, click the … next to the style selector, and select Edit style. You can also open it with Add style (see Creating your first style).


To add or edit a style in the Custom styles window:


  1. To add a new style, click Add style and choose a type: Headings, Rich text, Buttons, Shapes or Images. To edit an existing style, skip this step.
  2. Choose Desktop or Mobile at the top of the window.
  3. Click the style's preview.
  4. Change its properties in the panel on the right.
  5. Click Save styles.
  6. If elements on the current page use styles from this style collection, a "Save style updates" dialog opens. Tick Update elements on this page if you want those elements reset to their styles, or leave it unticked.
  7. Click Save styles in the dialog.


Each style in the window has a … menu with Duplicate, Move up, Move down and Delete. You can't save while a deleted style or color variant is still used on the page; a message tells you when this is the case. To go back to an earlier saved version of the style collection, click Backup, choose a version and click Load version, then click Save styles.



Updating elements on the page when you save


When elements on the current page use styles from the style collection you are saving, the "Save style updates" dialog asks whether to update them. If you tick Update elements on this page, every element on the current page that uses a style from this collection is reset to its style, including elements whose style you didn't change. Their overrides and additions are lost. Elements on other pages don't change. If you leave the box unticked, other elements don't change. If you opened the window with Edit style, the selected element is always reset to its style when you save.


Color variants


A color variant is a version of a style with different colors, for example for a heading style that works on a light background but lacks contrast on a dark one. A color variant changes only colors: typography and shape stay linked to the base style.


To add a color variant to a style:


  1. Open the Custom styles window (see Adding and editing styles).
  2. Click the color dots next to the style to open its color variations.
  3. Click Add color variation.
  4. Change the colors in the panel on the right.
  5. Optionally, enter a name in Variant name. New variants are named "Color variation 1", "Color variation 2" and so on.
  6. Click Save styles.


TipUse the Background preview color to see what your styles and color variants look like on a specific background color.


Desktop and mobile styles


Each style has separate settings for desktop and mobile. In the Custom styles window, switch between them with the Desktop and Mobile tabs at the top of the window. On a page, each view automatically uses the version of the style for its screen size.


Heading levels and accessibility


Maglr doesn't enforce semantic HTML heading levels (H1, H2 and so on). If accessibility is important for your project, or a style should always use a specific heading level, include the heading type in the style. Learn more about accessibility.


Applying a style


To apply a style from a style collection to an element:


  1. Select the element you want to apply a style to.
  2. In the right panel, click the style selector. It shows "No style set" when no style is applied, or "No styles available" when the project has no styles yet.
  3. Select a style from the dropdown menu.


If the style has color variants, a submenu opens where you choose the variant.



Overrides and additions


After you apply a style, you can still change the element's properties in the right panel. These changes don't affect the style collection. A colored dot next to a property shows the type of change:


  • Pink for overrides: the property is set in the style, but its value has been changed on the element.
  • Blue for additions: the property is not set in the style, but has been added on the element.


Bringing elements back in line with their style


An element with overrides (pink dots) or additions (blue dots) no longer matches its style. You can restore overridden properties to the style's values and remove added properties, for one property, one element or all elements in a page.



Resetting a single property


To reset one property of a styled element:


  1. Select the element.
  2. In the right panel, click the dot next to the property:
    • A pink dot reapplies the value from the style ("Reapply setting from style").
    • A blue dot removes the added value ("Remove overwrite").


Resetting one element


To reset all overrides or additions on one styled element:


  1. Select the element.
  2. In the right panel, click the … next to the style selector.
  3. Choose one of these options:
    • Reset style differences: restores overridden properties (pink) to the style's values.
    • Reset all changes: restores overridden properties and removes added properties (pink and blue).


Reset style differences is unavailable when the element has no overrides (pink). Reset all changes is unavailable when the element has no additions (blue).


Syncing all elements in a page


The Sync elements in page overview, titled "Sync elements to style collection", shows which styles are used on the current page and lets you reset elements to their styles in one go. To open it and sync elements:


  1. Click the M menu in the top-left corner of the editor.
  2. Go to Style collections and click Sync elements in page.
  3. Tick the styles you want to sync.
  4. Click Sync N elements in page. N is the number of styles you ticked.
  5. Choose an option: "Restore manual overrides to their original values defined in the applied style" restores overridden properties (pink) only. "Reset style properties that were added adjacent to the applied style" resets the elements fully: it restores overridden properties and removes added properties (pink and blue).
  6. Click Update page.


The overview lists each style and color variant used on the page, with:


  • the style collection the style comes from;
  • the number of elements that use it on desktop and on mobile;
  • the number of elements with overrides (pink) and with additions (blue).


The override and addition counts are numbers of elements per view (desktop and mobile), not numbers of properties.



Detaching a style


Detaching a style removes the link between an element and its style. The element keeps its look, but it can no longer be synced or reset to the style.


To detach a style:


  1. Select the element.
  2. In the right panel, click the … next to the style selector.
  3. Select Detach style.


Frequently asked questions


How do I open the Custom styles window?


Select an element that uses a project style, click the … next to the style selector in the right panel, and select Edit style. You can also select any element, click the … next to the style selector and select Add style; this opens the Custom styles window with a new style based on that element.


Why don't my pages change when I edit a style?


Saving a style only updates other elements if you choose to. When elements on the page you have open use styles from the same style collection, the "Save style updates" dialog lets you tick Update elements on this page. That resets those elements on the current page only, and their overrides and additions are lost. If you opened the window with Edit style, the selected element is reset to its style either way. Elements on other pages keep their current look until you sync them on that page with M > Style collections > Sync elements in page.


How do I create a global style collection?


You can't create a global style collection or turn a project style collection into a global one yourself. Contact Maglr support via chat or send an email to info@maglr.com.


Can I delete a global style collection?


No, you can't delete a global style collection yourself. To have one removed, contact Maglr support via chat or send an email to info@maglr.com.



Related updates:

Updated on: 20/10/2026