Corporate Design der Stadt Münster

hellblaues Dummybild

Header Slider

Hier kann ein kurzer Teaser stehen, der gern auch auf eine andere Seite verlinken kann. Er darf allerdings wirklich nur sehr kurz sein.

Hauptüberschrift

Die Hauptüberschrift muss eine H1 sein und gehört auf jede Seite. Bei Bedarf kann es dazu diesen kurzen Einleitungstext geben, der zentriert gesetzt ist. Dieser Inhalt ist im Seitenbereich "Einleitungstext" zu finden. Hierzu werden die Inhaltsmodule "Überschrift" (ohne Einleitungstext) oder "Text" (mit Einleitungstext) genutzt. Zentrierten Text gibt es nur an dieser Stelle einer Seite.

Störer: Modul Text

Dies ist ein sogenannter Störer. Er soll sich optisch vom Rest der Seite absetzen und bietet Platz für besonders wichtige Informationen. Fällt etwas kurzfristig aus? Ist jemand spontan nicht erreichbar? Hat ein Bagger die Leitung gekappt? Für derartige Ereignisse ist der Störer konzipiert.

Der Störer hat einen eigenen Platz ziemlich weit oben auf der Seite.

Für den Störer wird das Modul "Text" genutzt. Dazu muss im Texteditor das Symbol mit den drei Spalten links neben dem Linksymbos aktiviert werden. Unter dem Reiter "Erscheinungsbild" kann außerdem bei "Layout" "Kasten Auszeichnungsfarbe" ausgewählt werden. Dann wird der Hintergrund farbig. Lässt man das weg, hat man schwarze Schrift auf weißem Grund.

Das Modul kann auch an anderer Stelle auf der Seite mit oder ohne Hintergrund eingesetzt werden.

Dieses Modul passt sich sehr flexibel der Breite des Browserfensters an, daher kann man es nicht gut stylen. Es sollte nur für reinen Fließtext genutzt werden. Zwischenüberschriften stehen - je nach Größe des Browserfensters - gern auch mal unten in der ersten oder zweiten Spalte. Ein händischer Umbruch, um sie oben in einer Spalte zu platzieren ist nicht möglich. Auch Aufzählungen und sogar Absätze sehen unter Umständen nicht schön aus.

Bei dem farbigen Hintergrund muss man mit Links etwas vorsichtig sein. Je nach Farbwahl funktionieren sie besser oder schlechter.

Link 1

Link 2

Überschrift über dem einspaltigen Teaser (optional)

hellblaues Dummybild

Einspaltiger Teaser / Bild mit Text konfigurieren

Der einspaltige Teaser hat ein großes Bild und geht über die gesamte Seitenbreite. Das Bild sollte keinen weißen Hintergrund haben. Der Text kann links stehen (so wie hier) oder rechts. Verlinkungen haben optisch generell zwei Möglichkeiten.
Möglichkeit 1
Möglichkeit 2

Überschrift über dem zweispaltiger Teaser (optional)

hellblaues Dummybild

Zweispaltiger Teaser

Der zweispaltige Teaser kommt etwas unförmig daher. Er ist nicht für jedes Bildmotiv geeignet. Ein weißer Hintergrund funktioniert nicht gut.

hellblaues Dummybild

Zweispaltiger Teaser

Möchte man mehr als zwei Teaser in diese Optik anlegen, erscheint der dritte einfach wieder auf der linken Seite. Jeder einzelne Teaser kann zeitlich individuell gesteuert werden. Verlinkungen sind natürlich auch möglich.

Überschrift über dem dreispaltigen Teaser (optional)

hellblaues Dummybild

Dreispaltiger Teaser

Der dreispaltige Teaser ist eckig und wirkt normaler und aufgeräumt. Das Bild ist immer ein Rechteck, die geeigneten Motive sind vielfältig.

hellblaues Dummybild

Dreispaltiger Teaser

Auch im dreispaltigen Teaser sind Verlinkungen möglich. Und auch bei diesem Modul lassen sich die einzelnen Teaser individuell zeitlich steuern.

hellblaues Dummybild

Dreispaltiger Teaser, der eine etwas längere Überschrift hat und daher aus der Reihe fällt

Wer weniger als drei Teaser auf seiner Seite haben möchte, kann das Modul trotzdem nutzen, wie auch alle anderen Module mit mehr oder weniger Teasern funktionieren. Der rechte Platz bleibt einfach frei. Sind es mehr als drei Teaser, rutschen Teaser 4, 5 und 6 in die zweite Reihe, Teaser 7, 8 und 9 in die dritte und so weiter. Hier muss man mehr als beim zweispaltigen Teaser aufpassen, dass die Teaser ungefähr alle dieselbe Länge haben. Sonst wird es in der Desktop-Ansicht sehr schnell unharmonisch, wie dieses Beispiel hier zeigt.

Der dreispaltige Teaser funktioniert übrigens auch ohne Bild. Dann rutscht der Text allerdings nach oben.

