使用英雄網部分

套用到
SharePoint Server 2019

透過 Hero 網頁部分，為您的頁面和影片帶來焦點與視覺吸引力。 你可以在英雄網頁部分展示最多五個項目，並使用引人注目的圖片、文字和連結來吸引注意。 [主圖] 網頁組件預設會包含在通訊網站中，但您也可以將 [主圖] 網頁組件新增到其他頁面。 

如果影片設定在 Hero 網頁部分，它們會以內嵌方式播放，而你可以繼續瀏覽同一個頁面，而不是被帶到新視窗。 

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

注意

您必須擁有編輯權限才能建立頁面。 如果你是擁有者但無法新增頁面，管理員可能已經關閉了新增功能。

內容

Hero 網站專欄：主題與展示

當你建立 一個溝通網站時，你可以從空白網站開始，或選擇其他網站範本，每個範本都附帶預設的網頁部分。 其中一些溝通網站範本包含在英雄網站部分，例如：

  • Standard 溝通：分享新聞、活動及其他內容等資訊。
  • 展示：使用照片或圖片來展示產品、團隊或活動。

在這些範本中，英雄網頁部分預設包含在你的頁面上。 它預先填滿了預設的圖片、文字和連結，你可以將它們切換到展示你自己的圖片、文字、頁面、連結或文件。

當你選擇Standard通訊範本時，預設英雄會是一個有五個圖塊的圖塊 (你可以從一個改成五個) ：

Hero 網站部分在 Communication 網站上 當你選擇 展示模板 時，預設的英雄是垂直佈局，有三個圖層 (你可以從一層到五層) ：

展示英雄 你可以用按鈕 () 1 將 Edit 屬性 (圖 示來編輯網頁部分和區段屬性 ) ，將 Hero 網頁部分的佈局從格子變更為垂直圖層或旋轉木馬，並且你可以用按鈕 (2) 編輯細節 (圖示來編輯每個 圖塊或圖層的連結、圖片和文字，) 編輯每個圖塊或圖層的屬性。

英雄網頁第一部分兩個編輯按鈕的截圖。 編輯網頁零件按鈕

2. 編輯詳情按鈕

改變英雄網部分的佈局

