Utiliser le composant WebPart Hero

Renforcez l’intérêt visuel de votre page avec le composant WebPart Hero. Vous pouvez afficher jusqu’à cinq éléments dans le composant WebPart Hero et utiliser des images, du texte et des liens intéressants pour attirer l’attention sur chacun d’eux. Par défaut, le composant WebPart Hero est présent sur les sites de communication, mais vous pouvez également ajouter le composant WebPart Hero à d’autres pages.

Remarques : 

  • Certaines fonctionnalités sont progressivement introduites dans les organisations ayant opté pour le programme de publication ciblée. Il se peut donc que cette fonctionnalité n’apparaisse pas ou soit différente de ce qui est décrit dans les articles d’aide.

  • Vous devez disposer des autorisations de modification pour créer des pages. S’il s’agit d’un propriétaire mais que vous ne pouvez pas ajouter une page, il est possible que votre administrateur ait désactivé cette possibilité.

Sommaire

Conseil : Check out these YouTube videos from Microsoft Creators to learn more about modern pages!

Composant WebPart Hero sur les sites de communication : rubrique et présentation

Lorsque vous créez un site de communication, le composant WebPart Hero est inclus par défaut dans votre page. Il est déjà rempli avec les images par défaut, le texte et les liens que vous modifiez pour présenter vos propres images, textes, pages, liens ou documents.

Lorsque vous sélectionnez un sujet du type de site de communication de votre choix, le héros par défaut est une disposition avec cinq vignettes (que vous pouvez modifier de une à cinq) :

Composant WebPart Hero sur un site de communication

Lorsque vous sélectionnez l’option Présentation pour le type de site de communication de votre choix, le héros par défaut est une disposition verticale avec trois couches (que vous pouvez modifier de un à cinq calques) :

Présenter le héros

Vous pouvez modifier la disposition du composant WebPart héros à partir d’une grille en couches verticales à l’aide du Bouton édition du composant WebPart bouton modifier le composant WebPart , et vous pouvez modifier les liens, les images et le texte de chaque vignette ou couche à l’aide du bouton modifier les détails Modifier les détails pour chaque vignette ou chaque calque.

Boutons de modification de Hero

1. bouton modifier le composant WebPart

2. bouton modifier les détails

Modifier la disposition du composant WebPart Hero

Regardez cette vidéo pour découvrir comment procéder, ou suivez la procédure décrite sous la vidéo.

Photo d’un appareil de surface
  1. Si vous n’êtes pas déjà en mode édition sur votre page, cliquez sur modifier dans le coin supérieur droit de la page.

  2. Cliquez sur le bouton du composant WebPart modification de composant webpart Bouton édition du composant WebPart sur la gauche et sélectionnez le type de disposition souhaité-vous pouvez sélectionner jusqu’à 5 vignettes (par exemple, sur un site de sujet) ou jusqu’à 5 calques (par exemple, sur un site de présentation).

    Options de mise en page de Hero Options de mise en page de Hero

Modifier l’image, le texte et les liens de chaque vignette ou calque

Regardez cette vidéo pour découvrir comment procéder, ou suivez la procédure décrite sous la vidéo.

