Zero One Documentation
Theme demo
  • Overview
  • Terms & Guidelines
  • Guide
    • Installation
      • Local environment
      • Server
      • Default language!
      • Multilanguage website
      • Config options
      • Folder structure
      • htaccess
      • Updating
      • PHP Composer
    • Administration panel
      • Translating panel
    • Site options
      • SEO options
      • Multi-language
    • Theme styling
      • Less/CSS setup
      • Changing Less variables
      • app.less file
      • Customizing elements
      • Helpful classes
    • Page types
      • Page options
    • Blog
      • Comments
      • Article
    • Work (Portfolio)
      • Project page
    • Shop
      • Snipcart
    • Layout Builder
      • Column Options block
      • Subgrid block
      • Card block
      • Text (Writer) block
      • Custom Heading block
      • Custom List block
      • Typed Text block
      • Quote block
      • Button block
      • › 25 more blocks
    • Form Builder (Premium)
    • OLD Page Builder deprecation
    • Tricks
      • Using icons in the content
      • Kirbytext link tag to button
      • Tricks with image classes
      • Adding Google Fonts
      • Custom icons
      • Cookie notice/banner
    • Theme extending
      • Page Transitions (Swup)
      • Contact form extending
      • Self-hosted fonts
      • Adding new templates
      • Adding new Content block (Layout Builder)
    • GDPR
  • More
  • Support
  • Hire us
  • Changelog
  • Credits
  • Affiliate
Powered by GitBook
On this page

Was this helpful?

  1. Guide

Layout Builder

Super powerful & flexible

PreviousSnipcartNextColumn Options block

Last updated 1 year ago

Was this helpful?

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, 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

Layout Sections

Layout Sections options

When you create 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

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.

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.

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.

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

First thing first! You can choose among many premade layout sections, with various number and positions of columns ( if you see we are missing some)

let us know
Layout Builder preview
Layout Sections
Layout Section Settings Icon
Layout Section Grid Options
Layout Section Options
Layout Section Advanced Options