Page layout for desktop, tablet and mobile — gull system handbook

Web configurator layout: the Desktop, Tablet and Mobile views, the grid, overlapping elements, From width, Inherited and Back to inherited, headings and the Reset button.

Page layout for desktop, tablet and mobile

A page has three layouts by window width. Tablet and mobile inherit from desktop until you change them.

Three views

1. Above the canvas switch between Desktop (16:9), Tablet and Mobile. Each width has its own layout.
2. Lay the page out for Desktop: the model window, the form, headings. Elements are dragged and stretched on the grid and may overlap; tree order is drawing order.
3. Switch to Tablet. Until you touch it, it shows Inherited from desktop. Once you move an element, tablet has its own layout; Back to inherited restores it.

Elements on the page

• Element: the model window - Where to get it: always on the page - Note: the 3D view; its settings are in Set the view, background and model appearance
• Element: the form - Where to get it: always on the page - Note: the page's fields; Corner radius on both
• Element: Heading - Where to get it: ribbon → Heading - Note: text, size, bold, alignment; any number
• Element: Reset - Where to get it: ribbon → Reset - Note: a button that returns the form to its defaults; at most one

The grid shows only while dragging. There is no "left / right / over the model" option — the layout is simply where you put the elements.

When to export the page again

The layout, background and camera view are live settings — they publish with every Publish without a new export. A new export is needed only when the form, the rules or the model change.