Hero-Leinwandblöcke

Referenz für Page Editor → Hero-Blöcke. Jeder wird als Abschnitt in voller Breite mit einer Zeilen-/Spalten-Hülle ausgeliefert – optimiert für die Wirkung auf dem ersten Bildschirm.

Kernarchitektur & Felder

Block	Medienquelle	Primäre Merkmale
Hero-Bild	Medien-Hintergrundbild	Layout (Standard, Vollbild, links/rechts geteilt), Overlay, Viewport-Größenanpassung, Objektanpassung
Hero-Portfolio	Portfolio-Sammlung	Gleiche Hülle wie Hero-Bild; Medien gemäß den Regeln für Hero-Portfolios
Hero-Video	Medien-Video	Voreinstellungen für das Seitenverhältnis des Viewports, Poster, Layout-Modi, Overlay
Glassmorphism Hero	Hintergrundbild/-video	Milchglas-Panel, Hintergrundunschärfe, Überschrift/CTA in Glasebene
Hero-Slider	Medien pro Folie	Slider im gesamten Viewport; Hero-Voreinstellung; CTAs auf den Folien; Autoplay und Navigation

Hero-Bild

Kopfzeile in voller Breite, zentriert auf ein aussagekräftiges Standbild.

Zu den Attributen gehören:

• Hintergrundbild aus Medien.
• Layout – Standard-16:9-Band, Vollbild (100 vh), Bildaufteilung links/rechts.
• Overlay-Schalter und Übernahme des Stils bei unterstützten Vorlagen.
• Steuerung von Objektanpassung sowie maximaler Höhe und Breite über gemeinsame Größenmerkmale für Hero-Elemente.

Hero-Portfolio

Gleiche strukturelle Hülle wie beim Hero-Bild, jedoch wird das Bildmaterial durch eine ausgewählte Portfolio-Sammlung gesteuert (Cover-/Hero-Verhalten basierend auf den Metadaten des Portfolios).

Zu den Attributen gehören:

• Portfolio-Auswahl.
• Layout- und Overlay-Optionen analog zu „Hero-Bild“.

Am besten geeignet für: Startseiten von Sammlungen, bei denen die Galerie im oberen Bildbereich im Vordergrund steht.

Hero-Video

Wirkungsvolles Video-First-Hero mit streamingfreundlichem Layout.

Zu den Attributen gehören:

• Video und Poster aus Medien.
• Voreinstellungen für das Viewport-Seitenverhältnis des Hero-Bandes.
• Layout-Modi analog zu „Hero-Bild“ (einschließlich Vollbild).

Glassmorphism-Hero

Hintergrundelement (Bild oder Video) mit einem Glassmorphism-Inhaltsbereich (Hintergrundunschärfe, durchscheinende Oberfläche).

Zu den Attributen gehören:

• Auswahl von Medien für den Hintergrund.
• Textbereich und CTA-Bereich im Glaspanel innerhalb der Blockstruktur.

Am besten geeignet für: Premium-Markenwebsites mit gut lesbarem Text vor lebhaften Bildern.

Hero-Slider

Ganzseitiges Hero-Karussell unter Verwendung des Swiper-basierten Slider-Modells, wobei der Hero-Kontext ausschließlich auf diesen Block beschränkt ist (im Unterschied zum spalteninternen Slider-Block).

Zu den Attributen gehören:

• Mehrere Slides mit Medien-Bildern oder Videos pro Slide.
• Voreinstellung: Hero – Optionen für volle Breite und Viewport-Höhe (z. B. 100vh).
• Überschriften, Untertitel und CTA-Links pro Folie, sofern in den Slider-Eigenschaften aktiviert.
• Autoplay, Navigation und Objektanpassung je nach Slider-Konfiguration.

Am besten geeignet für: Homepages mit mehreren Kampagnen oder wechselnde vorgestellte Projekte.

Systemeinschränkungen und Vorgaben

• Verwenden Sie den Hero-Slider für Viewport-Heroes; verwenden Sie den Slider (Kategorie „Slider“) innerhalb von Inhaltsspalten – diese sind nicht austauschbar.
• Vollbild-Heroes wirken sich auf die sicheren Bereiche auf Mobilgeräten aus – sehen Sie sich im Editor immer die Vorschau für Mobilgeräte an.
• Hero-Videos sollten kurz und komprimiert sein; stellen Sie ein Poster bereit, um das erste Laden zu beschleunigen.

Überprüfung Ihrer Einrichtung

• Der Hero zeigt die beabsichtigten Medien oder das Portfolio in der Entwurfs- und Live-Vorschau an.
• Glassmorphism und geteilte Layouts bleiben auf Mobilgeräten lesbar.
• Der „Hero Slider“ wechselt korrekt zwischen den Slides und die Links funktionieren einwandfrei.