Button 按钮使用

按钮组件

添加组件

将按钮组件添加到画布上。

什么是按钮组件？

网站上的按钮在引导用户操作、提供明确的行动呼吁以及增强整体用户参与度方面至关重要。按钮组件让您能够在您的网站上添加互动性强且视觉吸引力强的按钮。

按钮组件提供了一系列自定义选项，使您能够轻松控制按钮的外观、行为和链接目的地。

常见用例

Sara 管理着一家受欢迎杂志的网站，他们每天发布博客以吸引新访客。他们放置了一个按钮组件，创建了一个清晰而引人注目的“立即订阅”按钮。这个按钮策略性地放在每篇文章的末尾，鼓励读者订阅新闻通讯以获取更新。

其他用例

• 提供免费试用的网站可以使用一个突出的“开始您的免费试用”按钮，引导用户前往注册页面。
• 博客平台可以在每篇帖子的末尾包含社交媒体按钮（例如 Facebook、Twitter）。
• 软件公司可能在产品页面上使用“立即下载”按钮进行软件下载。

添加按钮组件：步骤

将按钮组件添加到画布上。详见添加页面元素。

在“内容”标签页下的“按钮”部分，使用“类型”选项从五种设计风格中选择：默认、信息、成功、警告或危险。

 

在“文本”字段中输入按钮的文本。

 

在“链接”字段中添加按钮的链接 URL。

点击⚙️设置链接为“在新窗口中打开”或添加“nofollow”到链接。

 

（可选）在“图标”字段中添加按钮图标：

点击 SVG 按钮添加一个上传的 SVG 图像作为按钮图标。更多详情见在 Elementor 中启用 SVG 支持。

点击图标按钮从图标库中添加一个图标。

在“图标位置”字段中设置图标显示在按钮文本的右侧或左侧。

在“图标间距”字段中定义图标与按钮文本之间的空间量。

 

（可选）在“按钮 ID”字段中分配一个唯一的按钮 ID，用于特定情况，如谷歌分析事件、Meta Pixel 等。

更改按钮大小

• 点击“样式”标签。
• 在面板中更改“填充”尺寸以控制按钮大小。

可以执行的操作

• 跟踪按钮点击次数
• 为按钮制作渐变背景
• 创建一个 PDF 下载按钮

按钮组件的设置

您可以使用内容、样式和其他高级参数自定义组件，这为您提供了极大的灵活性以满足您的需求。点击下面的标签查看此组件的所有可用设置。

内容标签页

• 类型
• 文本
• 链接
• 图标
• 图标位置
• 图标间距
• 按钮 ID

 

样式标签页

在样式标签页中，您可以自定义按钮的外观，包括间距、颜色、边框类型等设计选择。

• 间距（Spacing）：调整按钮内部的填充，以增加或减少文本和按钮边界之间的空间。
• 边框类型（Border Type）：为按钮设置边框，可选择无边框、实线、虚线等多种边框样式。
• 边框半径（Border Radius）：设置按钮的圆角大小，以创建圆润的按钮角或保持直角。

 

高级标签页

在高级标签页中，您可以进一步控制组件的高级功能，如定位、自定义 CSS、动态标签等。

• 定位（Positioning）：控制按钮的定位方式，如相对定位、绝对定位等，以便在页面上精确摆放按钮。
• 自定义 CSS（Custom CSS）：对于需要特定样式的高级用户，可以直接在此字段中编写 CSS，实现更精细的视觉效果调整。
• 动态标签（Dynamic Tags）：Elementor Pro 用户可以使用动态标签功能，根据需要动态地更改按钮的内容或链接。

 

响应性设置

为了确保按钮在不同设备上也能保持良好的用户体验，Elementor 提供了响应性设置选项：

• 反转列顺序（Reverse Column Order）：在移动设备上，您可能希望改变按钮的顺序，以更好地适应屏幕大小。
• 显示/隐藏（Visibility）：根据设备类型（桌面、平板、手机）选择是否显示按钮，以优化每种设备上的用户体验。

 

通过上述设置，您可以创建一个既美观又功能全面的按钮，有效地引导用户进行期望的操作。Elementor 的灵活性确保您可以根据网站的具体需求，轻松地实现各种样式和功能的自定义。