Follow us
To get notified about new courses and tutorials
This chapter covers how pages behave in Maglr, as well as the different types of pages you can select. It also touches on the 'safe zone' and how it makes sure that everything on your canvas will remain visible to all viewers.
Responsiveness means that pages on the web automatically adjust to the size of the screen they're being viewed on. If someone views a page on their computer, to then visit that same page on their phones, the content on the page automatically adjusts itself to the screen and makes sure that everything remains clear and easy to view.
So while everything you position in Maglr is absolute and precise, responsiveness can throw a little curveball here. Someone else might just have a slightly different experience than you, depending on the screen they are using to view your publications.
In Maglr, pages respond to smaller screens by cutting of their background and, at a certain points, resizing their contents.
Every page in Maglr has a fixed width & height, which you can specify through the general settings in the editor. When it comes to the behaviour of these pages, there are two options to choose from:
This option listens to the fixed width & height of your page. The page will always keep its size and dimensions and will never grow bigger, even on bigger screens. Only when the screen becomes smaller than your page dimensions, the page will shrink in order to keep everything neatly in view.
The 'Zoom' option still listens to the fixed width & height of your page. However, this page will grow or shrink in its entirety to fill the screen that's viewing it.
So, to recap: 'original fit' shrinks, but doesn't grow. 'Zoom' both shrinks and grows.
Next to the behaviour, there are two types of pages to choose from:
These pages are designed to always fill the entire screen. The page behaviour setting still defines how this page will scale. So in case of the 'original fit', where the page doesn't grow, any space surrounding this page will be filled with the background color.
This page is variable in height, providing more room for your content. These pages can therefore be scrolled through, enabling new types of animations & interactions based on the scrolling behaviour of your viewers.
Both of page types can be combined within a single page, which is possible by using scenes.
In the editor, you can spot red borders surrounding your scene on the canvas. These mark the 'safe zone', or the area that will always remain in view regardless of a screen's size or aspect ratio.
On screens that are smaller than your page's dimensions, your page will start shrinking. But before it does that, the space outside of your safe zone (or inside the red borders) will be cut off. Elements placed inside of these red borders can therefore become invisible on smaller screens.
Want to build the complete example page in this essential course along with us? You can download all the course assets here: