> ## 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.
# The page editor
> Build page content using sections, columns, and blocks
# The page editor
When you open a page in Studio, you enter the page editor. This is where you build and arrange content using a visual layout system made up of three levels: **sections**, **columns**, and **blocks**.
## How the layout works
```
Page
└── Sections (stacked vertically)
└── Columns (side by side, on a 12-column grid)
└── Blocks (the content itself)
```
Every section spans the full width of the page. Inside a section, you divide space into columns. Inside each column, you add content blocks — text, images, job search, and so on.
## Sections
A section is a full-width horizontal row of the page. Sections stack on top of each other to form the page layout.
### Adding a section
Click **Add section** at the bottom of the page or between existing sections, then choose how to start it:
* **Section** — start from an empty layout you build yourself
* **Template** — choose a professionally designed layout from the inploi template library
* **Prefab** — insert a saved reusable section from your company's prefab library
### Section appearance
Click a section to open its settings. You can configure:
| Setting | What it does |
| --------------------- | ---------------------------------------------------------------------------------------------------------- |
| **Background colour** | Fill the section with a solid colour or gradient from your theme |
| **Background image** | Set a full-bleed background image with optional parallax scrolling |
| **Background video** | Autoplay a looping video behind the section content |
| **Padding** | Control the vertical space above and below the section content |
| **Min height** | Set a minimum height for the section (useful for hero sections) |
| **Position** | Default, Stick to top, Stick to bottom, Fixed position, or Absolute (for persistent navigation or banners) |
| **Section ID** | Set an ID so in-page navigation and scroll links can target this section |
Use short, lowercase `kebab-case` Section IDs such as `hero`, `our-roles`, or `testimonials`. Section IDs should be unique within the page and describe the section's purpose, not its position.
Background videos affect how quickly a page loads, especially in the hero section. Keep them short and trim them to length before use — see [video handling in Uploads](/studio/cms/uploads#video-handling). Studio shows a placeholder frame while the video loads, so there are no blank screens.
## Columns
Columns divide a section into side-by-side areas. The layout uses a 12-column grid, giving you precise control over how much horizontal space each column takes up.
### Adding columns
Inside a section, click **Add column**. You can have multiple columns in a single section.
### Column placement
For each column, you set where it starts and ends on the grid, independently for three breakpoints:
| Breakpoint | Grid |
| ----------- | -------------- |
| **Desktop** | 12-column grid |
| **Tablet** | 12-column grid |
| **Mobile** | 4-column grid |
You position a column by setting its **start** and **end** points on the grid. For example, on desktop a column from start 1 to end 7 takes up the left half of the section; on mobile you might span it across all 4 columns so it fills the full width.
You can also hide a column on specific breakpoints — for example, hiding a decorative image column on mobile.
### Column appearance
Each column has its own appearance settings:
| Setting | What it does |
| -------------- | ------------------------------------------------------------------------ |
| **Gap** | Space between blocks inside the column |
| **Padding** | Internal spacing around the column content |
| **Background** | Colour or image behind this column only |
| **Animation** | Fade, slide, or scale the column's content into view as the page scrolls |
| **Sticky** | Pin this column in place while the rest of the section scrolls |
## Blocks
Blocks are the content components that go inside columns. They are the building blocks of your page — text, images, jobs, navigation, and more.
### Adding a block
Click **Add block** inside any column. A single searchable list opens with all available blocks — start typing to filter it by name.
### Available blocks
| Block | What it does |
| -------------------------- | ----------------------------------------------------------------------------- |
| Rich text | Body copy, headings, bullet lists, links, and inline formatting |
| Media | Display an uploaded image or video, with caption and alt text |
| Media with mask | Layer an image or video behind a shaped mask |
| External image | Display an image from an external URL |
| External video | Embed a YouTube, Vimeo, or TikTok video |
| Accordion | Expandable items, ideal for FAQs |
| Cards | A grid or carousel of cards (with optional hover effects, modals, or numbers) |
| Timeline | A vertical sequence of events or milestones |
| Countdown | A live timer counting down to a date |
| Animated text banner | A large heading with entrance animation effects |
| Ticker | A horizontally scrolling strip of text or images |
| Job Search | A full job search experience with filters, search, and job cards |
| Navbar | The site header navigation with links, menus, and a logo |
| Footer | The site footer with links, text, and social icons |
| Content tabs | Tabbed content panels within a section |
| Scroll navigation | An in-page navigation bar that highlights the current section |
| Button group | One or more call-to-action buttons |
| Badges | Small label chips, useful for tags or categories |
| Separator | A horizontal dividing line |
| Spacer | Add vertical whitespace between blocks |
| Map | An interactive map with a location marker |
| Form | A custom HTML form (GET or POST) |
| Feedback widget | A thumbs up/down feedback prompt |
| Cookie switch | A toggle that lets candidates update their cookie consent |
| Search params button group | Buttons that change the page's URL query parameters |
A few advanced blocks — **Code Embed**, **Flow button**, and **SDK Form** — only appear for users with full editing permissions. If you don't see them, ask your site admin about your access level.
### Block settings
Each block has its own settings panel. Click any block on the page to open it. Most blocks let you configure both the content (what to show) and the appearance (how it looks).
## Labelling columns and blocks
You can give a column or block a custom label to make a page easier to navigate — much like renaming layers in Figma or other design tools. Labels are for your own organisation and don't appear on the live page.
To add a label, select the column or block and set its label in the settings panel.
Choose labels that describe the element's role, such as `hero-cta`, `jobs-filter`, or `benefits-card`. Avoid labels tied to a temporary visual treatment, such as `blue-button`.
Labels are distinct from a section's **Section ID** (above), which is used for in-page navigation and scroll links. Labels are for internal navigation and styling only.
For developers: a label is also applied to the element as a `data-cms-label` attribute, so you can target that specific element from [CSS overrides](/studio/cms/themes#css-overrides). For example, a block labelled `hero-cta` can be styled with `[data-cms-label='hero-cta'] { color: red; }`.
## Per-page settings
In the top bar of the editor, switch from **Content** to **Settings** to access page-level settings.
### SEO settings
| Setting | What it does |
| ------------------------------- | --------------------------------------------------------------------------------- |
| **Title** | The title shown in the browser tab and search results |
| **Meta Description** | A short summary shown in search engine results |
| **Social thumbnail** | The image used when the page is shared on social media |
| **Available to search engines** | Toggle to include or exclude the page from your sitemap and search engine results |
### Other settings
| Setting | What it does |
| -------------------------- | ----------------------------------------------- |
| **Browser Accent Color** | Sets the browser theme colour on mobile devices |
| **Require Authentication** | Restrict the page to signed-in candidates only |
## Previewing your changes
While you edit in the **Content** view, a live preview pane shows the page as you build it. Use the device icons in the preview toolbar to switch between mobile, tablet, and desktop views, and the open-in-new-tab icon to view the current version full-screen.
Your edits stay private until you publish — see [Publishing and versioning](/studio/cms/pages/publishing-and-versioning).
## FAQs
A few advanced blocks (**Code Embed**, **Flow button**, **SDK Form**) only appear for users with full editing permissions. If one is missing, check your access level with your site admin.
The editor only shows a private draft until you publish. Use **Save & publish** to make changes live — see [Publishing and versioning](/studio/cms/pages/publishing-and-versioning).
Use the section's columns to control width on the 12-column grid, and add a **Spacer** block or adjust appearance settings for vertical whitespace.
## Need help?
## Related articles
* [CMS glossary](/studio/cms/glossary)
* [Naming conventions](/studio/cms/naming-conventions)
* [Managing pages](/studio/cms/pages/managing-pages)
* [Publishing and versioning](/studio/cms/pages/publishing-and-versioning)
* [Prefabs](/studio/cms/prefabs)
* [Templates](/studio/cms/templates)