什么是设计选项
大多数区块在右侧检查器中都有一个 Design 标签页。设计选项让您可以覆盖单个区块的视觉样式,而不影响页面其他部分。当某个设计字段留空时(显示 “Theme default”),该区块会从当前激活的主题继承其值。
Description 区块的 Design 标签页,显示 Card Style、Effects 和 Typography 分组
如何访问设计选项
1
选中一个区块
在画布或左侧边栏中点击某个区块以选中它。
2
打开 Design 标签页
在右侧面板中点击 Design 标签页。(如果某个区块没有可覆盖的视觉样式,此标签页会显示为禁用状态——例如 Footer、Menu 和 Contact Details 完全没有 Design 标签页。)
3
调整某个选项
画布会实时更新。
Typography
文本样式选项出现在包含段落文本、标题或标签的区块上——Page Title、Description、Event Schedule、Event Venue、Couple Names 等等。
在区块的 Design 标签页中打开的 Font Size 下拉菜单,显示完整的 0.5×–4× 倍率列表
Card style
卡片样式选项控制区块容器的外观。它们会一起出现在任何带有可见卡片外框的区块上(Description、Coupon Details、About Us、Brand Info 及大多数其他区块)。Effects(区块级)
除 Card Background 之外,大多数基于卡片的区块在 Design 标签页的 Effects 分组下还暴露了三项额外的覆盖设置:Card Surface 和 Shadow 是对主题 Surface 分组中全局设置的同一批令牌(token)的区块级覆盖(参见 Themes)。在此设置它们只会影响所选区块;页面上其他内容仍使用主题的值。
Button styles
按钮样式选项出现在 Button 区块,以及带有内置按钮的区块上(Map、File Download)。Icon styles
图标样式选项出现在显示装饰性图标的区块上。已在 Event Venue 区块(Wedding/Event 页面)上确认可用:
Event Venue 的 Design 标签页,显示 ICON 分组下的 Icon colour 字段
并非每个带图标的区块都有此控件——例如 Contact Us 显示图标,但其 Design 标签页中没有 Icon colour 覆盖项。
Separator styles
分隔线样式选项出现在包含内置装饰性线条的区块上。已在 Couple Names 区块(Wedding 页面)上确认可用:
Couple Names 的 Design 标签页,显示带 Separator style 和 Separator colour 的 SEPARATOR 分组
页面级效果
许多区块的 Effects 分组允许该区块仅为自身覆盖主题的默认背景、卡片或按钮效果。完整列表以及如何设置主题级默认值,参见 Animated Effects。优先级
设计选项遵循以下优先级顺序(从高到低):- 区块级 Design 标签页设置(如果已设置)
- 页面级主题覆盖(在主题选择器的 Customise 面板中)
- 预设主题默认值
使用建议
- 请谨慎使用区块级覆盖。逐个覆盖太多区块会让页面显得不一致。大部分自定义应通过主题实现,区块级覆盖应保留给特定的强调场景。
- 若要突出显示单个 Button 区块,可为其设置独特的按钮颜色,同时让其余区块保持主题默认值。
- 如果希望某个区块脱颖而出——用于提示区块或重要信息——请显式设置其 Card Background,而不是更改整个主题。
相关内容
- Themes —— 这些区块级覆盖回退所依据的页面级令牌。
- Animated effects —— Card Effect 和 Button Effect 选项背后的完整目录。
- Blocks reference —— 哪些区块暴露了 Design 标签页。