选择引导访客的按钮样式.
每个按钮的分量由您决定。实心按钮标出您最想要的动作,旁边的描边按钮提供备选而不抢戏。本页演示如何装饰这样一对按钮,以及每个设置改变什么。添加按钮并设置链接,请参阅 添加按钮。
该视频跟随下文步骤:将 Apply now 做成主按钮,再添加描边的第二个按钮。
装饰主按钮和次按钮
从页面上的按钮开始,例如 Apply now。
- 悬停按钮,打开 More > Settings。
- 将 Type 设为 Primary。
- 将 Size 设为 Large,点击 Save。
- 再次悬停按钮,打开 More > Clone。副本出现在原按钮正下方。
- 打开副本的 More > Settings。更改其 Title(例如
Download brochure)和 Link。 - 打开 Outline style,点击 Save。
- 点击工具栏上的 Save。
为每个动作选样式
| 动作 | 样式 | 示例 |
|---|---|---|
| 您最想要的动作 | 实心 Primary | Apply now |
| 备选动作 | Outline style,采用同一 Type | Download brochure |
| 次要动作 | Link,看起来像文本链接 | Read the terms |
| 警告或最后一步 | Danger 或 Warning | Cancel my booking |
每个版块用一个实心按钮,访客一眼就知道点哪里。标签写明会发生什么:“Get started”而不是“Click here”,“Send message”而不是“Submit”。
您会看到的内容
两个大按钮在列中上下排列:实心按钮用主题的主色,描边按钮用同色边框和文字。实心按钮先抓住眼球。编辑时链接不打开。要测试它们,请保存页面,打开视图菜单(眼睛图标)并选择 Preview。

设置
| 设置 | 作用 | 默认值 |
|---|---|---|
| Type | 颜色样式:Primary、Secondary、Success、Info、Warning、Danger、Link、Light 或 Dark。颜色来自主题。 | Primary |
| Outline style | 有色边框和文字,无填充 | 关 |
| Size | Normal、Large 或 Small | Normal |
| Block button | 将按钮拉伸到占满整列宽度 | 关 |
| Link target | Same window 或 New window。Link 有值后才显示。 | Same window |
给主题制作者:每个 Type 添加 Bootstrap 类 btn-<type>,例如 btn-primary。Outline style 开启时变成 btn-outline-<type>,Link 除外,它始终是 btn-link。Large 添加 btn-lg,Small 添加 btn-sm,Block button 添加 btn-block。
如果您看不到样式
- 描边按钮没有边框。 Type 为 Link,它始终像文本链接,因此 Outline style 无效。请为描边按钮选择其他 Type。
- 按钮几乎看不见。 Light 接近白色,在白色版块中隐身。请选择更深的 Type,或给版块加背景色。
- 链接在同一标签页打开。 Link target 为 Same window,且只在 Link 有值后显示。请先填写 Link,再选择 New window。