Standard-Medienblöcke
Blöcke „Bild“, „Video“, „Video-Lightbox“ und „Video-Hintergrund“ im Seiteneditor von ArtInStack – Merkmale und Layoutoptionen.
Referenz für Page Editor → Medien-Blöcke. Alle vier unterstützen die Auswahl von Assets aus Medien (sowie, sofern angegeben, von externen Video-URLs).
Kernarchitektur und Felder
| Block | Medienquelle | Primäre Merkmale |
|---|---|---|
| Bild | Medien-Auswahl oder URL | Seitenverhältnis, Objektanpassung, Breite/Höhe, Alt-Text/Titel, Deckkraft, Skalierung, Lazy Loading, optionaler Link |
| Video | Medien-Video oder URL | Voreinstellungen für Seitenverhältnis, Posterbild, gehostet (Bunny) vs. externe URL |
| Video-Lightbox | Medien + Poster | Seitenverhältnis (z. B. 16:9), Posterbild, öffnet beim Klicken einen fokussierten Player |
| Videohintergrund | Medien Video + Poster | Schleife, automatische Wiedergabe, stummgeschaltet (für Browser empfohlen), Overlay-Inhalte können innerhalb des Abschnitts abgelegt werden |
Bild
Zeigt ein responsives Standbild an. Zu den Attributen gehören:
- Seitenverhältnis – Voreinstellungen (Auto, Quadrat, Hochformat, Querformat usw.) mit Synchronisation des Editors zur Arbeitsfläche.
- Objektanpassung – „Abdecken“, „Einpassen“ und zugehöriges Zuschneideverhalten.
- Alt-Text und Titel für Barrierefreiheit und SEO.
- Deckkraft und Skalierung für feine Designanpassungen.
- Bild auswählen öffnet das Modal der Medien-Bibliothek.
Am besten geeignet für: redaktionelle Einblendungen, Teamfotos, Diagramme zwischen Textabschnitten.
Video
Bettet einen Inline-HTML5-Player (standalone-video) ein. Zu den Attributen gehören:
- Video-URL aus Medien oder Einfügen eines externen Links.
- Poster-Miniaturansicht aus Medien oder automatisch aus der Videoaufnahme.
- Seitenverhältnis – Breitbild und andere Voreinstellungen; berücksichtigt die maximale Höhe des Seiteninhalts.
- Videotyp – plattformgehostet vs. externer Stream.
Am besten geeignet für: eingebettete Showreels, Unterrichtsclips, Prozessdemos innerhalb einer Spalte.
Video-Lightbox
Zeigt ein Poster/Miniaturbild auf der Seite an; ein Klick öffnet eine Wiedergabe im Vollbildmodus. Zu den Attributen gehören:
- Video-URL und Poster aus Medien.
- Seitenverhältnis für das Miniaturbild (z. B. 16:9).
Am besten geeignet für: Filmische Vorschauen, ohne einen ressourcenintensiven Player zu laden, bis der Besucher interagiert.
Videohintergrund
Ein Block auf Abschnittsebene: Ein Video, das hinter den Inhalten im Vordergrund, die Sie in den Abschnitt einfügen (Überschriften, Schaltflächen, Spalten), in einer Schleife abgespielt wird. Zu den Attributen gehören:
- Video-URL und Poster aus Medien.
- Schaltflächen für Autoplay, Loop und Stummschaltung (stummgeschaltetes Autoplay ist Standard gemäß den Browserrichtlinien).
- Mindesthöhe des Abschnitts für Hero-Bänder.
Am besten geeignet für: die Atmosphäre einer Landingpage hinter der Typografie – kombinieren Sie dies mit kurzen, komprimierten MP4- oder gehosteten Videos.
Systemeinschränkungen & Leitlinien
- Sehr große Quelldateien verlangsamen die Editor-Vorschau und den Live-LCP – bevorzugen Sie komprimierte Videos und angemessene Bildabmessungen.
- Externe Video-URLs müssen für Besucher erreichbar sein; defekte URLs führen nach der Veröffentlichung zu leeren Playern.
- Videohintergrund ist kein Ersatz für barrierefreie Inline-Untertitel; fügen Sie sichtbaren Text in der Overlay-Ebene hinzu.
Überprüfung Ihrer Einrichtung
- Jeder Blocktyp wurde einmal auf einer Entwurfsseite getestet, wobei die Auswahl unter Medien in den Attributen bestätigt wurde.
- Der Alt-Text für Bilder wurde bei Hero-Bildern oder Standbildern im oberhalb der Falz-Bereich ausgefüllt.
- Video-Lightbox und Video wurden auf Mobilgeräten per Tippen/Klicken getestet.