AIDAcockpit

Preistabelle erstellen

In diesem Video lernen Sie wie man eine Preistabelle mit inCMS erstellt.

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" Erweiterung

Html (Erweiterung -> muss richtig in den bestehenden Code integriert werden):

smart-radius

Editor (Erweiterung -> muss richtig in den bestehenden Code integriert werden):

"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 - Grundlagen (Anfänger)

SmartBox - die Lösung für Container auf volle Breite (Fortgeschritten)

SmartBox - alle JSON Editor Optionen (Profi)