使用布局模式调整组件的大小

交互式通信Web渠道创作界面允许您使用布局模式调整组件大小。 在列中拖放蓝色圆点以定义要放置组件的起始点和终点。 点按响应式网格中的组件后，将显示蓝色圆点。 响应式网格由12个相等的列组成。 替代列中的白色和蓝色底纹将一列与另一列区分开。

您可以使用布局模式调整所有设备类型（如台式机、平板电脑、手机和其他较小设备）的组件大小。 平板电脑自动从桌面版本导出布局配置，而较小的设备从手机导出布局配置。 但是，您可以覆盖自动派生的配置，以便为每种设备类型定义不同的配置。

注意

如果您使用将打印渠道作为交互式通信的主控来创建Web渠道，则可用于调整大小的组件还包括使用打印渠道在Web渠道中自动生成的子表单和字段。 Web渠道在“布局”模式下保留“打印”渠道元素的布局。

访问布局模式

从下拉列表中选择​布局 ，该下拉列表显示在​预览​选项旁边的交互式通信创作界面顶部。 表单将在布局模式下显示。

  1. 登录到AEM创作实例，然后导航到​Adobe Experience Manager > Forms > Forms和文档。

  2. 创建新的或打开现有的交互式通信。

  3. 从显示在​预览​选项旁边顶部的下拉列表中选择​布局。 表单将在布局模式下显示。

    交互式通信的布局模式

调整组件大小

  1. 在布局模式下，点按组件以调整大小。 蓝色圆点显示在响应式网格的开始和结束处。

  2. 拖放蓝色圆点以定义组件在响应式网格中的位置。

    使用布局模式调整大小

    点按组件后显示的工具栏包含以下选项：

    • 父项： 选择组件的父项。
    • 浮动到新行： 如果同一行中存在多个组件，请将组件移到下一行。

    您可以撤消所有调整大小的更改，并使用​还原断点布局（还原断点）选项将默认布局应用于包含已调整大小的组件的面板。 点按已调整大小的组件的父组件以查看选项。

    注意

    无法使用布局模式调整表列、工具栏、工具栏按钮和目标区域组件的大小。 使用样式模式调整这些组件的大小。

示例

目标： 要插入表组件和图像组件，并在交互式通信中将它们平行放置。

  1. 在交互式通信的Web渠道中使用编辑模式插入表和图像组件。 图像组件在表组件之后显示。

  2. 切换到布局模式，然后点按表组件。 用于调整组件大小的蓝色圆点显示在第1列和第12列。

  3. 将响应式网格的第12列蓝色圆点拖放到第6列。

    定义表的端点

  4. 同样，选择图像组件，并将响应式网格的第1列和第7列的蓝色圆点拖放到该位置。 表和图像组件彼此平行显示。

    在“布局”模式下并行的表和图像

    您可以选择图像组件，然后点按工具栏中提供的​浮动到新行​选项，以将图像组件移到下一行。

调整面板大小

如果要调整整个面板的大小而不是单个组件的大小，请执行以下步骤：

  1. 点按面板中要调整大小的任何组件，选择选择父项，然后在下拉列表中选择第一个选项（如果该面板是组件的直接父项）。

    蓝色圆点显示在响应式网格的开始和结束处。

  2. 拖放蓝色圆点以定义面板在响应式网格中的位置。
    您可以重复步骤1和2，然后选择选择父项以将调整大小的面板移到下一行。

为面板定义多列布局

执行以下步骤以定义面板的列数：

  1. 在​编辑​模式中，点按面板，选择配置，然后从​面板布局​下拉列表中选择​响应 — 页面上所有没有导航的内容​选项。

  2. 点按Save以保存属性。

  3. 在​布局​模式中，点按面板中的任意组件，选择选择父项，然后选择面板。

  4. 点按多列，然后从下拉列表中选择列数。 列数可以介于1到12之间。 该面板将分为多列布局。

布局模式中的多列

对于具有旧响应式布局的表单，禁用布局模式

您可以通过编辑表单中所用模板的属性，来禁用具有旧响应式布局的表单的布局模式。

执行以下步骤以禁用布局模式：

  1. 选择​工具 > 常规 > 模板​并在​编辑​模式下打开表单中使用的模板。

  2. 选择左窗格中的文档容器，然后点按​策略。

    禁用布局模式

  3. 点按​布局设置​选项卡，然后选择​禁用布局模式。

  4. 点按保存更改以保存模板属性。

在此页面上