使用 [英雄] 網頁元件

使用 [英雄] 網頁元件讓您的頁面具有焦點和視覺效果。 您最多可以在 [英雄] 網頁元件中顯示五個專案, 並使用引人注目的影像、文字和連結來吸引注意力。 [主圖] 網頁組件預設會包含在通訊網站中,但您也可以將 [主圖] 網頁組件新增到其他頁面。

附註: 

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

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

內容

通訊網站上的 [英雄] 網頁元件: 主題與展示

當您建立通訊網站時, [英雄] 網頁元件預設會包含在您的頁面上。 它會預先填入預設影像、您變更的文字和連結, 以展示您自己的影像、文字、頁面、連結或檔。

當您針對您想要的通訊網站類型選取 [主題] 時, 預設的 [英雄] 是具有五個磚的平鋪版面配置 (您可以從1變更為5個):

通訊網站上的 [英雄] 網頁元件

當您針對您想要的通訊網站類型選取 [展示] 時, 預設的 [英雄] 是具有三個圖層的垂直版面配置 (您可以從一到五個圖層變更):

展示英雄

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

[英雄編輯] 按鈕

1. [編輯網頁元件] 按鈕

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

變更 [英雄] 網頁元件的版面配置

請觀看這段影片, 瞭解如何完成, 或遵循影片下方的步驟進行。

您的瀏覽器不支援視訊。 請安裝 Microsoft Silverlight、Adobe Flash Player 或 Internet Explorer 9。
  1. 如果您沒有在頁面上的 [編輯] 模式中, 請按一下頁面右上角的 [編輯]。

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

    [英雄版面配置] 選項 [英雄版面配置] 選項

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

請觀看這段影片, 瞭解如何完成, 或遵循影片下方的步驟進行。

您的瀏覽器不支援視訊。 請安裝 Microsoft Silverlight、Adobe Flash Player 或 Internet Explorer 9。
  1. 如果您沒有在頁面上的 [編輯] 模式中, 請按一下頁面右上角的 [編輯]。

  2. 按一下您想要變更之磚或圖層右下方的 [編輯詳細資料] 編輯詳細資料

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

    檔案選擇器選項的影像。
    • [最近]: 如果您最近開啟了影像、頁面或檔, 您會在這裡列出這些檔案。

    • 網頁搜尋: 您可以從 Bing 中找到利用創造性常見授權的影像。 在您將影像插入頁面前, 您必須先查看其授權。 [僅SharePoint Online ]。

    • 貴組織: 如果您的組織已指定一組核准資產, 您可以從這裡設定的專案中進行選擇。  如果您是 SharePoint 系統管理員, 而且想要瞭解如何為您的組織建立資產庫, 請參閱建立組織資產庫

    • OneDrive: 您可以取得儲存在 OneDrive 上的檔或圖像的連結。 [僅SharePoint Online ]。

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

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

    • 從連結: 從商務用 OneDrive 或 SharePoint Online 輸入頁面、檔或影像的連結。

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

  5. 在工具箱中的 [影像] 底下, 選取 [自訂圖像] 或 [只有色彩] (只有磚版面配置才可以使用 [色彩], 而色彩會對應到您的網站主題色彩)。

    自動選取的選項會自動選取您要連結的頁面或檔中的影像 (如果有的話)。

  6. 輸入影像的替代文字

  7. 在 [選項] 底下:

    • 您可以將切換開關切換為[是], 以顯示 [動作] 連結。 然後新增您對動作文字的通話(例如, 「深入瞭解」)。 在分層版面配置中, 每個圖層都可以使用 [呼叫動作] 連結, 但在磚版面配置中則只適用于最大的磚。

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

變更影像的焦點

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

  1. 如果您沒有在頁面上的 [編輯] 模式中, 請按一下頁面右上角的 [編輯]。

  2. 在您要變更的 [英雄] 影像底部的工具列上, 按一下 [設定焦點] [設定焦點] 按鈕

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

    焦點

重新排序磚或圖層

您可以將磚或圖層移至您想要的位置, 以重新排序。

  1. 如果您沒有在頁面上的 [編輯] 模式中, 請按一下頁面右上角的 [編輯]。

  2. 按一下並按住 [移動專案] 按鈕, 然後將磚或圖層拖曳至您想要的位置。

    [英雄] 移動專案

