# Layout Builder

Layout Builder is a magical layout system with inner blocks powering infinite creative possibilities. Based on the new Kirby Layout field, but extended with powerful options and [**our own Column block**](/guide/layout-builder/column-options-block.md), and with 30+ content blocks, it is the website building tool with really infinite possibilities. Easy for beginners, but super-useful for experienced website designers/developers who will have a great ride exploring all that is possible with this builder.

#### Check out the video preview&#x20;

{% embed url="<https://www.youtube-nocookie.com/embed/rYx6s_MpBxk?si=mDsAgpcue80YxJVu>" %}
Layout Builder preview
{% endembed %}

### Layout Sections

First things first! You can choose among many premade layout sections, with various number and positions of columns ([let us know](/support.md) if you see we are missing some)

<figure><img src="/files/rQchgIeMtGAnsFWFZsrD" alt=""><figcaption><p>Layout Sections</p></figcaption></figure>

#### Layout Sections options

When you create a Layout Section, the fun begins! Every Layout Section has many options, and you can open them by clicking the Settings icon in the top right corner of the Layout Section

<figure><img src="/files/ci79WC5dtwdYwXP7JHgg" alt=""><figcaption><p>Layout Section Settings Icon</p></figcaption></figure>

#### Layout Section Grid Options

First thing you will see when you option Layout Section settings are Grid Options. These options allow you to fine-grain grid and column behavior.&#x20;

<figure><img src="/files/IO2CU4uZBdTXIUqoIdGs" alt=""><figcaption><p>Layout Section Grid Options</p></figcaption></figure>

#### Layout Section Options

When you click on the Section tab in the Layout Section Settings, you will see Section options. These options rule the background of the grid and columns. You will find out that there are many possibilities: you can change section size, remove padding when needed, customize the background in almost any way you like, and add a cool SVG divider to the top/bottom of the section.&#x20;

<figure><img src="/files/KP6lWnnCXBq8C1SoFrFi" alt=""><figcaption><p>Layout Section Options</p></figcaption></figure>

#### Layout Section Advanced Options

There are also Advanced options where you can add a custom class or ID to a section, change visibility per device size, and add animation to a section.

<figure><img src="/files/26x9sYAngBhCSw9NMGRD" alt=""><figcaption><p>Layout Section Advanced Options</p></figcaption></figure>

Now, when you know the basis of Layout Sections, you are ready to add blocks to columns. Check out the next guide pages.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.one.thezero.club/guide/layout-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
