使用主图 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 种新样式。 您可以为每张幻灯片设置不同的 样式 (图像叠加、文本块、对角线拆分) ,以改变内容呈现。

      三种主图 Web 部件布局样式

更改图像的焦点

在 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 已刷新以获得更现代的体验,但这些布局的功能 保持不变。
  •   不影响现有布局
    如果您当前使用的是 平铺 或 图层 布局,请放心,它们将保持不变。 系统 不会自动转换为 新的 轮播布局 ,确保您现有页面的外观和功能仍按预期显示。