Layout

Allgemein

Systemname:  Name der Story 

Veröffentlicht: Bestimmt, ob die Story angezeigt wird (Siehe Veröffentlichungsoptionen) 

Veröffentlichen von…bis: Beschränkt den Zeitraum, in dem die Story angezeigt wird (optional)

Sortierung: Bestimmt die Anzeigereihenfolge mehrerer Storys innerhalb derselben Widget Zone.

In Unterseiten anzeigen: Bestimmt, ob die Story auch in Unterseiten angezeigt werden soll. Dazu zählen Listen mit einem Seitenindex größer als 1 oder mit mindestens einem aktiven Filter.

Widget Zonen: Bestimmt die Positionierung der Story auf der Seite. (Siehe Widget Zonen)

Ziele: Bestimmt die Zielseite(n), auf der die Story angezeigt wird. (Siehe Veröffentlichungsoptionen)

Veröffentlichungsoptionen

Eine Story kann in mehreren Widget Zonen und auf mehreren Zielseiten gleichzeitig dargestellt werden.
Um Ihre Story auf der gewünschten Seite anzuzeigen, vergewissern Sie sich, dass mindestens eine Widget Zone und Zielseite angegeben wurden und zudem Veröffentlicht angeschaltet ist. Widget Zonen bestimmen die Positionierung Ihrer Story auf der gewünschten Seite. Genaueres über Widget Zonen können Sie unter Widget Zonen erfahren.

Raster

Zellenabstand: Definiert den Abstand zwischen den Zellen. Hier können Sie zwischen relativen und absoluten Angaben wählen. Alle möglichen Maßeinheiten finden Sie unter Größeneinheiten. 
https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-gap

Container: Legt die Breite des äußeren Containers fest. (Siehe Containergrößen)

Inhalt Container: Legt die Breite des inneren Containers fest. (Siehe Containergrößen)

Zellen horizontal verteilen: Legt fest, wie Zellen horizontal verteilt werden, wenn der Container breiter ist als alle Zellen zusammen. (Siehe Zellen hor. verteilen - justify-content)
https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-content

Zellen vertikal verteilen: Legt fest, wie Zellen vertikal verteilt werden, wenn der Container höher ist als alle Zellen zusammen. (Siehe Zellen vert. verteilen - align-content)
https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-content

Auto flow: (Nur für erfahrene Anwender) Definiert, wie der Algorithmus zur automatischen Platzierung von Elementen vorgeht. (Siehe Auto flow) 
https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-flow

Spalten: (Nur für erfahrene Anwender) Hier können Sie manuell Spalten definieren. Tragen Sie dafür einfach die gewünschte Größe und Einheit Ihrer Spalte ein. Separieren Sie einzelne Einträge mit Leerzeichen. Hierbei ist zu beachten, dass die Bearbeitung des Rasters mithilfe der Rasterwerkzeuge komfortabler und intuitiver ist.

Zeilen: (Nur für erfahrene Anwender) Hier können Sie manuell Zeilen definieren. Tragen Sie dafür einfach die gewünschte Größe und Einheit Ihrer Reihe ein. Separieren Sie einzelne Einträge mit Leerzeichen. Hierbei ist zu beachten, dass die Bearbeitung des Rasters mithilfe der Rasterwerkzeuge komfortabler und intuitiver ist.

Containergrößen

Volle Breite: Container beansprucht die volle Anzeigebreite.

Adaptiv: Beschränkt die Containergröße auf 88% der verfügbaren Anzeigebreite. Es wird jeweils 6% padding an den beiden Seiten, Links und Rechts, angewendet.

Boxed: Beschränkt die Containerbreite auf die Breite des Content-Bereichs.

Zellen horizontal verteilen – justify-content

Diese Einstellung definiert, wie zusätzlich freier Platz innerhalb des Containers genutzt und auf der horizontalen Achse angeordnet wird. Zusätzlich freier Platz innerhalb Ihrer Story kann entstehen, wenn die Größe aller Zellen kleiner als der Container ist. Zum Beispiel wenn Sie drei Spalten mit absoluten Werten von z.B. 20% definieren. So beanspruchen alle Spalten Ihrer Story nur 60% der Containerbreite, 40% sind freier Platz.

