在We.Retail中試用互動式版面

所有We.Retail頁面都使用「版面容器」元件來建置自適應設計。 版面容器提供段落系統,可讓您將元件定位在回應式格線中。 此格線可根據裝置/視窗大小和格式重新排列版面。 此元件與頁面編輯器中的 Layout (版面)模式搭配使用,可讓您根據裝置建立和編輯回應式版面。

試用

  1. 在語言主要分支的「體驗」區段中編輯「北極衝浪」頁面。

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

  2. 切換 「預覽」,可檢視對網站訪客呈現的頁面。 向下捲動至Norther Norway的 Aloha spirits文章內容

    chlimage_1-178

  3. 調整瀏覽器視窗大小,並隨著版面動態適應調整大小而觀看影片。

    chlimage_1-179

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

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

    chlimage_1-180

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

    chlimage_1-101

更多資訊

如需詳細資訊,請參閱編寫檔案 Responsive Layout ,或管理員檔案 Configuring Layout Container and Layout Mode ,以取得完整的技術詳細資訊。

本頁內容