Skip to main content

​
Allgemeine Beschreibung

Das “Video Hero” Portlet ist ideal, um deine Kunden direkt beim Betreten deines Onlineshops mit einem großflächigen, emotionalen Video im Kopfbereich (Hero-Sektion) zu begrüßen. Du kannst Texte, Call-to-Action-Buttons und Farbüberlagerungen nutzen, um deine Botschaft perfekt in Szene zu setzen und sofort Aufmerksamkeit zu generieren.

​
Einsatzmöglichkeiten (Inspiration)

  • Startseiten-Hero: Nutze ein beeindruckendes Hintergrundvideo direkt oben auf deiner Startseite, um den perfekten ersten Eindruck von deiner Marke zu vermitteln.
  • Emotionale Kampagnen: Präsentiere neue Kollektionen, Produkt-Launches oder saisonale Highlights mit bewegten Bildern und einem direkten Link zur Aktionsseite.
  • Storytelling: Erzähle die Geschichte hinter deinen Produkten durch ein stimmungsvolles Video, auf dem du deine wichtigste Kernbotschaft als Text platzierst.

​
Featureübersicht:

  • Vollflächige Videos: Binde Videos per Link oder Upload ein und steuere die Höhe flexibel für alle Geräte (z. B. über dynamische vh-Werte).
  • Integrierte Textinhalte: Lege aussagekräftige Überschriften und Fließtexte direkt über das Video.
  • Auffällige Call-to-Actions: Nutze hochgradig anpassbare Buttons, um Besucher gezielt auf wichtige Seiten zu lenken.
  • Darstellungs-Optionen: Nutze anpassbare Farb-Overlays, um sicherzustellen, dass deine Texte auf dem Bewegtbild immer gut lesbar bleiben.

​
Settings:

​
Videos

Image
Quelle: Wähle hier aus, wie dein Video eingebunden werden soll. Du hast die Auswahl zwischen:
  • Link = Füge eine externe URL (z. B. von einem Cloud-Speicher oder Server) zu deiner Videodatei ein.
  • Hochladen = Lade eine Videodatei direkt aus den Dateien in deinen Shop.
Video URL: Trage hier, abhängig von deiner zuvor gewählten Quelle, den direkten Link oder den Dateipfad zu deinem Hauptvideo ein. Vorschauvideo URL: Hier kannst du optional einen Link für ein kürzeres oder komprimierteres Vorschauvideo eintragen.

​
Textinhalte

Image
Überschrift: Gib hier eine prägnante Überschrift ein, die prominent und groß über deinem Video angezeigt wird. Text: Über den integrierten Texteditor kannst du einen zusätzlichen Beschreibungstext frei formatieren, der unter der Überschrift auf dem Video erscheint. Playbutton text: Falls du einen Playbutton verwendest, kannst du hier den Text eintragen, der für den Abspiel-Button angezeigt werden soll (z. B. “Video abspielen”).

​
Button

Image

​
Button Eigenschaften und Styles

Button verwenden?: Lege hier über das Dropdown-Menü fest, ob ein klickbarer Button auf deinem Video Hero angezeigt werden soll (“Ja” oder “Nein”). Button als Link oder Funktionsbutton verwenden?: Bestimme die Art des Buttons. Ein Linkbutton verweist klassisch auf eine Ziel-URL, während ein Funktionsbutton dafür genutzt werden kann, bestimmte Events im Shop (wie z. B. ein Pop-up) auszulösen. Buttonlink: Trage hier die genaue Ziel-URL ein, zu der der Kunde nach dem Klick geleitet werden soll. Button Text: Gib den Text ein, der auf dem Button stehen soll (z. B. “Mehr erfahren” oder “Jetzt entdecken”). Button Typ: Wähle den optischen Stil deines Buttons (z. B. “Full” für einen komplett ausgefüllten Button). Button Farbe: Bestimme die Grundfarbe des Buttons (z. B. Primary), die aus deinem Shop-Template bezogen wird. Button Breite: Wähle, ob sich die Breite an den Inhalt anpasst (“Content Width”) oder ob der Button vollflächig dargestellt wird.

​
Button Ausrichtung nach Breakpoints

Hier kannst du die Ausrichtung deines Buttons (links, zentriert, rechts) ganz detailliert für verschiedene Bildschirmgrößen festlegen, um ein perfektes responsives Design zu garantieren:
  • XS: Sehr kleine Bildschirme (Smartphones)
  • SM: Kleine Bildschirme
  • MD: Mittlere Bildschirme (Tablets)
  • LG: Große Bildschirme (Laptops)
  • XL: Sehr große Bildschirme (Desktop-PCs)
Link in neuen Tab öffnen?: Setze ein Häkchen, wenn sich die beim Button hinterlegte Zielseite in einem neuen Browser-Fenster öffnen soll. Icon vor oder nach dem Text: Wähle, an welcher Stelle ein mögliches Icon im Button platziert werden soll (vor oder nach dem Button-Text). Icon verwenden?: Entscheide hier per Dropdown, ob der Button zusätzlich mit einem Symbol (Icon) versehen werden soll.

​
Darstellung

Image
Lege eine Höhe in vh oder px an. Vh ist eine dynamische Größe und orientiert sich prozentual an der Displayhöhe. 50vh entspricht damit 50% der aktuellen Displayhöhe. Du kannst aber auch einen fixen Pixelwert angeben.
Videohöhe: Trage hier die gewünschte Höhe deines Video Heros ein. Nutze z. B. 50vh für die halbe Bildschirmhöhe, 100vh für Vollbild oder Werte wie 500px für eine festgeschriebene, unveränderliche Höhe. Playbutton Farbe: Wähle über den Color-Picker (oder durch direkte Eingabe des Hex-Codes, z. B. #edf2f4) die Farbe für deinen Playbutton aus.
Bitte beim Einstellen der Farbe für das Overlay den Deckkraftregler/Alphakanal beachten und auf einen geringen Wert stellen.
Overlay: Wähle hier eine Farbe für die Überlagerung (den Farbfilter) deines Videos aus. Dieser Filter wird über das Video gelegt und hilft enorm dabei, den darauf platzierten Text lesbar zu machen. Achte im Farbwähler darauf, die Deckkraft (Transparenz) entsprechend niedrig einzustellen, damit das Video noch gut durchscheint!