A Free Layout is a box where you place widgets exactly where you want them. They can overlap, like a collage or a photo with a text card on top of it.
Want photos of different sizes fitted together in a neat grid, with no overlapping? Use the Collage widget instead.
Add a Free Layout
- Open Add and go to Layout.
- Drag Free Layout into a section, column or inner column (or click it to add it to the selected column).
- Set its Height in the Design panel (40 to 2,000 px). Each screen size can have its own height.
Put widgets in it
- Drag a widget from Add and drop it inside the Free Layout. It lands where you let go.
- You can also drag a widget that is already on the page into it.
- To take a widget out, drag it into a normal column.
Move, resize and overlap
- Move: drag the widget. You can also select it and use the arrow keys (hold Shift to move 10 pixels).
- Resize: select the widget and drag the handles on its right edge, bottom edge or corner. You can also Tab to a handle and use the arrow keys (8 pixels a press).
- Exact numbers: select a widget inside the Free Layout and the Design panel shows a Position section:
- Left (−20% to 100% of the box's width) and Top (0 to 2,000 px).
- Its own width (on: the widget keeps its natural width). Turn it off for a Width slider, 1% to 100%.
- Its own height (on: natural height). Turn it off for a Height slider, 8 to 2,000 px.
- Layer (−50 to 50): higher numbers sit on top.
- Rotation (−180° to 180°, for a tilted photo or badge). While a box is in a Free Layout, a Rotation set here takes the place of the box's own Rotation. When the widgets stack on phones they are shown upright.
- Overlap: widgets can sit on top of each other. Use Bring forward and Send backward in the toolbar, Bring to front / Send to back in the More menu or the Arrange buttons in Position, or Ctrl/Cmd+] and Ctrl/Cmd+[ (add Shift for front / back). See Keyboard shortcuts and menus.
Screen sizes
Positions are saved per screen size. A change on Tablet only changes Tablet; Desktop keeps its own. Moving with the mouse, the arrow keys or the layer keys changes only the screen size you're on. To drop a Tablet or Mobile position, click Use the desktop position on Tablet (or Use the tablet / desktop position on Mobile) under Position.
On phones, a Free Layout shows its widgets one under another by default (On phones: Stack items: top to bottom, then left to right), so nothing is squeezed. To keep the positions on phones instead, choose On phones: Keep positions in the Design panel, or switch to the phone view and place the widgets there. Setting a position on Mobile places that widget on phones too.
Copy and duplicate
Duplicate, copy and paste keep a widget's position; the copy appears a little below and to the right of the original so you can see it.
Imported sites
When Zeus imports a site and a part of a page has things laid over one another (a badge on a photo, a picture overlapping a card's edge), that part comes in as a Free Layout so it keeps the same look. Select it and move or resize its widgets like any other Free Layout.
The Free Layout's own design
Select the Free Layout itself to see Free Layout (Height and On phones) at the top of its Design panel. Under it are the usual box settings: background, border, spacing, size and animations, the same as a column. See Section and column design.
Examples
- A photo collage: three Image widgets in a Free Layout, each with a different Rotation (−6°, 4°, −2°) and overlapping edges. Leave On phones on Stack items so phones show them one under another.
- A badge on a hero photo: an Image filling the box and a small Shape with "Since 1985" on top, Layer 2, tilted 8°.
- A text card over a picture: a photo on the left and a Text widget in a white box overlapping its right edge, brought to the front.
Limits and what it can't do
- Height 40 to 2,000 px per screen size. The box keeps the height you set: a widget placed lower than that hangs out of the box over whatever comes next, so make the box taller.
- Rotation only applies while the widget is in a Free Layout. Stacked on phones, widgets are shown upright.
- A Free Layout can't be connected to data. The widgets inside it can.
Who can use it
Agency team members with the Mount Olympus tool. Client people need Editor to add, move or resize items; with Widget content they can only change the widgets' content.
Troubleshooting
- A widget is hidden behind another: select it and click Bring to front, or raise its Layer.
- Phones show everything in one long column: that's Stack items. Choose Keep positions, or place the widgets on the phone view.
- I moved something on Tablet and Desktop didn't change: positions are per screen size. Switch to Desktop and move it there.
- The arrow keys don't move the widget: click the widget first (not the text inside it). Arrow keys don't fire while you're typing.
- A widget overlaps the next section: raise the Free Layout's Height, or move the widget up.