> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scanova.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 设计选项

> 通过 Design 标签页进行的区块级视觉自定义。

## 什么是设计选项

大多数区块在右侧检查器中都有一个 **Design** 标签页。设计选项让您可以覆盖单个区块的视觉样式，而不影响页面其他部分。当某个设计字段留空时（显示 "Theme default"），该区块会从当前激活的主题继承其值。

<Frame caption="Description 区块的 Design 标签页，显示 Card Style、Effects 和 Typography 分组">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/design-tab-card-effects.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=5c1b30c73f04cf3562a90ed6be89a49f" alt="在 Description 区块上打开的 Design 标签页，显示 Card Style（Style、Card Background、Transparent background）、Effects（Card Effect、Card Surface、Shadow）和 Typography（Text Color、Font Family、Font Size）分组" width="1440" height="1000" data-path="images/v2/page-builder/design-options/design-tab-card-effects.png" />
</Frame>

## 如何访问设计选项

<Steps>
  <Step title="选中一个区块">
    在画布或左侧边栏中点击某个区块以选中它。
  </Step>

  <Step title="打开 Design 标签页">
    在右侧面板中点击 **Design** 标签页。（如果某个区块没有可覆盖的视觉样式，此标签页会显示为禁用状态——例如 Footer、Menu 和 Contact Details 完全没有 Design 标签页。）
  </Step>

  <Step title="调整某个选项">
    画布会实时更新。

    <Tip>
      要将某个字段重置为其主题默认值，清空该字段（或在其下拉菜单中重新选择 "Theme default"）。
    </Tip>
  </Step>
</Steps>

## Typography

文本样式选项出现在包含段落文本、标题或标签的区块上——Page Title、Description、Event Schedule、Event Venue、Couple Names 等等。

| 选项          | 说明                                                                                                           |
| ----------- | ------------------------------------------------------------------------------------------------------------ |
| Text color  | 覆盖该区块文本的颜色。留空则使用主题的前景色。                                                                                      |
| Font family | 覆盖该区块的字体。可接受选择器中的任意字体。                                                                                       |
| Font size   | 一个连续的尺寸**倍率**，而不是 Small/Medium/Large 这样的档位：**0.5×、0.75×、1×、1.25×、1.5×、2×、2.5×、3×、3.5×、4×**。1× 是该文本在主题中的默认尺寸。 |

<Frame caption="在区块的 Design 标签页中打开的 Font Size 下拉菜单，显示完整的 0.5×–4× 倍率列表">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/font-size-multiplier.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=af48a44af33da86980b078235017bf75" alt="打开的 Font Size 下拉菜单，显示从 0.5x 到 4x 的倍率选项，1x 被勾选为当前选择" width="1440" height="1000" data-path="images/v2/page-builder/design-options/font-size-multiplier.png" />
</Frame>

<Warning>
  Font Size **不是**一个具名档位（Small/Medium/Large/Extra Large）。它是应用于该文本元素主题基础尺寸的数值倍率——选择 1× 保持主题默认值，或选择更高/更低的倍率来放大或缩小。
</Warning>

## Card style

卡片样式选项控制区块容器的外观。它们会一起出现在任何带有可见卡片外框的区块上（Description、Coupon Details、About Us、Brand Info 及大多数其他区块）。

| 选项                        | 说明                                                            |
| ------------------------- | ------------------------------------------------------------- |
| Style（有时标注为 "Appearance"） | 选择 **Card**（带边框和阴影的内嵌面板）或 **Full width**（无外部内嵌——区块占据全部内容宽度）。  |
| Card Background           | 覆盖该区块卡片的背景色。留空则使用主题的表面颜色。当 Transparent background 开启时不产生可见效果。 |
| Transparent background    | 强制该区块使用完全透明的背景，而非主题的表面颜色——无论 Style 设置为何都适用。                   |

## Effects（区块级）

除 Card Background 之外，大多数基于卡片的区块在 Design 标签页的 **Effects** 分组下还暴露了三项额外的覆盖设置：

| 选项           | 说明                                                                                                      |
| ------------ | ------------------------------------------------------------------------------------------------------- |
| Card Effect  | 选择 "Theme default" 以继承主题的卡片效果，或仅为该区块单独覆盖——完整目录参见 [Animated Effects](/zh/page-builder/animated-effects)。 |
| Card Surface | 覆盖卡片的材质（默认为 "Theme default"）——对应主题级 Surface 分组中的 "Card material" 控件，在此以区块级方式暴露。                         |
| Shadow       | 覆盖该区块卡片使用的阴影变体（默认为 "Theme default"）——对应主题级 Surface 分组中的阴影控件。                                            |

