使用 Hero 網頁部分

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

附註: 

  • 部分功能會逐步推出給已加入宣告目標發行計畫 的組織。 這表示您可能還無法看到此功能,或看起來可能與說明文章中描述的不一樣。

  • 您必須擁有編輯許可權才能建立頁面。 如果您是擁有者,但無法新增頁面,您的系統管理員可能已關閉這麼做的能力。

內容

提示: Check out these YouTube videos from Microsoft Creators to learn more about modern pages!

通訊網站上的主要網頁部分:主題與展示

當您建立通訊 網站時,根據預設,您的頁面上會包含 Hero 網頁部分。 它會預先填上預設影像、文字和連結,您可以變更以展示您自己的影像、文字、頁面、連結或檔。

當您針對您想要 的通訊 網站類型選取主題時,預設的主要功能是包含五個磚的磚版面配置 (您可以將該版面配置從一個變更為五個) :

通訊網站中的 Hero 網頁部分

當您針對您想要 的通訊 網站類型選取示範時,預設為具有三個圖層的垂直版面配置 (您可以將其中一層變更為五層) :

示範英雄

您可以使用編輯網頁部分按鈕 網頁組件編輯按鈕 ,將 Hero 網頁部分的版面配置從網格線變更為垂直圖層,而且您可以使用每個磚或圖層的編輯詳細資料按鈕 編輯詳細資料 來變更每個磚或圖層的連結、影像和文字。

Hero Edit 按鈕

1. 編輯網頁零件按鈕

2. 編輯詳細資料按鈕

變更 Hero 網頁部分的版面配置

請觀看這段影片,瞭解其執行步驟,或按照影片下方的步驟進行。