如果你頁面還沒進入編輯模式，請在頁面右上角選擇 編輯 。

  1. 你可以選擇英雄網頁部分三種配置之一：旋轉木馬、磁磚和圖層。 你可以選擇網頁部分左上角的「 編輯屬性 」 (圖示，) 編輯網頁部分和區段屬性 ，然後從佈局下拉選單中選擇該版面：

    下拉選單的變更版面截圖

    或者你也可以在網頁部分的 「屬性窗格」中選擇你想要的版面類型：

    從屬性面板變更版面的截圖

  2. 在網頁頁面 「屬性面板」中，選擇：

    • 新增旋轉木馬的滑梯配置
       

      秘訣

      • 在旋轉木馬的排版中，要啟用或關閉自動滑動切換，可以開啟或關閉自動 播放。
      • 自動播放

    • 新增一個磁磚來做地磚佈局

    • 新增圖層以進行圖層配置
      新增英雄網圖塊部分的截圖

  • 注意

    你可以在Standard通訊網站) 選擇最多5個圖塊 (，或在展示網站) 上選擇最多5個圖 (圖塊，或在輪播中最多選擇5張圖片。 

更換每個圖塊或圖層的圖片、文字和連結

如果你頁面還沒進入編輯模式，請在頁面右上角選擇 編輯 。

  1. 選擇「 編輯細節 」 (圖示，) 你想更改的圖塊或圖層右下角 的圖示，以便編輯網頁部分和區段屬性 。

  2. 在 屬性面板中，選擇 變更，然後選擇一個位置來取得你的連結：

    • 近期：如果你最近打開過圖片、頁面或文件，這裡會列出它們。

    • 庫存圖片 庫存圖片由 Microsoft 提供。 它們品質優良，尺寸剛好適合你的使用。 如果你是 SharePoint 管理員，我們建議你啟用 內容傳遞網路 (CDN) ，以提升影像取得的效能。

    • 網路搜尋：你可以找到使用 Creative Common 授權的 Bing 圖片。 你有責任在將圖片插入頁面前審查授權。 只在 Microsoft 365 上使用 SharePoint。

    • 您的組織：如果您的組織指定了一組核准資產，您可以在這裡從該組合中選擇。  如果你是 SharePoint 管理員，想學習如何為你的組織建立資產函式庫，請參見「建立組織資產庫」。

    • OneDrive：你可以取得儲存在 OneDrive 的文件或影像連結。 只在 Microsoft 365 上使用 SharePoint。

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

    • 上傳：你可以從個人裝置上傳文件或圖片。

    • 從連結開始：輸入你的頁面、文件或圖片，即可在 Microsoft 365 中使用 OneDrive 或 SharePoint 的連結。

      注意

      您網站以外的連結不會在美國政府的 GCC High 與 DoD 以及 21Vianet 營運的 Office 365 中顯示圖片預覽。

  3. 選擇您的圖片、頁面或文件，並選擇 開啟。

  4. 在 屬性窗格的 背景圖片中，選擇 自訂圖片 或 僅色彩 (僅彩色是 磁磚版面上可用的，顏色對應你網站的主題色彩) 。
    自動選擇選項會自動從你連結的頁面或文件中選取圖片（如果有的話）。

  5. 輸入圖片 標頭 。

    • 你可以透過切換開關切換到「是」來顯示行動呼籲連結。 接著加入你的 行動呼籲文字 (例如「了解更多」) 。 行動呼籲連結對分層佈局中的每一層都有提供，但僅限於該圖塊中最大的圖塊。

      注意

      旋轉木 馬 的布局有三種新風格。 你可以為每張投影片設定不同 樣式 (圖片疊加、文字區塊、斜線分割) ，以改變內容呈現。

      3 種新風格

改變影像的焦點

在 Microsoft 365 的 SharePoint 中，你可以在 Hero 網頁部分中更改所選圖片的焦點，讓圖片在畫面中呈現最重要的部分。

  1. 如果你頁面還沒進入編輯模式，請在頁面右上角選擇 編輯 。

  2. 在你想更改的英雄圖片底部工具列中，選擇設定焦點 設定焦點按鈕。

  3. 把焦點拖到你想要的位置。

    焦點

你可以透過移動旋轉木馬圖片、圖塊或圖層到你想要的位置來重新排序它們。

  1. 如果你頁面還沒進入編輯模式，請在頁面右上角選擇 編輯 。
  2. 在 屬性面板中，選擇圖片、圖塊或圖層旁的三點省略號，然後選擇「 向上移動 」或 「向下移動 」來重新排序。 至於圖塊和圖層，你也可以選擇圖片，然後長按並拖曳圖塊或圖層到你想要的位置。

把英雄網部分放在兩到三欄之一

Hero 網頁部分設計成佔據整頁的寬度。 如果你希望英雄蜘蛛網部分不要佔滿整個寬度，可以透過改變該區塊的佈局來達成。

  1. 如果你還沒進入編輯模式，請在頁面右上角選擇 編輯 。
  2. 將滑鼠移至英雄網部分上方，然後選擇網狀部分左側圈出的 + 鍵
  3. 在 區段配置中，選擇 兩欄 或 三欄。
  4. 你的英雄網頁部分現在位於該區塊中兩三欄的左欄。 
  5. 要移動 Hero 網頁部分，選取圖片，然後長按並拖曳到你想要的欄位。

在頁面上新增一個空的英雄網頁部分

你可以在 團隊網站 或 溝通 網站的頁面新增英雄網頁部分。 方法如下：

  1. 如果你頁面還沒進入編輯模式，請在頁面右上角選擇 編輯 。 在右側內容窗格 ) 中找到工具 箱 (工具箱圖示 。

  2. 選擇「查看所有網頁部分」，然後從網頁零件列表中選擇或拖放「 英雄 」。

  3. 選擇編輯 屬性 (圖示以編輯網頁部分和區段屬性 ) ，並選擇你想要的版面配置類型——可以使用 1 到 5 個圖塊的格子，或 1 到 5 個垂直圖層。

  4. 選擇你想更改的每個圖塊的 「選擇連結 」。

  5. 對於每個圖塊，在工具箱中選擇 「選擇」，然後選擇一個位置來取得你的連結：
    在工具箱中，選擇 變更，然後選擇一個位置來取得你的連結：

    • 近期：如果你最近打開過圖片、頁面或文件，這裡會列出它們。
    • 網路搜尋：你可以找到使用 Creative Common 授權的 Bing 圖片。 你有責任在將圖片插入頁面前審查授權。 只在 Microsoft 365 上使用 SharePoint。
    • 您的組織：如果您的組織指定了一組核准資產，您可以在這裡從該組合中選擇。  如果你是 SharePoint 管理員，想學習如何為你的組織建立資產函式庫，請參見「建立組織資產庫」。
    • OneDrive：你可以取得儲存在 OneDrive 的文件或影像連結。 只在 Microsoft 365 上使用 SharePoint。
    • 網站：您可以取得指定網站的文件、圖片或頁面連結。
    • 上傳：你可以從個人裝置上傳文件或圖片。
    • 從連結開始：在 Microsoft 365 中，輸入 OneDrive for SharePoint 的頁面、文件或圖片連結。

  6. 選擇您的圖片、頁面或文件，然後點擊 開啟。

  7. 在工具箱中，在 圖片中選擇 自訂圖片 或 僅色彩。 自動選擇選項會自動從你連結的頁面或文件中選取圖片（如果有的話）。 僅 色彩選項僅適用於磁磚佈局，顏色對應於你網站的主題顏色。

  8. 輸入 圖片的替代文字 。

  9. 你可以透過切換開關切換到「是」來顯示行動呼籲連結。 接著加入你的 行動呼籲文字 (例如「了解更多」) 。 行動 呼籲 連結在分層佈局中每個圖層都有提供，但僅限於該圖塊中最大的圖塊

英雄網頁部分的影像縮放

要為英雄部分挑選合適尺寸的圖片，請考慮以下幾點：

  • 網狀部分設計成能符合螢幕寬度，呈現全裸版面。
  • 在 圖塊 佈局中，網體部分的高度會以 8：3 的長寬比縮放，而網片內部的圖片則縮放為 4：3。
  • 在圖層配置中，單一圖層縮放至8：3的長寬比，而圖層內的影像 則縮 放至接近9：16的長寬比。

注意

你可以在英雄網頁部分新增影片連結或上傳影片。 現在 Hero 網頁部分已支援影片，並整合了 Stream。 

全球、GCC、GCC High 及 DoD () 全面開放：部署將於 2025 年 1 月中旬開始，並將於本月底完成。

作為 Hero 網頁部分更新的一部分，進行了以下變更：

  • 物品管理匯報
    你在英雄網部分管理物品的方式已經改變。 你不再 (1到5) 設定項目數量，現在可以直接使用直覺式的 投影片 介面新增或刪除物品。 這簡化了客製化英雄網頁零件以符合你特定需求的過程。新圖塊新圖層
  • 屬性面板調整
    雖然 Tiles 和 Layers 佈局的屬性窗格介面已更新以提升現代體驗，但這些配置的功能 保持不變。
  •   對現有佈局沒有影響
    如果你目前使用的是 Tiles 或 Layers 佈局，請放心它們會保持原狀。 不會 自動轉換 成新的 Carousel 版面，確保現有頁面能維持正常外觀與功能。