Überschrift über dem vierspaltigen Teaser (optional)

hellblaues Dummybild

Das Feld für diesen Text heißt Subtitel


Vierspaltiger Teaser

Der vierspaltige Teaser ist dem dreispaltigen recht ähnlich. Allerdings kann man mit diesem Modul vier Teaser nebeneinander setzen.

hellblaues Dummybild

eigentlich ist es eher ein Toptitel


Vierspaltiger Teaser

Dazu müssen die Teasertexte sehr kurz sein, sonst sieht es nicht mehr schön aus.

hellblaues Dummybild

Vierspaltiger Teaser

Den Text im Feld "Subtitel" kann man auch weglassen. Das ist überhaupt kein Problem.

hellblaues Dummybild

Vierspaltiger Teaser

Auch hier kann jeder Teaser individuell zeitgesteuer werden. Der fünfte wird erst angezeigt, wenn man auf "+ mehr anzeigen" klickt.

hellblaues Dummybild

Vierspaltiger Teaser

Da ist der fünfte.

Überschrift Modul Text

Das Modul Text beinhaltet lediglich eine Überschrift und einen Text. Beim Text kann es sich dabei um einen langen Fließtext handeln, der einfach absatzlos und quasi ohne Punkt und Komma daherkommt und hintereinander weg geschrieben wurde. Der Texteditor bietet dabei die Möglichkeit, Wörder oder ganze Sätze oder auch Satzteile zu fetten oder kursiv zu schreiben. Auch fett und kursiv gleichzeitig ist möglich. Außerdem können Texte unterstrichen werden. Das ist allerdings nicht zu empfehlen, weil Wörter, die unterstrichen sind, im Internet immer suggerieren, dass es sich um einen Link handelt und viele Menschen den Drang verspüren darauf zu klicken, was dann aber nicht funktioniert und so verwirrt.

Absätze sind mit dem Texteditor genauso möglich wie Links, die innerhalb des Textes optisch nur in dieser Version Sinn machen.

Auch eine Zwischenüberschrift ist möglich

  • Genauso
  • wie eine
  • Aufzählung
  • mit Punkten
  1. wie
  2. auch
  3. nummeriert.

Hinweise zur Barrierefreiheit

Hier und auch bei allen anderen Text-Modulen können auch Hinweise zur Barrierefreiheit eingebunden werden. 

Barrierefreier Eingang, barrierefreie Wege und Rampen

WC mit Rollstuhl zugänglich

Eine Übersicht über alle Icons sowie die Schritt-für-Schritt-Anleitung hat die citeq im r@thausWiki erstellt: Barrierefrei Icons in TYPO3

Überschrift Modul Text & Bilder

hellblaues Dummybild
Eine hellblaue Fläche dient als Platzhalter für ein beliebiges Bild. © Stadt Münster

Dieses Modul bietet im Prinzip die gleichen Möglichkeiten wie das Modul Text, außer dass man zusätzlich noch ein Bild oder eine Graphik einbauen kann. Das Bild kann quadratisch sein oder ein Quer- oder Hochformat haben, es nimmt in der Breite immer die Hälfte der zur Verfügung stehenden Fläche im Browser ein bzw. rutscht bei der mobilen Ansicht zwischen Überschrift und Text. Das Bild kann sowohl rechts als auch links vom Text stehen.

Manchmal kann es sein, dass der Text neben einem Bild sehr kurz ist und die Optik der Seite ein wenig kippt. Dann ist es vielleicht sinnvoll, die Überschrift im Überschrift-Feld des Moduls auf "Verborgen" zu setzen und sie in den Texteditor zu setzen. So erscheint die Überschrift nicht über dem Bild oder der Graphik sondern daneben und in der mobilen Ansicht unter dem zugehörigen Bild.

Manchmal macht es Sinn, mehrere Text & Bilder-Module oder Textmodule oder diese beiden hintereinander zu setzen. Dann kann es sein, dass die Abstände zu eng sind und die Seitenoptik stören. Das kann korrigiert werden, indem man im Inhalt vor dem zu engen Abstand im Reiter "Erscheinungsbild" das Pull-Down-Menü "Abstand danach" auf mittel setzt.

Überschrift Modul Text & Medien

Dieses Modul ist ganz hervorragend dazu geeignet, YouTube-Videos einzubinden.

Und das funktioniert so: Im Reiter Medien klickt man auf "Mediendatei hinzufügen". Anschließend ist ein Ordner innerhalb der Dateiliste auszuwählen, in den man das Video pseudomäßig reinladen möchte. Das System verhält sich so, als läge des Video in dem Ordner, es bleibt aber bei Youtube. Rechts unten in dem Fenster, in dem man auch den Ordner ausgewählt hat ist eine Eingabemaske, in die der Youtube-Link eingefügt und anschließend auf "Medien hochladen" geklickt wird. Jetzt scheint Typo3 den Film in diesen ausgewählten Ordner zu laden. Zum Schluss muss der Film in der Dateiliste des Ordners ausgewählt werden. Wenn man dann abspeichert, wird der Film in die Seite eingebunden.

