Die ist ein Grid, mit Text befüllt.
Bitte möglichst alle Inhaltselemente (Blöcke) in Grids anordnen = erst den Grid einfügen, dann das Inhaltselement.
Sowohl Grids als auch alle anderen Blöcke können entweder durch Klick auf das “+” (links oben oder bei Klick in einzelne Zeilen) oder durch einfügen des “/”-Zeichens ausgewählt werden.
Grids helfen Browsern dabei, Inhalt optimal je nach Größe des Screens darzustellen.
Zum Beispiel wie hier am Desktop in mehreren Spalten…
…am Smartphone untereinander.
Noch ein paar Infos zur Arbeitsweise im Editor als Listenelement:
- Der Titel einer Page (ganz oben) ist nur intern und in der Seitensuche relevant. Enthält eine Page nur einen Titel, ist sie leer.
- Diese Page ist bei den Page-Einstellungen rechts unter “Exclude from Searchresults” von der Seitensuche und bei den SEO-Einstellungen ganz unten (unter “Advanced”) von der Google-Suche ausgeschlossen.
- Das heißt, es ist kein Problem, solche Pages testweise sofort zu veröffentlichen und als Vorschau die tatsächliche URL zu verwenden, weil die Seite nur in Kenntnis der URL gefunden werden kann.
- Am Besipiel dieser Seite: URL findet sich rechts in den Page-Einstellungen: /xy-demoseite-pasteka–> die Seite ist live unter www.technikum-wien.at/xy-testseite-astl abrufbar.
- Achtung: an sich ist die Seite auch unter technikum-wien.at/… ohne “www” abrufbar, nur im hausinternen LAN/WLAN erzeugt das einen Fehler, hat einen technischen Hintergrund.
- Links verstecken sich in der Textformatierung hinter dem Klammer-artigen Element. Oder man verwendet die Tastenkombi Strg-K. Für die Verlinkung entweder URL eingeben oder Seite suchen.

Auch Bilder sollten in Grids “verpackt” werden. Meistens eignet sich das Fullwidth Image wie hier.

Nebenan haben wir ein Fullwidth Image mit Block-Einstellung “Cover”. Oben ist dasselbe Bild in der Blockeinstellung “Contain” angezeigt. “Contain” ist ideal für Logos oder andere Bildelemente, die nie angeschnitten werden sollen. “Cover” eignet sich besser für dekorative Elemente.
Dies ist eine Headline als H1
Jede Page sollte 1 H1 haben. Zur Strukturierung der Inhalte darunter eignen sich die weiteren Hierarchiestufen H2-H6.
Ich bin eine Headline als H2
Ich bin auch eine H2, aber werde mittels Block-Einstellung rechts viel kleiner, als H6 angezeigt
Auf Seiten mit relativ wenig Inhalt, die nur 1 oder 2 H2-Unterüberschriften haben, wirkt die H2 sonst oft recht groß. Weil man für Suchmaschinen und Co aber die Hierarchie H1-H2-H3… einhalten sollte, gibt es in den Blockeinstellungen die “Show as”-Funktion, um Überschriften zu verkleinern, aber die Hierarchie beizubehalten.
Ist ein leerer Grid nicht langweilig genug, kann man ihn übrigens auch grau einfärben 😉
Mitarbeiter*innen-Kontakte können sich ändern: neue Funktion, neuer Nachname, neues Foto…Deshalb pflegen wir im CMS eine kleine Personaldatenbank und müssen Änderungen nur an einer Stelle vornehmen. Eingefügt werden die Kontaktkacheln wie hier mit dem Block “Contact”:

Junior Lecturer/Researcher
Tabellen sind einer der wenigen Blöcke… | …die nicht in einen Grid platziert werden können. |
---|---|
Sie sind keine ideale Darstellungsform im Web… | …aber zwei, drei Spalten sind ok. |
Wird es umfangreicher, empfehlen wir einen Document-Download:
Der aktuelle Jahresbericht