Um diese Einstellungen optimal einsetzen zu können sind ein erweitertes technisches Verständnis sowie HTML und CSS Kenntnisse hilfreich.
Der Inhalts-Abschnitt kann auch als Bildkachel dargestellt werden.
Bei Bildkacheln wird das Bild des Inhalts-Abschnitts in den Hintergrund gelegt und der Text darüber ausgegeben. Ist ein Link gesetzt, so ist per Vorgabe die gesamte Kachel verlinkt.
In der Standard-Darstellung wird Titel und Text auf einem hervorgehobenen Hintergrund im unteren Bereich des Bildes angezeigt.
Zu beachten ist die Element-Einstellung "Bildformat" an den einzelnen Kacheln. Diese legt fest, wie groß die Kachel wird. Innerhalb einer Row sollten alle Kacheln das selbe Bildformat haben, also gleich groß sein.
Mit Meilenstein 12 ist es möglich, einen Inhalts-Abschnitt auch in den Standard-Rows als Bildkachel auszugeben. Dafür muss in den Element-Einstellungen der Formatter Bildkachel ausgewählt werden.
Bildkacheln eigenen sich gut, um prominente Links auf wichtige Inhalte zu erstellen.
Es sollte nicht zu viel Text für eine Kachel eingegeben werden, da in der Standard-Darstellung ansonsten der Text nicht mehr sinnvoll angezeigt werden kann.
Um Inhalts-Abschnitte besonders flexibel als Kacheln darstellen zu können gibt es außerdem eine spezielle Row für Kachel-Elemente.
Kacheln in dieser Row für Kachel-Elemente weisen ein besonderes Verhalten bei der responsiven Darstellung auf. Im Gegensatz zu den "normalen" Rows ist die Anzahl der Elemente in der Row für Kachel-Elemente nicht festgelegt. Statt dessen können beliebig viele Kacheln in der Row abgelegt werden. Dabei "fießen" die Kacheln dynamisch in mehrere Zeilen, falls dies erforderlich ist.
Die Reihenfolge der Kacheln innerhalb der Row für Kachel-Elemente kann einfach mit "Drag and Drop" festgelegt werden.
Der Abstand zwischen den einzelnen Kacheln kann außerdem über eine Element-Einstellung an der Row für Kachel-Elemente festgelegt werden.
Mit der Element-Einstellung Schriftdarstellung: "Helle Schrift über abgedunkeltem Bild" wird der Text in heller Schirftfarbe komplett über dem Bild ausgegeben. Das Bild wird dabei leicht abgedunkelt, damit die Schrift besser lesbar ist.
Falls der Text nicht komplett auf das Bild passt, so kann in dieser Darstellungsvariante auf der Kachel gescrollt werden.
© Photo by Nick Fewings on Unsplash
© Photo by William White on Unsplash
© Photo by Jean-Philippe Delberghe on Unsplash
Mit der Element-Einstellung Schriftdarstellung: "Schrift auf transparentem Hintergrund oben über Bild" wird der Text mit einem hellen Hintergrund oben über dem Bild ausgegeben.
Falls der Text nicht komplett auf das Bild passt, so kann in dieser Darstellungsvariante auf der Kachel gescrollt werden.
Kacheln können auch als Bild-Text Umdreher dargestellt werden.
Bildkachel 1
Titel auf dem Bild
Dieser Text erscheint wenn sich das Bild umdreht.
Bild-Text Umdreher
Der Text kann auch zuerst angezeigt werden.
Beispiel für den Inhalts-Abschnitt
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt dafür ist dieser: The quick brown fox jumps over the lazy old dog.
Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. § 14a ab dem Jahr 2034 Zahlen in 86% der Texte zur Pflicht werden (AVAIL® and Wefox™). Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Wichtig sind auch Âçcèñtë, ebenso wie Kapitälchen, Kerning oder Ligaturen (sehr pfiffig). Gerne werden heute auch Emojis wie z.B. 😇😀😉👍🏻🐶🍎 oder ⚽️ in Texten verwendet.