Photo d’un appareil de surface
  1. Si vous n’êtes pas déjà en mode édition sur votre page, cliquez sur modifier dans le coin supérieur droit de la page.

  2. Cliquez sur modifier les détails Modifier les détails dans le coin inférieur droit de la vignette ou du calque que vous voulez modifier.

  3. Dans la boîte à outils, cliquez sur modifier, puis choisissez un emplacement à partir duquel vous souhaitez obtenir votre lien :

    Image des options du sélecteur de fichiers.
    • Récent: Si vous avez récemment ouvert des images, des pages ou des documents, vous les trouverez dans la liste.

    • Images boursières Les images boursières sont fournies par Microsoft. Il s’agit d’une qualité élevée et de tailles qui conviennent le plus à votre utilisation. Si vous êtes un administrateur SharePoint, nous vous recommandons d’activer un réseau de distribution de contenu (CDN) pour améliorer les performances de la réception d’images.

    • Recherchesur le Web : vous pouvez trouver des images à partir de Bing utilisant la licence Creative commune. Vous êtes responsable de la vérification de la licence d’une image avant de l’insérer sur votre page. SharePoint dans Microsoft 365 uniquement.

    • Votre organisation: Si votre organisation a spécifié un ensemble de ressources approuvées, vous pouvez choisir parmi celles définies ici.  Si vous êtes un administrateur SharePoint et voulez savoir comment créer une bibliothèque de biens pour votre organisation, voir créer une bibliothèque de ressourcesde l’organisation.

    • Onedrive: vous pouvez obtenir un lien vers un document ou une image stocké sur OneDrive. SharePoint dans Microsoft 365 uniquement.

    • Site: vous pouvez obtenir un lien vers un document, une image ou une page à partir d’un site que vous spécifiez.

    • Télécharger: vous pouvez télécharger un document ou une image à partir d’un appareil personnel.

    • À partir d’un lien: entrez un lien vers votre page, votre document ou votre image à partir de OneDrive ou de SharePoint dans Microsoft 365.

      Remarque : Les liens externes à votre site ne seront pas affichés dans la version d’évaluation d’image de la version U.S. du gouvernement des États-Unis et dans Office 365 géré par 21Vianet.

  4. Sélectionnez votre image, page ou document, puis cliquez sur ouvrir.

  5. Dans la boîte à outils, sous image, sélectionnez image ou couleurpersonnalisée (lacouleur uniquement est disponible uniquement pour la disposition vignettes, et la couleur correspond à la couleur du thème de votre site).

    L’option sélection automatique sélectionne automatiquement une image de la page ou du document vers lequel vous souhaitez créer le lien, le cas échéant.

  6. Entrez le texte de remplacement de l’image.

  7. Sous Options :

    • Vous pouvez afficher une liaison d’action en activant le bouton bascule sur Oui. Ajoutez ensuite votre appel au texte de l’action (par exemple, « en savoir plus »). Le lien d’appel à l’action est disponible pour chaque calque d’une disposition de calques, mais uniquement pour la plus grande vignette d’une disposition en mosaïque.

    • Dans le cas d’une disposition en couches, vous pouvez également afficher un en-tête de sujet pour chaque calque en basculant le bouton bascule pour titre de sujet sur Oui. Ajoutez ensuite le texte du titrede votre sujet.

Changer le point de référence d’une image

Dans SharePoint dans Microsoft 365, vous pouvez modifier le point de référence sur une image sélectionnée dans le composant WebPart Hero pour obtenir la partie la plus importante de votre image dans le cadre.

  1. Si vous n’êtes pas déjà en mode édition sur votre page, cliquez sur modifier dans le coin supérieur droit de la page.

  2. Cliquez sur définir le point de plan Bouton définir le point de référence dans la barre d’outils située en bas de l’image Hero que vous voulez modifier.

  3. Faites glisser le point de l’emplacement souhaité dans l’image.

    Point central

Réorganiser les vignettes ou les couches

Vous pouvez réorganiser les vignettes ou les couches en les déplaçant vers l’emplacement souhaité.

  1. Si vous n’êtes pas déjà en mode édition sur votre page, cliquez sur modifier dans le coin supérieur droit de la page.

  2. Cliquez et maintenez le bouton déplacer l’élément , puis faites glisser la vignette ou la couche à l’endroit souhaité.

    Option de déplacement du héros

Placer le composant WebPart Hero dans une colonne

Le composant WebPart Hero est conçu pour prendre en longueur la totalité de la page. Si vous préférez que le composant WebPart Hero ne prenne pas en longueur tout le temps, vous pouvez l’ajouter à une colonne qui n’est pas pleine chasse.

Regardez cette vidéo pour découvrir comment procéder, ou suivez la procédure décrite sous la vidéo.

Photo d’un appareil de surface
  1. Si vous n’êtes pas déjà en mode édition, cliquez sur modifier en haut à droite de la page.

  2. Placez le pointeur de la souris juste au-dessus du composant WebPart Hero, puis cliquez sur le cercle + à gauche du composant WebPart.

  3. Sous disposition de section, sélectionnez une colonne.

    Une colonne
  4. Sur le côté gauche du composant WebPart, utilisez le bouton déplacer le composant WebPart pour faire glisser le composant WebPart Hero dans la colonne que vous venez d’ajouter.

    Bouton déplacer le composant WebPart

    Déplacement du héros

Ajouter un composant WebPart Hero vide à une page

