在We.Retail中嘗試回應式版面

所有We.Retail頁面都使用「版面容器」元件來實作回應式設計。 版面容器提供段落系統,可讓您將元件置於回應式格線內。 此網格可根據設備/窗口大小和格式重新排列佈局。 此元件在頁面編輯器中與​Layout​模式搭配使用,可讓您根據裝置建立和編輯您的回應式版面。

嘗試

  1. 在語言主分支的「體驗」部分編輯「北極衝浪」頁。

    http://localhost:4502/editor.html/content/we-retail/language-masters/en/experience/arctic-surfing-in-lofoten.html

  2. 切換至​預覽,以查看將呈現給網站訪客的頁面。 向下捲動至挪威北部​的「Aloha sirits」文章的內容。

    chlimage_1-178

  3. 調整瀏覽器視窗的大小,並隨著版面隨調整大小而動態調整。

    chlimage_1-179

  4. 切換至「配置」模式。 模擬器工具列會自動顯示,讓您可依目標裝置來規劃版面。

    選取元件會在編輯選單中顯示浮動和隱藏選項,以及調整元件的控點大小。

    chlimage_1-180

  5. 抓取並拖曳元件的大小調整控制滑塊會自動顯示版面網格,以協助您調整大小。

    chlimage_1-181

更多資訊

有關詳細資訊,請參閱創作文檔響應式佈局或管理員文檔配置佈局容器和佈局模式以了解完整的技術詳細資訊。

本頁內容