Elementor 基础教程 6 - 按钮小工具的设置和使用方法

2023-11-26
Elementor 基础教程
喜欢(0)
Elementor basic 6 anniu.webp

Elementor的按钮小部件是创建网站按钮的重要工具之一。

通过使用按钮小部件,您可以轻松地向页面内容、站内文章以及特定的站外网站添加链接。还可以自定义按钮的大小、形状、颜色和文本,以便与网站的设计保持一致。

按钮小部件确保用户可以快速、轻松地在网站上找到所需的信息,有助于创建更好的用户体验并提高对内容的参与度。此外,它还可以帮助管理员更好地控制访问者在网站上的互动方式,并有助于引导他们访问重要的页面或产品。

本教程将说明按钮小部件的功能设置和使用方法。

Elementor 按钮小工具

将按钮小部件拖放到编辑栏中,如下图所示。

拖放后,您将看到如下界面。

1.按钮小部件的内容标签

H3

将按钮小部件插入到编辑栏后,您可以设置按钮的类型、文本、链接等,并可以添加任意图标。

按钮小部件的内容标签主要包括以下设置选项:

  1. 类型
  2. 文本
  3. 链接
  4. 对齐
  5. 尺寸
  6. 图标
  7. 图标间距
  8. 按钮ID

1-1 类型

类型是Elementor预设的一些按钮颜色设置选项,如下图所示。

预设的颜色有《信息:蓝色》,《成功:绿色》,《警告:橙色》,《危险:红色》。您可以根据设计选择任意预设的颜色。默认通常为成功的绿色。

1-2 文本

文本是用于添加或编辑按钮文本的设置项,如下图所示。

1-3 链接

链接是用于向按钮添加页面内链接、其他文章或外部链接的设置项,如下图所示。

点击链接旁边的齿轮按钮,将弹出下方选择项。您可以选择是否希望用户点击按钮时在新窗口中打开链接内容。如果希望,就选勾即可。

1-4 对齐

对齐是指定按钮在编辑栏内水平方向的对齐方式。如下图所示:

选择两端对齐时,按钮的宽度会与编辑栏的宽度相同。

1-5 尺寸

尺寸是Elementor预设的按钮大小设置选项。如下图所示:

按钮的尺寸可以根据页面设计进行选择。

1-6 图标

图标是添加按钮图标的设置项。默认时,按钮没有图标。

添加按钮的方式有两种,一种是自定义上传SVG格式图标,另一种是选择Elementor预设的图标库。如下图所示:

点击Elementor预设图标库,可以看到以下界面:

选择任意图标后,按钮中会添加所选择的图标。如下图所示:

选择图标后,还需要设置图标的位置。如下图所示:

图标位置是设定图标在文本之前或者之后的设置选项。

1-7 图标间距

图标间距是自定义图标与文本之间距离的设置项。如下图所示:

图标间距的最小值是0,最大值是50,默认值为5。设定的数值越大,图标与文字的间距就越大。

1-8 按钮ID

按钮ID是用于谷歌Analytics活动情况设置的专属ID。通常很少使用,所以在此不做详细介绍。

2.按钮小工具的样式标签

按钮小工具的样式标签是详细设置按钮外观的设置选项。如下图所示:

如上图所示,使用样式标签可以对按钮进行更加细致的样式指定。

按钮小工具的样式标签可参考《Elementor 通用教程 – 小工具样式标签的通用设置和使用方法》。

3.按钮小工具的高级设置

高级设置是所有小工具通用的设置项,具体功能设置和使用方法请阅读《Elementor通用教程 – 高级标签的设置和使用方法》。

以上就是按钮小工具的功能和使用方法的介绍。希望这篇文章对您使用Elementor有所帮助。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
fuyeshidai

做点副业,为生活加点料

快速搜索
站长推荐
相关文章
Elementor pro Portfolio widget
Elementor 专业教程 3 – Portfolio小工具的设置和使用方法
Elementor pro Post widget content.webp
Elementor 专业教程 1 – Post小工具的设置和使用方法 内容标签篇
Elementor pro price table widget
Elementor 专业教程 12 – Price Table小工具的设置和使用方法
Elementor pro Login widget
Elementor 专业教程 6 – Login小工具的设置和使用方法
Elementor pro Review widget
Elementor 专业教程 17 – Review小工具的设置和使用方法
Elementor basic 30 yuedugengduo.webp
Elementor 基础教程 30 – 阅读更多小工具的设置和使用方法
Jeteing jiaocheng lables advance settings tumnail
JetEngine 通用教程 - Labels和Advance Setting的设置方法
Why WordPress Is it the best choice for beginners to build a website (1)
为什么WordPress是小白建站的不二之选?
Elementor basic 19 zhengming.webp
Elementor 基础教程 19 - 证明小工具的设置和使用方法
Elementor pro Template widget.webp
Elementor 专业教程 26 – Template小工具的设置和使用方法