SmartBox - Grundlagen (Anfänger)

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

SmartBox - alle JSON Editor Optionen (Profi)

 

Grundeinstellung & vordefinierte SmartBoxes


So erstellen Sie mit "SmartBox", Container um Bereiche auf die volle Breite mit einem Hintergrundbild oder mit einer Hintergrundfarbe zu versehen.


1. Unter Einstellungen / Allgemeine Einstellungen / Experten-Modus - aktivieren Sie "SmartBoxes"


So können Sie neue SmartBoxes hinzufügen oder bestehende SmartBoxes bearbeiten. Sobald die SmartBoxes mal definiert sind, können Sie diese Einstellung wieder deaktivieren. So können kann der Endkunde die SmartBoxes nur anhand Ihren Einstellungen eingeschränkt verändern.




2. Unter Einstellungen / Design / Layout - aktivieren Sie das Layout "Vollbild zentriert"



3. Nun brauchen Sie mindestens 2 SmartBoxes - erstellen Sie 2 neue SmartBoxes unter "Einstellungen / SmartBoxes / Hinzufügen"



4. Definition für Header Container


Name: Header (frei wählbar)


HTML:


<div class="header-style">%CONTENT%</div>



Das CSS für die Klasse "header-style" ist in der inCMS Grundkonfiguration bereits vorhanden.


5. Definition für die standartisierte SmartBox.


Name: SmartBox (frei wählbar)


HTML: 


<div class="smart-box smart-main {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"
    }
  }
}



6. Die SmartBoxes können mit dem SmartBox Inhalts-Modul eingesetzt werden:



Oder durch folgende Funktion bei einem bestehenden Modul, z.B. "Raster" oder "Text":





Beispiel: SmartBox auf die volle Breite mit Hintergrund-Farbe 


Wenn Sie die standardisierte "SmartBox" auf der Webseite implementieren sehen Sie die User-freundlichen Felder. Wenn Sie die Box auf volle Breite haben möchten, dann aktivieren Sie die "Full Width" Checkbox. Des Weiteren können Sie den Innenabstand, die Hintergrundfarbe, sowie das Hintergrundbild der Box wählen.




SmartBox mit Konfigurations-Optionen für Endkunden


Wenn Sie als einfaches Beispiel nur die Hintergund-Farbe für den Endkunden konfigurierbar hinterlegen möchten, ohne dass der Endkunde CSS-Code anpassen muss, dann können Sie den SmartBox-Editor verwenden.


Wichtig: der SmartBox Editor ist nur ersichtlich solange den "Experten-Modus" SmartBox aktiv ist!



Der Editor ermöglicht es Ihnen im JSON Format Eingabe-Felder zu definieren. z.B. kann der Kunden eine Farbe oder eine Bild-Datei auswählen. Diese Auswahl wird dann automatisch in eine CSS-Klasse geschrieben, die z.B. den SmartBox definiert.


Die Grund-Syntax ist wie folgt:


im JSON Format immer mit einer geschweiften Klammern starten, dann erstellen Sie einen Eintrag für jede Klasse, die Sie dann brauchen (in unserem Fall: "colorsection"), innerhalb diesem Bereich erstellen Sie weitere Sub-Bereich für jeden CSS-Parameter mit den entsprechenden Editor-Einstellungen:


  • Klasse
    • Eigenschaft (CSS-Parameter, z.B. background-color)
      • Konfiguration für Editor


Sie können so viele Klassen und Eigenschaften definieren, wie Sie möchten.


1. Wir erstellen eine neue SmartBox


Name: Colorselection


HTML: <div class="colorselection">%CONTENT%</div>


2. Im Editor definieren wir nun, dass es eine CSS-Klasse gibt, die "colorselection" heisst. Diese wiederum hat einen Parameter "background-color" welcher mittels einem Farb-Wähler definiert werden kann


{

   "colorselection": {

      "background-color": {

         "inputType": "colorfield"

      }

   }

}


3. Speicher und schliessen Sie diese SmartBox


4. Wenn Sie diese SmartBox erneut öffnen, dann werden Sie sehen, dass die Hintergrundfarbe nun auswählbar ist:



5. Wird der "Experten-Modus" SmartBox wieder unter "Allgemeine Einstellungen" entfernt, so sieht man den JSON-Editor nicht mehr, sondern kann lediglich die Änderungen vornehmen, die erlaubt wurden


6. Falls die Klasse "colorselection" weitere CSS-Einstellungen braucht, dann kann dies im CSS Eingabe-Feld innerhalb der SmartBox getan werden.



Unsere lieblings SmartBoxen


Erweiterte Standart-SmartBox (Mit Maskenebene)


<div class="smart-box smart-main smart-border {CLS}">
  <div class="smart-mask"></div>
  <div class="smart-box-container smartbox-main-inner">
    %CONTENT%
  </div>
</div>


.smart-mask{
  position: absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
}
.smart-box-container{position:relative;}
.smart-border{border-style: solid;box-sizing:border-box;}


{
  "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-border": {
    "_label": "Border",
    "border":{
      "label": "Border (px)",
      "fields": {
        "border-top-width":{
          "label": "Top",
          "value": "0",
          "inputType": "numberfield"
        },
        "border-bottom-width":{
          "label": "Bottom",
          "value": "0",
          "inputType": "numberfield"
        },
        "border-left-width":{
          "label": "Left",
          "value": "0",
          "inputType": "numberfield"
        },
        "border-right-width":{
          "label": "Right",
          "value": "0",
          "inputType": "numberfield"
        }
      }
    },
    "border-color":{
      "label": "Color",
      "inputType": "colorfield",
      "value": ""
    }
  },
  "smart-mask": {
    "_label": "Mask",
    "background-color":{
      "label": "Color",
      "inputType": "colorfield",
      "value": ""
    },
    "opacity":{
      "label": "Opacity",
      "inputType": "textfield",
      "value": "0"
    }
  }
}