Kajabi is an all-in-one platform that makes it easy to create online courses, launch marketing campaigns, build landing pages, and design the perfect website.(https://kajabi.com/)
If you have any questions, feel free to reach out to us at themes@kajabi.com
-
Sample file structure of a theme
File extension is
*.liquidKnow more information please visit
Site Theme File Tree Structure
-
Login your account
-
Then go to the
Manage Themes -
After going
Edit Code -
Finally go to the
Sectionsfolder & create a new section
Inside the Kajabi settings schema we have the option to include theme info. This is info is meant to tell the user what version they are on and who supports the theme when issues come up.
{
"name": "theme_info",
"theme_name": "Test Theme",
"theme_version": "1.0.0",
"theme_author": "Bitechx",
"theme_documentation_url": "https://developers.mykajabi.com/blog?tag=cornerstone+page",
"theme_support_url": "https://github.com/Kajabi/theme-cornerstone-page/issues"
}
Kajabi themes have a specific structure that can be utilized when creating or editing themes. Only this specific file structure will be included when a theme is uploaded to the system.
The assets directory is rendered as the Assets folder in the theme editor. It contains all the assets used in the theme, including images, stylesheets, and javascript files.
Use the asset_url filter to reference a theme asset in your templates
The config directory is rendered as the Configs folder in the theme editor. It includes a settings_schema.json file and a settings_data.json file. It will also contain any presets that you choose tho load into your theme such as preset_your_preset.json
The layout directory is rendered as the Layouts folder in the theme editor. It contains theme layout templates, which by default is the theme.liquid file. All Liquid templates inside the templates folder are rendered inside the theme.liquid file.
The sections directory is rendered as the Sections folder in the theme editor. It contains a theme's sections, which are reusable modules of content that can be customized and or re-ordered by users of the theme.
The snippets directory is rendered as the Snippets folder in the theme editor. It contains all the theme's Liquid snippet files, which are bits of code that can be referenced in other templates of a theme.
The templates directory is rendered as the Templates folder in the theme editor. It contains all other Liquid templates that the theme gives you access to.
// code away!
<style>
#section-{{ section.id }} {
}
</style>
<!--
This is an example of how to display a setting with a section and make
it clickable in the theme editor with a kjb-settings-id
-->
<div class="section">
<div class="container">
<h3 kjb-settings-id="{{ 'heading' | settings_id: section: section }}">
{{ section.settings.heading }}
</h3>
<div kjb-settings-id="{{ 'body' | settings_id: section: section }}">
{{ section.settings.body }}
</div>
</div>
</div>
<!--
Section Schema
The Schema is what drives the elements, blocks and presets for this particular
section. Elements define the setting for the section, while blocks allow you
to define sub-sections to add an arrange in this section.
Presets define what shows up in the theme editor when a user clicks "Add Section"
-->
{% schema %}
{
"name": "Test Section",
"elements": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "This is an example setting of a heading"
},
{
"type": "rich_text",
"id": "body",
"label": "Body",
"default": "This is an example setting of a paragraph"
}
],
"blocks": [],
"presets": [
{
"name": "Test Section",
"category": "Content",
"blocks": [],
"settings": {
}
}
]
}
{% endschema %}
Kajabi themes are built around the concept of sections and blocks. These building blocks can be used in various ways to compose any layout. 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>
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"
}
]
}
{% 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 Code :
{% 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 %}
-
Text Field
{ "type": "text", "id": "heading", "label": "Heading", "default": "This is an example heading" } -
Rich text Field
{ "type": "rich_text", "id": "body", "label": "Body", "default": "This is an example setting of a paragraph" } -
Color Picker
{ "type": "color", "id": "clr", "label": "Color", "default": "#30373e" } -
Checkbox
{ "type": "checkbox", "id": "checkbox", "label": "Checkbox", "default": "false" } -
Link Action
{ "type": "action", "id": "btn_action", "label": "Button Action", "anchor": true, "two_step": true, "default": "http://www.kajabi.com" } -
Video
{ "type": "video", "id": "video", "label": "Video" } -
Divider
{ "type": "divider" } -
header
{ "type": "header", "content": "Your Heading" } -
Select Option
{ "type": "select", "id": "spacing", "label": "Spacing", "default": "medium", "options": [ { "label": "Extra Small", "value": "xs-small" }, { "label": "Small", "value": "small" }, { "label": "Medium", "value": "medium" }, { "label": "Large", "value": "large" }, { "label": "N/A", "value": "" } ] }