Layout structure
The homescreen, including its subpages, is based on a grid structure that is created using the layout editor in the dashboard.
Let's take a look at a typical homescreen layout:
How did we create this? Here is the underlying structure:
As you can see, a layout is built by adding sections, each with a certain number of slots, and then placing blocks or additional sections within them. Below is a description of each part of the diagram above:
Section | Placement | Contains |
|---|---|---|
Top | Outside section | 1 row, 2 columns = 2 slots 2 nested sections: Lefty & Righty |
Lefty | Nested inside Top within Top's first column | 2 rows, 1 column = 2 slots 2 blocks |
Righty | Nested inside Top within Top's second column | 3 rows, 1 column = 3 slots 1 nested section: Your stuff |
Your stuff | Nested inside Top within Top's second column. | A header and title 1 row, 2 columns = 2 slots 2 blocks |
Keep reading to understand what these terms mean.
Sections & slots
A section is a container where blocks and nested sections can be placed. It has a specific place in the layout, and can have a header (colored divider) that spans the top, with a title.
A section also has its own layout, which affects the number of slots:
- In a Grid layout, you can set up one or more slots by adjusting the number of rows and columns. Each slot can contain one block or section. This is seen in the diagram above.
- In a Mini list layout, a section has one slot, where you can add multiple blocks that appear in a list format.
Blocks
A section may contain one or more blocks, depending on how many slots are set up:
Feature blocks: These can be either links to modules within the app, with their own interface, or external links to websites. Feature blocks within a section can be moved into any order and then remain there permanently.
Content blocks: These link to content items, which may change over time and are dynamically linked to sections using display tags. Content blocks can either be moved manually into any order within a section, or set up in a specific sort order.
Menu blocks: These link to a sub-layout where users can access additional content, such as a series of videos, or a module for a feature.
How do I get started creating a layout?
For detailed steps, see Design your layout.