Responsive safe zone (Bleed)

Maglr Pro is built on the idea that you can create an interactive online page without thinking of all HTML and other types of code coming into play. Typically to make pages fit on all screen types, a technique called responsive is used. The Block Editor is based on this technique, but the Pro Editor isn't. The reason for this is that the responsive technique doesn't allow a 'free draw' type of creativity. Because our Pro Editor is built for designers, we built an editor that is easier to understand and control for this group.

You start with a workspace, inside of which you can set a safe zone. This is the area where all content is always visible. When the resolution of a screen is larger than the workspace, everything is visible. But when the screen resolution is smaller than the content outside, the safe zone is cut off.

Safe Zone

The red borders mark the safe zone area (you can toggle this with the button in left bar menu). On tall screens, the left and right side will be cut off. On wider screens, the top and bottom will be cut off. We have set the default safe zone sizes to 1100 x 700 pixels. You can also position a safe zone inside the workspace, of which you can see the effect when scaling down your screen size. We have set the default positioning to center.

The safe zone itself is always fully visible. On smaller screens we scale down the content to fit it to the screen. If we would use printing terms, the area between the safe zone and workspace is known as the page bleed.

Updated on: 08/02/2023