The way you design your pages has a significant impact on the employee experience. A clear layout makes it faster for employees to find what they need, reduces unnecessary scrolling, and ensures pages look good on any device.
Applaud supports a flexible range of page layouts so you can design engaging content for your workforce. Layouts adapt beautifully and responsively across all devices, helping employees access the right information whether they’re on a desktop, laptop, tablet, or mobile.
The illustration below shows the different layout options. This article explains how each layout works and how you can configure it.
Single content layout
A single content layout shows one piece of content on a page. This layout works well for focused items such as a news article or a standalone knowledge base article.
Example: a page with a detail block showing an HR policy.
Masonry layout – two columns
A two-column masonry layout places content side by side. This layout is useful when you want to highlight different types of information on the same page.
Example: two detail blocks showing an HR policy and its attributes.
Masonry layout – three columns
A three-column masonry layout helps reduce scrolling when you have a large amount of content.
Example: a page showing three list blocks configured with various layouts.
Stacked layout
On smaller devices, such as tablets and mobile phones, content blocks automatically stack vertically for optimal use of space. You can also configure a stacked layout for larger devices if you prefer a simple, linear view.
Example: a page with a sequence of blocks, a call-to-action information block, a search block, and a menu block with quick links.
Sidebar layouts
Sidebar layouts are variations of the three-column design, where one side column spans two columns. You can choose a left sidebar or right sidebar, depending on where you want to emphasise content.
Example: the knowledge article edit page has blocks in the right-hand column, while the first two display a large block showing the knowledge article text.
Hide or show blocks on specific devices
Each content block includes settings to control whether it appears on specific devices. This lets you optimise the experience for employees.
Device types
| Device type | Description |
|---|---|
| Large | Desktop computers |
| Medium | Laptops |
| Small | Mobile and tablet web browsers |
| Native | Native Android and iOS apps |
| Web | Any device using a web browser instead of a native app |
Previewing layouts on different devices
Before publishing a page, you can preview how it looks across different devices. This helps you review the design and ensure employees have a seamless experience on desktop, tablet, and mobile.
Tasks you can perform
- Add a new page and header
- Configure your page settings
- Reorder and edit content blocks
- Preview your page on various devices