Bannière Hero

📍 Où le trouver dans l'application : Panneau d'administration → Contenu → Éditeur de pages (/admin/page-editor) — ajoutez un bloc et choisissez Bannière Hero.

Le grand élément accrocheur en haut d'une page : une grande photo (ou une courte vidéo) avec votre titre par-dessus, et jusqu'à deux boutons. La plupart des écuries placent une Bannière Hero comme premier bloc de la page d'accueil.

Voici à quoi ressemble ce bloc sur le site d'une écurie (contenu d'exemple) :

L'Éditeur de pages liste tous les blocs d'une page — vous pouvez les réorganiser, les dupliquer, les prévisualiser, les modifier ou les supprimer. L'exemple ci-dessous montre la Bannière Hero en haut de la page d'accueil dans l'application mobile :

En ouvrant la Bannière Hero, vous voyez son contenu et ses paramètres de mise en page :

Contenu

• Titre : Le grand titre.
• Sous-titre : Une courte phrase sous le titre.

Style de mise en page

Choisissez d'abord l'apparence — les autres paramètres changent avec elle, vous ne voyez donc que ceux qui ont un effet pour cette mise en page.

• Image avec texte en superposition : Une photo sur toute la largeur, avec votre texte par-dessus.
• Image et texte côte à côte : La photo d'un côté, le texte de l'autre.
• Pleine largeur avec carte de texte : Une large photo avec le texte dans une carte séparée qui flotte au-dessus.
• Cinématique (plein cadre, texte en bas) : Une photo spectaculaire en plein écran, avec le texte en bas de l'image.
• Parallaxe (effet de profondeur au défilement) : La photo se déplace plus lentement que la page lorsque les visiteurs font défiler, ce qui donne de la profondeur.
• Diaporama (fondu enchaîné, zoom lent) : Jusqu'à trois photos qui zooment lentement et se fondent l'une dans l'autre.
• Mosaïque (collage de photos + grande typographie) : Jusqu'à trois photos en collage à côté d'un grand texte.
• Vitrine (fond dégradé, image flottante) : Un fond coloré avec une photo qui flotte à côté du texte, plus un petit badge au-dessus du titre.
• Menu diagonal (panneaux d'images inclinés qui s'agrandissent en navigation) : Une rangée de panneaux photo inclinés, chacun menant vers une autre page. Voir Menu diagonal ci-dessous.

Paramètres pour toutes les mises en page avec photo

