使用主图 Web 部件

应用对象
SharePoint Server 2019

使用主图 Web 部件为页面和视频带来焦点和视觉趣味。 最多可以在主图 Web 部件中显示五个项目,并使用引人注目的图像、文本和链接来吸引人们对每个项目的注意。 通信网站默认包含“Hero”Web 部件,但也可将“Hero”Web 部件添加到其他页面。 

如果在主图 Web 部件中设置视频,它们将内联播放,而你可以留下来浏览同一页面,而不是转到新窗口。 

逐渐将某些功能引入到已选择加入 目标发布计划的组织。 这意味着你可能不会看到此功能,或者此功能可能看起来不同于帮助文章中的描述。

注意

必须具有编辑权限才能创建页面。 如果您是所有者,但无法添加页面,则您的管理员可能已关闭了此操作的功能。

目录

通信网站上的主图 Web 部件:主题和展示

创建 Communication 网站时,可以从空白网站开始,也可以选择其他网站模板之一,每个模板都附带一组默认的 Web 部件。 其中一些通信网站模板附带 Hero Web 部件,例如:

  • Standard 通信:共享新闻、事件和其他内容等信息。
  • 展示:使用照片或图像展示产品、团队或活动。

在这些模板中,默认情况下,Hero Web 部件包含在页面上。 它预先填充了默认图像、文本和链接,您可以更改这些图像、文本、页面、链接或文档以展示您自己的图像、文本、页面、链接或文档。

选择 Standard 通信模板时,默认主图是具有五个磁贴的平铺布局 (可以从一个磁贴更改为五个磁贴) :

通信网站上的主图 Web 部件 选择 Showcase 模板时,默认主图是具有三个图层的垂直布局 () 可以从 1 层更改为 5 层:

展示主图 可以使用按钮 (1 将 Hero Web 部件的布局从网格更改为垂直层或轮播) 编辑 属性 (用于编辑 Web 部件和部分属性的图标 ) ,并且可以使用按钮 (2 更改每个磁贴或图层的链接、图像和文本) (编辑 详细信息 用于编辑每个磁贴或层的 Web 部件和部分属性 ) 的图标

Hero Web 第 1 部分的两个“编辑”按钮的屏幕截图 。 “编辑 Web 部件”按钮

2. “编辑详细信息”按钮

更改主图 Web 部件的布局

