Utiliser le composant WebPart Hero

Mettez l’accent et l’intérêt visuel sur votre page et votre vidéo avec le composant WebPart Hero. Vous pouvez afficher un maximum de cinq éléments dans le composant WebPart Hero et utiliser des images attrayantes, du texte et des liens pour attirer l’attention sur chacun. 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. 

Si les vidéos sont configurées dans le composant WebPart Hero elles seront lues en ligne tandis que vous pourrez rester et parcourir la même page au lieu d’être dirigé vers une nouvelle fenêtre. 

Certaines fonctionnalités sont introduites progressivement auprès d’organisations ayant choisi 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.

Sommaire

• Composant WebPart Hero sur Sites de communication : rubrique et présentation
• Modifier la disposition du composant WebPart Hero
• Modifiez l’image, le texte et les liens pour chaque vignette ou couche
• Modifier le point focal d’une image
• Réorganiser les vignettes ou les couches
• Placer le composant WebPart Hero dans une colonne
• Ajouter un composant WebPart Hero vide à une page
• Mise à l’échelle de l’image dans le composant WebPart Hero

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

Lorsque vous créez un site de communication, vous pouvez commencer avec un site vide ou choisir l’un des autres modèles de site, chacun d’entre eux étant fourni avec un ensemble de composants WebPart par défaut. Certains de ces modèles de site de communication sont fournis avec le composant WebPart Héros, par exemple :

• Communication standard : partagez des informations telles que des actualités, des événements et d’autres contenus.
• Mettre en valeur : utilisez des photos ou des images pour présenter un produit, une équipe ou un événement.

Dans ces modèles, le composant WebPart Hero est inclus par défaut sur votre page. Il est prérempli avec les images, le texte et les liens par défaut que vous modifiez pour présenter vos propres images, texte, pages, liens ou documents.

Lorsque vous sélectionnez le modèle de communication Standard, le héros par défaut est une disposition en mosaïque avec cinq vignettes (que vous pouvez modifier de une à cinq) :

Lorsque vous sélectionnez le modèle Vitrine , le héros par défaut est une disposition verticale avec trois calques (que vous pouvez modifier de un à cinq calques) :

Vous pouvez modifier la disposition du composant WebPart Hero d’une grille à des couches ou carrousels verticaux, à l’aide du bouton (1) Modifier les propriétés ( de la section), et vous pouvez modifier les liens, les images et le texte de chaque vignette ou couche à l’aide du bouton (2) Modifier les détails ( ) pour chaque vignette ou couche.

1. Bouton Modifier un composant WebPart

2. Bouton Modifier les détails

Modifier la disposition du composant WebPart Hero

Si vous n’êtes pas déjà en mode édition sur votre page, sélectionnez Modifier en haut à droite de la page.

1. Vous pouvez sélectionner l’une des trois mises en page disponibles pour le composant WebPart Hero : Carrousel, Vignettes et Couches. Vous sélectionnez la disposition en sélectionnant Modifier les propriétés ( de la section) en haut à gauche du composant WebPart, puis sélectionnez la disposition dans le menu déroulant de disposition :

   

   Vous pouvez également sélectionner le type de disposition souhaité dans le volet Propriétés du composant WebPart :

   

2. Dans le volet Propriétés du composant WebPart, choisissez :

   • Ajouter une diapositive pour la disposition Carrousel
      

     Conseil

     • Pour la disposition Carrousel, pour activer/désactiver la transition des diapositives automatiques, vous pouvez activer/désactiver le bouton bascule Lecture automatique.
     • 

   • Ajouter une vignette pour la disposition Vignettes

   • Ajouter un calque pour la disposition Couches
     

• Remarque

  vous pouvez sélectionner jusqu’à 5 tuiles (comme sur un site de communication Standard), ou jusqu’à 5 couches (comme sur un site Showcase), ou jusqu’à 5 images dans le carrousel. 

Modifiez l’image, le texte et les liens pour chaque vignette ou couche

Si vous n’êtes pas déjà en mode édition sur votre page, sélectionnez Modifier en haut à droite de la page.

1. Sélectionnez Modifier les détails ( de la section) en bas à droite de la vignette ou de la couche que vous souhaitez modifier.

