Blocs de toile « Hero » - ArtInStack Documentation

Référence pour les blocs Page Editor → Hero. Chacun est fourni sous forme de section pleine largeur avec une structure en lignes et colonnes, optimisée pour un impact immédiat dès le premier écran.

Architecture de base et champs

Bloc	Source multimédia	Caractéristiques principales
Image Hero	Image média d’arrière-plan	Mise en page (standard, plein écran, divisée gauche/droite), superposition, redimensionnement de la fenêtre d’affichage, ajustement à l’objet
Portfolio Hero	Collection de portfolio	Même structure que l’image Hero ; médias soumis aux règles du bloc Hero de la collection
Vidéo Hero	Vidéo multimédia	Préréglages d’aspect de la fenêtre d’affichage, image d’affiche, modes de mise en page, superposition
Hero Glassmorphism	Image/vidéo d’arrière-plan	Panneau en verre dépoli, flou d’arrière-plan, titre/CTA dans une couche de verre
Hero Slider	Médias par diapositive	Curseur en plein écran ; préréglage « Hero » ; CTA par diapositive ; lecture automatique et navigation

Image Hero

En-tête en pleine largeur centré sur une image fixe à fort impact.

Les attributs comprennent :

Image d’arrière-plan issue des Médias.
Mise en page — bande standard 16:9, plein écran (100 vh), image divisée gauche/droite.
Activation/désactivation de la superposition et application du style du texte sur les modèles pris en charge.
Contrôles d’ajustement de l’objet et de hauteur/largeur maximales via les caractéristiques de dimensionnement partagées de l’image « Hero ».

Portfolio « Hero »

Même structure que l’Image « Hero », mais le contenu visuel est déterminé par une collection Portfolio sélectionnée (comportement de la couverture/de l’image « Hero » issu des métadonnées du portfolio).

Les attributs comprennent :

Sélecteur de Portfolio.
Options de mise en page et de superposition alignées sur celles de l’Image Hero.

Idéal pour : les pages de lancement de collections où la galerie de la marque occupe le premier plan.

Vidéo Hero

Hero « vidéo d’abord » à fort impact avec une mise en page adaptée au streaming.

Les attributs comprennent :

Vidéo et affiche issues de Médias.
Préréglages d’aspect de la fenêtre d’affichage pour la bande Hero.
Modes de mise en page similaires à ceux de l’image Hero (y compris le plein écran).

Hero Glassmorphism

Élément d’arrière-plan (image ou vidéo) avec un panneau de contenu Glassmorphism (flou de l’arrière-plan, surface translucide).

Les attributs comprennent :

Sélection d’un fichier multimédia pour l’arrière-plan.
Zone de texte et de CTA sur le panneau en verre à l’intérieur de la structure du bloc.

Idéal pour : les sites de marques haut de gamme avec du texte lisible sur des images riches en détails.

Hero Slider

Carrousel Hero pleine page utilisant le modèle de slider basé sur Swiper avec un contexte Hero uniquement sur ce bloc (à distinguer du bloc Slider intégré à une colonne).

Les attributs comprennent :

Plusieurs diapositives avec des images ou des vidéos multimédia par diapositive.
Préréglage : « hero » — options de largeur totale et de hauteur de la fenêtre d’affichage (par ex. 100vh).
Titres, sous-titres et liens CTA par diapositive, lorsqu’ils sont activés dans les paramètres du slider.
Lecture automatique, navigation et ajustement aux dimensions de l’objet selon la configuration du slider.

Idéal pour : les pages d’accueil multi-campagnes ou la rotation de projets phares.

Restrictions et contraintes du système

Utilisez Hero Slider pour les bannières de la fenêtre d’affichage ; utilisez Slider (catégorie « Sliders ») dans les colonnes de contenu — ces deux éléments ne sont pas interchangeables.
Les bannières en plein écran affectent les zones de sécurité sur mobile — prévisualisez toujours le mode Mobile dans l’éditeur.
La vidéo de la zone de mise en avant doit être courte et compressée ; fournissez une affiche pour un premier affichage rapide.

Vérification de votre configuration

