Free layout sections: place blocks anywhere on a grid
When no ready layout fits, a Free layout section lets you drag titles, text, pictures, buttons and shapes anywhere on a grid. Columns and blocks gives you up to four columns filled with ready blocks such as a countdown, a chart or opening hours.
PLANSEvery plan
The problem it solves
- The layout you have in mind does not match any of the section layouts on offer.
- A picture has to overlap a coloured shape and a title, and templates do not allow it.
- Free placement on other tools falls apart on a phone, with text on top of pictures.
- Adding a countdown or opening hours means pasting code from another website.
How it works
- In the editor press + Add section and choose Free layout or Columns and blocks.
- In a Free layout, add things from the Content panel: Title, Text, Picture, Button or Coloured shape.
- Drag the blue grip on the page to move a thing, and its corner to make it bigger. Things snap to a 12-column grid on computers.
- Switch the editor to phone width. Things stack in reading order by themselves, or you place them yourself on a 6-column phone grid.
- In Columns and blocks, choose the column layout, then press + on the page to add a block to a column.
Everything it does
Free layout
- Things: Title, Text, Picture, Button, Coloured shape
- Each thing: its words, picture, button link, colour and rounded corners (as the design, square, soft or round)
- Computers: a 12-column grid; phones: a 6-column grid
- On phones each thing keeps its own place; without one, things stack top to bottom in reading order
- Height of the section: 6, 8, 10, 12, 14, 16 or 20 rows (10 to start with); it grows to fit what you place
Columns and blocks
- Layouts: two columns, one, three, four, wide left, wide right and grid
- Each column: width out of 12 (half, third, two thirds, quarter, three quarters, 5 or 7 twelfths, full). It can show as a card, with text left, centre or right
- Line up the columns and the space between them
- 22 kinds of block: title, text, picture with a shape, button, list with ticks, icon with text, card, number, quote, notice and badge. Also progress bar, rating, countdown, bar chart, video, social links, share this page, on this page links, opening hours, line and space
- A title, a second title line in the accent colour and an intro above the columns
Like every section
- Background, edges, animation, phone settings and A/B tests work on these sections too
- Save one to My sections to use it on other pages (Growth)
Who uses it
Website EditorBuilds free layout and column sections and places their blocks.
Website ManagerPublishes the page when it is ready.
Where you use it
- Web: the editor, + Add section > Free layout or Columns and blocks
- Not on a phone: sections are built in the editor on a computer; the result shows on every screen
What you control
Settings
- Free layout height: 10 rows to start with (6 to 20)
- Column widths: out of 12, half to start with
Questions
Will a free layout break on phones?
No. On phones the things stack in reading order by themselves, top to bottom and left to right. If you want a different order, place them yourself at phone width; computers keep their own places.Can I put text on top of a picture?
Yes. In a Free layout, things can overlap: place a picture and then a title over it, or a coloured shape behind both.Is there a countdown block?
Yes. Columns and blocks has a countdown, along with a bar chart, progress bar, rating, opening hours, share buttons and more.Is this in the Starter plan?
Yes. Free layout and Columns and blocks are on every plan. Saving a section to My sections starts in Growth.Related features
BUILDING THE SITEDrag-and-drop editor: type on the page itselfYou change your website on the page as visitors will see it. Click a heading and type, drag sections into order, and pick layouts from live pictures with your own words. Everything saves by itself, and nothing goes live until a manager publishes.BUILDING THE SITEA phone layout for each sectionMost of your visitors see the site on a phone. Each section has its own phone settings: items in a row, picture first, text size, space, place on the page, or hidden. The computer view does not change.BUILDING THE SITEShaped edges, backgrounds and animation on scrollGive each section its own background: colour, gradient, glow, picture or video. Draw its edges as a wave, slope, curve or torn paper, and choose how it appears on scroll. Visitors who turned motion off on their device see a still page.SELLING AND MEMBERSMy sections: save and share sectionsSave any section you have made, such as an offer banner or a contact block, and add it again on other pages. Add it as a copy to change on its own, or as a shared section that changes everywhere at once.BUILDING THE SITEStyle any heading or button on its ownThe design sets how every heading and button looks, so the site stays consistent. When one needs to stand out, such as a bigger price or an outline button, style just that one from the text toolbar. One click takes it back.
See your business on a real design.
Tell us what you do and what the site needs to do: bring enquiries, take bookings, show your work or sell. We will start your site from the closest design with you.