使用主圖網頁組件

使用主圖網頁組件為頁面和影片帶來焦點和視覺上的興趣。 您可以在 [英雄] 網頁組件中顯示最多五個項目，並使用吸引人的影像、文字和連結來吸引人們對每個項目的注意。 [主圖] 網頁組件預設會包含在通訊網站中，但您也可以將 [主圖] 網頁組件新增到其他頁面。 

如果影片是在 Hero 網頁組件中設定，影片將會內嵌播放，而您可以停留並瀏覽同一頁面，而不會被帶到新的視窗。 

部分功能會逐步提供給選擇加入 目標發行計劃的組織。 這表示您可能還無法看到此功能，或看起來可能與說明文章中描述的不一樣。

內容

• 通訊網站上的英雄 Web 組件：主題和展示
• 變更主圖網頁組件的版面配置
• 變更每個磚或圖層的影像、文字和連結
• 變更影像的焦點
• 重新排序磚或圖層
• 將主圖網頁組件放在一欄中
• 將空白的主圖網頁組件新增至頁面
• Hero 網頁組件中的影像縮放比例

通訊網站上的英雄 Web 組件：主題和展示

當您建立 通訊網站時，您可以從空白網站開始，或選擇其他網站範本之一，每個範本都隨附一組預設的網頁組件。 其中一些通訊網站範本隨附於 Hero 網頁組件，例如：

• Standard 通訊：分享新聞、活動和其他內容等資訊。
• 展示：使用相片或影像來展示產品、團隊或活動。

在這些範本中，Hero 網頁組件預設會包含在您的頁面上。 它預先填入了您變更的預設影像、文字和連結，以展示您自己的影像、文字、頁面、連結或文件。

當您選取Standard通訊範本時，預設主圖是具有五個磚的並排版面配置 (您可以從一到五個) 變更：

當您選取 Showcase 範本時，預設主圖是具有三個圖層的垂直版面配置 (您可以在) 從一層變更為五層：

您可以使用按鈕 (1 將 Hero 網頁組件的版面配置從格線變更為垂直圖層或浮動切換) 編輯 屬性 (編輯 ) ，而且您可以使用按鈕 (2 變更每個磚或圖層的連結、影像和文字) (編輯 詳細資料 ) 每個磚或圖層。

。 [編輯網頁組件] 按鈕

2. [編輯詳細資料] 按鈕

變更主圖網頁組件的版面配置

如果您尚未處於頁面的編輯模式，請選取頁面右上角的 編輯 。

1. 您可以選取主圖網頁組件可用的三種版面配置之一：浮動切換、磚和圖層。 您可以選取版面配置，方法是在網頁組件左上角選取 [ 編輯屬性 ] ( ，然後從版面配置下拉式功能表中選取版面配置：

   

   或者，您也可以在網頁組件屬性 窗格中選取您想要的版面配置類型：

   

2. 在網頁組件 屬性窗格中，選擇：

   • 新增浮動切換版面配置的投影片
      

     秘訣

     • 針對 [浮動切換] 版面配置，若要啟用/停用自動投影片轉場，您可以開啟/關閉切換自動 播放。
     • 

   • 新增 [並排] 版面配置的磚

   • 為 [圖層] 版面配置新增圖層
     

• 注意

  您最多可以在 Standard 通訊網站) 上選取 5 個類似 (圖層，或在 Showcase 網站) 上選取最多 5 個類似 (圖層，或在浮動切換中最多選取 5 個影像。 

變更每個磚或圖層的影像、文字和連結

如果您尚未處於頁面的編輯模式，請選取頁面右上角的 編輯 。

1. 選取 [ 編輯詳細資料 ] ，) 位於要變更之磚或圖層的右下角。

