Freeform layout, photo editing and background video

Most sections give you choices from a list, so a page cannot look broken. On a website page you can go further: free a section so every element sits where you put it, crop and tint a photo, and put a looping video behind a section. These are for website pages, in the same page editor as Your website (beta). Freeform and video backgrounds are not offered on landing pages.

Freeform: a free layout

There are two ways in.

• In Add section, under Custom code (your own HTML, or a free layout where anything goes anywhere), choose Freeform: place text, photos, buttons and shapes anywhere on a grid.

• On a section you already have, open its Content panel and press Customize layout. The section becomes a freeform layout with the same words, photos and buttons as elements you can move one by one. Press Undo, or use the page's History, to go back. Sections that show live content, such as courses, events or products, and designed sections stay as they are.

On the canvas

• Add an element where you want it, then drag it. Alignment guides appear as you move, and they snap.

• Bring forward, Send backward, Duplicate, Group, Ungroup, and Spread evenly across or down for a selection.

• Layers lists every element. Name them, lock them, and see groups.

• Drag elements past the section's edge onto a neighbouring freeform section and they move into it, in one undo step. This works in the desktop view only.

• Copy and paste elements, or whole sections, with Cmd+C and Cmd+V (Ctrl on Windows). They go to one clipboard that works between pages and browser tabs, and lapses after a day.

Grid is Standard or Fine. Fine halves each step so you can place things more exactly. Switching back to Standard may round some places to the nearest standard line, and a message says what moved.

Desktop, Tablet and Phone

A freeform section has a switch for Desktop, Tablet and Phone. The phone layout follows the desktop until you change it, and the tablet draws the desktop layout until you edit it. On the tablet, Start from the phone layout copies the phone's placement, and Reset tablet layout goes back to following the desktop. The page's preview size toggle has a Tablet size too.

Style and motion for an element

Select an element and open its style: text size and weight, letter spacing, line height, a fill behind the words, a fill, border, corners, shadow, opacity, a turn, a photo's shape and focus, and the space inside. More control adds exact sizes.

The Motion panel sets how an element moves, only for visitors who have not asked their device for less motion:

• Arrives: None, Rise, Fade, From left, From right or Zoom, with a Delay.

• On scroll: drift slowly or quickly (parallax), fade in, rise in, grow in, or fade out as it leaves. Up to 12 elements in a section can have a scroll effect.

• On hover: Lift, Grow, Shadow, Brand color or Dim, where the kind of element allows.

• Stay in view while the section scrolls.

The canvas draws every element still. The Motion panel plays an arrival on demand.

Edit a photo

Click a photo to open the Change photo dialog. Once a photo is picked from Your photos or Free stock, an Edit tab appears:

• Crop: Free, Fits this spot, Square, 4:3, 16:9 or 3:4. Drag the box to move it, drag a corner to size it, or use the arrow keys, and hold Alt with the arrows to size.

• Turn left or right, Mirror, and Upside down.

• Four sliders: Brightness, Contrast, Saturation and Warmth.

• Filter: None, Mono, Sepia, Vivid, Warm, Cool or Fade.

• Reset puts the photo back.

• What stays in frame sets the focus point, which applies to the cropped photo.

Your original file is never changed. The page shows the edited version, so editing costs no extra storage. A photo that ships with a template takes color changes only, and the tab says why.

A video behind a section

On a website page, a section's Style panel offers Photo, Video or Fade behind it. Choose Video, upload your own clip, and trim it. Drry makes a muted looping video from it, up to 15 seconds, with a still picture that shows while it loads.

• It plays on phones too. Visitors whose device asks for less motion, or who have data saver on, get the still picture and no video.

• A small Pause and Play button sits in the corner of each section with a video background. One choice covers the whole site: pausing one pauses every background video on the page, and the visitor's next page or visit keeps the picture and offers Play. The button is not drawn where there is no motion to stop.

• Dividers, strips and a drifting or zooming photo background also work on website pages. See Build your first funnel page.