• Hauteur de la section : Petit, Moyen, Grand ou Plein écran.
• Alignement du texte : Gauche, Centre ou Droite.
• Couleur du texte : Blanc, Couleur principale, Couleur d'accent ou Foncé. Choisissez ce qui reste lisible sur votre photo.
• Image de fond : Téléversez la photo principale. Utilisez une photo en format paysage d'au moins 1920 pixels de large ; les photos de moins de 1141 × 720 pixels sont refusées car elles seraient floues.
• Cadrage de l'image : Haut de l'image, Centré ou Bas de l'image — la partie de la photo qui reste visible lorsqu'elle est recadrée. Choisissez Haut de l'image si la tête d'un cheval est coupée.
• Traitement de la photo : Aucun (couleur d'origine), Duotone de marque (la photo prend les couleurs de votre thème) ou Noir et blanc.
• Afficher le bouton d'action, Texte du bouton d'action, Lien du bouton d'action : Le bouton principal, par exemple « Voir nos chevaux » vers /horses.
• Afficher le deuxième bouton, Texte du deuxième bouton, Lien du deuxième bouton : Un deuxième bouton, plus discret, facultatif.

Paramètres propres à certaines mises en page

• Deuxième image (optionnelle) / Troisième image (optionnelle) — Diaporama et Mosaïque : les photos supplémentaires.
• Vidéo de fond — Image avec texte en superposition et Cinématique, PRO uniquement : Un court clip qui passe derrière votre texte à la place de la photo. Voir Vidéo de fond ci-dessous.
• Zoom lent sur la photo — Image avec texte en superposition, Pleine largeur avec carte de texte et Cinématique : La photo zoome très lentement.
• Halo de marque et grain — Image avec texte en superposition, Cinématique et Parallaxe : Ajoute un léger halo dans la couleur de votre thème et un fin grain de pellicule sur la photo.
• Assombrir l'image de fond et Obscurité du fond (0–100) — Image avec texte en superposition (les deux) et Cinématique (activé/désactivé seulement) : Assombrit la photo pour que le texte blanc reste lisible. Plus le chiffre est élevé, plus c'est sombre.
• Position de la carte et Transparence de la carte (0–100) — Image avec texte en superposition et Pleine largeur avec carte de texte : L'emplacement de la carte de texte (Gauche, Centre, Droite) et son degré de transparence.
• Position de l'image — Image et texte côte à côte et Vitrine : La photo à Gauche ou à Droite.
• Texte du badge (au-dessus du titre) — Vitrine : Une courte étiquette au-dessus du titre, par exemple « Nouveau cette saison ».
• Couleur de fond — Mosaïque : La couleur derrière le collage.

Vidéo de fond

Fonctionnalité PRO

Le téléversement d'une vidéo nécessite la fonctionnalité Vidéo d'arrière-plan du hero et un abonnement PRO. Sans elles, le champ n'apparaît pas dans l'éditeur, et une vidéo ajoutée auparavant n'est pas affichée sur votre site — les visiteurs voient l'image de fond à la place.

Avec les mises en page Image avec texte en superposition et Cinématique, vous pouvez remplacer la photo par un court clip animé, par exemple des chevaux au pré ou une reprise en carrière.

1. Ouvrez la Bannière Hero et choisissez l'une de ces deux mises en page.
2. Sous Vidéo de fond, cliquez sur Téléverser une vidéo et choisissez un clip sur votre téléphone ou votre ordinateur.
   • Formats : MP4, MOV ou WebM.
   • Durée maximale : 10 secondes.
   • Taille maximale : 100 Mo.
3. Patientez tant que le bouton affiche Compression de la vidéo…. Cela peut prendre jusqu'à une minute. Nous créons automatiquement une version nette pour les ordinateurs et une version plus légère pour les téléphones, afin que la vidéo se charge rapidement pour chaque visiteur. Le son est supprimé.
4. Enregistrez la page.

Comment la vidéo est lue sur votre site :

• Elle est muette et tourne en boucle.
• Elle n'est lue que lorsque la bannière est visible à l'écran, pour ne pas ralentir le reste de la page.
• Les visiteurs qui ont demandé à leur appareil de réduire les animations ou d'économiser les données ne reçoivent pas la vidéo — ils voient votre image de fond.

Pour retirer la vidéo, cliquez sur Supprimer la vidéo. Elle est effacée immédiatement.

Vous pouvez téléverser jusqu'à 20 vidéos par jour. Si vous atteignez la limite, réessayez le lendemain.

Définissez toujours une image de fond

Téléversez aussi une Image de fond, même si vous utilisez une vidéo. Elle s'affiche pendant le chargement de la vidéo et c'est la seule chose que voient les visiteurs qui réduisent les animations ou économisent les données. Elle aide aussi votre page à bien apparaître dans les moteurs de recherche.

Menu diagonal

La mise en page Menu diagonal n'utilise pas de photo de fond. Vous créez à la place une liste de Sections, et chaque section devient un panneau photo incliné qui s'élargit lorsqu'un visiteur le pointe et mène vers une autre page. Cliquez sur Ajouter une section et remplissez :

• Libellé : Le nom du panneau, qui sert aussi de texte du lien. Obligatoire.
• Image : La photo du panneau.
• Page liée : La page qui s'ouvre lorsqu'on clique sur le panneau. Obligatoire — un panneau sans page n'est pas cliquable.
• Couleur du texte : Blanc, Couleur principale, Couleur d'accent ou Foncé.

Les seuls autres paramètres de cette mise en page sont Hauteur de la section et Espacement des sections (l'espace entre les panneaux).

astuce

• Gardez un titre court — cinq ou six mots se lisent le mieux sur un téléphone.
• Si vous activez l'En-tête transparent dans les paramètres de la page, la Bannière Hero remonte derrière votre menu pour un effet plein écran.