Skip to main content

主题控制什么

主题控制落地页的整体视觉风格:背景色、表面色、文字颜色、强调色、字体、圆角以及阴影/表面样式。切换主题会立即更新页面上的每一个区块——主题永远不会改变您的内容,只会改变它的外观。

打开主题选择器

点击 Page Builder 顶部栏中的 Theme 按钮。主题选择器会在右侧面板中打开,显示预设主题(Presets 标签页)和您保存过的任何主题(Saved 标签页)。

预设主题

选择器提供 21 种预设主题,分布在两页,分别为 12 张和 9 张卡片。
主题选择器的 Presets 标签页,第 1 页,显示 12 张带颜色样本和名称的预设主题卡片

预设主题,第 1 页共 2 页 —— Modern、Classic、Midnight、Emerald、Aqua、Sharp、Pill、Flat、Navy、Sage、Noir、Coral Pop

主题选择器的 Presets 标签页,第 2 页,显示剩余 9 张带颜色样本和名称的预设主题卡片

预设主题,第 2 页共 2 页 —— Terracotta Craft、Cobalt Tech、Blush Romance、Charcoal Editorial、Mint Festive、Aurora Pulse、Prism Glass、Frosted、Legacy

旧版文档曾描述过”十种预设主题”,并将 Royal、Retro、SunsetMono Dark 列入其中。这四种在当前的选择器中均不存在——目录如今已扩展到 21 种预设,其中六种(Modern、Classic、Midnight、Emerald、Navy、Aqua)延续自最初的十种。
点击任意主题卡片即可应用它。画布会立即更新,让您无需离开编辑器即可比较不同主题。

主题覆盖

选择某个预设后,点击其卡片上的 Customise,打开一个面板,您可以在不改变基础预设的情况下独立覆盖该主题的任何设计令牌。该面板按以下顺序组织为七个部分:
Customise 面板显示七个可折叠部分:Color、Background、Typography、Shape、Surface、Effects、Spacing

Customise 面板的七个可折叠部分

Color

单独覆盖主题的颜色令牌:Background、Surface、Surface alt、Accent、Button text(accent foreground)、Heading、Body、Muted 和 Border。每个字段留空时都会回退到预设的值。

Background

选择页面背景的渲染方式——纯色 Color、渐变 Gradient(角度和颜色停止点)、图片 Image(带适配方式和不透明度控件)或视频 Video(带不透明度控件)——此外还可以设置背景效果(参见 Animated Effects)。 Block transparency —— 当背景效果处于激活状态时,这个滑块控制 “Full width” 区块自身的表面会淡化多少,以便下方的效果透出来。无论背景类型是什么,它都适用。

Typography

为标题、正文文字和标签/按钮分别覆盖字体。可以从内置字体列表中选择,也可以输入任意 Google Font 名称(例如 MontserratRoboto),以替代预设默认的字体组合。
此处的字体覆盖会应用于任何没有自身区块级字体设置的区块。区块自己的 Design 标签页 字体设置一旦设置,优先级高于这个主题级覆盖。

Shape

为按钮、卡片、图片和输入框分别独立覆盖圆角。

Surface

覆盖卡片和悬浮区块所使用的阴影和表面样式,包括一个 Card material 控件(Preset default / Card / Subtle / Elevated),与阴影变体控件并列。
此部分在旧版文档中曾命名为 “Shadow”。现在标注为 Surface,除了阴影变体之外还暴露了一个 Card material 控件。同样的 Card Surface 和 Shadow 令牌也可以按区块覆盖——参见 Design Options

Effects

设置主题级默认的背景、卡片和按钮效果。完整目录参见 Animated Effects

Spacing

控制页面使用多少留白空间。
  • Space between blocks —— 分隔页面上各个区块的垂直间距。
  • Spacing scale —— 一个滑块,可以一次性让页面上的所有间距(缝隙、卡片内边距、区块间距)变得更紧凑或更宽松,而不改变文字大小。可以将其保持在该主题密度的默认值,也可以调整以获得更疏朗或更紧凑的布局。

深色与浅色模式

主题采用固定的调色板定义——它们不会根据访客设备的偏好自动在深色和浅色模式之间切换。如果您想要一个深色页面,请选择一个深色预设(例如 Midnight 或 Noir),或通过覆盖设置一个深色背景色。

区块级设计覆盖

除了页面级主题之外,许多区块在检查器中都有自己的 Design 标签页,您可以仅为该区块覆盖颜色、字体和卡片样式。详情参见 Design Options

重置覆盖

要移除某项覆盖并恢复到主题默认值,清空 Customise 面板中的该字段即可。空字段会告诉页面使用主题的值。

相关内容