---
title: "元素样式"
description: "配置元素的视觉外观，包括填充、边框、效果、排版、状态和全局样式。"
---

右侧面板中的 **Design** 标签页用于控制每个元素的视觉外观。可用属性因元素类型而异，但大多数元素共享通用的样式选项。
## 尺寸与间距 \{#size-and-space\}

:::link
主要文章：[元素定位](manage-paywall-ui-elements)
:::
### 可见性 \{#visibility\}

**Visibility** 开关用于控制元素是否在屏幕上显示。
* Show **Show**（默认）：元素始终可见。
* Conditional **Conditional**：仅在满足特定条件时元素才可见。详情请参阅[条件可见性](onboarding-element-visibility)。
* Hide **Hide**：元素始终隐藏。当你想临时从流程中移除某个元素而不删除它时，可使用此选项。
### 尺寸 \{#sizing\}

每个元素都有 **Width** 和 **Height** 控件，支持三种模式：

* **Fill**：拉伸以占满父容器的所有可用空间
* **Hug**：收缩以适应元素内容
* **Fixed**：为尺寸设置精确的像素值

### 间距 \{#spacing\}

**Spacing** 部分以盒模型的形式展示两个层级：

* **Margin**：元素与相邻元素之间的间距。无论设置多大，都不会超出父容器的边界。
* **Padding**：元素边框与其内容之间的间距。

可以为每一侧单独设置数值。

:::note
文本元素只有 margin，屏幕只有 padding。容器及其他含有子内容的元素则两者都可使用。
:::
## 填充 \{#fill\}

**Fill** 部分用于控制元素的背景。共有四种填充类型：纯色、渐变、图片和视频。