2. Dans le volet Propriétés, sélectionnez Modifier, puis choisissez un emplacement à partir duquel obtenir votre lien :

   • Récents : Si vous avez récemment ouvert des images, des pages ou des documents, vous les trouverez répertoriés ici.

   • Images boursières en maquette Les images d’archives sont fournies par Microsoft. Ils sont de haute qualité et dimensionnés pour 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 d’obtention d’images.

   • Recherche web : Vous pouvez trouver des images à partir de Bing qui utilisent la licence Creative Common. Vous êtes responsable de la révision 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 cet ensemble ici.  Si vous êtes un administrateur SharePoint Administration et que vous voulez découvrir comment créer une bibliothèque de biens pour votre organisation, consultez Créer une bibliothèque de biens d’organization.

   • OneDrive : Vous pouvez obtenir un lien vers un document ou une image que vous avez 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.

   • Charger : Vous pouvez charger un document ou une image à partir d’un appareil personnel.

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

     Remarque

     Les liens externes à votre site n’afficheront pas d’aperçu de l’image dans Gouvernement américain GCC High et DoD, et Office 365 géré par 21Vianet.

3. Sélectionnez votre image, page ou document, puis cliquez sur Ouvrir.

4. Dans le volet de propriétés, sous Image d’arrière-plan, sélectionnez Image personnalisée ou Couleur uniquement (la couleur 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 dans la page ou le document vers lequel vous créez un lien, le cas échéant.

5. Entrez l’en-tête de l’image.

   • Vous pouvez afficher un lien d’appel à l’action en basculant le bouton bascule sur Oui. Ajoutez ensuite votre texte d’appel à l’action (par exemple, « En savoir plus »). Le lien Appel à l’action est disponible pour chaque couche dans une mise en page en couches, mais uniquement pour la plus grande tuile d’une mise en page en mosaïque.

     Remarque

     La disposition Carrousel a 3 nouveaux styles. Vous pouvez définir différents styles (superposition d’image, bloc de texte, fractionnement en diagonale) pour chaque diapositive afin de faire varier la présentation du contenu.

     

Modifier le point focal d’une image

Dans SharePoint dans Microsoft 365, vous pouvez modifier le point focal 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, sélectionnez Modifier en haut à droite de la page.

2. Sélectionnez Définir le point focal dans la barre d’outils en bas de l’image principale que vous souhaitez modifier.

3. Faites glisser le point focal là où vous le souhaitez dans l’image.

   

Réorganiser des images de carrousel, des vignettes ou des couches

Vous pouvez réorganiser les images de carrousel, les vignettes ou les couches en les déplaçant là où vous le souhaitez.

1. Si vous n’êtes pas déjà en mode édition sur votre page, sélectionnez Modifier en haut à droite de la page.
2. Dans le volet Propriétés, sélectionnez les points de suspension à côté de l’image, de la vignette ou du calque, puis sélectionnez Monter ou Descendre pour réorganiser. Pour les vignettes et les couches, vous pouvez également simplement sélectionner l’image, puis maintenir et faire glisser la vignette ou la couche là où vous le souhaitez.

Placez le composant WebPart Hero dans l’une des deux ou trois colonnes

Le composant WebPart Hero est conçu pour occuper toute la largeur de la page. Si vous préférez que le composant WebPart Hero n’occupe pas toute la largeur, vous pouvez le faire en modifiant la disposition de la section.

1. Si vous n’êtes pas déjà en mode édition, sélectionnez Modifier en haut à droite de la page.
2. Placez le pointeur de la souris juste au-dessus du composant WebPart Hero et sélectionnez le signe + encerclé à gauche du composant WebPart
3. Sous Disposition de la section, sélectionnez Deux colonnes ou Trois colonnes.
4. Votre composant WebPart Hero se trouve désormais dans la colonne de gauche des deux ou trois colonnes de la section. 
5. Pour déplacer le composant WebPart Hero, sélectionnez l’image, puis maintenez-la et faites-la glisser dans la colonne souhaitée.

Ajouter un composant WebPart Hero vide à une page

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

1. Si vous n’êtes pas déjà en mode édition sur votre page, sélectionnez Modifier en haut à droite de la page. Recherchez la boîte à outils ( ) sur la droite.

2. Sélectionnez Afficher tous les composants WebPart, puis sélectionnez ou glissez-déplacez Hero dans la liste des composants WebPart.

3. Sélectionnez Modifier les propriétés ( ) et sélectionnez le type de mise en page souhaité - une grille de 1 à 5 tuiles peut être utilisée, ou 1 à 5 couches verticales.

4. Sélectionnez Sélectionner un lien pour chaque vignette que vous souhaitez modifier.

5. Pour chaque vignette, dans la boîte à outils, sélectionnez Sélectionner, puis choisissez un emplacement à partir duquel obtenir votre lien :
   Dans la boîte à outils, sélectionnez Modifier, puis choisissez un emplacement à partir duquel obtenir votre lien :

   • Récents : Si vous avez récemment ouvert des images, des pages ou des documents, vous les trouverez répertoriés ici.
   • Recherche web : Vous pouvez trouver des images à partir de Bing qui utilisent la licence Creative Common. Vous êtes responsable de la révision 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 cet ensemble ici.  Si vous êtes un administrateur SharePoint Administration et que vous voulez découvrir comment créer une bibliothèque de biens pour votre organisation, consultez Créer une bibliothèque de biens d’organization.
   • OneDrive : Vous pouvez obtenir un lien vers un document ou une image que vous avez 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.
   • Charger : Vous pouvez charger un document ou une image à partir d’un appareil personnel.
   • À partir d’un lien : Entrez un lien pour votre page, document ou image à partir de OneDrive pour 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 personnalisée ou Couleur uniquement. L’option Sélection automatique sélectionne automatiquement une image dans la page ou le document vers lequel vous créez un lien, le cas échéant. La couleur seule est disponible uniquement pour la disposition Vignettes et la couleur correspond à la couleur du thème de votre site.

8. Entrez un texte de remplacement pour l’image.

9. Vous pouvez afficher un lien d’appel à l’action en basculant le bouton bascule sur Oui. Ajoutez ensuite votre texte d’appel à l’action (par exemple, « En savoir plus »). Le lien Appel à l’action est disponible pour chaque couche d’une disposition en couches, mais uniquement pour la plus grande tuile d’une disposition en mosaïque

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

Pour choisir des images de taille appropriée pour le composant WebPart Hero, tenez compte des éléments suivants :

• Le composant WebPart est conçu pour ajuster la largeur de l’écran dans une disposition à fond perdu.
• Dans la disposition Vignettes , la hauteur du composant WebPart est mise à l’échelle pour suivre un rapport d’aspect de 8:3, et les images à l’intérieur du composant WebPart sont mises à l’échelle à un rapport d’aspect de 4:3.
• Dans la disposition Calques , un calque individuel est mis à l’échelle à un rapport d’aspect de 8:3, et les images à l’intérieur de chaque calque sont mises à l’échelle à un rapport d’aspect proche de 9:16.

Quand la disposition Carrousel sera-t-elle disponible ?

Disponibilité générale (dans le monde entier, GCC, GCC High et DoD) : le déploiement commence à la mi-janvier 2025 et s’achèvera d’ici la fin du mois.

Que se passe-t-il pour les mises en page existantes après l’ajout de la mise en page du carrousel ?

Dans le cadre des mises à jour du composant WebPart Héros, les modifications suivantes ont été apportées :

• Mises à jour de la gestion des éléments
  La façon dont vous gérez les éléments dans le composant WebPart Hero a changé. Au lieu de définir le nombre d’éléments (1-5), vous pouvez désormais ajouter ou supprimer directement des éléments à l’aide de la nouvelle interface intuitive de Slide . Cela simplifie le processus de personnalisation du composant WebPart Hero pour répondre à vos besoins spécifiques.
• Ajustements du volet Propriétés
  Bien que l’interface utilisateur du volet des propriétés pour les dispositions Tuiles et Couches ait été actualisée pour une expérience plus moderne, la fonctionnalité de ces dispositions reste inchangée.
•   Aucun impact sur les mises en page existantes
  Si vous utilisez actuellement les dispositions Vignettes ou Couches , soyez assuré qu’elles resteront telles quelles. Il n’y aura pas de conversion automatique vers la nouvelle disposition Carrousel , ce qui garantit que vos pages existantes continuent d’avoir l’apparence et le fonctionnement attendus.