在流程与付费墙编辑工具中添加文字和列表并设置样式

只需单击即可添加标题、段落或列表,设置样式以匹配品牌风格,并使用动态变量为每位用户个性化内容。

一键重写标题文案。

让 AI 编辑器帮你重写文案、突出免费试用,或一次性精简页面上的所有文本元素。

Explore the AI Editor

设置文字样式

Styles 面板包含常见标题和功能的预配置文字样式。每种文字样式具有以下设置:

  • 字体系列
  • 字重
  • 字号
  • 行高
  • 字间距

如需编辑样式,点击对应条目,修改设置后点击 Save。

添加文字元素时,可以选择在此处配置好的样式。

Important

对样式的修改会应用到所有使用该样式的文字元素,跨所有屏幕生效。

创建新样式的步骤:

  1. 打开 Styles 面板。
  2. 在面板标题栏中,点击 Create style。
New text style
  1. 将 Type 设置为 Text,输入名称,并配置排版设置。

    Text style configuration options
  2. 点击 Create。

添加文本

添加文本元素的步骤:

  1. 点击左上角的 +,选择 Text,然后从预设或自定义的文本样式中选择一种。
New text
  1. 点击新元素,在右侧 Design 面板的 Content 区域编辑其内容。
  2. 如有需要,在 Design 面板中调整排版属性。或者,在预览中选中文本,通过弹出的工具提示快速自定义样式。
  3. 可选操作:在 Design 和 Interaction 面板中,你还可以为流程中的组件应用其他可用配置。详情请参阅样式与外观。
Tip

如果需要在多个屏幕上使用同一个文本元素,可以复制粘贴:选中该元素,按 Ctrl+C(Mac 上按 ⌘+C),切换到另一个屏幕,再按 Ctrl+V(Mac 上按 ⌘+V)粘贴。

文本元素设置

修改部分文本的样式

Warning

Bold 和 Italic 对自定义字体不起作用,除非该字体族包含粗体或斜体字形。请自行上传相应字形。

如需只修改文本元素中部分内容的样式:

  1. 在 Content 区域中选中文本元素的某一部分。
  2. 在弹出的工具提示中,修改文本颜色,或应用粗体、下划线、斜体、删除线格式,也可以添加 URL。

预览区域会立即更新。

编辑文本部分

添加旧价格

旧价格元素会在产品实际价格旁显示一个虚高的”原价”,让折扣一目了然。它会将产品价格乘以你设定的倍数,并自动添加删除线效果。

该元素的内容无需手动编辑。其数值在运行时根据产品的商店价格动态计算,因此货币单位始终与实际价格保持一致。

添加旧价格的步骤:

  1. 点击左上角的 +,选择 Text,然后选择 Old Price。

    展开了 Text 类别的元素菜单,显示 Old Price 项目
  2. 在 Layers 面板中,将元素拖入产品卡片内。该元素同样适用于已保存为可复用组件的产品卡片。

    Important

    Old Price 元素必须放在产品卡片内——价格取自该卡片对应的产品。若放在产品卡片之外,编辑工具将显示”Old price”占位符,而非实际价格。

  3. 在 Design 面板的 Price 区域中,设置 Multiplier。Adapty 会将产品价格乘以该值。例如,默认倍数为 2 时,售价 $12.99 的产品会显示划掉的 $25.98。

    Design panel with the Price section and the Multiplier field for an Old Price element
  4. 如需调整,请设置排版属性。该元素支持与普通文本相同的样式。

    画布上的产品卡片,显示旧价格被划掉并紧邻实际价格
Tip

如需划掉另一个产品的实际价格——例如在年度订阅卡片上显示月度计划的价格——请改用文本元素和变量来构建价格行。详见显示带折扣徽章的划掉价格。

排版属性

文本元素具有以下排版控制选项:

  • Font family:选择字体——内置字体或自定义字体。

    Warning

    不同设备内置的字体各不相同,同一字体在不同设备上的渲染效果也可能存在差异。如果设备上没有所选字体,系统将使用默认字体(SF Pro / Roboto)。要在所有设备上统一显示相同字体,请上传自定义字体。

  • Weight:设置字体粗细。

  • Size:设置字体大小(单位:像素)。

  • Color:设置文字颜色。

  • Line height:设置行间距,或保持 Auto 自动模式。

  • Alignment:设置水平对齐(左、中、右)和垂直对齐(上、中、下)。

  • Decoration:添加下划线或删除线。

  • Truncate:限制显示的行数,超出部分将被截断。当内容长度因动态变量或本地化而不同时,此选项非常实用。

以下设置无法保存为可复用的文字样式:

  • Color(颜色)
  • Alignment(对齐)
  • Decoration(装饰)
  • Truncate(截断)

为每个文本元素单独设置。

流程支持两种将文本转为可点击链接的方式,根据文本的用途选择即可:

  • 内联链接 — 适用于正文中嵌入的 URL,例如段落中的”了解更多”引用。始终在应用内浏览器中打开。
  • Open URL 操作 — 适用于独立的点击目标,例如服务条款按钮。可在应用内浏览器或外部浏览器中打开。

将文本元素的部分内容转换为链接:

  1. 在 Content 区域中选中文本。
  2. 在格式化工具提示中,点击链接图标。
  3. 将目标 URL 粘贴到弹出框中。
高亮显示链接按钮的格式化工具提示

打开 URL 操作

要将整个按钮变成链接:

  1. 添加一个 Button,或使用 Links 预设——这是一个包含 Restore / Terms of Service / Privacy Policy 按钮的现成行。

    The Links preset on canvas with Terms of use, Restore, and Privacy policy buttons
  2. 在 Layers 面板中选中该按钮,然后在右侧面板中打开 Interactions 标签页。

    Terms of Use button selected in the Layers panel, with the nested text element visible but unselected
  3. 为 Open URL 操作设置目标地址。

    Important

    空的 Open URL 操作会阻止预览和发布。

    Open URL action configuration in the Interactions panel

添加条件文本

条件文本会根据条件改变文本元素的显示内容。例如,当用户选择年度套餐时,标题可以显示一条消息;选择月度套餐时,则显示另一条消息。条件文本的工作方式类似于条件可见性,但它会替换内容,而不是显示或隐藏元素。

设置条件文本的步骤:

  1. 在画布上选择一个文本元素。
  2. 在 Design 面板的 Content 部分,选择 Conditional。
在设计面板中将内容设置为条件式
  1. 构建 if 条件。从 Custom、Products 或 Elements 标签页中选择一个属性,设置运算符,并输入要匹配的值。有关属性类型的详细信息,请参阅条件可见性。
  2. 在 then 下,输入当条件为真时要显示的文本。富文本格式设置方式与普通文本相同。如需插入变量或自定义标签,请点击 Add variable。
  3. 在 else 下,输入当没有条件匹配时显示的备用文本。
  4. (可选)点击 + Add else/if 添加更多条件,每个条件对应各自的文本。

如需翻译条件文本,请打开 Localizations 面板,每个分支都有对应的行。

设置包含 if、then 和 else 分支的条件文本

添加列表

Note

列表元素是由各个条目组件组成的容器。如果只需要在正文中添加简单的项目符号列表或编号列表,请使用文本元素,并通过 Design 面板设置所需格式。

  1. 点击左上角的 +,选择 List,然后选择一个列表模板。

  2. 在右侧的 Design 面板中编辑列表条目,或上传图片作为条目标记。

Add list element