2. 在 屬性窗格中，選取 [ 變更]，然後選擇要取得連結的位置：

   • 最近：如果您最近開啟過影像、頁面或文件，會發現它們列在這裡。

   • 庫存影像 影像庫由 Microsoft 提供。 它們質量上乘，尺寸恰到好處，適合您使用。 如果您是 SharePoint 系統管理員，建議您啟用 內容傳遞網路 (CDN) ，以改善取得影像的效能。

   • Web 搜尋：您可以從 Bing 尋找使用 Creative Common 授權的影像。 在將影像插入頁面之前，您有責任檢閱影像的授權。 僅限 Microsoft 365 中的 SharePoint。

   • 您的組織：如果您的組織指定了一組已核准的資產，您可以在這裡從該資產集中進行選擇。  如果您是 SharePoint 管理員，想要了解如何為您的組織建立資產庫，請參閱建立組織資產庫。

   • OneDrive：您可以取得儲存在 OneDrive 上的文件或影像的連結。 僅限 Microsoft 365 中的 SharePoint。

   • 網站：您可以從指定的網站取得文件、影像或頁面的連結。

   • 上傳：您可以從個人裝置上傳文件或影像。

   • 從連結：從 OneDrive 或 Microsoft 365 中的 SharePoint 輸入頁面、文件或影像的連結。

     注意

     您網站外部的連結將不會在美國政府 GCC High 和 DoD 以及由 21Vianet 運作的 Office 365 中顯示影像預覽。

3. 選取您的影像、頁面或文件，然後選取 [開啟]。

4. 在 屬性窗格的 [背景影像] 底下，選取 [ 自訂影像] 或 [僅限色彩 ] ([僅色彩] 僅適用於 [磚] 版面配置，且色彩會與您的網站佈景主題色彩) 對應。
   [ 自動選取] 選項會自動從您要連結的頁面或文件中選取影像 （如果有的話）。

5. 輸入影像的 標頭 。

   • 您可以將開關切換為 [是] 來顯示 [行動信號] 連結。 然後新增您的 行動信號文字 (例如「深入了解」) 。 [行動信號] 連結適用於分層版面配置中的每個圖層，但僅適用於並排版面配置中最大的磚。

     注意

     輪播版面配置有 3 個新樣式。 您可以為每張投影片設定不同的 樣式 (圖像疊加、文本塊、對角線分割) 來改變內容呈現方式。

     

變更影像的焦點

在 Microsoft 365 中的 SharePoint 中，您可以變更 [英雄] 網頁組件內所選影像的焦點，以取得畫面中圖片最重要的部分。

1. 如果您尚未處於頁面的編輯模式，請選取頁面右上角的 編輯 。

2. 選取 [設定焦點] 工具列中要變更的主圖影像底部的 [。

3. 將焦點拖曳到影像中您要的位置。

   

重新排序浮動切換影像、圖格或圖層

您可以將輪播影像、圖塊或圖層移動到您想要的位置，以重新排序它們。

1. 如果您尚未處於頁面的編輯模式，請選取頁面右上角的 編輯 。
2. 在 屬性窗格中，選取影像、磚或圖層旁的三個點省略號，然後選取 [ 上移 ] 或 [ 下移 以重新排序]。 對於圖塊和圖層，您也可以選擇圖像，然後按住將圖塊或圖層拖曳到您想要的位置。

將 Hero 網頁組件放在兩欄或三欄中的一欄

Hero 網頁組件的設計是要佔據整個頁面的寬度。 如果您不希望 Hero 網頁組件佔據整個寬度，您可以變更區段的版面配置來實現。

1. 如果您尚未處於編輯模式，請選取頁面右上角的 [編輯 ]。
2. 將滑鼠停留在 [主圖] 網頁組件的正上方，然後選取網頁組件左側圓圈的 +
3. 在 [章節版面配置] 底下，選取 [兩欄] 或 [三欄]。
4. 您的 Hero 網頁組件現在位於區段中兩欄或三欄的左欄中。 
5. 若要移動 [主圖] 網頁組件，請選取影像，然後按住並將它拖曳到您想要的欄位中。

將空白的主圖網頁組件新增至頁面

您可以將主圖網頁組件新增至 小組網站 或 通訊 網站中的頁面。 方法如下：

1. 如果您尚未處於頁面的編輯模式，請選取頁面右上角的 編輯 。 在右側的內容窗格 ) 尋找 [ 工具箱 ] 。

