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.
<div class="hero"><div class="container"><h1>{{ section.settings.heading }}</h1></div></div>
{% schema %}{"name": "Example Section","elements": [{"type": "text","id": "heading","label": "Heading","default": "This is an example heading"}]}{% endschema %}
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.
{% schema %}{"name": "Example Section","elements": [{"type": "text","id": "heading","label": "Heading","default": "This is an example heading"}],"presets": [{"name": "Example Section","category": "Content","settings": {}}]}{% endschema %}
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.
{% 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!"}}]}{% endschema %}
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 %}