Understanding Blueprints


Im new to Kirby and really trying to understand Blueprints.

I’m not sure if there is an easier way to build but I started with HTML and some PHP snippets, then applied my CSS & JS (to build the design), and now im starting on my Blueprints. (Do you guys have any preferred methods?)

I have read docs (for example: Layout | Kirby CMS), but its just not sinking in.

I understand there are columns and sections but to emulate my page as best as possible… I need multiple “rows” (see red outline below) - this is what I dont understand.

I need multiple rows to outline the different sections of my page on the front end. What am I not getting/understanding. I know it shouldnt be this hard.

Thanks for any advice!



What are those sections on the frontend made of? You can create multiple rows by creating columns that go beyond 1/1. I.e. let say you have two columns 2/3 + 1/3, then you can have additional columns 3/4 + 1/4 and they would go into another row (at least on larger screens). That way you can emulate multiple sections on the frontend.

My home page HTML markup is made of section tags (sorry site is on localhost).

For example:

Hero Section HTML - centered hero section About us HTML - 50/50 grid section

So I would ideally like to represent this in the panel by using rows

title: Home

icon: home

(pound sign) hero
width: 1/1
type: fields
label: Headline
type: text
label: Text
type: textarea

(pound sign) about …(this is where I get stuck)

I need a “row” with 2 x columns (width 1/2) with some fields…

I hope this makes sense… Thank you

Here is an example of how id like to lay it out:

I think I will try just using your multiple columns, I understand that! Basically it just wraps underneath rather than side-by-side?

Do you know where any of this information is help of Kirby’s website?

All it is pulling is the red box :man_facepalming:

There are keys missing for columns 2 + 3, the first one has key main. Structure should look like this with named keys for columns:

    width: 1/1
      # rest of stuff
    width: 1/2
      # rest of stuff
    width: 1/2
      # rest of stuff

Thanks! That’s what I needed. Really helpful!