2. 選取 [查看所有網頁組件]，然後從網頁組件清單中選取或拖放 [主圖 ]。

3. 選取 [編輯屬性 ] ) ，然後選取您想要的版面配置類型 - 可以使用 1 到 5 個圖格的格線，或 1 到 5 個垂直圖層。

4. 選取您要變更的每個磚的 [選取連結 ]。

5. 針對每個磚，在工具箱中選取 [選取]，然後選擇要取得連結的位置：
   在工具箱中選取 [ 變更]，然後選擇要取得連結的位置：

   • 最近：如果您最近開啟過影像、頁面或文件，會發現它們列在這裡。
   • Web 搜尋：您可以從 Bing 尋找使用 Creative Common 授權的影像。 在將影像插入頁面之前，您有責任檢閱影像的授權。 僅限 Microsoft 365 中的 SharePoint。
   • 您的組織：如果您的組織指定了一組已核准的資產，您可以在這裡從該資產集中進行選擇。  如果您是 SharePoint 管理員，想要了解如何為您的組織建立資產庫，請參閱建立組織資產庫。
   • OneDrive：您可以取得儲存在 OneDrive 上的文件或影像的連結。 僅限 Microsoft 365 中的 SharePoint。
   • 網站：您可以從指定的網站取得文件、影像或頁面的連結。
   • 上傳：您可以從個人裝置上傳文件或影像。
   • 從連結：從 Microsoft 365 中適用於 SharePoint 的 OneDrive 輸入您的頁面、文件或影像的連結。

6. 選取您的影像、頁面或文件，然後按一下 [開啟]。

7. 在工具箱的 [影像] 底下，選取 [ 自訂影像] 或 [僅色彩]。 [ 自動選取] 選項會自動從您要連結的頁面或文件中選取影像 （如果有的話）。 [僅限色彩] 僅適用於 [磚] 版面配置，且色彩會與您的網站佈景主題色彩相對應。

8. 輸入影像的 替代文字 。

9. 您可以將開關切換為 [是] 來顯示 [行動信號] 連結。 然後新增您的 行動信號文字 (例如「深入了解」) 。 [ 行動信號 ] 連結適用於分層版面配置中的每個圖層，但僅適用於並排版面配置中最大的磚

Hero 網頁組件中的影像縮放比例

若要為 Hero 網頁組件選擇適合大小的影像，請考慮下列事項：

• 網頁組件的設計是配合全出血版面配置中螢幕的寬度。
• 在 [磚] 版面配置中，網頁組件的高度會縮放為遵循 8：3 的外觀比例，而網頁組件內的影像會縮放為 4：3 的外觀比例。
• 在 「圖層」 版面配置中，個別圖層會縮放至 8：3 的長寬比，而每個圖層內的影像會縮放為接近 9：16 的長寬比。

浮動切換版面配置何時可供使用？

全球、GCC、GCC High 和 DoD) (正式發行：推出將於 2025 年 1 月中旬開始，並將於月底完成。

新增浮動切換版面配置後，現有版面配置會發生什麼變化？

在主圖網頁組件更新中，已進行下列變更：

• 項目管理匯報
  您在 Hero 網頁元件中管理項目的方式已變更。 現在您可以使用全新直覺式 的投影片 介面直接新增或刪除項目，而不必將項目數量設定 (1-5) 。 這簡化了自訂 Hero 網頁組件以滿足您的特定需求的過程。
• 屬性窗格調整
  雖然屬性窗格中 [ 並排 ] 和 [ 圖層 ] 版面配置的 UI 已重新整理，以獲得更現代化的體驗，但這些版面配置的功能 保持不變。
•   對現有版面配置沒有影響
  如果您目前正在使用 圖塊 或 圖層 佈局，請放心它們將保持原樣。 系統 不會自動轉換為 新的 浮動切換版 面配置，以確保您現有頁面的外觀和功能維持如預期。