Skip to main content

什么是设计选项

大多数区块在右侧检查器中都有一个 Design 标签页。设计选项让您可以覆盖单个区块的视觉样式,而不影响页面其他部分。当某个设计字段留空时(显示 “Theme default”),该区块会从当前激活的主题继承其值。
在 Description 区块上打开的 Design 标签页,显示 Card Style(Style、Card Background、Transparent background)、Effects(Card Effect、Card Surface、Shadow)和 Typography(Text Color、Font Family、Font Size)分组

Description 区块的 Design 标签页,显示 Card Style、Effects 和 Typography 分组

如何访问设计选项

1

选中一个区块

在画布或左侧边栏中点击某个区块以选中它。
2

打开 Design 标签页

在右侧面板中点击 Design 标签页。(如果某个区块没有可覆盖的视觉样式,此标签页会显示为禁用状态——例如 Footer、Menu 和 Contact Details 完全没有 Design 标签页。)
3

调整某个选项

画布会实时更新。
要将某个字段重置为其主题默认值,清空该字段(或在其下拉菜单中重新选择 “Theme default”)。

Typography

文本样式选项出现在包含段落文本、标题或标签的区块上——Page Title、Description、Event Schedule、Event Venue、Couple Names 等等。
打开的 Font Size 下拉菜单,显示从 0.5x 到 4x 的倍率选项,1x 被勾选为当前选择

在区块的 Design 标签页中打开的 Font Size 下拉菜单,显示完整的 0.5×–4× 倍率列表

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

Card style

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

Effects(区块级)

除 Card Background 之外,大多数基于卡片的区块在 Design 标签页的 Effects 分组下还暴露了三项额外的覆盖设置:
Card SurfaceShadow 是对主题 Surface 分组中全局设置的同一批令牌(token)的区块级覆盖(参见 Themes)。在此设置它们只会影响所选区块;页面上其他内容仍使用主题的值。

Button styles

按钮样式选项出现在 Button 区块,以及带有内置按钮的区块上(Map、File Download)。

Icon styles

图标样式选项出现在显示装饰性图标的区块上。已在 Event Venue 区块(Wedding/Event 页面)上确认可用:
Event Venue 区块上的 Design 标签页,显示 Typography、Card Style、带 Icon colour 的 ICON 分组,以及 Effects

Event Venue 的 Design 标签页,显示 ICON 分组下的 Icon colour 字段

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

Separator styles

分隔线样式选项出现在包含内置装饰性线条的区块上。已在 Couple Names 区块(Wedding 页面)上确认可用:
Couple Names 区块上的 Design 标签页,显示 Typography、Card Style、Separator style 设置为 01 的 SEPARATOR 分组和 Separator colour,以及 Effects

Couple Names 的 Design 标签页,显示带 Separator style 和 Separator colour 的 SEPARATOR 分组

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

页面级效果

许多区块的 Effects 分组允许该区块仅为自身覆盖主题的默认背景、卡片或按钮效果。完整列表以及如何设置主题级默认值,参见 Animated Effects

优先级

设计选项遵循以下优先级顺序(从高到低):
  1. 区块级 Design 标签页设置(如果已设置)
  2. 页面级主题覆盖(在主题选择器的 Customise 面板中)
  3. 预设主题默认值
Design 标签页中的空字段表示”使用主题值”。非空字段仅为该区块覆盖主题值。

使用建议

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

相关内容

  • Themes —— 这些区块级覆盖回退所依据的页面级令牌。
  • Animated effects —— Card Effect 和 Button Effect 选项背后的完整目录。
  • Blocks reference —— 哪些区块暴露了 Design 标签页。