Skip to main content

4 min 56 sec — Sections, columns, and blocks

​
What you will learn

Pages use three nested levels. Understanding them helps you find content quickly without changing the layout unnecessarily.

​
Sections

A section is a full-width row, and sections stack from top to bottom. Reorder them by dragging. To add one, select Add section and start with an empty section, a Template, or a reusable Prefab.Select a section to open its appearance settings. Common options include:
  • Vertical padding — the space above and below the section’s content.
  • Background colour — if unset, the page’s theme default is used.
  • Background image — fills the section behind its content.
You can undo and redo any change with the toolbar buttons or the usual keyboard shortcuts (Cmd/Ctrl + Z, and Cmd/Ctrl + Shift + Z).

​
Columns

Columns sit inside sections and divide them into side-by-side areas. Select a column to set its start and end points on the grid, which controls its width. You can set the placement independently for desktop, tablet, and mobile. A column’s gap controls spacing between the blocks inside it.

​
Blocks

Blocks are the content inside a column: Rich text, Media, Spacers, and many more. Add one with Add block, then choose the type you need. The next lessons cover the blocks used most often.
You do not need to change sections or columns for normal content edits. To update words or swap an image, select the existing block and edit its content.
This transcript has been lightly edited for current inploi product terminology and readability.

​
0:00

Page content is organised into sections. You can reorder a section by dragging it, or add one when the page needs a new area.

​
0:30

Select Add section, then choose an empty section, a prefab, or a template.

​
1:00

Select a section to open its appearance settings. Use vertical padding to control the space above and below its content.

​
1:30

You can also set a background colour. If none is set, the section uses the default from the page theme. Undo and redo are available in the toolbar and with keyboard shortcuts.

​
2:00

You can add a background image for the full section.

​
2:30

Inside each section are columns, which determine the horizontal layout.

​
3:00

Select a column to set its start and end points on the grid. These determine its width.

​
3:30

Columns can sit next to each other or stack when there is not enough room at a breakpoint.

​
4:00

Most routine updates do not require changing column placement.

​
4:30

Use a column’s gap to space its blocks. Add blocks for rich text, media, spacers, and other content types.
Next up: Edit text.