Start: Alle Elemente sind linksbündig ausgerichtet.

Center: Alle Elemente sind zur Mitte ausgerichtet.

End: Alle Elemente sind rechtsbündig ausgerichtet.

Space-between: Elemente werden so angeordnet, dass der freie Platz zwischen den Elementen verteilt wird.

Space-around: Der freie Platz wird um jedes Element herum aufgeteilt.

Zellen vertikal verteilen – align-content

Diese Einstellung definiert, wie zusätzlich freier Platz innerhalb des Containers genutzt und auf der vertikalen Achse angeordnet wird.

Start: Alle Elemente sind am oberen Rand ausgerichtet.

Center: Alle Elemente sind zur Mitte ausgerichtet.

End: Alle Elemente sind am unteren Rand ausgerichtet.

Space-around: Elemente werden so angeordnet, dass der freie Platz zwischen den Elementen verteilt wird.

Stretch: Alle Elemente werden über den freien Platz gestreckt und füllen den Container komplett aus.

Stil

Invertieren: Invertiert Textfarbe und Ausblendeffekt. Diese Option ist bei dunklen Hintergrundfarben zu empfehlen, um Text deutlich lesbar darzustellen.

Mindesthöhe: Bestimmt die Mindesthöhe des Containers, unabhängig von Inhalt. Wird erst ab der Tablet-Landscape Auflösung angewendet. Einstellungen sind Mittel (400px) und Hoch (700px).

HTML ID: Legt die HTML ID fest.

CSS Klasse: Extra CSS-Klassen für den äußeren Container.

CSS Style: Inline CSS für den äußeren Container.

Grid CSS Klasse: Extra CSS-Klassen für den Story-Container.

Grid CSS Style: Inline CSS für den Story-Container.

Hintergrund

Um Stories mit einem ansprechenden Hintergrund zu präsentieren, stehen Ihnen dabei folgende Ebenen zur Verfügung:

• Bild

• Video

• Farbe

• Verlauf

• Schattierung

Durch Kombination dieser Ebenen können Sie Ihren Story-Hintergrund gestalten. Zum Beispiel ist es möglich, eine Farbe oder einen Verlauf mit Transparenz über ein Hintergrundbild zu legen. Dadurch können Sie Text auf einem unruhigen Hintergrund besser hervorheben oder ganze Bilder einfärben. Die Farbpalette ist dabei vom Theme vorgegeben. Daher bleibt die Story farblich passend und wird bei Änderung des Themes automatisch die neuen Farben mitübernehmen.

Generell werden die einzelnen Ebenen des Hintergrunds von oben nach unten, also nacheinander, auf den Hintergrund angewendet. Dadurch können visuell ansprechende Farbverläufe und Farbkombinationen entstehen. Somit ist es möglich Videos und Bilder einzufärben, um die Farbstimmung der Story anzupassen . Dieses Konzept der additiven Hintergrund-Overlays, wird auch bei einzelnen Blöcken angewendet.

Jeder Browser verwendet bei der Wiedergabe von Videos, das jeweils am besten unterstützte Dateiformat Chrome z.B. nutzt vorzugsweise webM da es besser komprimiert als mp4.

Beachten Sie, dass das Hintergrundbild keine direkte Auswirkung auf die Ausdehnung der Story hat. Nur Blöcke, das Grid und verschiedene Einstellungen beeinflussen die Größe des Story-Containers.

Hinweis: Im Bearbeitungsmodus werden Hintergrundbilder, Videos und Effekte nicht angezeigt, da mehrfarbige oder dunkle Hintergründe sowie Effekte das Bearbeiten der Story erschweren würden. Wechseln Sie in den Vorschaumodus, um Hintergrundbilder, Videos und Effekte anzuzeigen bzw. abzuspielen.