Vous pouvez ajouter un composant WebPart Hero à une page sur un site d' équipe ou un site de communication . Pour ce faire :

  1. Si vous n’êtes pas déjà en mode édition sur votre page, cliquez sur modifier dans le coin supérieur droit de la page.

  2. Sur votre page, placez le pointeur de la souris au-dessus ou en dessous d’un composant WebPart existant pour afficher une ligne avec des cercles +, comme suit :

    Signe Plus pour ajouter des composants WebPart à une page

    Cliquez sur +, puis sélectionnez le composant WebPart Hero .

    Composant WebPart héros dans un état vide
  3. Cliquez sur le bouton modifier le composant webpart Bouton édition du composant WebPart et sélectionnez le type de disposition souhaité : une grille entre 1 et 5 vignettes est utilisée ou 1 à 5 calques verticaux.

  4. Cliquez sur Sélectionner un lien pour chaque vignette que vous voulez modifier.

  5. Pour chaque vignette, dans la boîte à outils, cliquez sur Sélectionner, puis choisissez un emplacement à partir duquel vous souhaitez obtenir votre lien :

    Dans la boîte à outils, cliquez sur modifier, puis choisissez un emplacement à partir duquel vous souhaitez obtenir votre lien :

    Image des options du sélecteur de fichiers.
    • Récent: Si vous avez récemment ouvert des images, des pages ou des documents, vous les trouverez dans la liste.

    • Recherchesur le Web : vous pouvez trouver des images à partir de Bing utilisant la licence Creative commune. Vous êtes responsable de la vérification de la licence d’une image avant de l’insérer sur votre page. SharePoint dans Microsoft 365 uniquement.

    • Votre organisation: Si votre organisation a spécifié un ensemble de ressources approuvées, vous pouvez choisir parmi celles définies ici.  Si vous êtes un administrateur SharePoint et voulez savoir comment créer une bibliothèque de biens pour votre organisation, voir créer une bibliothèque de ressourcesde l’organisation.

    • Onedrive: vous pouvez obtenir un lien vers un document ou une image stocké sur OneDrive. SharePoint dans Microsoft 365 uniquement.

    • Site: vous pouvez obtenir un lien vers un document, une image ou une page à partir d’un site que vous spécifiez.

    • Télécharger: vous pouvez télécharger un document ou une image à partir d’un appareil personnel.

    • À partir d’un lien: entrez un lien vers votre page, votre document ou votre image à partir de OneDrive SharePoint dans Microsoft 365.

  6. Sélectionnez votre image, page ou document, puis cliquez sur ouvrir.

  7. Dans la boîte à outils, sous image, sélectionnez image ou couleurpersonnalisée . L’option sélection automatique sélectionne automatiquement une image de la page ou du document vers lequel vous souhaitez créer le lien, le cas échéant. Couleur uniquement est disponible uniquement pour la disposition vignettes, et la couleur correspond à la couleur du thème de votre site.

  8. Entrez le texte de remplacement de l’image.

  9. Sous options (SharePoint dans Microsoft 365 uniquement) :

    • Vous pouvez afficher une liaison d’action en activant le bouton bascule sur Oui. Ajoutez ensuite votre appel au texte de l’action (par exemple, « en savoir plus »). Le lien d’appel à l’action est disponible pour chaque calque d’une disposition de calques, mais uniquement pour la plus grande vignette d’une disposition en mosaïque.

    • Dans le cas d’une disposition en couches, vous pouvez également afficher un en-tête de sujet pour chaque calque en basculant le bouton bascule pour titre de sujet sur Oui. Ajoutez ensuite le texte du titrede votre sujet.

Mise à l’échelle d’image dans le composant WebPart Hero

Pour choisir des images de taille optimale pour le composant WebPart Hero, prenez en compte les éléments suivants :

  • Le composant WebPart est conçu pour s’adapter à la largeur de l’écran dans le cadre d’une mise en page complète.

  • Dans la disposition vignettes , la hauteur du composant WebPart est mise à l’échelle pour suivre les proportions de 8:3, et les images à l’intérieur du composant WebPart sont mises à l’échelle pour s’adapter aux proportions d' 4:3.

  • Dans la disposition couches , une couche individuelle est ajustée aux proportions de 8:3, et les images à l’intérieur de chaque échelle de calque à des proportions proches de 9:16.

Remarque : Vous pouvez ajouter un lien vers une vidéo ou télécharger une vidéo dans le composant WebPart Hero. Toutefois, les vidéos ne peuvent pas être lues dans le composant WebPart. Les utilisateurs peuvent cliquer sur le lien de la vidéo et être dirigés vers le lecteur vidéo ou la source du lien pour afficher la vidéo.

Remarque :  Cette page a été traduite automatiquement et peut donc contenir des erreurs grammaticales ou des imprécisions. Notre objectif est de faire en sorte que ce contenu vous soit utile. Pouvez vous nous dire si les informations vous ont été utiles ? Voici l’article en anglais pour référence.

Développez vos compétences dans Office
Découvrez des formations
Accédez aux nouvelles fonctionnalités en avant-première
Rejoignez le programme Office Insider

Ces informations vous ont-elles été utiles ?

Nous vous remercions pour vos commentaires.

Merci pour vos commentaires. Il serait vraisemblablement utile pour vous de contacter l’un de nos agents du support Office.

×