Inhaltselement "Infobox"
Anleitung mit Übung
Über das Inhaltselement
Die Infobox vermittelt einem Seitenbesuchenden durch ihr Design, dass es hier Hinweise gibt, die er wahrnehmen sollte.
Je nach Wahl von Farbe und Icon erfasst er die Wichtigkeit der Information.
Das klappt besonders leicht, wenn die Infobox auf der gesamten Website entsprechend ihrer Bestimmung verwendet wird.
- Die Wahl der Farbe bezieht sich bei der Infobox auf den Rahmen und den Hintergrund des Icons links oben
- Der Hintergrund ist immer weiß
- Aus Kompatibilitätsgründen mit alten Inhalten werden Bilder dargestellt, sind aber häufig nicht sinnvoll
Verwendung:
- ergänzt den Seiteninhalt
- für Hinweise, Warnungen, temporäre Ereignisse
- Überschriften H4 oder H5 sind zu verwenden (Anm. wird techn. vorauss. entspr. eingeschränkt)
- mit wenig Text, evtl. mit Verlinkung auf weitere Informationen
- bilderlos
- es empfiehlt sich, nur eine Infobox pro Seite zu verwenden
- die Infobox sollte eher klein sein
So sieht es aus
Live Ansicht des Inhaltselements
Wichtig
Verwenden Sie die Infobox:
- für Hinweise zb. in grün/rot/pink
- für Randbemerkungen z.B. in hellblau oder grüngrau
Schritt für Schritt
Bebilderte Anleitung
Schritt 1: Anlegen einer Infobox
Klicken Sie zum Anlegen des Elements auf das "+ Inhalt-Icon" im Bearbeitungsbereich der Zielseite. Anschließend wählen Sie unter dem Reiter "Text" das "Infobox"-Element aus. Im Anschluss öffnet sich das Bearbeitungsmenü des Elements automatisch.
Schritt 2: Anlegen des Inhalts
Vergeben Sie zunächst unter dem Reiter "Allgemein" eine Überschrift. Anschließend legen Sie den Typ/das Layout der Überschrift fest. Als Randinformation sind in Infoboxen die Überschriften H4 und H5 sinnvoll.
Nun legen Sie unten im Texteditor den gewünschten Inhalt der Infobox an. Bitte beachten Sie, dass die Länge des Inhalts auch die Größe der Infobox beeinflusst.
Schritt 3: Auswahl des Icons (optional)
Um ein Icon auszuwählen, welches oben links in der Infobox dargestellt wird, klicken Sie unter dem Reiter "Allgemein" auf das Feld unter dem Schriftzug "Icon". Anschließend öffnet sich ein Dropdownmenü in dem Sie ein Icon für die Infobox auswählen können. Sobald Sie ein Icon gewählt haben, erscheint in dem Kästchen neben dem Feld ein entsprechendes Vorschaubild. Eine Übersicht der zur Verfügung stehenden Icons mit Vorschaubildern finden Sie auf der Webseite von Fontawesome.
Wird kein Icon für die Infobox ausgewählt, wird standardmäßig der Icon "info" verwendet.
Schritt 4: Auswahl der Rahmenfarbe (optional)
Um eine Rahmenfarbe für die Infobox festzulegen, gehen Sie zunächst auf den Reiter "Erscheinungsbild". Dort wählen Sie im Bereich "Hintergrundfarbe" die gewünschte Rahmenfarbe aus.
Wird keine Rahmenfarbe für die Infobox ausgewählt, wird standardmäßig die Rahmenfarbe "light-green" verwendet.
TYPO3 Selbststudium
Übung
- Legen Sie eine Infobox an.
- Überlegen Sie sich einen Hinweis, den Sie eventuell in eine grüne Box tun würden.
- Schreiben Sie diesen Hinweis in die Infobox, setzen Sie die Farbe auf grün.
- Achten Sie darauf, dass die Überschrift-Ebene H4/H5 ist.
- Überlegen Sie sich einen Hinweis, den Sie in eine rote Box tun würden.
- Überlegen Sie sich einen Hinweis, der in einer blauen oder blaugrauen Box sinnvoll wäre.