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
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:
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 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:
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: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
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 ashero-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. 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
Other settings
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.FAQs
I can't see a block I expected in the list.
I can't see a block I expected in the list.
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.
Why don't my changes show on the live site?
Why don't my changes show on the live site?
The editor only shows a private draft until you publish. Use Save & publish to make changes live — see Publishing and versioning.
How do I make a section narrower or add space around it?
How do I make a section narrower or add space around it?
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.