# Sections

### **Sections**

Section files are housed in the sections folder of a theme and their name and settings are displayed in the sidebar of the of the Kajabi theme editor.

At its core a section in kajabi is simply HTML and liquid markup along with a settings schema that renders information on the page.

```markup
<div class="hero">
  <div class="container">
    <h1>{{ section.settings.heading }}</h1>
  </div>
</div>
```

```yaml

<div data-gb-custom-block data-tag="schema">

  {
    "name": "Example Section",
    "elements": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "This is an example heading"
      }
    ]
  }

</div>

```

### **Section Schema**

The schema of a section is what allows the user to input data into your theme without having to touch the code. A schema is made up of different elements to create extremely customizable pages.

A schema also gives you the ability to let the user add and remove a section from pages such as index.liquid by adding presets.

```yaml

<div data-gb-custom-block data-tag="schema">

  {
    "name": "Example Section",
    "elements": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "This is an example heading"
      }
    ],
    "presets": [
      {
        "name": "Example Section",
        "category": "Content",
        "settings": {
        }
      }
    ]
  }

</div>

```

Multiple presets can be added to a schema giving you the ability to allow users to add a section to a page with different settings values.

```yaml

<div data-gb-custom-block data-tag="schema">

  {
    "name": "Example Section",
    "elements": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "This is an example heading"
      }
    ],
    "presets": [
      {
        "name": "Example Section 1",
        "category": "Content",
        "settings": {
          "heading": "I love sections"
        }
      },
      {
        "name": "Example Section 2",
        "category": "Content",
        "settings": {
          "heading": "I also love sections!"
        }
      }
    ]
  }

</div>

```

### **Blocks**

If you think of a section as a row then its columns are what kajabi calls blocks. Blocks are groupings of settings that can be added and removed from a section by the user. Blocks are added to the schema and looped over inside the section in liquid.

```markup
<div class="hero">
  <div class="container">
    <h1>{{ section.settings.heading }}</h1>
    

<div data-gb-custom-block data-tag="for">

      <a href="{{ block.settings.link_action }}">
        {{ block.settings.link_text }}
      </a>
    

</div>

  </div>
</div>
```

```yaml

<div data-gb-custom-block data-tag="schema">

  {
    "name": "Example Section",
    "elements": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "This is an example heading"
      }
    ],
    "blocks": [
      {
        "type": "link",
        "name": "Link",
        "elements": [
          {
            "type": "text",
            "id": "link_text",
            "label": "Link Text",
            "default": "CALL TO ACTION"
          },
          {
            "type": "action",
            "id": "link_action",
            "label": "Link Action",
            "default": "http://www.kajabi.com"
          }
        ]
      }
    ]
  }

</div>

```

To build even more complex sections, a section can have multiple types of blocks that a user chooses from.

```markup
<div class="hero">
  <div class="container">
    <h1>{{ section.settings.heading }}</h1>
    

<div data-gb-custom-block data-tag="for">

      

<div data-gb-custom-block data-tag="case">

        

<div data-gb-custom-block data-tag="when" data-0='link'></div>

          <a href="{{ block.settings.link_action }}">
            {{ block.settings.link_text }}
          </a>
        

<div data-gb-custom-block data-tag="when" data-0='image'></div>

          <img src="{{ block.settings.image }}"/>
      

</div>

    

</div>

  </div>
</div>
```

```yaml

<div data-gb-custom-block data-tag="schema">

  {
    "name": "Example Section",
    "elements": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "This is an example heading"
      }
    ],
    "blocks": [
      {
        "type": "link",
        "name": "Link",
        "elements": [
          {
            "type": "text",
            "id": "link_text",
            "label": "Link Text",
            "default": "CALL TO ACTION"
          },
          {
            "type": "action",
            "id": "link_action",
            "label": "Link Action",
            "default": "http://www.kajabi.com"
          }
        ]
      },
      {
        "type": "image",
        "name": "Image",
        "elements": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          }
        ]
      }
    ]
  }

</div>
```