How to create a pricing table
This video will teach you how to create a simple and stunning pricing table with inCMS.
Standard "SmartBox"
HTML:
<div class="smart-box smart-main smart-radius {CLS}">
<div class="smart-box-container smartbox-main-inner">
%CONTENT%
</div>
</div>Editor:
{
"smartbox-main-inner": {
"_label": "SmartBox",
"cls": {
"label": "Full Width",
"inputType": "checkbox",
"checkedValue": "fullwidth",
"uncheckedValue": "",
"html": "true"
},
"padding":{
"label": "Padding (px)",
"fields": {
"padding-top":{
"label": "Top",
"value": "0",
"inputType": "numberfield"
},
"padding-bottom":{
"label": "Bottom",
"value": "0",
"inputType": "numberfield"
},
"padding-left":{
"label": "Left",
"value": "0",
"inputType": "numberfield"
},
"padding-right":{
"label": "Right",
"value": "0",
"inputType": "numberfield"
}
}
}
},
"smart-main": {
"_label": "Background",
"background-color":{
"label": "Color",
"inputType": "colorfield",
"value": ""
},
"background-image": {
"label": "Image",
"inputType": "filefield"
},
"background-size": {
"label": "Image Size",
"inputType": "select",
"options":{
"auto": "Auto",
"cover": "Cover",
"contain": "Contain"
},
"value": "auto"
},
"background-repeat": {
"label": "Image Repeat",
"inputType": "select",
"options":{
"repeat": "Repeat",
"no-repeat": "No repeat",
"repeat-x": "Horizontal repeat",
"repeat-y": "Vertical repeat"
},
"value": "no-repeat"
},
"background-position": {
"label": "Image Position",
"fields": {
"background-position-x": {
"inputType": "select",
"label": "X-Axis",
"options":{
"left": "Left",
"center": "Center",
"right": "Right"
},
"value": "center",
"width": "227"
},
"background-position-y": {
"inputType": "select",
"label": "Y-Axis",
"options":{
"top": "Top",
"center": "Center",
"bottom": "Bottom"
},
"value": "center",
"width": "227"
}
}
},
"background-attachment": {
"label": "Image Parallax",
"inputType": "checkbox",
"checkedValue": "fixed",
"uncheckedValue": "scroll"
}
},
"smart-radius": {
"_label": "Border",
"border-radius":{
"label": "Radius",
"value": "0",
"inputType": "numberfield"
}
}
}Standard "SmartBox" Extension
Html (extension -> needs to be embedded correctly in existing code):
smart-radius
Editor (extension -> needs to be embedded correctly in existing code):
"smart-radius": {
"_label": "Border",
"border-radius":{
"label": "Radius",
"value": "0",
"inputType": "numberfield"
}
}"White Text" SmartBox
HTML:
<div class="smart-white-text">%CONTENT%</div>
CSS:
.smart-white-text *{color:#fefef9;}SmartBox Tutorials
SmartBox - the Solution for Full Page Width Containers (advanced)
SmartBox - all JSON Editor Options (pro)