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.

<div class="hero">
<div class="container">
<h1>{{ section.settings.heading }}</h1>
{% for block in section.blocks %}
<a href="{{ block.settings.link_action }}">
{{ block.settings.link_text }}
</a>
{% endfor %}
</div>
</div>
{% 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"
}
]
}
]
}
{% endschema %}

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

<div class="hero">
<div class="container">
<h1>{{ section.settings.heading }}</h1>
{% for block in section.blocks %}
{% case block.type %}
{% when 'link' %}
<a href="{{ block.settings.link_action }}">
{{ block.settings.link_text }}
</a>
{% when 'image' %}
<img src="{{ block.settings.image }}"/>
{% endcase %}
{% endfor %}
</div>
</div>
{% 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"
}
]
}
]
}
{% endschema %}