共用方式為


內容區塊模組

備註

Dynamics 365 Commerce 的零售興趣群組已從 Yammer 移至 Viva Engage。 如果您無法存取新的Viva Engage社群,請填寫此表單 (https://aka.ms/JoinD365commerceVivaEngageCommunity) 以新增,並繼續參與最新的討論。

本文涵蓋內容區塊模組,並說明如何在 Microsoft Dynamics 365 Commerce 中將它們新增到網站頁面。

內容區塊模組用於透過圖像和文字的組合來行孝產品或促銷。 例如,零售商可以將內容區塊模組新增到電子商務網站的首頁,以促銷新產品並吸引客戶的注意力。

內容區塊模組由內容管理系統 (CMS) 中的資料驅動。 它是一個獨立的模組,不依賴頁面上的任何其他模組。 內容區塊模組可以放在零售商想要行銷或促銷某些內容 (例如產品、銷售或功能) 的任何網站頁面上。

電子商務中的內容區塊模組範例

  • 可以在電子商務網站的首頁上使用內容區塊模組來突出顯示促銷和新產品。
  • 內容區塊模組可用於產品詳細資訊頁面上,以展示關於產品資訊。
  • 可以將多個內容區塊模組放入輪播模組中,以突出顯示多個產品或促銷活動。

內容區塊模組和主題

內容區塊模組可以根據主題支援各種不同的版面配置和樣式。 例如,Fabrikam 主題支援內容區塊的三種版面配置變體:主圖、功能和圖格。 主圖版面配置在背景上顯示帶有文字疊加的圖像。 功能版面配置並排顯示圖像和文字。 圖格版面配置允許圖格格式的多個內容區塊。

此外,主題可以為每個版面配置公開不同的屬性。 主題開發人員可以使用內容區塊模組建置具有更多樣式的更多版面配置。

下圖顯示具有主圖版面配置之內容區塊模組的範例。

主圖模組範例。

下圖顯示具有功能版面配置之內容區塊模組的範例。

功能模組範例。

內容區塊模組屬性

屬性名稱 描述
影像 影像檔案 圖像可用來展示一件產品或一個促銷。 可以將圖像上傳到圖庫,也可以使用現有圖像。
標題 標題文字和標題標籤 ( H1H2 H3 H4 H5,或 H6) 每個主圖模組都可以有一個標題。 根據預設,H2 標題標籤用於標題。 但是,可以變更標籤以符合協助工具要求。
段落 段落文字 主圖模組支援富文字格式的段落文字。 支援一些基本的富文字功能,例如,粗體、底線和斜體文字和超連結。 套用到模組的頁面主題可以覆寫其中一些功能。
連結 連結文字、連結 URL、無障礙豐富網際網路應用程式 (ARIA) 標籤和在新索引標籤中開啟連結 主圖模組支援一或多個「行動呼籲」連結。 如果新增連結,則需要連結文字、URL 和 ARIA 標籤。 ARIA 標籤應具有描述性,以符合協助工具需求。 可以設定連結,以便在新索引標籤上打開它們。

Fabrikam 主題公開的內容區塊模組屬性

屬性名稱 描述
文字位置 置中 此屬性定義文字在圖像上的位置。 它僅適用於主圖版面配置。
文字主題 淺色深色 可以根據背景圖像為文字定義色彩搭配。 例如,如果圖像具有深色背景,則可以套用淺色主題以使文字更明顯,並滿足顏色對比度以實現協助工具功能。 它僅適用於主圖版面配置。
影像位置 此屬性指定圖像應位於文字的左側還是右側。 它僅適用於功能版面配置。

將內容區塊模組新增到新頁面

要將英雄模組加入新頁面並設定所需屬性,請依照以下步驟操作:

  1. 移至範本,然後建立名為內容區塊範本的頁面範本。
  2. 在預設頁面插槽中 ,新增主圖模組。
  3. 選取儲存,選取完成編輯以簽入範本,然後選取發佈以進行發佈。
  4. 使用您剛建立的主圖範本來建立名為內容區塊頁面的頁面。
  5. 在預設頁面的主要插槽中,,選取省略符號按鈕 (...),然後選取新增模組
  6. 選取模組對話方塊中,選取主圖模組,然後選取確定
  7. 在左側的樹狀圖中,選取內容區塊模組。
  8. 在右側屬性窗格中,選取新增圖像。 然後選取現有圖像或上傳新圖像。
  9. 選擇標題
  10. 標題對話方塊中,新增標題文字,選取標題等級,然後選取確定
  11. 富文字底下,根據需要新增文字。
  12. 選取新增連結
  13. 連結對話方塊中,新增連結文字、連結 URL 和連結的 ARIA 標籤,然後選取確定
  14. 選取主圖版面配置。
  15. 選取儲存,然後選取預覽版以預覽頁面。
  16. 選取完成編輯以簽入範本,然後選取發佈進行發佈。

其他資源

模組庫概觀

促銷橫幅模組

輪播模組

文字方塊模組

影片播放器模組