Elements

The different types of settings elements give you the developer the ability to choose any number of ways to let the end user customize the theme without touching the code.

Action

Displays a dropdown that lets the user choose what action a link takes. Depending on a section it then displays another field for them to direct the action.

{
  "type": "action",
  "id": "link_action",
  "label": "Link Action",
  "default": "http://www.kajabi.com"
}

Assessment

Displays a dropdown of all the assessments in the users account.

{
  "type": "assessment",
  "id": "assessment_id",
  "label": "Assessment"
}

Checkbox

Displays a checkbox within the Theme Settings, allowing for a Boolean true / false setting.

{
  "type": "checkbox",
  "id": "show",
  "label": "Show",
  "default": "true"
}

Color

Displays a color-picker that returns a hex value.

{
  "type": "color",
  "label": "Color",
  "id": "color",
  "allow_blank": true
}

Date Time

Displays a date_time picker.

{
  "type": "date_time",
  "label": "Date & Time",
  "id": "date_time"
}

Divider

Does not display an input but instead shows a divider between other settings. Great for breaking settings into sub sections.

{
  "type": "divider"
}

Event

Displays a list of the events in the users account.

{
  "type": "event",
  "id": "event_id",
  "label": "Select Your Event"
}

Font Select

Displays a custom dropdown with google fonts pre loaded in visually in their respective fonts.

{
  "type": "font_select",
  "label": "Font Family",
  "id": "font_family",
  "default": "Montserrat",
  "preset": "google_fonts",
  "options": []
}

Form

Displays a list of the forms in the users account.

{
  "type": "form",
  "id": "form",
  "label": "Form",
  "default": "default",
  "allow_blank": true
}

Header

Does not display an input instead displays a heading that can be used to label sub sections. The style setting set to subheading can be used to shrink the font size.

{
  "type": "header",
  "content": "Your Heading"
}

Image Picker

Displays an option to select a previous image or upload a new image.

{
  "type": "image_picker",
  "id": "image",
  "label": "Image",
  "fit": "max",
  "width": 3000,
  "height": 3000
}

Link List

Displays a list of the link lists ( navigation menus ) in the users account.

{
  "type": "link_list",
  "id": "menu",
  "label": "Menu",
  "default": "footer"
}

Offer

Displays a list of the offers in the users account.

{
  "type": "offer",
  "id": "offer_id",
  "label": "Offer"
}

Option

Displays a list of options for a user to select from.

{
  "type": "radio",
  "id": "alignment",
  "label": "Alignment",
  "default": "center",
  "options": [
    {"value": "left", "label": "Left"},
    {"value": "center", "label": "Centered"},
    {"value": "right", "label": "Right"}
  ]
}

Post

Displays a list of the posts in a users account.

{
  "type": "post",
  "id": "postr_id",
  "label": "Post"
}

Radio

Displays a list of radio buttons for the user to select from.

{
  "type": "radio",
  "id": "style",
  "label": "Style",
  "default": "solid",
  "options": [
    { "label": "Solid", "value": "solid" },
    { "label": "Outline", "value": "outline" }
  ]
}

Rich Text

Displays a full WYSIWYG editor for the user to use to create rich text layouts.

{
  "type": "rich_text",
  "label": "Text",
  "id": "text"
}

Select

Displays a dropdown select box for the user to choose from.

{
  "type": "select",
  "id": "width",
  "label": "width",
  "default": "col-md-6",
  "options": [
    { "value": "col-md-3", "label": "25%" },
    { "value": "col-md-6", "label": "50%" },
    { "value": "col-md-8", "label": "75%" },
    { "value": "col-md-12", "label": "100%" }
  ]
}

Text

Displays a one line text input for users to put short text strings in.

{
  "type": "text",
  "id": "text",
  "label": "Text",
  "default": "Your Text"
}

Video

Displays a video uploader for users to upload their videos or choose recently uploaded videos.

{
  "type": "video",
  "id": "video",
  "label": "Video"
}