Block : hero

Ce block permet de créer une section de type « hero », terminologie utilisée dans le secteur du webdesign pour appeler une section généralement placée en première position pour introduire une page grâce à un bandeau image ou une vidéo en pleine largeur.

Contenu

Le selecteur « Type » (choix) permet de choisir le type de hero.

1 – Image simple :

  • Hero image (image) : l’image définissant cette section
  • Hero image (mobiles) (image) : l’image définissant cette section sur les affichages mobiles

2 – Image with content :

  • Hero image (image) : l’image définissant cette section
  • Hero image (mobiles) (image) : l’image définissant cette section sur les affichages mobiles
  • Content (contenu) : le contenu à afficher en surimpression sur l’image. Il est possible d’utiliser l’alias {TITLE} pour afficher le titre de la page ou de l’article

3 – Video simple

  • Hero video (fichier) : fichier vidéo (.mp4) définissant cette section
  • Hero video url (url) : l’url de la vidéo définissant cette section

NB : concernant ce type et le suivant, un seul des deux types de fichier vidéo (externe ou interne) sera renseigné.

4 – Video with content

  • Hero video (fichier) : fichier vidéo (.mp4) définissant cette section
  • Hero video url (url) : l’url de la vidéo définissant cette section
  • Content (contenu) : le contenu à afficher en surimpression sur l’image. Il est possible d’utiliser l’alias {TITLE} pour afficher le titre de la page ou de l’article

5 – SVG animation

Permet de lancer une animation svg à partir d’un fichier json via la librairie javascript lottie/bodymovin. Plus d’informations ici.  Dans ce cas, il n’y a pas de champs associé au contenu, le conteneur de l’animation étant généré automatiquement.

Réglages

  • Max height (groupe) : pour chaque type de résolutio (large, medium et small – mobile), permet de définir une hauteur maximale du hero dans l’unité de votre choix. Par défaut, ces options sont nulles, définies sur « auto »
  • Images options (groupe) : groupe activé seulement pour les types « image simple » ou « image with content »
    – Activate parallax (choix) : permet d’activer l’effet parallax sur l’image du hero
    – Vertical offset (large, medium et small) (nombre) : pour chacun des types de résolution, permet de définir un décalage vertical de l’image
  • Video options (groupe) : groupe activé seulement pour les types « video simple » ou « video with content »
    – Activate parallax (choix) : permet d’activer l’effet parallax sur l’image du hero
  • Content option (groupe) : groupe activé seulement pour les types « video with content » ou « image with content »
    – class(es) (texte) : permet d’attribuer une ou plusieurs classes css à la zone de contenu
    – size (choix) : définit la taille du conteneur de la zone de contenu (automatique ou définie)
    – width (groupe) : actif seulement si la taille est réglée sur définie, permet de fixer la largeur du conteneur en choisissant une valeur et l’unité correspondante
    – height (groupe) : actif seulement si la taille est réglée sur définie, permet de fixer la hauteur du conteneur en choisissant une valeur et l’unité correspondante
    – x position (groupe) : permet de définir la position horizontale de départ du conteneur, en choisissant la valeur, l’unité correspondante et la direction (centre, droite ou gauche)
    – y position (groupe) : permet de définir la position verticale de départ du conteneur, en choisissant la valeur, l’unité correspondante et la direction (milieu, haud ou bas)
    – background (couleur) : définit la couleur de fond du conteneur
    – text color (couleur) : définit la couleur de texte des éléments du conteneur
    – mobile behavior (choix) : définit le comportement du conteneur sur les mobiles, soit « do nothing », ne rien faire, soit « Place content down hero image or video », placer le conteneur en dessous de l’image ou de la vidéo
  • SVG animation options (groupe) : groupe activé seulement pour le type « SVG animation »
    – Json path (texte) : url du fichier json de l’animation, à partir du répertoire localifiles de Flexipow
    – Loop (choix) : active ou non la lecture en boucle de l’animation
    – Autoplay (choix) : active ou non la lecture automatique de l’animation
    – Prerender (choix) : active ou non le pre-rendu initial de l’animation
    – Min height (groupe) : définit la hauteur minimale du conteneur de l’animation pour les résolution desktop (lg), tablette (md) et mobiles (sm)