Please note: Freeform Canvas is coming soon. Keen to be among the first to try the beta? Register your interest and we'll let you know when it's ready.
What is Freeform Canvas?
Freeform Canvas is a new kind of stack with no columns. Drop a block anywhere on the canvas, make it exactly the width you want, and layer blocks over each other. Text over an image. An image over an image. A button sitting right where the design needs it.
That last part is the big one. Until now, overlapping elements meant building the whole thing in your design tool, exporting it as one image, and uploading that to Rocketspark. With Freeform Canvas you build it right in the editor, and every piece stays editable.
A few of the layouts you can build:
- A heading sitting over the top of a photo
- Pictures overlapping or staggered down the page
- Big decorative text running off the edge of the screen
- A hero with bold, deliberate empty space
Who it's for. It's our most advanced design feature yet. If you've used a freeform tool like Canva or Figma, you'll feel right at home. If you haven't, don't worry. The grid guides you, text scales for you, and the mobile layout builds itself, so you get to focus on the creative part.
Where to use it. Freeform Canvas is made for hero stacks, the big opening section of a page that's mostly text and image. Use it where you want the wow, and regular stacks for the rest.
Freeform vs regular stacks
A regular stack is built from columns. Blocks sit inside a column, one under another, and the column decides their width. That's what makes regular stacks so quick.
A Freeform stack has no columns. It's a canvas with a 24 column grid behind it as a guide, and you're in charge of where every block goes.
| Column stack | Freeform stack |
|---|---|
| Add block button under each block | Floating Add block button on the canvas |
| The column sets block width | You drag the block edges to set width |
| Blocks sit one under another | Blocks go anywhere, and can overlap |
| Mobile follows the column order | Mobile builds itself, and you can fine tune it |
| Blocks move whenever you drag them | Blocks only move in Design mode |
Adding a Freeform stack
- Click Add stack where you want the new section.
- Choose Blank stack.
- Choose Freeform.
You'll get an empty canvas with default spacing at the top and bottom ready to customise
Design mode and the grid
Turn on Design mode to see the 24 column grid.
Rows are as tall as columns are wide, so the grid is made of squares. Blocks snap to it as you drag and resize, which makes lining things up a breeze. Design mode is also the only place blocks move.
Canvas height
In Design mode, a blue handle sits along the bottom edge of the canvas. Drag it down for a taller canvas and more grid rows, or up for a shorter one. Holding Shift snaps to whole rows. The canvas won't shrink past your lowest block, so nothing gets cut off, and your blocks stay put while the height changes.
Adding and moving blocks
No columns means no Add block button under each block. Use the blue Add block button in the bottom-left corner of the canvas instead. It follows you as you scroll, so it's always in reach on a tall canvas.
Freeform Canvas is new, so we've started with the blocks a hero needs: text, big heading, picture, and button. That's everything for a standout text and image design, and more block types are on the way.
When you add a block:
- It lands in the centre of the canvas (soon you'll be able to click exactly where you want it)
- Design mode switches on automatically if it was off
- Text and heading blocks open the text editor straight away, so just start typing
- Picture blocks open the picture picker as usual
Moving blocks in the canvas
Blocks only move in Design mode. With it off, hovering a block shows just the edit pencil and the delete icon, so you can edit text, swap pictures, and change buttons, but nothing drags.
That's on purpose. When you hand a website over to a client, they can update content without accidentally nudging your layout. Your design stays the way you built it.
To move a block: turn on Design mode, click it, and drag it by the move arrow. It snaps to the grid as you go.
Layering blocks
This is where Freeform Canvas gets really fun. Blocks can sit on top of each other, so you can put a heading over a photo, tuck a small picture over the corner of a big one, or float a button over an image.
- Turn on Design mode.
- Drag one block over another.
- Select a block and use the keyboard to change its layer:
- Cmd ] brings it forward one layer
- Cmd [ sends it back one layer
- ] brings it to the very front
- [ sends it to the very back
(On Windows, use Ctrl in place of Cmd.)
Every layer stays its own editable block. Swap the photo, retype the heading, nudge the button. No re-exporting, no re-uploading. And while you're editing a block it pops to the front so nothing covers your work, then drops back to its own layer when you're done. The layer order is remembered on reload and on your published website.
The wings (bleed area)
he grid stops growing once the canvas is 1920px wide. On a bigger monitor the grid stays centred, and the leftover space either side becomes the wings. Think of them as a bleed area. Push a heading or picture into the wings and it runs right off the page.
The wings shrink as the browser narrows and disappear below 1920px, so anything in a wing gets trimmed at the edge rather than squashed inward. That's why the wings are for decoration only, and why text and button blocks stay inside the grid. Visitors never see the wings as a separate area. They just see your design with the bleed.
Where blocks can go
| Block | Where it can sit | Why |
|---|---|---|
| Heading, picture | In the canvas, or reaching into the wings | They're decorative, so trimming at the screen edge is part of the look |
| Text, button | In the canvas only | Visitors need to read and click these, so they stay where every screen can show them |
Want text in the bleed? Make it a heading block. Headings are decorative, so they can run off the edge. Body text stays in the canvas so it's always readable and accessible.
Keep half a column in. When a heading or picture reaches into a wing, at least half a column of it has to stay inside the canvas so you can still grab and edit it. Want more hanging off the edge? Make the block wider.
And half a row top and bottom. Same idea vertically. Heading and picture blocks keep at least half a row inside the canvas at the top and bottom edges.
Width, text reflow, and font scaling
In Design mode, drag a block's side edges to change its width. Width does more here than in a column stack, because it's where your text wraps. If a line breaks in the wrong spot, widen or narrow the block rather than adding line breaks.
Between 1200px and 1920px wide, the whole canvas scales like an image. Grid, positions, widths, and font sizes all shrink together, so a heading that sits beside a photo on a big monitor sits in the same spot on a laptop. Below 1200px the text holds its size and wraps onto more lines instead. When a block grows taller, the blocks below it move down to make room, so nothing overlaps by accident. Blocks you layered on purpose stay layered.
Two quick tips: give text blocks a sensible width for the amount of text, and check the side by side view before you publish.
The toolbars
Stack toolbar
-
Background colour. The background fills the wings too, so it's a big part of the Freeform look. Image and video backgrounds to come soon (you can use full width picture blocks in the meantime).
-
Move stack up or down the page.
- Design mode. The toggle that turns the grid on and lets you move blocks.
- Delete. Removes the canvas, with a confirmation first.
Block toolbar
Click a block in Design mode and its controls sit right above it: the edit pencil, the move arrow, and delete. Width handles sit either side.
Copy a block. Hold Option (Alt on Windows) and drag the block. The copy is what you're dragging, so drop it where you want it and the original stays put. It's the quickest way to build a row of matching pictures or a second button.
- Change layer. Use the keyboard shortcuts in Layering blocks above.
- Delete. Click the delete icon. There's an Undo if you change your mind.
Mobile layouts
A wide screen layout can't just shrink onto a phone, so Freeform builds the mobile layout for you, and you can fine tune it.
Auto is on by default. Blocks stack one under another in reading order, with 24px of space at the sides, 16px between blocks, and 24px above the first and below the last. Full width pictures stay full width. It gets most layouts most of the way with zero effort.
Arranging by hand is for when you want it just right. In side by side view, hover the canvas in the phone preview and switch Auto off. Then click a block, change its width, and drag it exactly where you want it. You can also change the canvas height on mobile by dragging the horizontal blue bar at the bottom in the mobile preview. Blocks snap to an eight square grid, and a height handle lets you make room. Your desktop layout isn't touched.
Flick Auto on and off any time to compare the two.
One thing to note. Your hand-made layout is only kept while Auto is off. Switch Auto back on and you'll see a message with an Undo button. Your arrangement is saved until you leave or refresh the page, then it's gone. Done manual work you want to keep? Leave Auto off.
Check every screen size
Open the side by side view to see your stack at more than one size at once. Watch three things: how the text scales, how much of a heading or picture gets trimmed in the wings, and what Auto mode made of your mobile layout. Worth a look before you publish, every time.
Moving blocks between stacks
A Freeform stack is a very different kind of stack, so blocks can't be moved in from another stack or out to one. Soon you'll be able to copy blocks between stacks easily. For now, add a fresh block where you need it.
Quick reference
| I want to | Do this |
|---|---|
| Add a Freeform stack | Add stack, then Blank stack, then Freeform |
| See the grid | Turn on Design mode |
| Add a block | Click the floating Add block button |
| Move a block | Turn on Design mode, then drag |
| Layer blocks | Drag one over another, then Move up or Move down in the toolbar |
| Copy a block | Click Copy in the block toolbar |
| Change a block's width | Turn on Design mode, then drag its side edges |
| Make the stack shorter or taller | Drag the horizontal bar at the bottom of the stack |
| Run a heading or picture off the page | Drag it into the wings, keeping half a column in the canvas |
| Put body text in the bleed | Use a heading block instead |
| Fine tune the mobile layout | Mobile view, Manual mode, then click and drag |
| Check every screen size | Open the side by side view |