在We.Retail中尝试响应式布局

所有We.Retail页面都使用布局容器组件来实现响应式设计。 布局容器提供了段落系统,允许您将组件放置在响应式网格内。 此网格可以根据设备/窗口大小和格式重新安排布局。该组件与页面编辑器中的​布局​模式结合使用,该模式允许您根据设备创建和编辑响应式布局。

尝试

  1. 在语言主控分支的“体验”部分编辑北极冲浪页面。

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

  2. 切换到​预览​可查看页面呈现给网站访客的方式。 向下滚动到文章​Aloha spirits in Norway​的内容。

    chlimage_1-178

  3. 调整浏览器窗口的大小并观察布局如何动态调整为调整大小。

    chlimage_1-179

  4. 切换到布局模式。 模拟器工具栏会自动显示,允许您根据目标设备规划布局。

    选择组件后,编辑菜单中会显示浮动和隐藏选项以及组件的调整大小手柄。

    chlimage_1-180

  5. 抓取并拖动组件的调整大小控制滑块会自动显示布局网格,以帮助您调整大小。

    chlimage_1-181

更多信息

有关详细信息,请参阅创作文档响应式布局或管理员文档配置布局容器和布局模式以获得完整的技术详细信息。

在此页面上