Jump directly to main navigation Jump directly to content

Four hero layout variations in tx_heroitem_layout (center, start, end, full) and six background styles in tx_heroitem_bg_style. Plus: Header layout variations via Site Settings.

Layout: center

Text centered on a background image. The default option for classic marketing hero sections.

ERROR: Content Element with uid "744" and type "heroitem" has no rendering definition!

Layout: start

Split: Text in the left column, image on the right. Recommended for product hero pages and landing pages with a clear visual.

ERROR: Content Element with uid "746" and type "heroitem" has no rendering definition!

Layout: end

Reversed split: image on the left, text on the right. An asymmetrical variation for storytelling heroes.

ERROR: Content Element with uid "748" and type "heroitem" has no rendering definition!

Layout: full

Full-screen overlay — Text in a wide column over the background. For a premium presentation with a large image area.

ERROR: Content Element with uid "750" and type "heroitem" has no rendering definition!

Background Styles

The field tx_heroitem_bg_style offers six styles that can be combined with any layout—from a full-width image to a dark solid panel.

ERROR: Content Element with uid "752" and type "heroitem" has no rendering definition!

ERROR: Content Element with uid "753" and type "heroitem" has no rendering definition!

ERROR: Content Element with uid "754" and type "heroitem" has no rendering definition!

ERROR: Content Element with uid "755" and type "heroitem" has no rendering definition!

ERROR: Content Element with uid "756" and type "heroitem" has no rendering definition!

ERROR: Content Element with uid "757" and type "heroitem" has no rendering definition!

Header Styles

The page header (logo + main navigation) can be configured in four basic styles. This can be toggled via Site Settings navigation.main.menuType in combination with header.layout.

Standard — Logo on the left, navigation on the right

Logo

Content

Application: Classic corporate layout. Default version.

Centered — Logo centered, navigation below it

Logo

Content

Usage: Editorial, magazines, publishing houses. Strong emphasis on the brand.

Transparent — superimposed over Hero, logo and navigation in white

Logo

Hero Area

Usage: Hero-focused sites — The header hovers transparently over the hero and becomes opaque as the page is scrolled.

Sticky — stays at the top while scrolling

Logo

↓ The header stays fixed at the top when scrolling (with a shadow).

Use: Long-form pages, one-page sites with a long section index navigation. Improves accessibility of the navigation.

Configuration

Hero layout variants are defined per CE using the fields tx_heroitem_layout and tx_heroitem_bg_style ; header styles are controlled globally via 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

Enable light text on a dark background

heroButtons (inline)

Foreign table records with label, link, variant (primary/light/outline), icon

heroMetaItems (inline)

Trust items below the buttons (label + icon)

navigation.main.menuType

Rendering engine for the main navigation (smartmenus, bs5, mmenu)

header.layout

Standard / Centered / Transparent / Sticky

ERROR: Content Element with uid "1110" and type "herobuilder" has no rendering definition!

Variant: Minimal

ERROR: Content Element with uid "1112" and type "herobuilder" has no rendering definition!

Variation: Image Focus

ERROR: Content Element with uid "1114" and type "herobuilder" has no rendering definition!

Variation: Countdown

ERROR: Content Element with uid "1116" and type "herobuilder" has no rendering definition!

Variation: Centered logo

ERROR: Content Element with uid "1118" and type "herobuilder" has no rendering definition!

Variation: Hero with text

ERROR: Content Element with uid "1120" and type "herobuilder" has no rendering definition!

Variation: Split Text/Image

ERROR: Content Element with uid "1122" and type "herobuilder" has no rendering definition!