Understanding Blueprints

The CMS Questions
1

Hi,

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: Structuring blueprints | 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.

kirby-blueprint
kirby-blueprint1059×737 51.6 KB

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!

Mike

2

Welcome!

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.

3

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

columns:
(pound sign) hero
main:
width: 1/1
sections:
content:
type: fields
fields:
headline:
label: Headline
type: text
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

4

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

Screenshot 2021-05-25 at 12.00.46
Screenshot 2021-05-25 at 12.00.461059×1968 164 KB

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?

5

All it is pulling is the red box :man_facepalming:

yaml
yaml478×672 107 KB

6

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

columns:
  main:
    width: 1/1
    sections:
      # rest of stuff
  about1:
    width: 1/2
    sections:
      # rest of stuff
  about2:
    width: 1/2
    sections:
      # rest of stuff
7

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