返回到支持 内容和媒体 区块 设计区块 按钮区块

按钮区块

使用“多个按钮”区块提示访客使用按钮样式的链接进行操作。您可以将按钮链接到您站点上的其他页面或外部页面,这对将访客注意力转移到您希望访客做的重要事项上非常有用。

视频教程

添加“多个按钮”区块

要添加“多个按钮”区块,请点击 + 区块插入器图标,并搜索“按钮”。点击即可为文章或页面添加该区块。添加第一个按钮后,可以输入您希望点击按钮后显示的内容。

添加“多个按钮”区块
添加“多个按钮”区块(点击放大)

💡

您还可以使用键盘另起一行输入 /按钮并按 Enter 键,从而快速添加新的“多个按钮”区块

使用斜杠插入符号添加区块按钮
使用斜杠插入符号添加区块按钮

有关添加区块的详细说明,请点击此处查看。

区块工具栏

按钮区块有两个级别:

当您点击父按钮区块时,选项工具栏将显示:

父按钮区块工具栏
按钮区块工具栏

单个按钮区块工具栏提供以下选项:

单个按钮区块工具栏
单个按钮区块工具栏
按钮区块工具栏
单个按钮区块工具栏
链接按钮

要向按钮添加链接,请点击浮动工具栏中显示的“链接”图标,该工具栏在点击区块时显示。该图标看起来像是链条上的一个链环。您可以粘贴您的链接,也可以搜索现有的站点页面和文章。

默认情况下,链接会在同一选项卡中打开,除非您选择将链接设置为在新选项卡中打开。

链接按钮
链接按钮(点击放大)
对齐按钮

您可以向左、向右或居中对齐按钮。首先,请确保选择父按钮区块,如下所示:

用箭头标记出了“选择父区块”选项。

然后,从工具栏中选择对齐选项。

您可以选择向左、居中或向右对齐按钮。

您还可以选择项目间距,自动在区块中的多个按钮间添加等距空间。

区块设置

当您点击区块时,您将在右侧边栏中找到其他区块设置。如果您没有看到边栏,您可能需要点击右上角的 ⚙️(齿轮)图标,打开设置。

区块设置可在右侧边栏中找到。
区块设置
样式

在“样式”选项中,您可以为按钮设置填充颜色(填充)或设置实线边框(轮廓)。

按钮区块样式
排版

排版设置中提供了一些选项,用于控制按钮上显示的文本大小。

边框半径

您可以通过边框半径选项为按钮选择更圆的外观。此选项设置为 0 表示按钮边缘锋利。

区块按钮边框半径设置
颜色设置
按钮区块颜色设置

您可以为按钮选择文本颜色和背景颜色。

选择能使按钮突出显示的颜色,并确保找到合适的对比度,提高可读性。新编辑器中内置了无障碍参数,会在文本可能存在对有阅读障碍的读者难以辨认的元素时提醒您。

内边距设置

内边距是区块边框内的空白空间,它可以让您的内容看起来清晰整齐并可以调整页面布局的平衡。在区块的边栏设置的尺寸部分下,可以找到一个用于设置特定按钮内边距的选项。您可以将四个边框都设置为同一个值,也可以将上下内边距和侧边距设置为不同的值。

在内边距设置中输入一个值,将按钮的四个边框设为相同的内边距。

如果点击取消关联图标,则可以为按钮的上下边框和侧边框添加不同的内边距值。

宽度设置
按钮区块宽度百分比

在宽度设置中,可以百分比形式定义每个按钮的宽度。

更改按钮宽度
更改按钮宽度(点击放大)
水平按钮和垂直按钮

首次向父按钮区块添加多个按钮时,它们将水平显示。您可以使用按钮区块上的转换为变体设置,将按钮垂直显示(叠成一列)。

按钮区块设置上的“转换为变体”下拉框图片,用于将按钮水平排成一行或垂直叠成一列。
转换按钮
GIF 动画:显示如何对齐按钮区块。
对齐按钮(点击放大)
高级

链接 Rel 用于控制按钮链接的 rel 属性,添加 nofollow 等。

可以使用 HTML 定位点字段为按钮创建页面跳转

使用额外 CSS 类编写自定义 CSS,并根据需要设置区块样式。了解更多。

Copied to clipboard!