Page settings control a page's dimensions and its layout grid.
The layout grid positions Widgets on the page. AG Studio pages adapt to different viewport sizes: the page and its Widgets resize within set boundaries and keep their relative positions on the grid.
These settings are part of the page's configuration. In the default setup, you cannot change the page size or the layout grid in the Studio UI.
For the most predictable results, page dimensions and layout grid settings should be defined before Widgets are added.
Page Size Copy Link
Your developer sets the page's width and height. By default, a page has a minimum width of 720 pixels, no maximum width and an automatic height.
Width Copy Link
The page has a minimum width. In a window narrower than this, the page keeps its minimum width and you scroll sideways, so Widgets are not squashed.
The page can also have a maximum width. In a window wider than this, the page stops growing and stays centred. Without a maximum width, the page keeps widening with the window.
Height Copy Link
Page height is either automatic or fixed. An automatic height grows as Widgets are added. A fixed height stays the same, like a slide or a poster, and suits a page designed to fit on one screen.
Layout Grid Copy Link
Once the page size is set, the layout grid decides how that space is divided up for placing each Widget.
The layout grid is invisible, but it gives Widgets a consistent framework, so they line up neatly and behave predictably as they resize. Widget positions and sizes are set against this grid rather than absolute screen coordinates.
Columns divide the page horizontally into sections. More Columns give finer control when you size and position Widgets, while fewer Columns use larger steps.
Row Height sets the vertical spacing unit in pixels. A smaller Row Height gives more precise vertical control, while a larger one uses bigger steps.
By default, the layout grid has 24 Columns and a Row Height of 16 pixels. Your developer can change these defaults.
As the Viewport changes size, Widgets keep their relative positions on the layout grid. Because Widgets align to this grid, it is worth choosing sensible values before building the page, so that Widgets do not shift unexpectedly later.
When you move or resize a Widget:
- AG Studio shows a preview of where it will be placed.
- The Widget aligns to the grid automatically, which is called snapping.
- If the Widget would go outside the page boundary, it stops at the edge, which is called clamping.
- When you release it, the Widget settles into the nearest available grid-aligned position within the page bounds.
This automatic alignment helps keep Widgets neatly organised, even near the edges.
Drag the widget in the example below to see the grid lines and snapping in action.
Customisations Copy Link
Page settings also include styling options that apply across the whole page: you can change the page background and set default Widget styles. Each widget can override those defaults from the Widget section of its own Format tab.
Open the Page tab in the Compose Panel to find these customisation options and see how styling changes take effect across the page.