La zone de mise en avant affiche bien le Média ou le Portfolio prévu dans l’aperçu brouillon et l’aperçu en ligne.
Le « glassmorphism » et les mises en page fractionnées restent lisibles sur mobile.
Le Hero Slider fait défiler les diapositives et les liens s’ouvrent correctement.

Architecture de base et champs

Bloc	Source multimédia	Caractéristiques principales
Image Hero	Image média d’arrière-plan	Mise en page (standard, plein écran, divisée gauche/droite), superposition, redimensionnement de la fenêtre d’affichage, ajustement à l’objet
Portfolio Hero	Collection de portfolio	Même structure que l’image Hero ; médias soumis aux règles du bloc Hero de la collection
Vidéo Hero	Vidéo multimédia	Préréglages d’aspect de la fenêtre d’affichage, image d’affiche, modes de mise en page, superposition
Hero Glassmorphism	Image/vidéo d’arrière-plan	Panneau en verre dépoli, flou d’arrière-plan, titre/CTA dans une couche de verre
Hero Slider	Médias par diapositive	Curseur en plein écran ; préréglage « Hero » ; CTA par diapositive ; lecture automatique et navigation

Image Hero

En-tête en pleine largeur centré sur une image fixe à fort impact.

Les attributs comprennent :

Image d’arrière-plan issue des Médias.
Mise en page — bande standard 16:9, plein écran (100 vh), image divisée gauche/droite.
Activation/désactivation de la superposition et application du style du texte sur les modèles pris en charge.
Contrôles d’ajustement de l’objet et de hauteur/largeur maximales via les caractéristiques de dimensionnement partagées de l’image « Hero ».

Portfolio « Hero »

Les attributs comprennent :

Sélecteur de Portfolio.
Options de mise en page et de superposition alignées sur celles de l’Image Hero.

Idéal pour : les pages de lancement de collections où la galerie de la marque occupe le premier plan.

Vidéo Hero

Hero « vidéo d’abord » à fort impact avec une mise en page adaptée au streaming.

Les attributs comprennent :

Vidéo et affiche issues de Médias.
Préréglages d’aspect de la fenêtre d’affichage pour la bande Hero.
Modes de mise en page similaires à ceux de l’image Hero (y compris le plein écran).

Hero Glassmorphism

Élément d’arrière-plan (image ou vidéo) avec un panneau de contenu Glassmorphism (flou de l’arrière-plan, surface translucide).

Les attributs comprennent :

Sélection d’un fichier multimédia pour l’arrière-plan.
Zone de texte et de CTA sur le panneau en verre à l’intérieur de la structure du bloc.

Idéal pour : les sites de marques haut de gamme avec du texte lisible sur des images riches en détails.

Hero Slider

Carrousel Hero pleine page utilisant le modèle de slider basé sur Swiper avec un contexte Hero uniquement sur ce bloc (à distinguer du bloc Slider intégré à une colonne).

Les attributs comprennent :

Plusieurs diapositives avec des images ou des vidéos multimédia par diapositive.
Préréglage : « hero » — options de largeur totale et de hauteur de la fenêtre d’affichage (par ex. 100vh).
Titres, sous-titres et liens CTA par diapositive, lorsqu’ils sont activés dans les paramètres du slider.
Lecture automatique, navigation et ajustement aux dimensions de l’objet selon la configuration du slider.

Idéal pour : les pages d’accueil multi-campagnes ou la rotation de projets phares.

Restrictions et contraintes du système

Utilisez Hero Slider pour les bannières de la fenêtre d’affichage ; utilisez Slider (catégorie « Sliders ») dans les colonnes de contenu — ces deux éléments ne sont pas interchangeables.
Les bannières en plein écran affectent les zones de sécurité sur mobile — prévisualisez toujours le mode Mobile dans l’éditeur.
La vidéo de la zone de mise en avant doit être courte et compressée ; fournissez une affiche pour un premier affichage rapide.

Vérification de votre configuration

La zone de mise en avant affiche bien le Média ou le Portfolio prévu dans l’aperçu brouillon et l’aperçu en ligne.
Le « glassmorphism » et les mises en page fractionnées restent lisibles sur mobile.
Le Hero Slider fait défiler les diapositives et les liens s’ouvrent correctement.