A blueprint layout is made up of columns, and each column can hold any number of sections. Kirby ships with the following section types:
You can combine those section types in any way you like and also use multiple sections with the same type in a single blueprint layout.
For one page type you might need a list of all subpages, files and a few form elements, whereas for the next page type you just need subpages or a gallery. With sections, all this is possible.
Columns can be defined in two ways:
If you want to extend columns, you have to use named columns.
The following widths are available when defining columns:
You can make an entire column sticky. This can be handy for a setup with a smaller sidebar that should always be available, even when you scroll.
Once you have set up your base column layout, the fun part begins and you can now add some sections.
You can probably already see how flexible this is. By slightly changing the columns, we can change the interface drastically.
If you don't need multiple columns, you can keep your blueprint a lot shorter by using the
sections option instead of defining columns. This will automatically create a single-column layout for you, where all sections are listed below each other.
Some blueprint types don't even need sections at all and a simple form is enough. In this case you can make your blueprints even shorter and add the fields definition directly without defining sections or columns.
Kirby gives you the flexibility to set up the Panel, so that it adapts to the needs of every single page/template. Use the layout possibilities to create the structure that works best for you:
If this isn't yet enough ways and space for you to structure your sections and fields, move on with…
When your blueprints get more complex, splitting up your view into multiple tabs helps to keep them organized. Tabs are basically wrappers around regular blueprint layouts. Check out how to create layouts before you get started with tabs.
A tab definition has three options:
The icon is optional. Please check out the list of available icons. You can also use an emoji by pasting it directly into the blueprint.