使用此属性可为整个屏幕设置主图或主视频。
* **纯色** Solid color。使用颜色选择器、输入十六进制值，或指定[项目级颜色样式](#color-styles)。调整**不透明度**可使背景呈半透明效果。
* **渐变** Gradient。添加包含两个或更多色标的渐变填充。拖动色标可调整过渡效果，修改渐变角度可控制渐变方向。

* **Image** Image 或 **Video** Video。将[图片/视频](custom-media)设置为元素的背景。
## 边框 \{#border\}

边框默认关闭。点击右侧面板中 **Border** 旁边的 Plus 可添加边框。若要移除边框，点击 **Border** 标题旁边的 Close。

添加边框后，可配置以下选项：

* **Color**：使用拾色器、输入十六进制值，或指定[项目级颜色样式](#color-styles)。调整**透明度**可使边框呈半透明效果。
* **Width**：边框粗细，单位为像素。

## 圆角 \{#corners\}

**圆角**部分用于控制边框圆角半径。

* **圆角滑块**：为四个角设置统一的圆角半径
* **单独设置切换** Per Corner：启用后可为每个角单独设置不同的圆角半径
## 效果 \{#effects\}

点击 **Effects** 旁边的加号按钮 Plus 可添加一个或多个视觉效果：

* **Drop shadow**：元素背后的阴影
* **Inner shadow**：元素边界内的阴影
* **Background blur**：模糊背景
* **Layer blur**：模糊元素及其子元素

同一元素可叠加多个效果。点击可见性图标 Show 可临时禁用某个效果。

## 动画 \{#animation\}

点击 **Animation** 旁边的 Plus 按钮，即可添加动画效果。目前仅支持 **Pulse** 动画——元素会周期性地放大缩小，以吸引用户注意。

通过以下参数配置 Pulse 动画：
| 参数 | 说明 |
|-----------|-------------|
| Scale amount (%) | 元素相对于原始大小的缩放比例 |
| Duration (ms) | 单次动画循环的时长 |
| Delay between loops (ms) | 两次循环之间的停顿时长 |
| Shadow color | 脉冲阴影效果的颜色 |
| Shadow size (px) | 脉冲阴影的大小 |

### 预览动画 \{#preview-the-animation\}

编辑工具默认显示静态界面——动画效果不会播放，需要手动开启。有两种方式：

- 点击设备预览上方的 **Toggle animations** Toggle animations 按钮，可以开启或关闭当前界面的动画效果。开启后动画会持续循环播放，再次点击即可停止。只有当前界面包含至少一个动画时，该按钮才会显示。
- 打开界面的[上下文菜单](paywall-layout-and-products#screen-actions)（界面图层旁边的三点图标），选择 **Play Animation**。
## 外观 \{#appearance\}

* **Opacity**：范围从 0%（完全透明）到 100%（完全不透明）
* **Rotation**：输入角度值来旋转元素
## 排版属性（文本元素）\{#typography-properties-text-elements\}

文本元素会显示一个**排版**部分，包含以下控件：
### 字体 \{#font\}

:::link
另请参阅：[自定义字体](using-custom-fonts-in-paywall-builder)
:::

点击字体下拉框 Font select 打开字体选择器。它有两个标签页：

* **Styles**：列出项目中已保存的[文字样式](#text-styles)。选择某个样式可一次性应用其全部排版设置。
* **Fonts**：列出所有可用的字体系列。可搜索或滚动查找所需字体。
### 大小与字重 \{#size-and-weight\}

* **Weight**：从下拉菜单中选择字重
* **Size**：从下拉菜单中选择字号，或手动输入自定义值
### 颜色 \{#color\}

点击色块可打开颜色选择器。你可以输入十六进制值、使用调色板，或从[可复用样式](#reusable-styles)中选择。拖动不透明度滑块可让文字呈现半透明效果。
### 对齐方式 \{#alignment\}

两组对齐控件：

* **水平方向**：左对齐 Align left、居中 Align center、或右对齐 Align right
* **垂直方向**：顶部对齐 Align top、居中 Align middle、或底部对齐 Align bottom
### 装饰 \{#decoration\}

* **无** None：无装饰（默认）
* **下划线** Underline：为文字添加下划线
* **删除线** Strikethrough：为文字添加删除线
### 截断 \{#truncation\}

启用截断功能，可在文本超出 **Max Lines** 设置时自动裁切。这在支持多语言时非常实用：如果译文比原文长，截断可以防止布局被撑乱。

:::note
选中文本元素后，画布上方会出现一个**内联工具栏**。通过它可以快速设置字体、字重、大小和对齐方式，无需在右侧面板中滚动查找。
:::

## 状态专属设置（交互元素）\{#state-specific-settings-interactive-elements\}

交互元素支持多种视觉状态。选中此类元素后，右侧面板会出现 **States** 区域。切换不同状态，即可为每个状态单独配置视觉属性。

每个状态都可以覆盖任意视觉属性——填充、边框、字体颜色、透明度等。
### 可选状态 \{#selectable-states\}

:::link
主要文章：[可选元素](flow-selectable-elements)
:::

属于可选组的元素（测验选项、产品、标签页、试用切换开关）默认提供两种状态：

* **Default**：元素的正常外观
* **Selected**：用户选中该选项后的外观。可覆盖填充色、边框颜色和文字颜色等属性，以突出显示当前激活的选项
要在不可交互时为可选元素设置样式，需手动添加第三种状态。打开 **States settings** Settings 并添加 **Disabled state**。

**Disabled** 状态由条件驱动。选中该状态后，点击 **Set conditions** set conditions 来定义元素在运行时何时变为禁用状态，例如当必填字段为空时。
### 输入状态 \{#input-states\}

输入字段提供以下额外状态：

* **Default**：正常、未聚焦的外观
* **Active**：字段已聚焦，可以输入内容
* **Invalid**：输入的值未通过验证
* **Disabled**：字段不可交互

### 其他具有状态样式的元素 \{#other-state-bearing-elements\}

部分元素的状态样式不遵循标准的**默认 / 已选中 / 已禁用**模式：

- **[进度指示器步骤](builder-loaders-and-progress-bars#step-states)** — 每个步骤有三种状态：**Completed**、**Current** 和 **Upcoming**。
- **[轮播图圆点](builder-containers#dots)** — 两种颜色变体：**Color** 用于非活跃圆点，**Active Color** 用于当前幻灯片的圆点。
## 可复用样式 \{#reusable-styles\}

左侧边栏中的 **Styles** Styles 面板可让你定义适用于整个流程的可复用样式。目前支持两种样式类型：文本样式和颜色样式。若要启用深色模式支持，必须使用颜色样式。
### 文字样式 \{#text-styles\}

:::link
主要文章：[文字内容](onboarding-text)
:::

文字样式存储了一套完整的排版设置，包括字体系列、字重、字号、行高、对齐方式和装饰效果。每个流程模板都包含默认预设，你也可以创建自定义样式。

创建文字样式的步骤：
1. 打开 **Styles** Styles 面板，选择 **Text** 标签页。
2. 点击 **Plus Create style**。
3. 输入名称并配置排版设置。
4. 点击 **Create**。

如需应用文字样式，请选中一个文字元素，然后在 **Typography** 区域的字体下拉菜单中选择对应样式。

### 颜色样式 \{#color-styles\}

颜色样式是可以在整个流程中引用的命名颜色。每种颜色样式都有名称（如"Primary text"或"Brand"）、十六进制值，以及显示有多少元素引用了它的使用计数。

创建颜色样式：

1. 打开 **Styles** Styles 面板，选择 **Colors** 标签页。
2. 点击 **Plus Create style**。
3. 输入名称并选择颜色。
当你更新某个颜色样式时，所有引用该样式的元素都会自动更新。
### 深色模式 \{#dark-mode\}

:::link
主要文章：[深色模式](paywall-dark-mode)
:::

如有需要，你可以为每种颜色样式添加两个变体——一个用于浅色模式 Light mode，一个用于深色模式 Dark mode。SDK 会根据设备当前的配色方案自动应用对应的变体。
要在编辑工具中预览深色模式，请使用[底部工具栏](builder-ui#view-controls-bottom-toolbar)中的**主题切换**按钮 Dark mode。