Hinweis: So genannte Youtube-"Shorts"-Videos lassen sich erst einbinden, nachdem die URL angepasst wurde. Im städtischen Intranet gibt es dafür einen Konverter. 

Es ist mögich, bis zu drei Filme anzuzeigen. Dazu klickt man erneut auf "Mediendatei hinzufügen" und wiederholt den Vorgang. Am Schluss kann man unten rechts unter "Anzahl der Spalten" auswählen, wie viele Videos angezeigt werden sollen. Die Vorschau funktioniert nur richtig, wenn man beispielsweise im Firefox mit der rechten Maustaste in einen weißen Bereich klickt und "Aktueller Frame" -> "Nur diesen Frame anzeigen" auswählt. Mit mehr als einem Video funktioniert sie leider nicht, sie zeigt immer nur eins an.

Übrigens: Zwischen dem Modul Text & Bilder und dem Modul Text & Medien wurde der "Abstand danach" in dieser Beispielseite auf mittel gesetzt.

Überschrift über dem Modul Bildergalerie (optional)

Erklärung des Moduls Bildergalerie
hellblaues Dummybild
hellblaues Dummybild
hellblaues Dummybild
hellblaues Dummybild
hellblaues Dummybild
hellblaues Dummybild

Was ist ein Akkordeon?

Dies ist ein Akkordeon.

In einem Akkordeon sind nur die Überschriften von Inhaltsabschnitten zu sehen und erst beim Klick auf die Überschrift öffnet sich der zugehörige Inhalt. Ein Akkordeon kann vielseitig eingesetzt werden. Besonders auf Seiten mit viel Inhalt hilft es, die Ansicht kompakter zu halten und gibt so auf den ersten Blick einen guten Überblick.

Wie lege ich ein Akkordeon an?

Das Anlegen eines Akkordeons ist etwas komplexer und die Hilfe der Online-Redaktion ist nötig. Bei Bedarf hilft eine Mail an online-redaktion@stadt-muenster.de.

Wie sehen die Inhalte eines Akkordeons aus?

hellblaues Dummybild
Eine hellblaue Fläche dient als Platzhalter für ein beliebiges Bild. © Stadt Münster

Für den Inhalt eines aufzuklappenden Abschnitts können alle zur Verfügung stehenden Module genutzt werden. Allerdings ist pro Abschnitt nur ein Modul möglich. Ein Textabschnitt mit Bild und ein Film können sich nicht gleichzeitig öffnen, sondern nur in zwei unterschiedlichen Aufklappelementen erscheinen.

Kann ein Akkordeon eine Überschrift haben??

hellblaues Dummybild

Kann ein Akkordeon eine Überschrift haben?

Standardmäßig hat ein Akkordeon keine Überschrift. Allerdings ist es natürlich möglich, mit dem Modul "Überschrift" eine Überschrift über das Modul "Akkordeon" zu setzen.

Überschrift über dem Modul Kontakt (optional)

hellblaues Dummybild
Text im Feld Amt

Text im Feld Name

Text im Feld Stellenbezeichnung

Das Kontaktmodul hat seinen Platz am Seitenende im Bereich "Unten" und ist für Kontaktdaten vorgesehen. Außerdem bietet es die Möglichkeit, das Foto eines Ansprechpartners oder einer Ansprechpartnerin anzuzeigen.

hellblaues Dummybild

Text im Feld Name

An anderer Stelle lässt sich das Modul aber auch zweckentfremden. Es ist beispielsweise geeignet für Aufzählungen, deren Punkte einen etwas längeren Text haben und die mit Icons illustriert werden können.

Text im Feld Name

Das Feld "Name" ist ein Pflichtfeld. Ob die Felder "Amt" und "Stellenbezeichnung" vollständig, teilweise oder gar nicht ausgefüllt sind, ist egal. Bei den Fotos ist zu beachten, dass sie durch die etwas unförmige Darstellung an den Ecken abgeschnitten werden. Das Modul funktioniert auch ohne Fotos.

hellblaues Dummybild
Text im Feld Amt

Text im Feld Name

Wenn das Kontaktmodul für Kontakte genutzt wird, sollte es auf jeden Fall am Seitenende an der dafür vorgesehenen Stelle stehen. Die einzelnen Punkte lassen sich NICHT individuell zeitlich steuern.

Beispielamt

Martina Mustermann

Stellenbezeichnung

online-redaktion@stadt-muenster.de
02 51/4 92-13 41

Beispielstraße 7
48143 Münster

Barrierefreier Eingang links neben der Hauptdrehtür (bitte klingeln)

Aufzug mit Rollstuhl zugänglich

Die Module passen nicht

Nicht alle Inhalte lassen sich in diese Module pressen. Manchmal sind individuelle Lösungen nötig.
Bei Fragen, Anliegen und Problemen ist man hier an der richtigen Adresse:
online-redaktion@stadt-muenster.de.