Table of Contents
按钮小部件可帮助您轻松设计和自定义按钮，而无需任何其他插件或简码。https://www.youtube.com/embed/t_yFcTWQiPM?feature=oembed&enablejsapi=1&origin=https%3A%2F%2Felementor.com
内容 #
- 类型：从 5 种样式的按钮中选择开始您的设计。从Default、Info、Success、Warning或Danger中选择
- Text : 输入按钮的文本
- Link：设置按钮链接的 URL。单击 cog 将链接设置为在新窗口中打开或将rel=nofollow添加到链接
- 对齐方式：将按钮对齐到左侧、中心、右侧或相对于其列对齐。
- 尺寸：选择预设按钮尺寸，从超小到超大（请参阅本文档底部的填充默认详细信息）
- Icon : 选择一个FontAwesome图标显示在按钮上
- 图标 位置：设置图标出现在按钮文本之前或之后
- 图标 间距：调整图标和按钮文本之间的间距
- 按钮 ID：（可选）分配唯一的按钮 ID 以用于Google Analytics（分析）事件等情况
风格 #
- 排版：更改按钮文本的默认排版选项
- 文本阴影：为按钮的文本添加阴影和模糊
- 文本 颜色：选择按钮文本的颜色
- 背景颜色：为正常和悬停状态选择按钮的背景颜色。您可以使用纯色或渐变色
- 悬停动画：单击悬停选项卡以设置悬停动画
- 边框类型：选择要在按钮周围使用的边框类型
- Width：控制按钮周围边框的粗细
- 颜色：选择边框的颜色
- Border Radius : 设置边框半径来控制圆角圆度
- 盒子 阴影：设置选项以在按钮上应用盒子阴影
- Padding：更改按钮的填充设置
如何跟踪“Button onClick”事件（对于 Facebook Pixel、Google Analytics 或 Google Tag Manager） #
按照以下步骤跟踪按钮 onClick 事件：
- 编辑按钮>高级> 设置 CSS ID = My_Button
- 在页面中添加一个 HTML 小部件（按钮之后就可以了）
- 将以下代码粘贴到 HTML 代码字段中：
document.addEventListener("DOMContentLoaded", function(event) {jQuery('#My_Button a').click(function(){// tracking code here// for example Facebook Pixel:fbq('track','AddToCart');});}); - 将以下 CSS 添加到您的网站自定义 CSS 区域。这可能在您的Theme Customizer、Site Settings、Custom Code或子主题中。
/** 跟踪代码管理器的按钮修复（用于触发 Click Id）**/ .elementor-button-content-wrapper {pointer-events: none;} .elementor-button span { pointer-events:none} - 更新页面、预览、测试
先进的 #
设置适用于此小部件的高级选项
如何为按钮创建渐变背景 #
https://youtube.com/watch?v=5z1uM4azviE%3Ffeature%3Doembed%26enablejsapi%3D1%26origin%3Dhttps%253A%252F%252Felementor.com
如何制作下载 PDF 按钮 #
- 添加文本编辑器小部件
- 通过文本编辑器小部件上传您的 PDF
- 发布页面
- 转到实时页面并复制指向 PDF 的 URL 链接
- 现在，在另一个页面中，添加一个 Button 小部件并将链接设置为 URL
- 提示：如果您希望文件立即下载，而不是在浏览器中打开，请参阅此信息。
按钮预设大小：填充默认值 #
上、左、下、右 #
- 超小：10px、20px、10px、20px
- 小：12px、24px、12px、24px
- 中：15px、30px、15px、30px
- 大：20px、40px、20px、40px
- 超大：25px、50px、25px、50px