如果页面上尚未处于编辑模式,请选择页面右上角的 编辑

  1. 可以选择可用于主图 Web 部件的三种布局之一:轮播、磁贴和图层。 可通过选择 Web 部件左上角的 “编辑属性 (用于编辑 Web 部件和部分属性的图标 ) ”来选择布局,然后从布局下拉菜单中选择布局:

    从下拉列表中更改布局的屏幕截图

    或者,可以在 Web 部件 属性窗格中选择所需的布局类型:

    从属性窗格更改布局的屏幕截图

  2. 在 Web 部件 属性窗格中,选择:

    • 为轮播布局添加幻灯片
       

      提示

      • 对于轮播布局,要启用/禁用自动幻灯片切换效果,可以打开/关闭切换 自动播放
      • 主图 Web 部件 轮播布局 属性面板中显示的自动播放切换开关
    • 为磁贴布局添加磁贴

    • 为图层布局添加图层
      为主图 Web 部件添加磁贴的屏幕截图

  • 注意

    在 Standard 通信网站) 上最多可以选择 5 个类似 (磁贴,或者在展示网站) 上选择最多 5 个类似 (图层,或在轮播中选择最多 5 个图像。 

如果页面上尚未处于编辑模式,请选择页面右上角的 编辑

  1. 选择“ 编辑详细信息 (用于编辑要更改的磁贴或层右下角的 Web 部件和部分属性 ) 图标 ”。

  2. 属性窗格中,选择“ 更改”,然后选择要从中获取链接的位置:

    • 最近:如果您最近打开过图像、页面或文档,您会发现它们列在此处。

    • 库存图像 库存图像由 Microsoft 提供。 它们质量上乘,尺寸恰到好处,适合您的使用。 如果你是 SharePoint 管理员,建议启用 内容分发网络 (CDN) 以提高获取图像的性能。

    • Web 搜索: 可以查找必应中使用 Creative Common 许可证的图像。 在将图像插入到页面之前,有责任审查图像的许可。 仅限 Microsoft 365 中的 SharePoint。

    • 你的组织:如果你的组织指定了一组已批准的资产,则可以在此处从该集中进行选择。  如果你是 SharePoint 管理员,并且想要了解如何为组织创建资产库,请参阅创建组织资产库

    • OneDrive:可以获取存储在 OneDrive 上的文档或图像的链接。 仅限 Microsoft 365 中的 SharePoint。

    • 网站:可以从指定的网站获取文档、图像或页面的链接。

    • 上传:您可以从个人设备上传文档或图像。

    • 从链接:在 Microsoft 365 中输入 OneDrive 或 SharePoint 中的页面、文档或图像的链接。

      注意

      网站外部的链接不会在由世纪互联运营的美国政府 GCC High 和 DoD 以及 Office 365 中显示图像预览。

  3. 选择图像、页面或文档,然后选择“ 打开”。

  4. 属性窗格背景图像下,选择 自定义图像仅颜色 (仅颜色仅 适用于磁贴布局,颜色对应于网站主题颜色) 。
    自动选择 ”选项会自动从要链接到的页面或文档中选择图像(如果可用)。

  5. 输入图像的 标头

    • 可以通过将开关切换为“是”来显示行动号召链接。 然后添加 行动号召文本 (例如“了解详细信息”) 。 行动号召链接可用于分层布局中的每个图层,但仅适用于平铺布局中的最大图块。

      注意

      轮播布局有 3 种新样式。 您可以为每张幻灯片设置不同的 样式 (图像叠加、文本块、对角线拆分) ,以改变内容呈现。

      3 种新样式

更改图像的焦点

在 Microsoft 365 中的 SharePoint 中,可以更改主图 Web 部件中所选图像的焦点,以获取帧中图片最重要的部分。

  1. 如果页面上尚未处于编辑模式,请选择页面右上角的 编辑

  2. 选择要更改的主图底部工具栏中的“设置焦点按钮

  3. 将焦点拖动到图像中所需的位置。

    焦点

您可以通过将轮播图像、磁贴或图层移动到您想要的位置来重新排序。

  1. 如果页面上尚未处于编辑模式,请选择页面右上角的 编辑
  2. 属性窗格中,选择图像、磁贴或图层旁边的三个点省略号,然后选择“ 上移 ”或 “下移以 重新排序”。 对于图块和图层,您也可以选择图像,然后按住并拖动图块或图层到所需的位置。

将主图 Web 部件放在两列或三列中的一列中

Hero Web 部件设计为占据页面的整个宽度。 如果不希望 Hero Web 部件占用全宽,可以通过更改分区的布局来实现。

  1. 如果尚未处于编辑模式,请选择页面右上角的 “编辑 ”。
  2. 将鼠标悬停在主图 Web 部件的正上方,然后选择 Web 部件左侧的圆圈 +
  3. “分区布局”下,选择 “两列 ”或 “三列”。
  4. 现在,Hero Web 部件位于该部分中两列或三列的左列中。 
  5. 若要移动主图 Web 部件,请选择图像,然后按住它并将其拖动到你希望它成为的列中。

向页面添加空的主图 Web 部件

可以将 Hero Web 部件添加到 团队网站通信 网站中的页面。 要执行此操作:

  1. 如果页面上尚未处于编辑模式,请选择页面右上角的 编辑 。 在右侧的内容窗格 ) 中找到工具 (工具箱图标。

  2. 选择“查看所有 Web 部件”,然后从 Web 部件列表中选择或拖放“ 主图 ”。

  3. 选择“ 编辑属性 ” (用于 编辑 Web 部件和部分属性的图标 ) ,然后选择所需的布局类型 - 可以使用 1 到 5 个磁贴或 1 到 5 个垂直图层的网格。

  4. 选择要更改的每个磁贴的 链接

  5. 对于每个磁贴,在工具箱中选择 “选择”,然后选择要从中获取链接的位置:
    在工具箱中,选择 “更改”,然后选择获取链接的位置:

    • 最近:如果您最近打开过图像、页面或文档,您会发现它们列在此处。
    • Web 搜索: 可以查找必应中使用 Creative Common 许可证的图像。 在将图像插入到页面之前,有责任审查图像的许可。 仅限 Microsoft 365 中的 SharePoint。
    • 你的组织:如果你的组织指定了一组已批准的资产,则可以在此处从该集中进行选择。  如果你是 SharePoint 管理员,并且想要了解如何为组织创建资产库,请参阅创建组织资产库
    • OneDrive:可以获取存储在 OneDrive 上的文档或图像的链接。 仅限 Microsoft 365 中的 SharePoint。
    • 网站:可以从指定的网站获取文档、图像或页面的链接。
    • 上传:您可以从个人设备上传文档或图像。
    • 从链接:从 Microsoft 365 中的 OneDrive for SharePoint 输入页面、文档或图像的链接。
  6. 选择图像、页面或文档,然后单击 “打开”

  7. 在工具箱的 图像下,选择 自定义图像仅颜色。 “ 自动选择 ”选项会自动从要链接到的页面或文档中选择图像(如果可用)。 颜色仅 适用于“磁贴”布局,颜色对应于网站主题颜色。

  8. 输入图像的 替代文字

  9. 可以通过将开关切换为“是”来显示行动号召链接。 然后添加 行动号召文本 (例如“了解详细信息”) 。 行动 号召 链接可用于分层布局中的每个图层,但仅适用于平铺布局中的最大图块

Hero Web 部件中的图像缩放

若要为主图 Web 部件选择合适大小的图像,请考虑以下事项:

  • Web 部件设计为适合全出血布局中的屏幕宽度。
  • “磁贴” 布局中,Web 部件的高度将缩放为 8:3 的纵横比,Web 部件内的图像将缩放到 4:3 的纵横比。
  • 图层 布局中,单个图层缩放到 8:3 的纵横比,每个图层内的图像缩放到接近 9:16 的纵横比。

注意

可以添加视频链接或将视频上传到主图 Web 部件。 现在,通过集成 Stream,Hero Web 部件支持视频。 

(全球、GCC、GCC High 和 DoD) 正式发布:推出从 2025 年 1 月中旬开始,到月底完成。

作为主图 Web 部件更新的一部分,进行了以下更改:

  • 物料管理汇报
    在主 Web 部件中管理项目的方式已更改。 现在可以使用新的直观 幻灯片 界面直接添加或删除项目,而不是将项目数量设置为 1-5 个) (。 这简化了自定义 Hero Web 部件以满足特定需求的过程。新建磁贴新建图层
  • 属性窗格调整
    虽然 “磁贴 ”和 “层 ”布局的属性窗格中的 UI 已刷新以获得更现代的体验,但这些布局的功能 保持不变
  •   不影响现有布局
    如果您当前使用的是 平铺图层 布局,请放心,它们将保持不变。 系统 不会自动转换为 新的 轮播布局 ,确保您现有页面的外观和功能仍按预期显示。