您的瀏覽器不支援視訊。
  1. 如果您尚未進入頁面上的編輯模式,請按一下頁面右上方的[編輯。

  2. 按一下網頁部分[編輯網頁零件 網頁組件編輯按鈕 按鈕 網頁組件編輯按鈕 ,然後選取您想要的版面配置類型 - 您可以在 [主題網站) 上選取最多 5 個磚 (例如,或在 [展示網站) 中選取最多 5 個圖層 (例如該圖層。

    版面配置選項 版面配置選項

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

請觀看這段影片,瞭解其執行步驟,或按照影片下方的步驟進行。

您的瀏覽器不支援視訊。
  1. 如果您尚未進入頁面上的編輯模式,請按一下頁面右上方的[編輯。

  2. 按一下 您想要 編輯詳細資料 磚或圖層右下角的 [編輯詳細資料>

  3. 在工具箱中, 按一下 [變更,然後選擇要取得連結的位置:

    檔案選擇器選項的影像。
    • 最近:如果您最近開啟的影像、頁面或檔,會發現它們列在這裡。

    • 庫存影像 Microsoft 會提供股票影像。 它們品質高,大小適合您使用。 如果您是系統管理員SharePoint,建議您啟用內容傳遞網路 (CDN) ,以改善取得影像的顯示效果。

    • Web 搜尋:您可以在使用 Creative Common 授權Bing尋找來自網站的影像。 在將影像插入頁面之前,您有責任先檢查影像的授權。 SharePoint 只Microsoft 365中。

    • 您的組織:如果貴組織已指定一組核准的資產,您可以在這裡選擇該集合。  如果您是系統管理員,SharePoint瞭解如何為貴組織建立資產庫,請參閱建立組織資產庫

    • OneDrive:您可以取得儲存在文檔或影像上OneDrive。 SharePoint 只Microsoft 365中。

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

    • Upload:您可以從個人裝置上傳檔或影像。

    • 從連結:在連結中輸入頁面、檔或影像OneDrive或 SharePoint Microsoft 365。

      附註: 您網站外部的連結不會在美國政府版中顯示影像預覽GCC高和 DoD,Office 365由 21Vianet 操作。

  4. 選取您的影像、頁面或檔,然後按一下 [ 開啟

  5. 在工具箱的影像下,選取 (只提供色彩的磚版面配置,而色彩會對應到您的網站主題色彩) 。

    自動 選取選項 會自動從您連結的頁面或檔中選取影像 ,如果可用。

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

  7. 選項下:

    • 您可以將 切換開關切換 為是,以顯示動作通話 連結。 然後 新增您的動作 (文字,例如「深入瞭解」) 。 分層版面配置中每個圖層都提供動作要求連結,但僅適用于磚式版面配置中最大的磚。

    • 如果是分層版面配置,您也可以將主題標題的切換開關切換為是,以顯示每一層的主題標題。 然後新增您的 主題標題文字

變更影像的焦點

在 SharePoint 中Microsoft 365,您可以變更所選影像的焦點,以取得畫面中圖片最重要的部分。

  1. 如果您尚未進入頁面上的編輯模式,請按一下頁面右上方的[編輯。

  2. 按一下 [ 設定焦點按鈕 圖示底部的工具列中設定焦點。

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

    焦點

重新排列磚或圖層

您可以將磚或圖層移動到您想要的地方,以重新排列磚或圖層。

  1. 如果您尚未進入頁面上的編輯模式,請按一下頁面右上方的[編輯。

  2. 按一下並按住 [移動專案 > 按鈕,然後將磚或圖層拖曳到您想要的地方。

    Hero Move 專案

將 Hero 網頁部分放在一欄

Hero 網頁部分是設計用來使用頁面的完整寬度。 如果您希望 Hero 網頁元件沒有全寬,您可以將它新增到非完整寬度的欄。

請觀看這段影片,瞭解其執行步驟,或按照影片下方的步驟進行。

您的瀏覽器不支援視訊。
  1. 如果您尚未處於編輯模式,請按一下頁面右上方的[編輯。

  2. 將滑鼠停留在 [Hero 網頁部分上方,然後按一下網頁部分左側的圓圈+

  3. 節版面配置下,選取一欄。

    一欄
  4. 在網頁部分的左側,使用移動網頁部分按鈕將Hero 網頁部分拖曳到您剛剛新增的欄中。

    移動網頁部分按鈕

    移動英雄

新增空白的 Hero 網頁元件至頁面

您可以在小組網站或通訊網站中的頁面新增主網頁元件 。 若要這麼做:

  1. 如果您尚未進入頁面上的編輯模式,請按一下頁面右上方的[編輯。

  2. 在頁面上,將滑鼠移到現有網頁部分的上方或下方,就會看到一行有圓圈 +的線條,如下所示:

    用於將網頁組件新增至頁面的加號

    按一下 [ +,然後選擇 [Hero 網頁部分。

    空白狀態中的 Hero 網頁部分
  3. 按一下網頁 網頁組件編輯按鈕 按鈕,然後選取您想要的版面配置類型 -可能會使用 1 到 5 個磚的格線,或 1 到 5 個垂直圖層。

  4. 針對 您想要變更 的每一個磚,按一下 [選取連結。

  5. 針對每一個磚,在工具箱中,按一下 [選取,然後選擇要取得連結的位置:

    在工具箱中, 按一下 [變更,然後選擇要取得連結的位置:

    檔案選擇器選項的影像。
    • 最近:如果您最近開啟的影像、頁面或檔,會發現它們列在這裡。

    • Web 搜尋:您可以在使用 Creative Common 授權Bing尋找來自網站的影像。 在將影像插入頁面之前,您有責任先檢查影像的授權。 SharePoint 只Microsoft 365中。

    • 您的組織:如果貴組織已指定一組核准的資產,您可以在這裡選擇該集合。  如果您是系統管理員,SharePoint瞭解如何為貴組織建立資產庫,請參閱建立組織資產庫

    • OneDrive:您可以取得儲存在文檔或影像上OneDrive。 SharePoint 只Microsoft 365中。

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

    • Upload:您可以從個人裝置上傳檔或影像。

    • 從連結:在 OneDrive 中輸入頁面、檔或 SharePoint Microsoft 365。

  6. 選取您的影像、頁面或檔,然後按一下 [ 開啟

  7. 在工具箱 的影像下,選取自訂 影像僅色彩。 自動 選取選項 會自動從您連結的頁面或檔中選取影像 ,如果可用。 只有磚 版面配置才能使用色彩,而且色彩會對應到您的網站主題色彩。

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

  9. (SharePoint選項Microsoft 365中) :

    • 您可以將 切換開關切換 為是,以顯示動作通話 連結。 然後 新增您的動作 (文字,例如「深入瞭解」) 。 分層版面配置中每個圖層都提供動作要求連結,但僅適用于磚式版面配置中最大的磚。

    • 如果是分層版面配置,您也可以將主題標題的切換開關切換為是,以顯示每一層的主題標題。 然後新增您的 主題標題文字

Hero 網頁部分的影像縮放比例

若要為 Hero 網頁部分選擇最佳大小的影像,請考慮下列事項:

  • 網頁部分是專為配合螢幕寬度而設計,以完整出血的版面配置。

  • 版面配置中,網頁部分的高度會按比例調整為遵循 8:3 的長寬比,而網頁部分內的影像會縮放為 4:3 的長寬比。

  • 在圖層 版面 配置中,個別圖層會縮放至 8:3 的長寬比,而每一層比例內的影像會縮放至接近 9:16 的長寬比。

附註: 您可以新增影片的連結,或將影片上傳至 Hero 網頁元件。 不過,影片無法在網頁部分內播放。 使用者可以按一下影片的連結,然後帶至視音訊播放者或連結來源來觀看影片。

需要更多協助?

增進您的 Office 技巧
探索訓練
優先取得新功能
加入 Office 測試人員

這項資訊有幫助嗎?

×