360° Produkt-Hero in Webflow ohne 3D

Diese Hero Section verwandelt jedes Produktfoto in ein 360° rotierendes Video und du baust sie in Webflow mit KI in nur wenigen Minuten.

In Teil 3 dieser Outdoor-Brand-Serie lernst du, wie du einen sauberen Hero-Teaser mit zwei Spalten gestaltest mit dunklem Hintergrund, einem dezenten Raster-Pattern und einer sanften 360° Produktanimation. Das Video-Element entsteht in Sekunden mit Grok keine 3D-Tools, kein komplexes Setup nötig.

Was du lernst:

• Wie du ein 360° Produkt-Loop-Video mit KI generierst
• Wie du Webflow Blend Modes für einen schwebenden, transparenten Produkteffekt nutzt
• Wie du Seitenverhältnis-Probleme bei Background-Video-Elementen löst
• Wie du Container Query Units für skalierbare, responsive Typografie einsetzt

Alles gibt es als kostenloses Webflow Cloneable kopiere Layouts und Animationen direkt in deine eigenen Projekte.

Hero-Teaser-Design mit rotierender Produktdemo in Webflow

In Teil drei dieser Outdoor-Brand-Website-Serie rückt eine saubere, visuell wirkungsvolle Hero Section in den Fokus, die ein klassisches Zwei-Spalten-Layout mit einem besonderen Kniff kombiniert: einer 360-Grad rotierenden Produktanimation, komplett mit KI generiert und in Webflow über ein Background-Video-Element und Blend Modes eingebunden.

Keine 3D-Software. Kein komplexes Setup. Nur Webflow, ein KI-Tool und ein paar clevere CSS-Tricks.

Das Layout: Zwei-Spalten Hero-Teaser

Ausgangspunkt ist eine neue Section in Webflow namens hero teaser, aufgebaut auf einem 50/50-Grid. Die linke Seite hält das Media-Element, die rechte Seite enthält den Inhalt eine Überschrift, einen Absatz und einen Link-Block.

Auf der rechten Seite wird eine min-height von 80vh auf dem Content Wrapper gesetzt, und Flexbox übernimmt die vertikale Ausrichtung. Zwei innere Divs teilen den Inhalt in einen oberen und einen unteren Wrapper und geben dir flexible Kontrolle über die Abstände, wenn die Section wächst.

Den dunklen Media-Bereich einrichten

Die linke Media-Seite bekommt eine schwarze Hintergrundfarbe. Innen kommt ein Background-Pattern-Element zum Einsatz ein wiederholbares SVG-Quadrat-Pattern, position absolute, mit reduzierter Opacity. Das ist ein wiederverwendbares Asset, das du in jede dunkle Section einfügen kannst, um Tiefe ohne Ablenkung zu erzeugen.

Das Pattern-Element nutzt eine Custom Background Size von etwa 2rem, damit es fein und kompakt bleibt. Setze es auf background-repeat: repeat und positioniere es von oben links.

Das 360° Produktvideo mit KI generieren

Das Highlight dieser Section ist die Produktanimation. Statt ein Produkt aus mehreren Winkeln zu fotografieren oder ein 3D-Tool zu nutzen, kannst du Grok verwenden einen kostenlosen KI-Bild- und Video-Generator.

Der Ablauf ist simpel: Nimm oder generiere ein Produktbild mit dunklem Hintergrund, lade es in Grok hoch, wechsle in den Video-Modus und gib den Prompt, das Objekt 360 Grad im Kreis zu drehen für einen perfekten Loop. Grok generiert ein 6-Sekunden-Video in etwa 8 bis 9 Sekunden. Das Ergebnis ist nicht jedes Mal ein perfekt nahtloser Loop, wirkt aber beeindruckend und funktioniert super für Demos und Kundenpräsentationen.

Skaliere den Export danach auf 720 hoch für bessere Qualität und lade ihn herunter.

Das Video in Webflow einbinden

Füge im Media Wrapper ein Background-Video-Element ein und lade die generierte Videodatei hoch. Gib ihm eine Klasse wie hero-teaser-media und setze die Breite auf etwa 80% des Eltern-Elements.

Ein häufiges Problem hier ist das Seitenverhältnis. Webflows Background-Video-Elemente nutzen standardmäßig ein Fill-Verhalten, das deinen Inhalt beschneiden kann. Zur Lösung prüfst du die tatsächlichen Pixelmaße deiner Videodatei und setzt ein Custom Aspect Ratio direkt auf dem Element zum Beispiel 600 / 929. Entferne jede feste Höhe und lass das Seitenverhältnis die Größe regeln.

Sobald das steht, scrolle zum Blend-Modes-Bereich und setze ihn auf lighten. Das macht den dunklen Hintergrund des Videos transparent, sodass nur das Produkt sichtbar bleibt, als würde es schweben. Hat dein Produkt einen weißen Hintergrund, nutze stattdessen darken oder multiply.

Responsive Typografie mit Container Queries

Für den großen Media-Titel am unteren Rand des Media-Bereichs sorgt die Standard-Einheit rem für Probleme bei verschiedenen Zoom-Stufen. Die Lösung sind Container Query Units.

Setze container-type: inline-size als Custom Property auf dem Media-Wrapper-Element und nutze dann cqw als Font-Size-Einheit zum Beispiel 10cqw. So skaliert der Text relativ zur Breite des Media Wrappers selbst, nicht zum Viewport. Das Ergebnis: Typografie, die bei jeder Bildschirmgröße proportional bleibt.

Für das Raster-Pattern im Hintergrund funktioniert vw besser, da Container Queries nicht auf Background Images wirken. Ein Wert von etwa 2.5vw für die Background Size liefert konsistente Ergebnisse über alle Bildschirmgrößen.

Geschichtete Gradienten für einen polierten Look

Um Text und Pattern visuell zu verbinden, füge zwei Gradient-Overlays im Media-Bereich hinzu. Der erste Gradient liegt über dem Text mit höherem z-index und blendet von einem leicht warmen Ton zu transparent so entsteht ein sanftes Leuchten unter dem Titel. Der zweite Gradient liegt auf der Pattern-Ebene mit niedrigerem z-index.

Beide Gradienten zusammen geben der Section dieses redaktionelle Gefühl, ohne unnötige Design-Komplexität.

Fazit

Dieses Hero-Setup funktioniert besonders gut für produktfokussierte Websites, bei denen visuelle Wirkung Priorität hat. Die Technik ist flexibel: Tausche das Produktbild aus, passe den Blend Mode an und nutze das Layout über verschiedene Projekte hinweg wieder.

Alle Elemente und Animationen aus dieser Serie gibt es im kostenlosen Webflow Cloneable.