Advanced Layout Builder
Place and style every element of your workflow pages, with a responsive layout for any screen or a fixed canvas for kiosks.
Design the landing, end, survey, pre-survey, and selection pages of your event with the advanced layout builder: a responsive layout for any screen, or a fixed pixel-exact canvas for kiosks, with overlays, button actions, and full styling control.
What is the Advanced Layout Builder?
By default, each workflow page follows a standard design that you style with Branding & Colors. The Advanced Layout Builder goes further: you add elements such as logos, images, text, buttons, timers, touch areas, and widgets, then position, order, and style each one yourself. Use it to build a page that looks exactly the way you imagine it.
Screenshot placeholder — The advanced layout builder showing a landing page with elements on the canvas and the layers panel
Responsive or fixed: choose a layout mode
Every page has a layout mode switch at the top of the builder. Switching mode always asks for confirmation, and your positions are kept if you switch back.
Simple (responsive)
Elements flow like a normal web page and fit any screen. You set their order, size, and alignment, and the page reflows on phones, tablets, and desktops. This is the best choice for guests using their own devices.
Advanced (fixed kiosk)
A pixel-exact canvas with one fixed size for every screen. The page is shown at that size and scaled to fit the screen. Use it only for kiosk setups where the screen size is known and never changes.
Not sure which mode to pick? Use Simple (responsive) for events where guests use their own phones, and Advanced (fixed kiosk) only when you control the screen, for example an iPad on a stand.
Which pages can use it
The builder is available on the pages that guests move through in a workflow:
Landing page
The first page guests see, with the event logo, name, and Start button.
End page
The page shown after a guest submits their design, with the restart or link button.
Survey pages
The title, progress bar, question counter, question area, logo, and Next, Back, and Submit buttons of a survey.
Pre-survey and pre-event pages
The pages with the code entry field and the Continue button, see Received Data.
Template and child event selection
The pages with the template or child event cards guests choose from.
Opening the builder
- 1
Open the page settings
In the admin area, edit the event (or the survey) and open the page you want to design.
- 2
Click Open layout editor
Choose Advanced layout and click Open layout editor. A new layout starts from your existing page settings, such as the background, logo, and buttons.
- 3
Pick the layout mode
Choose Simple (responsive) or Advanced (fixed kiosk). For a fixed kiosk, set the screen size.
- 4
Add and arrange elements
Use Add element to add what you need, then move, resize, and style it.
- 5
Apply the layout
Click Apply layout. The layout is saved with the event. Use Reset to page settings to rebuild the layout from the standard page design.
Screenshot placeholder — The Open layout editor button in the page settings and the layout mode switch
Elements you can add
Which elements are available depends on the page. Typical ones are:
Text and card
Headlines, descriptions, and boxes with their own text and container styling.
Image and logo
Pictures, the event logo, and the survey logo, with cover or contain image fill.
Background video
A video element. Make it as large as the canvas and send it to the back to use it as a full-page background video.
Button
A button with an action, such as Start, Continue, Next, Back, Submit, Restart, or Open a link.
Redirect timer (end page)
On the end page, a countdown that automatically sends the guest back to the landing page, or to your link, when it runs out. It lets a kiosk reset itself for the next guest.
Touch area
An invisible tap area you can place anywhere, useful for tapping the whole screen to start.
Survey elements
The survey title, description, progress bar, question counter, and question area, which you place and style like any other element.
Widget
A custom widget for games and custom steps. See Custom Widgets.
Moving, resizing, and arranging
The canvas works like a design tool, so most things are drag and drop:
Drag and resize
Drag an element to move it and use the handles on its edges and corners to resize it. The arrow keys nudge the selected element.
Overlay objects
Images, buttons, touch areas, and widgets can be set as overlays: they sit on top of other elements and can be positioned freely anywhere on the page. An overlay shows a Drag here to move tab and resize handles.
Align and center
Align elements to the left, right, top, or bottom, and center them horizontally or vertically. Set a grid size to snap to.
Layers
The layers panel lists every element. Bring to front, send to back, duplicate, delete, and lock elements from there.
Aspect ratio and fit
Lock the aspect ratio, or use Fill width, Fill height, Fill canvas, and Fit inside canvas to size an element quickly.
Stay inside the canvas
Elements are kept inside the canvas, and you are warned if part of an element is outside it.
Undo and redo
Undo and redo your changes while you work, and use the preview to see the page at different screen sizes.
Screenshot placeholder — A fixed kiosk canvas with a selected overlay element showing the Drag here to move tab and resize handles
The fixed kiosk canvas does not adapt to other screen sizes. If the screen of your kiosk changes, update the screen size in the builder.
Working in the responsive layout
In Simple (responsive) mode the page reflows to fit any screen, so you work with order, size, and alignment instead of exact pixels:
Order, size, and alignment
Add elements, set their order, size, and alignment. The preview shows the page at a normal browser width.
Suggest arrangement
Click Suggest arrangement to let the builder propose a tidy arrangement of your elements, including the position of overlays. Adjust the result however you like.
Overlays
Overlays work here too, with the same Drag here to move tab and resize handles as in the fixed canvas.
Per-device preview
Pick a device and screen size to check how the page looks before you apply it.
Screenshot placeholder — The responsive layout with the Suggest arrangement button and an overlay element
Styling elements and screens
Select an element to open its style panel next to it on the canvas:
Presets
Apply a ready-made style to an element, or to every element on the page for one device.
Text
Font, size, weight, italic, underline, letter spacing, line height, outline, shadow, and alignment.
Container
Background color or gradient, opacity, border, shape (rectangle, rounded, pill, circle, or custom), shadow, blur, and padding.
Questions and fields
Answer options, pictures, ratings, and fields are styled in Screen styles, which you can open from the builder.
Button feel and transitions
Choose how buttons react when tapped, what they show while loading, how they appear, and how the page transitions in.
Screenshot placeholder — The style panel for a text element next to the canvas