<Note>
  **Card Surface** 和 **Shadow** 是对主题 **Surface** 分组中全局设置的同一批令牌（token）的区块级覆盖（参见 [Themes](/zh/page-builder/themes)）。在此设置它们只会影响所选区块；页面上其他内容仍使用主题的值。
</Note>

## Button styles

按钮样式选项出现在 **Button** 区块，以及带有内置按钮的区块上（Map、File Download）。

| 选项            | 说明                                              |
| ------------- | ----------------------------------------------- |
| Button color  | 按钮的背景填充色                                        |
| Border color  | 按钮边框的颜色                                         |
| Corner radius | 一个包含 5 个选项的预设选择器——**None、S、M、L、Full**——而不是原始像素值 |
| Border width  | 按钮边框的粗细（像素）。设为 0 可移除边框。                         |

## Icon styles

图标样式选项出现在显示装饰性图标的区块上。已在 **Event Venue** 区块（Wedding/Event 页面）上确认可用：

| 选项          | 说明          |
| ----------- | ----------- |
| Icon colour | 应用于该区块图标的颜色 |

<Frame caption="Event Venue 的 Design 标签页，显示 ICON 分组下的 Icon colour 字段">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/icon-color-event-venue.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=b999139ffe53c7d77a5e2b03a041e356" alt="Event Venue 区块上的 Design 标签页，显示 Typography、Card Style、带 Icon colour 的 ICON 分组，以及 Effects" width="1440" height="1000" data-path="images/v2/page-builder/design-options/icon-color-event-venue.png" />
</Frame>

<Note>
  并非每个带图标的区块都有此控件——例如 Contact Us 显示图标，但其 Design 标签页中没有 Icon colour 覆盖项。
</Note>

## Separator styles

分隔线样式选项出现在包含内置装饰性线条的区块上。已在 **Couple Names** 区块（Wedding 页面）上确认可用：

| 选项               | 说明                   |
| ---------------- | -------------------- |
| Separator style  | 选择分隔线的视觉设计（样式 01–09） |
| Separator colour | 分隔线的颜色               |

<Frame caption="Couple Names 的 Design 标签页，显示带 Separator style 和 Separator colour 的 SEPARATOR 分组">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/separator-style-couple-names.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=9d657a0d5976bbc87ddf0c7e157311b4" alt="Couple Names 区块上的 Design 标签页，显示 Typography、Card Style、Separator style 设置为 01 的 SEPARATOR 分组和 Separator colour，以及 Effects" width="1440" height="1000" data-path="images/v2/page-builder/design-options/separator-style-couple-names.png" />
</Frame>

这些与独立的 **Separator** 区块不同——它们是内置在特定区块中的装饰性线条。

## 页面级效果

许多区块的 Effects 分组允许该区块仅为自身覆盖主题的默认背景、卡片或按钮效果。完整列表以及如何设置主题级默认值，参见 [Animated Effects](/zh/page-builder/animated-effects)。

## 优先级

设计选项遵循以下优先级顺序（从高到低）：

1. 区块级 Design 标签页设置（如果已设置）
2. 页面级主题覆盖（在主题选择器的 Customise 面板中）
3. 预设主题默认值

Design 标签页中的空字段表示"使用主题值"。非空字段仅为该区块覆盖主题值。

## 使用建议

* 请谨慎使用区块级覆盖。逐个覆盖太多区块会让页面显得不一致。大部分自定义应通过主题实现，区块级覆盖应保留给特定的强调场景。
* 若要突出显示单个 Button 区块，可为其设置独特的按钮颜色，同时让其余区块保持主题默认值。
* 如果希望某个区块脱颖而出——用于提示区块或重要信息——请显式设置其 Card Background，而不是更改整个主题。

## 相关内容

* [Themes](/zh/page-builder/themes) —— 这些区块级覆盖回退所依据的页面级令牌。
* [Animated effects](/zh/page-builder/animated-effects) —— Card Effect 和 Button Effect 选项背后的完整目录。
* [Blocks reference](/zh/page-builder/blocks-reference) —— 哪些区块暴露了 Design 标签页。