Concept Room
The Concept Room is a powerful tool for efficiently planning your project's content architecture. Collaboratively conceptualize sections, pages, and components and seamlessly involve designers and developers in the process.
The Concept Room is part of Storyblok Labs and is thus still in the beta stage. Enable it as shown in the Storyblok Labs documentation.
Once enabled, open the Concept Room by navigating to Labs > Concept Room. Each Storyblok space has one corresponding Concept Room. Click on Create a Concept to start conceptualizing your content architecture.
Pages
The newly created box, currently labeled “Untitled,” represents a page. Eventually, each page would constitute a story in the Content section of a Storyblok space.
)
A blank Concept Room with one new page
Click on the page to:
- Change its name {1}
- Add content in the form of top-level layout components {2}
- Add content by choosing from a variety of component templates {3}
- View its details {4}
- Add a comment {5}
- Delete the page {6}
)
Managing a page in the Concept Room
Hover below the page and click on the green plus icon to add a child page.
)
Adding a child page in the Concept Room
Notice that it is possible for this new page to create sibling pages rather than child pages only.
)
Creating sibling pages in the Concept Room
Think of each page as a section's main and singular entry point. Therefore, the first page of each section cannot have sibling pages.
Pages can be rearranged via drag and drop. Drag and drop a page horizontally on the same level or a level below or above (except the top level).
Sections
The horizontal separator lines demarcate sections. Think of these sections as visual representations of future content folders. Click on the plus icon of a separator line {1} to create a new section.
)
Adding a new section in the Concept Room
Alternatively, create a new section by dragging an existing page over a separator line.
Delete a section by moving or deleting all of the pages it contains.
Components
Add top-level layout components to pages to conceptualize and visually represent the intended page structure. Choose from templates, such as Hero, Gallery, Feature, Testimonials, and many more, or add a custom component.
Each component provides a context menu to set its fill color, view details, add comments, or delete it.
)
Managing component settings in the Concept Room
Opening the details provides an overview of all comments. Use comments to discuss the desired functionality of components.
Users with write access to the Concept Room can link components to existing blocks in the Block Library .
They can also create new blocks and edit existing blocks directly from the Concept Room. To manage permissions, navigate to the space Settings > Roles.
Linking components informs designers, editors, and developers about the components required for the project. Combined with component-specific discussions, the Concept Room provides a powerful tool to plan a project efficiently.
Rearrange a component by dragging it vertically within a page or by dragging it to another page.
Global controls
Use the arrow buttons in the bottom left corner to undo and redo your working steps at any point.
Use the controls in the bottom right corner to:
- enter fullscreen mode
- enable a map (a small visual representation of your entire concept, highlighting the area you are currently viewing, which is helpful when planning a large project with hundreds of entries)
- zoom in or out, or reset the zoom
Access all discussions (relating to both pages and components) by using the comments button, represented by the speech bubble in the top right corner.