將 [英雄] 網頁元件放在一欄中

[英雄] 網頁元件的設計目的是要佔用整個頁面的寬度。 如果您想要讓 [英雄] 網頁元件不佔用完整寬度, 您可以將它移至不是全形的欄中。

請觀看這段影片, 瞭解如何完成, 或遵循影片下方的步驟進行。

您的瀏覽器不支援視訊。 請安裝 Microsoft Silverlight、Adobe Flash Player 或 Internet Explorer 9。
  1. 如果您還沒有處於 [編輯] 模式, 請按一下頁面右上角的 [編輯]。

  2. 將滑鼠游標暫留在 [英雄] 網頁元件的正上方, 然後按一下網頁元件左邊圓圈的 [ + ]。

  3. 選取 [節版面配置] 底下的 [一欄]。

    一欄
  4. 在網頁元件的左側, 使用 [移動網頁元件] 按鈕, 將 [英雄] 網頁元件拖曳到您剛新增的欄中。

    [移動網頁元件] 按鈕

    移動英雄

新增空白的英雄網頁元件至頁面

您可以將 [英雄] 網頁元件新增至小組網站通訊網站中的頁面。 方法如下:

  1. 如果您沒有在頁面上的 [編輯] 模式中, 請按一下頁面右上角的 [編輯]。

  2. 在您的頁面上, 將滑鼠游標暫留在現有網頁元件的上方或下方, 您會看到一條含有圓圈的 [ +], 如下所示:

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

    按一下 [ +], 然後選擇 [英雄] 網頁元件。

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

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

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

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

    檔案選擇器選項的影像。
    • [最近]: 如果您最近開啟了影像、頁面或檔, 您會在這裡列出這些檔案。

    • 網頁搜尋: 您可以從 Bing 中找到利用創造性常見授權的影像。 在您將影像插入頁面前, 您必須先查看其授權。 [僅SharePoint Online ]。

    • 貴組織: 如果您的組織已指定一組核准資產, 您可以從這裡設定的專案中進行選擇。  如果您是 SharePoint 系統管理員, 而且想要瞭解如何為您的組織建立資產庫, 請參閱建立組織資產庫

    • OneDrive: 您可以取得儲存在 OneDrive 上的檔或圖像的連結。 [僅SharePoint Online ]。

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

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

    • 從連結: 從商務用 OneDrive 或 SharePoint Online 輸入頁面、檔或影像的連結。

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

  7. 在工具箱中的 [影像] 底下, 選取 [自訂圖像] 或 [僅彩色]。 自動選取的選項會自動選取您要連結的頁面或檔中的影像 (如果有的話)。 [僅限色彩] 僅適用于磚版面配置, 色彩會對應到您的網站主題色彩。

  8. 輸入影像的替代文字

  9. 在 [選項] 底下 (僅限SharePoint Online ):

    • 您可以將切換開關切換為[是], 以顯示 [動作] 連結。 然後新增您對動作文字的通話(例如, 「深入瞭解」)。 在分層版面配置中, 每個圖層都可以使用 [呼叫動作] 連結, 但在磚版面配置中則只適用于最大的磚。

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

[英雄] 網頁元件中的圖像縮放比例

若要為 [英雄] 網頁元件選擇最佳大小的影像, 請考慮下列事項:

  • 網頁元件的設計目的是在整個版面配置中調整畫面的寬度。

  • 版面配置中, 網頁元件的高度會調整為遵循8:3 的長寬比, 且網頁元件中的圖像會縮放至4:3 的長寬比。

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

附註: 您可以將連結新增至影片, 或將影片上傳到 [英雄] 網頁元件。 不過, 無法在網頁元件中播放影片。 使用者可以按一下影片連結, 然後移至影片播放機或連結來源, 以觀看影片。

附註:  本頁面是經由自動翻譯而成,因此文中可能有文法錯誤或不準確之處。 讓這些內容對您有所幫助是我們的目的。 告訴我們這項資訊是否有幫助? 這裡是供您參考的英文文章

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

這項資訊有幫助嗎?

感謝您的意見反應!

感謝您的意見反應! 我們將協助您與我們的其中一個 Office 支援專員連絡以深入了解您的意見。

×