Grundeinstellung & vordefinierte Wrappers
So erstellen Sie mit "Wrapper", 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 "Wrappers"
So können Sie neue Wrappers hinzufügen oder bestehende Wrappers bearbeiten. Sobald die Wrappers mal definiert sind, können Sie diese Einstellung wieder deaktivieren. So können kann der Endkunde die Wrappers nur anhand Ihren Einstellungen eingeschränkt verändern.
2. Unter Einstellungen / Design / Layout - aktivieren Sie das Layout "Vollbild Wrapper"
Damit wird der Header, der Inhaltsbereich (1col und Landing Pages) und Footer Bottom auf 100% Breite gesetzt.
3. Nun brauchen Sie mindestens 2 Wrapper - erstellen Sie 2 neue Wrapper unter "Einstellungen / Wrappers / Hinzufügen"
4. Definition für Header Container
Das CSS für die Klasse "headercontainer" ist in der inCMS Grundkonfiguration bereits vorhanden.
5. Definition für Content Container
Name: Content Container (frei wählbar)
HTML: <div class="contentcontainer">%CONTENT%</div>
Das CSS für die Klasse "contentcontainer" ist in der inCMS Grundkonfiguration bereits vorhanden.
6. Der "Header Container" sorgt dafür, dass der Inhalt im Header perfekt zentriert wird; der "Content Container", dass der Inhalt im Inhalts-Bereich sowie im Footer Bottom ebenfalls perfekt zentriert wird
Die Container können mit dem Wrapper Inhalts-Modul eingesetzt werden:
Oder durch folgende Funktion bei einem bestehenden Modul, z.B. "Raster" oder "Text":
Beispiel: Wrapper auf die volle Breite mit Hintergrund-Farbe
Name: Blauer Content Container (frei wählbar)
HTML: <div class="blauercontentcontainer"><div class="contentcontainer">%CONTENT%</div></div>
Das CSS für die Klasse "contentcontainer" ist, wie oben erwähnt, bereits vorhanden. Nun müssen wir nur die Klasse "blauercontentcontainer" definieren
1. Über "Einstellungen / CSS" können Sie beliebiger CSS Code hinterlegen:
2. Alles was nun für diese <div> notwendig ist, ist die Definition der Hintergrundfarbe. Optional können wir noch ein Padding oder eine Margin definieren.
.blauercontentcontainer {
background-color: #BBD8F2;
padding: 50px 0 50px 0;
}
Wrappers mit Konfigurations-Optionen für Endkunden
Wenn Sie als Beispiel diese Hintergund-Farbe für den Endkunden konfigurierbar hinterlegen möchten, ohne dass der Endkunde CSS-Code anpassen muss, dann können Sie den Wrapper-Editor verwenden.
Wichtig: der Wrapper Editor ist nur ersichtlich solange den "Experten-Modus" Wrapper 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 Wrapper 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.
Erweitern wir also das Beispiel vom blauen Container so, dass der Endkunde die Farbe selbst wählen kann:
1. Wir erstellen einen neuen Wrapper
Name: Content Container farbig
HTML: <div class="colorsection"><div class="contentcontainer">%CONTENT%</div></div>
2. Im Editor definieren wir nun, dass es eine CSS-Klasse gibt, die "colorsection" heisst. Diese wiederum hat einen Parameter "background-color" welcher mittels einem Farb-Wähler definiert werden kann
{
"colorsection": {
"background-color": {
"inputType": "colorfield"
}
}
}
3. Speicher und schliessen Sie diesen Wrapper
4. Wenn Sie den Wrapper erneut öffnen, dann werden Sie sehen, dass die Hintergrundfarbe nun auswählbar ist:
5. Wird der "Experten-Modus" Wrapper 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 "colorsection" weitere CSS-Einstellungen braucht, wie z.B. Padding oder Margin, dann kann unter "Design / CSS" eine eigene CSS-Klasse erstellt werden, z.B.
.colorsection {
padding: 50px 0 50px 0;
}