Direkt zur Hauptnavigation springen Direkt zum Inhalt springen
LAYOUT: CENTER

Zentrierter Hero

Text über einem Hintergrund-Bild, horizontal und vertikal zentriert. Klassischer Marketing-Hero.

Mehr erfahren
LAYOUT: START

Split-Hero links

Text in der linken Hälfte, Bild rechts. Auf Mobile stapeln sie sich vertikal (Text oben, Bild unten).

Primär Sekundär
T3Bootstrap v14 Backend-Vorschau
LAYOUT: END

Split-Hero rechts

Spiegelbildlich zu start — Bild links, Text rechts.

Aktion
LAYOUT: FULL

Vollbild-Hero

Großzügige Inszenierung — Vollbild-Hintergrund, Text linksbündig über dem Bild.

Loslegen
BG-STYLE: IMAGE-COVER

Image Cover

Vollflächiges Hintergrund-Bild mit dunklem Overlay für Text-Lesbarkeit.

BG-STYLE: IMAGE-DECORATIVE

Image Decorative

Brand-Color-Panel mit dezent rechts platziertem Bild.

BG-STYLE: GRADIENT

Gradient

Farbverlauf von --ds-primary zu --ds-primary-active. Kein Image nötig.

BG-STYLE: SOLID-PRIMARY

Solid Primary

Plain Brand-Color, schlicht.

BG-STYLE: SOLID-DARK

Solid Dark

Dunkles Panel, seriös und High-End.

BG-STYLE: DEFAULT

Default

Backward-Compat: Hintergrund kommt aus der Layout-Klasse. Hier Layout center, also Brand-Color.

Vier Hero-Layout-Varianten in tx_heroitem_layout (center, start, end, full) und sechs Hintergrund-Stile in tx_heroitem_bg_style. Plus: Header-Layout-Varianten via Site-Settings.

Layout: center

Zentrierter Text auf Hintergrund-Image. Default-Variante für klassische Marketing-Heros.

Layout: start

Split: Text in der linken Spalte, Bild rechts. Empfohlen für Produkt-Hero und Landingpages mit klarem Visual.

Layout: end

Split umgedreht: Bild links, Text rechts. Asymmetrische Variante für Storytelling-Heros.

Layout: full

Vollbild-Overlay — Text in einer großzügigen Spalte über dem Hintergrund. Für Premium-Inszenierung mit großzügigem Bildanteil.

Hintergrund-Stile

Das Feld tx_heroitem_bg_style bietet sechs Stile, die mit jedem Layout kombiniert werden können — von vollflächigem Bild bis zum dunklen Solid-Panel.

Header-Stile

Der Page-Header (Logo + Hauptnavigation) ist in vier Grund-Stilen konfigurierbar. Schaltbar über Site-Settings navigation.main.menuType in Kombination mit header.layout.

Standard — Logo links, Navigation rechts

Logo

Inhalt

Anwendung: Klassisches Corporate-Layout. Default-Variante.

Centered — Logo zentriert, Navigation darunter

Logo

Inhalt

Anwendung: Editorial, Magazine, Verlage. Hohes Gewicht auf der Marke.

Transparent — über Hero gelegt, Logo + Navigation in Weiß

Logo

Hero-Bereich

Anwendung: Hero-fokussierte Sites — Header schwebt transparent über dem Hero, wird auf Scroll opak.

Sticky — bleibt beim Scrollen am oberen Rand

Logo

↓ Beim Scrollen bleibt der Header oben kleben (mit Shadow).

Anwendung: Longread-Pages, OnePager mit langer Section-Index-Nav. Verbessert Erreichbarkeit der Navigation.

Konfiguration

Hero-Layout-Varianten werden pro CE über die Felder tx_heroitem_layout und tx_heroitem_bg_style gesteuert; Header-Stile global über Site-Settings:

tx_heroitem_layout

center, start, end, full

tx_heroitem_bg_style

image-cover, image-decorative, gradient, solid-primary, solid-dark, default

tx_heroitem_color_inverted

Hellen Text auf dunklem BG aktivieren

heroButtons (inline)

Foreign-Table-Records mit Label, Link, Variant (primary/light/outline), Icon

heroMetaItems (inline)

Trust-Items unter den Buttons (Label + Icon)

navigation.main.menuType

Rendering-Engine der Hauptnav (smartmenus, bs5, mmenu)

header.layout

Standard / Centered / Transparent / Sticky

Lizenz kaufen