Eine Beispiel-Überschrift

Hier der Untertitel für die Überschrift

Eine zentrierte andersfarbige Überschrift

Außerdem ist diese Überschrift korrekt als H2 gesetzt, da oben schon eine H1-Überschrift steht. Sie sieht durch die gewählte "Überschrift-Größe" allerdings gleich groß aus.

Dieser Text und alle anderen Inhaltselemente in diesem Inhaltsbereich werden in normaler Seitenbreite dargestellt, da im Element "Inhaltsbereich [Start]" die "Containerbreite" auf "Standardbreite" gestellt ist. Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda.

Falls die Seitenbreite mal schmaler sein soll (noch bevor überhaupt ein Spaltenset zum Einsatz kommt), kann im Element "Inhaltsbereich [Start]" die "Containerbreite" auf "Schmal" oder gar "Extraschmal" gestellt werden. Dieser Text und alle anderen Inhaltselemente in diesem Inhaltsbereich werden dann entsprechend schmaler dargestellt. Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda.

Dieser weiße Bereich ist aufgebaut aus zwei ineinander verschachtelten "Inhaltsbereich"-Elementen. Das äußere Element ist per "Containerbreite: Volle Breite" so eingestellt, daß es über die gesamte Breite des Browserfensters reicht. Das innere "Inhaltsbereich"-Element ist auf "Containerbreite: Standardbreite" eingestellt, damit das Textelement (und andere Inhaltselemente) eine Begrenzung nach links und rechts hat.

Dem Textelement wurde mit der Option "Abstand davor" und "Abstand danach" ein mittlerer Abstand zugewiesen. Der Abstand bezieht sich auf die Elemente davor und danach, in diesem Fall also der Abstand zum "Inhaltsbereich Start/Stop".

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda.

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda.

Das Inhaltselement "Callout Start/Stop" dient dazu, eine stilisierte Box (3 abgerundete Ecken und links oben eine nicht-abgerundete Ecke) für andere Inhaltselemente zu schaffen.

Spaltensets

Komplexer als bisher, aber dafür mit sehr viel mehr (notwendigen) Optionen …

Ein Spaltenset wird nun anders erzeugt als zuvor:

  1. Dazu werden zuerst die Inhaltselemente "Spaltenset: Reihe [Start]" und "Spaltenset: Reihe [Stop]" angelegt. Diese Elemente dienen als "Container", in welchem alle Spalten liegen.
  2. Im nächsten Schritt werden die Inhaltselemente "Spaltenset: Spalte [Start]" und "Spaltenset: Spalte [Stop]" angelegt. Diese Elemente dienen auch wieder als Container, nur daß darin der Inhalt der jeweiligen Spalte abgelegt werden kann.
  3. Schritt 2 wird so oft wiederholt, wie Spalten angelegt werden sollen – das heißt: Soll ein Text dreispaltig angezeigt werden, so muss 3x Schritt 2 ausgeführt werden.
  4. Nun kann zwischen die Elemente "Spaltenset: Spalte [Start]" und "Spaltenset: Spalte [Stop]" der Inhalt abgelegt werden, bspw. Text, Bild, …
  5. Noch stehen die Spalten untereinander und nicht nebeneinander. Um dies zu ändern, muss jeweils im Element "Spaltenset: Spalte [Start]" zuerst die Option "Angepasste Spaltenbreite verwenden" angehakt werden, und danach die Breite der Spalte eingestellt werden.
    1. Für diese Breiteneinstellung gibt es 5 Felder nebeneinander (Small / Medium / Large / X-Large / XX-Large).
    2. Jedes Feld steht symbolisch für ein typisches Ausgabegerät (Small = Smarthone / Medium = großes Smartphone oder Phablet / Large = Tablet / X-Large = Laptopmonitor / XX-Large = Desktopmonitor)
    3. Um die Spaltenbreite für einen Desktopmonitor einzustellen, wird also im Feld "XX-Large" der Wert geändert, bspw. auf 33%.
    4. Da Tablets weniger Anzeigefläche bieten, wird dort dieselbe Spalte vielleicht auf 25% oder noch niedriger eingestellt.
    5. Alle Spalten zusammen können maximal 100% ergeben. Wird der Wert überschritten, so passt die Spalten nicht mehr in eine Reihe hinein und wird umgebrochen, d.h. sie erscheint unter den anderen Spalten.
    6. Spätestens bei Smartphones können die Spalten nicht mehr nebeneinander dargestellt werden. Daher wird hier meist der Wert jeder Spalte auf 100% gestellt. Das heißt dann, daß jede Spalte so breit wie möglich dargestellt wird, und daß jede Spalte umgebrochen wird – die Spalten werden also untereinander dargestellt.
    7. Es müssen übrigens nicht alle Felder ausgefüllt werden. Fehlt eine Angabe, so wird die Breite aus dem links danebenstehenden Feld genommen. Wird also bei "Small" der Wert "100%" eingestellt, so wird dieser Wert bei "Medium" auch wieder angenommen und muss nicht explizit gesetzt werden.
  6. Das moderne Spaltenset ist sehr komplex und bietet auch einige "Abkürzungen", damit nicht immer alle Start-/Stop-Elemente angelegt werden müssen. Wie- und was da noch möglich ist, würde diese Anleitung hier allerdings sprengen. Bei Interesse können wir dazu gern eine Schulung terminieren.

 

Spalte 1

(Der stilisierte Hintergrund des "Callout"-Inhaltselements kann auch erzeugt werden, wenn bspw. einem Texteelement im Feld "CSS-ID/Klasse" der Wert "callout" eingetragen wird.)

Spalte 2

Spalte 3