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.
1
<div class="hero">
2
  <div class="container">
3
    <h1>{{ section.settings.heading }}</h1>
4
  </div>
5
</div>
Copied!
1
{% schema %}
2
  {
3
    "name": "Example Section",
4
    "elements": [
5
      {
6
        "type": "text",
7
        "id": "heading",
8
        "label": "Heading",
9
        "default": "This is an example heading"
10
      }
11
    ]
12
  }
13
{% endschema %}
Copied!
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.
1
{% schema %}
2
  {
3
    "name": "Example Section",
4
    "elements": [
5
      {
6
        "type": "text",
7
        "id": "heading",
8
        "label": "Heading",
9
        "default": "This is an example heading"
10
      }
11
    ],
12
    "presets": [
13
      {
14
        "name": "Example Section",
15
        "category": "Content",
16
        "settings": {
17
        }
18
      }
19
    ]
20
  }
21
{% endschema %}
Copied!
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.
1
{% schema %}
2
  {
3
    "name": "Example Section",
4
    "elements": [
5
      {
6
        "type": "text",
7
        "id": "heading",
8
        "label": "Heading",
9
        "default": "This is an example heading"
10
      }
11
    ],
12
    "presets": [
13
      {
14
        "name": "Example Section 1",
15
        "category": "Content",
16
        "settings": {
17
          "heading": "I love sections"
18
        }
19
      },
20
      {
21
        "name": "Example Section 2",
22
        "category": "Content",
23
        "settings": {
24
          "heading": "I also love sections!"
25
        }
26
      }
27
    ]
28
  }
29
{% endschema %}
Copied!
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.
1
<div class="hero">
2
  <div class="container">
3
    <h1>{{ section.settings.heading }}</h1>
4
    {% for block in section.blocks %}
5
      <a href="{{ block.settings.link_action }}">
6
        {{ block.settings.link_text }}
7
      </a>
8
    {% endfor %}
9
  </div>
10
</div>
Copied!
1
{% schema %}
2
  {
3
    "name": "Example Section",
4
    "elements": [
5
      {
6
        "type": "text",
7
        "id": "heading",
8
        "label": "Heading",
9
        "default": "This is an example heading"
10
      }
11
    ],
12
    "blocks": [
13
      {
14
        "type": "link",
15
        "name": "Link",
16
        "elements": [
17
          {
18
            "type": "text",
19
            "id": "link_text",
20
            "label": "Link Text",
21
            "default": "CALL TO ACTION"
22
          },
23
          {
24
            "type": "action",
25
            "id": "link_action",
26
            "label": "Link Action",
27
            "default": "http://www.kajabi.com"
28
          }
29
        ]
30
      }
31
    ]
32
  }
33
{% endschema %}
Copied!
To build even more complex sections, a section can have multiple types of blocks that a user chooses from.
1
<div class="hero">
2
  <div class="container">
3
    <h1>{{ section.settings.heading }}</h1>
4
    {% for block in section.blocks %}
5
      {% case block.type %}
6
        {% when 'link' %}
7
          <a href="{{ block.settings.link_action }}">
8
            {{ block.settings.link_text }}
9
          </a>
10
        {% when 'image' %}
11
          <img src="{{ block.settings.image }}"/>
12
      {% endcase %}
13
    {% endfor %}
14
  </div>
15
</div>
Copied!
1
{% schema %}
2
  {
3
    "name": "Example Section",
4
    "elements": [
5
      {
6
        "type": "text",
7
        "id": "heading",
8
        "label": "Heading",
9
        "default": "This is an example heading"
10
      }
11
    ],
12
    "blocks": [
13
      {
14
        "type": "link",
15
        "name": "Link",
16
        "elements": [
17
          {
18
            "type": "text",
19
            "id": "link_text",
20
            "label": "Link Text",
21
            "default": "CALL TO ACTION"
22
          },
23
          {
24
            "type": "action",
25
            "id": "link_action",
26
            "label": "Link Action",
27
            "default": "http://www.kajabi.com"
28
          }
29
        ]
30
      },
31
      {
32
        "type": "image",
33
        "name": "Image",
34
        "elements": [
35
          {
36
            "type": "image_picker",
37
            "id": "image",
38
            "label": "Image"
39
          }
40
        ]
41
      }
42
    ]
43
  }
44
{% endschema %}
Copied!

Building Blocks - Previous

Layouts

Next - Building Blocks

Section Types

Last modified 2yr ago

Copy link

Contents

Sections

Section Schema

Blocks