Articles on: The editor

Page types & behaviour


Every page you add with Freeform page is made of one or more scenes. Each scene has a type (Fullscreen or Longpage) and a scaling behaviour (Original fit or Zoom). Together, these decide how the scene fits the visitor's screen. You choose them when you add a page, and you can change them per scene in the editor.


Page types


Maglr has two base types for scenes: Fullscreen and Longpage.


Fullscreen


A Fullscreen scene has a fixed design size, fills the entire browser window and can't be scrolled. It suits content with multimedia and small amounts of text, such as a cover page.


Longpage


A Longpage scene scrolls vertically, and you can adjust its height. It suits larger amounts of content, such as an article.


Combined pages


When you add a page with Original fit, you can also choose two ready-made combinations of scenes:


  • Hero + longpage: a fullscreen hero scene followed by a longpage.
  • Vertical carousel: a combination of scenes shown as a vertical carousel.


Scaling behaviour (Original fit and Zoom)


The scaling behaviour of a scene decides how it resizes when the visitor's browser window is larger or smaller than the scene. There are two options: Original fit and Zoom. The scaling choice is available only in the Desktop layout. In the Mobile layout, there is no scaling option.


Original fit


With Original fit, a scene is shown at its original size and never larger:


  • When the browser window is larger than the scene, the scene stays the same size. The extra space is filled with the scene's background.
  • When the window is smaller than the scene but still larger than the safe zone, the scene stays the same size and the edges outside the safe zone are cut off.
  • When the window is smaller than the safe zone, the scene scales down so the safe zone stays fully visible. For a Longpage scene, this happens when the window is narrower than the safe zone's width.


Because the scene keeps its size, the size of elements and the space between them stay fixed until the window is smaller than the safe zone.


Zoom


With Zoom, a scene scales with the visitor's browser window, so all elements stay in proportion to each other:


  • A Fullscreen scene scales up or down until the safe zone exactly fits the window.
  • A Longpage scene grows to fill the window width when the window is wider than the scene, and scales down when the window is narrower than the safe zone's width. In between, it stays at its original size and the sides outside the safe zone are cut off.


Zoom suits designs where elements must keep the same proportions to each other on every screen.


Choosing the page behaviour and a blank page


To choose the scaling behaviour and the page type when you add a page:


  1. In the project, click Add page.
  2. In the "Add a new page" panel, click Freeform page.
  3. In the "Choose a page" window, under Page behaviour, select Original fit or Zoom.
  4. Under Choose a blank page, select the page you want.
  5. Click Select page.


Image: Scaling behavior and page types in freeform mode


The blank pages you can choose depend on the page behaviour:


  • Original fit: Fullscreen, Longpage, Hero + longpage and Vertical carousel.
  • Zoom: Fullscreen zoom and Longpage zoom.


A scene you add later inside the editor from Blank (Fullscreen or Longpage) always starts with Original fit.


Changing the scene type or scaling in the editor


You can change the type and scaling behaviour of each scene after you've added the page:


  1. Open the page in the editor and go to the scene you want to change (see using scenes).
  2. In the right panel, open the General tab.
  3. Under Scene type, choose Fullscreen or Longpage in the first dropdown.
  4. In the second dropdown, choose Original fit or Zoom.


The scaling dropdown appears only in the Desktop layout.


Setting the scene size


The size of a scene is set in the editor, in the right panel's General tab:


  1. In the right panel, open the General tab.
  2. Under Scene size, enter the width (W) and height (H) in pixels. The minimum for each is 50.


For a Fullscreen scene, the height sets the height of the scene's fixed design, which is fitted to the visitor's window through the safe zone. For a Longpage scene, the height sets the scrollable length.


In the Mobile layout, you can't type a width. Choose a width with Preset instead: Small (375), Medium (400) or Large (440). For a Fullscreen scene, the preset also sets the height.


In the Desktop layout, a scene you add from Blank in the editor starts at 1380 × 820 pixels, with a safe zone of 1200 × 700 pixels positioned at the top centre. Pages added from the dashboard's blank pages can start with a different size, so check the General tab to see the size of your scene.


Setting the safe zone


The safe zone is the area of a scene that always stays visible on the visitor's screen. On the canvas, it is marked with a coloured border, red by default. To set it:


  1. In the right panel, open the General tab.
  2. Under Safe zone, enter its width (W) and height (H). The safe zone can't be larger than the scene. Some of these fields are hidden for Longpage scenes and in the Mobile layout (see below).
  3. Click a position in the grid next to the safe zone fields.


Good to know:


  • Showing or hiding the safe zone: click Safe zone in the left bar to toggle the border on the canvas.
  • Colour: change the border colour with Safe zone color in the General tab.
  • Longpage scenes: you can't set a safe zone height. In the Desktop layout, you can only choose a position in the top row (left, centre or right).
  • Mobile layout: the safe zone is always centred, and you can't change its position or its width. Its width follows the width you choose with Preset.
  • What gets cut off: on a Fullscreen scene, the parts outside the safe zone are cut off at the left and right on tall, narrow screens, and at the top and bottom on wide screens. A Longpage scene scrolls vertically, so only its sides outside the safe zone can be cut off.


Read more in the safe zone article.


Frequently asked questions


Can I change the scaling behaviour after creating a page?


Yes. Open the page in the editor, go to the scene, and open the General tab in the right panel. Under Scene type, the second dropdown switches the scene between Original fit and Zoom. This dropdown is available only in the Desktop layout.


Why can't I find the scaling option in the Mobile layout?


The scaling choice between Original fit and Zoom exists only in the Desktop layout. In the Mobile layout, the General tab doesn't show the scaling dropdown. Switch to the Desktop layout to change it.


Why are the sides of my page cut off?


Parts of a scene outside the safe zone can be cut off when the visitor's browser window is a different size or shape than the scene. With Original fit, a scene keeps its original size until the window is smaller than the safe zone, so the edges outside the safe zone are cut off when the window is smaller than the scene but larger than the safe zone. Below the safe zone's size, a Fullscreen scene scales down the same way as with Zoom. With Zoom, a Longpage scene is cut off the same way when the window is narrower than the scene but wider than the safe zone. A Fullscreen scene with Zoom scales until the safe zone fits the window, so the parts outside the safe zone are cut off on the sides where the safe zone meets the window edge. Keep important content inside the safe zone so it stays visible on every screen.


Which blank pages can I choose with Zoom?


In the "Choose a page" window, Zoom offers two blank pages: Fullscreen zoom and Longpage zoom. The combined pages Hero + longpage and Vertical carousel are offered only with Original fit. After adding a page, you can switch any of its scenes to Zoom in the editor's General tab, in the Desktop layout.



Related updates:

Updated on: 29/10/2026