Find your way around the page builder

Add blocks and sections, change spacing and width, check your page on a phone, and hide a section on one device.

Once you know the four parts of the builder, every page gets easier: the top bar, the Add Elements panel on the left, the page in the middle, and the settings panel on the right.

Before you start

• Time: 15 minutes to learn, then it's second nature.
• Practice on a draft. The builder saves as you go, and on a live page your changes reach visitors when they save. Duplicate a page to practice on (see Find and manage your websites and pages).

The top bar

How a page is built

A page is a stack of sections. Each section has rows, rows have columns, and columns hold blocks (text, images, buttons, forms). When you click something, the path above it shows where you are, for example Section › Row › Column › Image.

Add a block or a section

1. Click + to open Add Elements. It has three tabs:
   • Blocks: single elements, grouped as Navigation, Content, Media, Interactive, Widgets, Blog, Conversion and Buttons.
   • Sections: whole ready-made sections, plus ones you've saved. See Reuse sections across pages.
   • Layers: an outline of the page.
2. Type in Search blocks... to find something fast, for example "image", "testimonial" or "countdown".
3. Click the block, or drag it onto the page where you want it.

Your booking calendar, forms, surveys, quizzes and checkouts are all blocks in the Interactive group.

Change a section's width and spacing

1. Click the section. A green Section label appears and the right panel shows General, Styles and Animations.
2. On General, set Width (for example Wide). Allow Rows to take entire width lets content run edge to edge.
3. On General, under Background, choose Background Mode: Color, Image or Video.
4. On Styles, use Margin & Padding. The outer ring is margin (space outside the section), the inner ring is padding (space inside it). There's no height setting for a section; add padding to make it taller.
5. Also on Styles: Border, Border Sides and Corner Radius.

Check tablet and mobile

1. Click the device button until the page narrows to Tablet. You'll see Editing tablet layout ("Desktop styles still inherit unless overridden here").
2. Changes you make now apply to that device only. A section you haven't changed shows Inheriting desktop styles.
3. Click again for Mobile. Columns stack into one. Check text size and spacing here.
4. Click until you're back on Desktop before you carry on editing.

Hide a section on one device

Useful for a wide image that doesn't work on phones, with a simpler version shown only on mobile.

1. Click the section (not a block inside it).
2. On Styles, find Visibility.
3. Untick Desktop, Tablet or Mobile. Hidden sections aren't shown on that screen size.

Visibility is set per section, not per block.

Move, copy, lock or delete

• Section toolbar (appears when a section is selected): move up, move down, Save as section template, and on the right move, duplicate, lock and delete.
• Layers tab: expand a section to see its rows. Hover to move, hide (eye) or lock. Hold Ctrl and click to select several.

Check it worked

• The page looks right in all three device views.
• After you publish, open the live page on your phone.

If something's off

• You changed something on every page at once: that section is linked. The panel says "This block belongs to a linked section." See Reuse sections across pages.
• The page is narrow and says Editing tablet layout: you're in tablet or mobile view. Click the device button until it's back to Desktop.
• You can't change something: check whether its lock icon is on in Layers.
• You made a mistake: use undo, or see Bring back an earlier version of a page.
• "This page did not finish loading": Flourivate was probably updated. Hard refresh (hold Shift and click reload).