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

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

正在尝试

  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-181

更多信息

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

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now