如何向 Slider Revolution 添加按钮

本文是我们正在进行的 Slider Revolution 系列教程的一部分。 您可以在我们的综合滑块革命指南中找到本系列的所有文章。

无论是号召性用语、用户界面的一部分还是简单的链接,按钮都是任何网站的基本元素。 精心设计时, 它们可以帮助引导用户浏览您的网站并改善访问者的整体体验. 但是除了知道如何设计一个有效的按钮之外,你还需要考虑你放置按钮的位置。 对于任何重要的网站元素的放置,折叠滑块始终是一个不错的选择。 因此,在今天的教程中,我们将向您展示如何将按钮添加到 Slider Revolution。 这可以通过 向滑块添加按钮简码或创建新按钮层. 我们已经在一篇专门的文章中介绍了如何将短代码添加到 Slider Revolution,因此如果您有兴趣向滑块添加其他短代码,请务必检查一下。

您还可以观看我们的视频,了解如何向 Slider Revolution 添加按钮:

或者,如果您更喜欢分步文本指南,请继续阅读。

向 Slider Revolution 添加按钮简码

通过简码向滑块添加按钮非常简单。 但是在将实际代码添加到滑块之前, 我建议您在测试页面上“构建”一个按钮,并确保一切看起来都如你所愿。

出于本教程的目的,我们将使用 事件 WordPress 主题。 我们将使用主题的自定义按钮短代码构建我们的按钮。

在简码中 一般的 设置,您可以看到我们有各种自定义选项。 为按钮设置选项的确切方式将取决于您使用的主题和您要使用的按钮样式。

添加按钮简码

这个主题的按钮也有 设计 选项,以便您可以自行“设计”按钮。 你可以 选择初始颜色和悬停颜色 用于按钮的背景、文本和边框,以及选择字体大小、字体粗细和 自定义按钮边距和填充.

自己设计按钮

定义按钮外观后,切换到文本编辑模式并复制按钮简码。 在我的情况下,代码是 [mkdf_button size=”small” text=”Purchase” target=”_blank” icon_pack=”” font_weight=”700″ link=”https://evently.mikado-themes.com/” color=”#ffffff” hover_color=”#ffffff” background_color=”#356bf8″ hover_background_color=”#0141f5″ border_color=”#356bf8″ hover_border_color=”#0141f5″ font_size=”13″ padding=”16px 46px”].

复制按钮简码

现在,转到您的滑块并 添加一个简单的文本层. 然后 粘贴代码 您之前复制到该层。 它将作为文本显示在您的工作框架中。

添加一个简单的文本层

但是,当您保存滑块并导航到放置在按钮上的页面时,应该会正确显示。 现在您可以随意调整按钮的位置、响应性和动画。

按钮

向 Slider Revolution 添加按钮层

也许您不喜欢主题附带的按钮设计。 或者主题可能根本没有预先设计的按钮短代码。 无论您决定在 Slider Revolution 中创建自己的按钮的原因是什么,您现在都将了解如何做到这一点。

首先,将按钮层添加到滑块工作框架。

将按钮层添加到滑块工作框架

添加按钮时, 它将在您的工作框架中显示为文本直到您自定义它。

按钮作为工作框架中的文本

在屏幕右侧,您会发现 许多预先设计的按钮样式,您可以简单地选择适合您网站风格的那个。

预先设计的按钮样式

除了这些常见的按钮样式之外,您还可以使用一些不同的东西,例如播放按钮。

播放按钮

此外,您可以添加一个 阴影 效果到您的按钮。

为您的按钮添加阴影效果

一旦你定义了基本的按钮样式,你可以去 更改其高级设置以更好地适应您网站的外观.

自定义按钮与自定义“图层选项”中的任何其他图层相同。 您需要的一切都在那里,从更改按钮的初始外观到 改变它在悬停时的显示方式,并添加动画和缓动它.

自定义按钮

这就是它的全部。 完成按钮层的设置后,您可以处理更高级的选项,例如其响应性和传入动画。 以下是 Evently 主题的传入动画示例:

来自 Evently 主题的传入动画

请务必查看我们的整个 Slider Revolution 系列文章,以了解有关动画幻灯片和使图层响应的更多信息。

综上所述

无论您将按钮创建为简码还是通过 Slider Revolution 层,您都可以轻松自定义其样式并尝试不同的文本以查看最适合您的网站访问者的文本。 但是现在您已经学习了这两种向 Slider Revolution 添加按钮的极其简单的方法,您可以确保每张幻灯片都有号召性用语或链接,让您的访问者知道您希望他们做什么或者您希望他们接下来访问您网站上的哪个页面。

In relation :  如何向 WordPress 添加“问我任何问题”功能
Moyens Staff
Moyens I/O 员工激励了您,为您提供技术、个人发展、生活方式和策略方面的建议,对您有所帮助。