跳到内容

配置应用内模板设置

这些设置一次性应用于整个应用内模板,而不是单个区块。首先在内置编辑器中打开或创建一个模板(Content → In-apps),然后如下文所述使用 Settings 和 In-app settings。

配置模板范围的样式

Anchor link to

模板设置控制整个应用内模板的样式:文档大小和背景、弹窗外观以及区块的默认样式。

在右侧面板中打开 Settings 选项卡。

右侧面板中从 Document 到 Divider defaults 的折叠设置部分

从共享外观开始,然后是大小,最后是新区块的默认值:

  1. 设置 Color scheme 和 Typography,使颜色和字体在整个模板中保持一致。
  2. 设置 Document 和 Popup,用于确定大小、边距、背景以及消息在变暗背景上的显示方式。
  3. 仅当您希望新区块自动匹配模板时,才使用默认值部分。

在画布上,当某个部分需要看起来不同时,可以更改单个区块。默认值适用于单个区块未覆盖它们的任何地方。要清除模板上的样式覆盖并返回默认值,请使用顶部栏 ⋮ 菜单中的 Reset custom styles。请参阅在内置编辑器中创建应用内消息。

文档和弹窗大小

Anchor link to

使用 Document 控制消息大小和画布间距。使用 Popup 控制消息在变暗背景上的显示方式。没有高度设置,弹窗会随着其内容增长。

在 Document 中,设置内边距、背景图片、区块之间的间隙以及图片的默认圆角半径。

要更改弹窗在手机上的宽度,请使用 Document 中的这两个字段。

Max width (px) 是弹窗允许的最大宽度,以像素为单位。在大屏幕上,弹窗不会超过这个数值。

Side gutters (px) 位于 Padding 正下方。它设置了弹窗左右两侧的空白区域。一个值适用于两侧。当您希望弹窗看起来更宽或更窄时,请更改此字段:

  • 增加数值以留出更多空白,使弹窗变窄。
  • 减小数值以使弹窗变宽。
  • 输入负数,编辑器会将其视为 0。
Document 打开,Max width、Padding、Side gutters 均为 0 px,并显示有效宽度提示

新模板的 gutters 初始值为 0 px,因此弹窗会填满屏幕宽度。

查看 Max width 下方的提示,了解在当前值下弹窗的宽度。

在 Popup 中,设置圆角半径和覆盖层颜色,以确定消息在变暗背景上的显示方式。

设置面板中的 Popup 设置,包括圆角半径和覆盖层颜色

配色方案和排版

Anchor link to

在 Color scheme 中,设置命名的颜色角色(标题、强调色、链接、背景、边框等)。这些角色会一次性更新整个模板的颜色。现有区块会保留您已在这些区块上设置的颜色。

在 Typography 中,设置模板中文本的默认字体系列和大小。

深色模式变体

Anchor link to

Dark mode variant 允许您为模板在深色模式下显示时设置第二套颜色。

  1. 在 Color scheme 中,打开 Dark mode variant。
  2. 为深色模式设置单独的颜色。
  3. 在编辑时,使用顶部栏的 太阳/月亮图标 来检查浅色与深色模式。

此画布切换开关与只读的 Preview 面板不同。在您设置自己的深色之前,该开关可以自动推导它们。请参阅在内置编辑器中创建应用内消息。

Color scheme 部分,已启用 Dark mode variant,并在 Settings 中显示深色颜色角色

区块和布局默认值

Anchor link to

使用这些部分,可以使新内容与模板匹配,直到您在画布上为区块设置样式:

  • Block defaults: 您稍后添加的区块的共享初始样式。
  • Columns defaults: 每个 Columns 布局的间距(外边距、每列内的内边距以及列之间的间隙)。
  • Card defaults: 用于在布局中对内容进行分组的 Card 容器的初始外观。
  • Button group defaults: 当多个按钮作为一组放在一起时的间距和对齐方式。
  • Button defaults: 新 Button 区块的初始外观,以使 CTA 在整个模板中保持一致。
  • Divider defaults: 新 Divider 区块的初始线条样式、颜色、粗细和宽度。

在 Settings 中完成后,点击顶部栏的 Save 以保存模板更改。

配置应用内在设备上的外观

Anchor link to

In-app settings 控制消息在设备上的显示和行为:位置、动画、滑动手势和关闭按钮。位置、动画和滑动适用于 iOS 和 Android Native。关闭按钮的样式不同,它与此模板一起存储,并在显示该消息的每个平台上显示。

点击顶部栏中的 In-app settings。

编辑器顶部栏中 Undo Redo 和 Save 之间的 In-app settings 按钮

屏幕上的位置

Anchor link to

选择 Fullscreen、Top、Center 或 Bottom。

对于全屏消息,还需按照 Document 下的说明在 Document 中设置 Max width。

In-app settings 屏幕位置选项 Fullscreen Top Center Bottom
  • Present Animation / Close Animation: None、Fade、Left、Right、Up 或 Down。选择 Default 以使用您的应用已用于应用内消息的相同打开/关闭动画。
  • Animation Duration (MS): 100 到 3000 毫秒。留空以保持您的应用的常规计时。
In-app settings Present Animation Close Animation 和 Animation Duration 字段

滑动关闭

Anchor link to

启用 Left、Right、Up 和 Down 的任意组合。

In-app settings Swipe to Close 选项,包括 Left Right Up 和 Down

关闭按钮

Anchor link to

打开或关闭 Show close button。

打开时,设置:

  • Position: Top right、Top left、Bottom right 或 Bottom left。
  • Background: 一种颜色或 Transparent。
  • Corner radius: 使关闭按钮背景的角变圆。仅当 Background 是颜色(而不是 Transparent)时可用。设置 0–16 px。16 px 形成一个圆形(默认)。0 px 形成一个正方形。
  • Icon Color: 关闭图标的颜色。
  • Margin: 关闭按钮每侧的空间(Top、Right、Bottom、Left)。
In-app settings Show close button,包含 Position Background Corner radius Icon Color 和 Margin

与位置、动画和滑动不同,关闭按钮的样式与此模板一起存储,并在显示该消息的每个平台上显示,而不仅仅是在 iOS 和 Android Native 上。

  1. 点击 Apply 保存您的 In-app settings 选择,或点击 Cancel 放弃它们。
  2. 在保存前,从顶部栏 ⋮ 菜单中打开 Preview,检查位置、动画和关闭按钮。
  3. 点击顶部栏的 Save 以存储模板。