为所有设备优化布局

可通过 Experience Builder 配置和创建用于 Web 体验的不同页面布局,以使这些布局能完美地适用于所有屏幕尺寸。 每个单独布局的配置均基于自适应设计,您可以在其中为大、中、小尺寸的屏幕创建独特的设计。 每种布局都是对体验的适应,从而能更加灵活地为应用程序自定义以及更好地利用不同的屏幕尺寸和内容。

模板专为多种屏幕尺寸而设计。 当您选择空白的全屏应用程序或空白的滚动页面模板时,将为中小屏幕设备启用自动布局。 这样可使得所有中小屏幕设备中的微件能与大屏幕设备中的微件保持同步,并自动进行排列。

要为中小屏幕设备创建单独的布局,请单击页面或窗口布局旁边的自定义按钮。 然后,可以针对选定屏幕设备手动排列微件和窗口并调整其大小。 要从小设备布局中移除微件或屏幕组,请单击其工具栏上的移至待定列表按钮 移至待定列表。 此操作会将微件或屏幕组从当前设备的画布上移除,但会保存其配置以便您在需要时,将其重新添加到布局中。 启用自定义布局选项后,任何被添加到其他设备模式的其他微件,都不会被添加到当前设备。 可以从插入微件面板上的待定选项卡中手动添加微件。

当编辑小屏幕设备的布局时,以下原本显示在画布上的大型配置面板将显示在构建器边距中:

  • “按钮”、“分隔线”和“视图导航”微件中的快速样式面板
  • 动态内容面板
  • “占位符”和“格网”微件中的添加微件面板
  • 页面、页眉、页脚、窗口、块和格网的选择模板面板

提示:

要测试不同屏幕尺寸和设备的布局,请在构建器工具栏上单击实时视图借助“实时视图”,可先确认内容是否已正确调整,然后再保存并发布该内容。 您还可以调整一些设置进行尝试以及操作交互式和动态微件以了解它们的工作方式。

提示:

要了解有关 Experience Builder 移动优化设置的更多信息,请尝试教程优化移动应用程序布局