> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inploi.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Sections, columns, and blocks
> Understand the building blocks used to create a page in Studio.
export function LessonFooterBack() {
return
Back to CMS fundamentals
;
}
export function LessonHeaderBack() {
useEffect(() => {
const header = document.querySelector("#header");
if (!header || header.querySelector(".lesson-header-back")) {
return undefined;
}
const link = document.createElement("a");
link.className = "lesson-header-back";
link.href = "/learn/overview";
link.setAttribute("aria-label", "Back to CMS fundamentals");
link.setAttribute("title", "Back to CMS fundamentals");
link.innerHTML = `
`;
header.append(link);
return () => link.remove();
}, []);
return null;
}
## What you will learn
Pages use three nested levels. Understanding them helps you find content quickly without changing the layout unnecessarily.
```text theme={null}
Page
└── Sections (full-width rows, stacked top to bottom)
└── Columns (side-by-side areas on a grid)
└── Blocks (the actual content)
```
## 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.
## Related articles
* [The page editor](/studio/cms/pages/page-editor)
* [CMS glossary](/studio/cms/glossary)
* [Edit text](/learn/edit-text)
Next up: [Edit text](/learn/edit-text).