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:| 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 |
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:| Breakpoint | Grid |
|---|---|
| Desktop | 12-column grid |
| Tablet | 12-column grid |
| Mobile | 4-column grid |
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 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
| 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.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.