Theme Documentation
Search…
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!
Last modified 2yr ago
Copy link