Style collections

This chapter covers the styling module and how you can use it to keep things consistant and speed up the design process in Maglr Pro. You'll learn how to set up a style collection and connect already existing elements to it. We'll also show you how to apply the style to new elements, make overwrites, update the style, and sync style changes with the elements on your page.

Why use a style collection?

Two reasons: consistency and speed. Once you’ve defined your style collection, you can apply it across an entire project, or even multiple projects. And if you need to change something later on, you simply update the style collection and all of the elements, both their desktop ánd mobile versions, can instantly reflect these changes.

Color variants

By default, all elements are added to a 'base' variant where you can set the default colour as well as other base settings (for both desktop ánd mobile) for all the elements in your style collection. Then, you can set up multiple color variants to set up different... well... color variants for the elements in your style collection.

Applying the style to new elements

With an applicable element selected on the canvas, head on over to the 'settings' tab in the 'element' panel to view the available styles you can add to the element. Simply click the color variant you want to apply and you're done!

Blue and pink dots

When editing settings for elements that have a style applied to them, a dot will appear next to the setting. This can mean two things:

• A blue dot
  You've added a setting that you haven't specifically defined in your style collection.
• A pink dot
  You've overwritten a setting that you have specifically defined in your style collection.

Updating the style collection

Making changes to the entire style collection doesn't always automatically update all of the elements connected to it, in order to prevent the entire project, or even multiple projects, from breaking.

Updating the connected elements on your page can be done via the M-button in the top left of the editor and clicking the 'sync elements in page' option. This allows you to sync either the blue or pink dots, so you have full freedom to choose which ones to update.