Erstellung des Inhaltselements "Hero"

Bei dem Inhaltselement "Hero" handelt es sich um einen Seiteninhalt, welches im Reiter "Medien".

Dieses Element wird genutzt, um ein großes Bild mit einem Teasertext darzustellen. Es ist meist das erste Element auf einer Seite, kann aber auch zwischen anderen Element platziert werden.

Der Hero kann sowohl im „Header-Bereich“ als auch im “Normal-Bereich” platziert werden. Es gibt dabei einige Unterschiede zu beachten.

Wenn der Hero an erste Stelle der Seite platziert werden soll, dann muss er im Header-Bereich platziert werden. In diesem Bereich kann auch nur der Hero und auch der Hero für die News platziert werden. Des Weiteren ist der Bereich auf ein Element beschränkt. Auch wenn der Hero deaktiviert ist, kann kein weiteres Element platziert werden.

Wenn der Hero im Header platziert wird, wird automatisch die Breadcrumb im Hero ausgegeben. Aus diesem Grund muss der Hero in diesem Bereich stehen. Wenn er nicht im Header steht, wird die Breadcrumb über dem Bild des Heros angezeigt und nicht im Teasertext.

Heroes, die im Normal-Bereich platziert werden, enthalten keine Breadcrumb.

Im Reiter "Allgemein" werden alle allgemeinen Einstellungen vorgenommen.

Die Auswahlfelder im Bereich Inhaltselement zeigen noch einmal, welches Element ("Typ") ausgewählt ist und in welcher Spalte im TYPO3-Backend sich das Element befindet. Das Feld "Container" zeigt an, ob sich das Element in einem Container-Element im TYPO3-Backend befindet.

Im Bereich Überschriften tragen Redakteure im Feld "Überschriften" und "Untertitel" die gewünschten Texte ein. Ihnen stehen hier 255 Zeichen zur Verfügung. Diese Anzahl sollte ausreichend sein.

Über das Auswahlfeld "Typ" unterhalb des Textfeldes "Überschriften" kann ausgewählt werden, ob es sich bei der Hauptüberschrift um eine H1, H2, H3, H4, H5 oder um eine versteckte Überschrift handeln soll. Verborgene Überschriften werden im Frontend und im HTML-Code der Seite nicht ausgeben. Bei "Standard" wird eine H2 ausgegeben. Diese ist immer vorausgewählt.

Der Typ des Untertitels hängt von dem ausgewählten Typ der Überschrift ab. Würde eine H2 ausgewählt, ist der Typ des Untertitels eine H3. Ist der ausgewählte Typ eine H3, so ist der Typ der Unterüberschrift einen H4.
Das Aussehen/Größe kann über die Auswahl der Klasse des Untertitels bestimmt werden. Die meisten Überschriften und Untertitel bekommen meist die Klasse H4.

Typ der Überschriften:

• H1, H2, H3, H4, H5, Verborgen

Klassen des Untertitels:

• H1, H2, H3, H4, H5

Es kann passieren, dass bei Bildern, wie Personenporträts, Gesichter oder aber wichtige Elemente im Bild vom Text überlappt werden. Dies kann vermieden werden, wenn der Toggle für Interviews / Personenportraits aktiviert wird. 

Die Box mit dem Text wird dann etwas schmaler über das Bild platziert. Dadurch kann der Bildausschnitt so gewählt werden, dass die Person oder das Hauptmotiv rechts im Bild dargestellt wird und dieses wird dann nicht mehr von der Box überdeckt.

Da der Hero als Teaser fungiert, kann ein Link unter dem Teasertext platziert werden.
Der Link Browser öffnen sich über den Button neben dem Eingabefeld „Link“.

Im Feld „Linktext“ kann ein kurzer Linktext eingetragen. Wenn das Feld leer bleibt, wird automatisch „mehr erfahren“ als Linktext auf der Seite angezeigt.

Im Link Browser können folgende Elemente ausgewählt werden:

• Seiten
• Dateien
• Ordner
• Externe URL
• Telefon
• E-Mail
• Publikationen
• Videos / Serien
• News (hier auch Veranstaltungen)

Es kann zum Beispiel direkt auf eine Unterseite oder aber zu einem bestimmten Element auf einer Unterseite verlinkt werden.

Wenn als Linktext „mehr erfahren“ stehen bleiben soll, ist es gut, wenn im Feld „Titel“ im Link Browser ein aussagekräftiger Titel für den Link angegeben wird. Der Titel soll das Linkziel benennen. Dies dient der Verbesserung der Barrierefreiheit.

Es kann maximal nur ein Bild in das Element geladen werden.

Das Bild sollte einen Alternativtext besitzen. Dieser kann hier im Feld alternativer Text neu vergeben werden. Hat das Bild schon einen Alternativtext, wird dieser im Feld angezeigt. Er kann aber für das Bild in diesem Hero-Element überschrieben werden. 

Das Bild sollte hier keinen Beschreibungstext, Verlinkung und Titel bekommen. Der Beschreibungstext und die Verlinkung werden nicht angezeigt.

Die Bilder werden in einem bestimmten Seitenverhältnis (Desktop 16:6 und Smartphone 16:10) dargestellt. Hier ist es wichtig, dass im Editor noch einmal der Bildausschnitt kontrolliert wird.

Im Reiter „Erscheinungsbild“ kann der Abstand des Heros zum vorhergehenden oder nächsten Element eingestellt werden.

Es ist immer ein Abstand vorgegeben, da die meisten Elemente einen Abstand zueinander haben sollen. Wenn sich der Hero im Header-Bereich befindet, muss der Abstand entfernt werden. Dazu wird in den Auswahlfeldern  „Abstand davor“ und „Abstand danach“ Standard ausgewählt.