Fragment de héros

Example of a Hero Snippet
Voici un exemple de fragment de héros avec une accroche

Le fragment de héros (Hero Snippet) est un élément qui sert à afficher une image saillante accompagnée d'un texte accrocheur dans la partie supérieure d'une page Web. Tout comme le carrousel, il s'agit généralement du premier élément visuel qu'un visiteur percevra, alors il doit être pertinent et donner au visiteur une idée du site ou de la page. On le retrouve surtout sur les pages Web Diplômés et Appuyer uOttawa, puisqu'il avait été conçu à l'origine pour la campagne Défier les conventions de l'Université d'Ottawa.

Directives relatives à l'utilisation

  • L'image et le texte qui l'accompagne doivent être pertinents et doivent communiquer l'objet du site ou de la page de renvoi aux visiteurs.
  • La taille du fichier de l'image doit être la plus petite possible afin de ne pas ralentir le téléchargement de la page, surtout pour les utilisateurs d'appareils mobiles.
  • Il ne doit pas y avoir plus d'un fragment de héros par page de renvoi, afin d'éviter de détourner l'attention des visiteurs du contenu principal de la page.
  • Le webmestre est tenu de veiller à ce que le contraste entre le texte et l'image sous-jacente soit suffisant et répond aux exigences en matière d'accessibilité.

Prérequis

Aux fins du présent tutoriel, vous devez assurer ce qui suit :

  • Vous devez avoir le rôle de webmestre sur vote site.
  • Vous devez bien connaître l'utilisation de fragments de contenu.
  • Vous devez savoir manipuler des pages de panneaux.

Étape 1 : Créer le fragment de héros

  1. Dans le menu administratif, cliquez sur Contenu.
  2. Dans le coin supérieur droit de la page, cliquez sur l'onglet Fragments.
  3. Dans la partie supérieure de la page, cliquez sur le lien Ajouter un fragment de contenu, puis sélectionnez Fragment de héros (Hero Snippet).
  4. Dans la page qui suit, remplissez les champs comme suit.
    • Accroche (Tag Line Summary) : Saisissez un texte court qui sert à souligner un moment, un événement, un slogan ou l'objet de la page.
    • Titre d'accroche (Tag Line) : Saisissez un titre concis qui sera affiché au-dessus de l'accroche.
    • Étiquette (Label): Saisissez une étiquette qui sera utilisée pour identifier ce fragment dans l'interface administrative.
    • Image de bannière (Banner image): Choisissez ou téléversez une image qui sera utilisée dans l'arrière-plan. Vous devez vous assurer (1) que la taille du fichier de l'image est relativement petite et (2) qu'elle est plus large que grande.
  5. Une fois que vous avez terminé, ajoutez un commentaire dans le champ Message du journal de révision au bas de la page, puis cliquez sur le bouton Enregistrer.

Étape 2 : Ajouter le fragment de héros à une page de panneaux

  1. Dans le menu administratif, cliquez sur Structure.
  2. Vous verrez ensuite une liste de liens. Cliquez sur Pages.
  3. Repérez la page à laquelle vous souhaitez ajouter le fragment de héros et cliquez sur le lien connexe Modifier.
  4. Dans le menu de gauche, cliquez sur Contenu. Vous verrez maintenant une représentation simplifiée de votre mise en page.
  5. Cliquez sur la roue dentée située dans le coin supérieur gauche de l'une des régions. Dans le menu déroulant, sélectionnez Ajouter du contenu.
  6. Une fenêtre s'affichera. Dans le menu de gauche, cliquez sur Contenu, puis sélectionnez Fragment de contenu.
    1. Cherchez l'étiquette que vous avez donnée à votre fragment de héros à l'étape 1.4 et sélectionnez-la.
    2. Pour le mode d'affichage, sélectionnez Superposition de titre (Title Overlay).
  7. Lorsque vous avez terminé, cliquez sur le bouton Terminer.
  8. Déplacez le fragment de héros que vous venez d'ajouter au besoin.
  9. Ensuite, cliquez sur le bouton Mettre à jour et enregistrer afin de sauvegarder toutes vos modifications.

Étape 3 : Ajouter du style au fragment de héros

  1. À la même page, cliquez sur la roue dentée située dans le coin supérieur droit du fragment de héros que vous venez d'ajouter. Dans le menu déroulant, sous Style, cliquez sur Changer.
  2. Sélectionnez Styles de composants (Component Styles) et cliquez sur le bouton Suivant.
  3. Réglez l'option Position de la superposition (Overlay Position) à Par défaut (Default) ou à Grand impact (Impactful), selon vos besoins.
  4. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer.
  5. Ensuite, cliquez sur le bouton Mettre à jour et enregistrer pour enregistrer toutes vos modifications.
» Envoyer vos commentaires
    Types: 
  • Tutoriels
Haut de page