选择引导访客的按钮样式.

学习 DXPR Builder搭建页面设置元素样式设计指南

每个按钮的分量由您决定。实心按钮标出您最想要的动作,旁边的描边按钮提供备选而不抢戏。本页演示如何装饰这样一对按钮,以及每个设置改变什么。添加按钮并设置链接,请参阅 添加按钮。

该视频跟随下文步骤:将 Apply now 做成主按钮,再添加描边的第二个按钮。

装饰主按钮和次按钮

从页面上的按钮开始,例如 Apply now。

  1. 悬停按钮,打开 More > Settings。
  2. 将 Type 设为 Primary。
  3. 将 Size 设为 Large,点击 Save。
  4. 再次悬停按钮,打开 More > Clone。副本出现在原按钮正下方。
  5. 打开副本的 More > Settings。更改其 Title(例如 Download brochure)和 Link。
  6. 打开 Outline style,点击 Save。
  7. 点击工具栏上的 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。

Button 的 General 面板,Outline style 已打开,Type 为 Primary,Size 为 Large,旁边是实心的 Apply now 按钮,下方是描边的 Download brochure 按钮

设置

设置 作用 默认值
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。

接下来做什么?