The flex canvas

Every other block is filled in with boxes. The Flex canvas block gives you a blank surface instead and lets you put things exactly where you want them.

It works the same way on a hosted plan and in the WordPress theme, and a block designed in one opens correctly in the other.

---

When to reach for it

Most of the time you should not. The ready-made blocks are quicker, they already follow your style kit, and they rearrange themselves sensibly on a phone without you deciding anything.

The flex canvas is for the section that does not fit any of them: words sitting over a photograph rather than beside it, three images overlapping, a shape running off the edge of the page. If you can build it from an ordinary block, build it from an ordinary block.

---

Opening it

On a hosted plan (Sites or Studio):

1. Go to Pages and press Edit beside the page.
2. Under Blocks → Add a block, look in Custom editors and press

Flex canvas.

1. On the new block, press Open the designer.

In WordPress:

1. Edit the page and press the + button.
2. Find Flex canvas under Meridian Photographers (or type flex in

the search box).

1. On the block, press Open the designer.

The designer fills the screen, because a drag-and-drop surface inside a list of other blocks fights you for every movement.

When you are finished, press Save canvas, then save the page itself (Save page on a hosted plan, Update or Publish in WordPress). Cancel closes the designer without keeping your changes.

---

Starting from a layout

The Start from… menu at the top offers ready-made arrangements — a centred hero, an image beside words, a pull quote, three prices, a gallery grid, a contact section with a photograph, before-and-after, and more. They arrive with placeholder words and sensible proportions.

They are a starting point, not a finished design: your first job is editing rather than deciding where everything goes. Choosing one replaces what is on the canvas.

---

The elements

The five you will use most sit in the toolbar: Text, Image, Shape, Line and Button. Everything else is behind More, grouped as Photographs, Words, Getting in touch and Embedded. Click one to add it to the middle of the canvas.

---

Moving things

Drag an element to move it. Drag a handle on its edge to resize it. A photograph keeps its shape while you resize it from a corner; hold Shift to stretch it out of shape on purpose.

The arrow keys nudge the selected element one pixel at a time — hold Shift for ten, or ⌘ (Ctrl on Windows) for a hundred.

Guides appear as you drag, showing the distance to each edge and a line whenever something lines up with something else. That is how you centre things by hand. Untick Guides at the top to hide them.

If you would rather work to a grid, the No grid menu at the top offers 8 to 24 columns, and elements snap to them. The grid divides whichever canvas you are on, so the same choice gives the same proportions on a phone as on a desktop. Hold Alt while dragging to ignore it.

Undo and Redo are the curved arrows at the top (⌘Z and ⌘⇧Z).

Selecting several

Shift-click each one, or drag a box around them on an empty part of the canvas. ⌘A selects everything.

With more than one selected, a bar appears to line them up with each other or space them evenly, and to Group them so they move together.

Front and back

[ and ] move the selected element backwards and forwards. The Layers panel on the right shows the order; drag a row to rearrange it.

The padlock in the Layers panel locks an element so it cannot be dragged — useful for a background shape that otherwise catches every click meant for what sits on top of it. The panel also has buttons to hide, duplicate and delete each element.

---

Editing text

Double-click any text element. A toolbar appears beside it, never over it.

Bold, italic, underline and links apply to the words you have selected. Font, size, colour and alignment apply to the whole element.

Set a Heading level on your main heading. It tells Google and screen readers that those words are a heading rather than decoration.

---

Photographs

Crop to fill makes a photograph cover its frame, trimming whatever does not fit. With it on, drag the photograph itself to choose which part shows.

That matters most on a phone, where a wide photograph loses most of its width. The phone canvas keeps its own choice — a couple standing to the left of a landscape can be cropped out entirely if the crop stays in the middle.

---

Desktop, tablet and phone

Three canvases, switched with Desktop, Tablet and Phone at the top. Every element is shared between them; only the arrangement differs. Change the words once and they change everywhere.

An element you have not moved on the tablet or phone canvas **follows the canvas above it**. It is shown with a dotted outline and a small coloured mark in its corner. It only needs attention where the wider arrangement genuinely stops working.

On the tablet and phone canvases, three extra buttons appear:

• Scale down shrinks the desktop arrangement to fit, keeping the layout. Right for a hero, where the point is that words sit over the photograph.
• Stack lays everything out in a column, in reading order. Right for a busy section, where a shrunken version would be three slivers.
• Reset goes back to following the desktop arrangement.

Both Scale down and Stack are starting points to adjust, not finished layouts.

Text size and rotation are set per canvas too — a big desktop headline is unreadable on a phone, so give it a phone size and the desktop one is untouched.

---

The block's own settings

Click an empty part of the canvas so nothing is selected, and the panel on the right shows the block's own settings.

Height, Tablet height and Phone height set how tall the canvas is. You can also drag the ↕ handle under the canvas, or press Grow to fit if something is hanging off the bottom.

Background takes a colour. Add a backdrop photograph puts a photograph behind everything, and Backdrop opacity (a number from 0 to 1) fades it, so words over it stay readable without adding a second layer.

Space above and Space below separate the block from its neighbours, so you do not have to design empty space into the canvas itself.

---

Colours and your style kit

Every colour box offers your style kit's own colours as well as a colour picker.

Choose a kit colour wherever you can. A block built with a picked colour keeps that colour for good — change your style kit and it becomes the one section that looks wrong. A kit colour follows the kit.

---

Animation

Any element can arrive as it scrolls into view — fade, rise, fall, slide in from either side, scale up or down, tilt or blur. Select the element, open Animation in its settings, choose under On scrolling into view, then set how long it takes (Over) and how long it waits (After), in thousandths of a second.

Use it sparingly. One element arriving is a flourish; nine arriving one after another is a website that will not settle down.

Visitors who have asked their device for less motion see the finished arrangement straight away.

---

What is cut off, and what is lost

Anything past the edge of the canvas is cut off there, exactly as it will be on the page, and marked cut off so you know.

An element dragged entirely off the canvas stays visible, faded, next to the nearest edge so you can drag it back. It is not on the page while it sits there. A note above the canvas says which case you are looking at: something cut off needs the canvas made taller; something off the canvas needs bringing back.

---

Saving and reusing

Save canvas keeps your design in the block. The page still needs saving as normal.

A recovery copy is kept as you work. If a tab closes or you are signed out, the designer offers it back the next time you open that block.

• ＋ saves the block under a name; pick it later from the Saved… menu to use it on another page.
• ↓ saves the block as a file on your computer, and ↑ loads one back — the way to move a block between sites.
• ⌘C and ⌘V (Ctrl on Windows) copy and paste elements, including between blocks.

---

If something looks wrong

The photograph is soft. Upload a larger original. The canvas asks for a file sized to the element, doubled for sharp screens, and cannot invent detail that was never there.

It looks right on a computer and wrong on a phone. Switch to the Phone canvas and look. An element following the desktop arrangement is only ever a guess — that is what Scale down and Stack are for.

The designer will not open. It needs a computer and a reasonably recent browser. It does not work on a phone; design on a laptop and check the result on a phone.

---

A short honest note

The flex canvas can build things no other block can. It can also build a page that is slow, hard to read, or broken on a phone, because it does not stop you.

The ready-made blocks are the safer choice and they are not a lesser one. Reach for the canvas when you have a reason.