Follow us
To get notified about new courses and tutorials
This chapter covers the different ways in which you can position & scale our elements to further optimise them for different types of screens. You’ll learn about auto-sizing to make elements scale better, as well as different positioning options such as ‘free positioning’ and ‘screen border’. We’ll also tell you about the ‘sticky’ positioning option that allows you to keep particular elements in view while scrolling.
Elements in Maglr are, by default, positioned in a fixed width & height. This means that they might don’t automatically respond to different screen sizes. But for elements that should span across the entire width, height, or both width and height of screens, there are several options available too. You can find four options in the ‘settings’ tab of the ‘element’ panel:
By default, every element can be positioned freely on the canvas. On the right hand side in the ‘settings’ tab of the ‘element’ panel, this option is called ‘Free position’. This means that every element has a fixed position on the canvas. And because the canvas has a fixed width and height, your elements remain in their exact same position at all times.
Sometimes, you don’t want that though. When you have certain elements that should be visible in the top right of your screen for example. Like menu-icons or more decorative elements. If you keep these in their default ‘free position’ setting, the element might be positioned way too far from the screen border on a big screen, but might be cut off from a smaller screen at the same time.
The ‘Screen border’ positioning option fixes that. Because with this option, the element doesn’t listen to its fixed position on the canvas anymore. Instead, it listens to the screens of your viewers, and positions itself accordingly.
For elements that should stay in place when you’re scrolling through a scene, you can use the ‘sticky’ positioning option. This is available for both the ‘screen border’ and ‘free position’ options, and keeps your element in its desired place while viewers scroll through your scene.
When combined with the ‘Free position’ option, sticky elements can be controlled more precisely. You can tell the element to stick itself to the top, center, or bottom of the screen and, with it stuck to the top or bottom, you can also add a ‘margin’ to create a bit more space between the element and the border of the screen. There’s also a ‘sticky for’ setting available, which lets you determine the duration, in pixels, for which the element should be sticky.
Want to build the complete example page in this essential course along with us? You can download all the course assets here: