需要了解如何添加按钮音效 Elementor ? 在本文中查找。

你看到这两个按钮了吗?

当您单击 猫的,它会发出喵叫声,当你点击 鸿渐,它会产生吠叫声。 在本文中,我们将向您展示如何添加 Elementor 单击时按钮的声音效果。

如何在 Elementor 中为按钮添加音效

第 1 步:创建一个按钮

首先你需要创建按钮,你可以根据需要自定义按钮,因为 Elementor 有很多选项可以使您的按钮美观。

按钮准备好后,现在准备按钮的音效并将其上传到 WordPress 媒体库。 您可以使用 MP3 或 WAV 文件格式来获得音效。

要将声音文件上传到 WordPress 媒体库,请导航到 WordPress 仪表板并单击 媒体 -> 添加. 您可以拖放文件或单击 选择文件 上传它们。

Elementor 上的按钮音效

下载文件后,转到媒体库并单击其中一种声音,然后在出现的窗口中,复制 文件网址 获取声音效果的链接。

Elementor 上的按钮音效

第 3 步:添加以下 HTML 代码

要让按钮发出声音,我们需要使用以下 HTML 代码。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  //Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends
});
</script>

在画布区域添加 HTML 小部件并将代码粘贴到块中 HTML代码.

用你的音效链接替换 音效网址 在声明中

var audio1 = new Audio('Sound-Effect-URL')

选择按钮的 CSS 类并修改按钮的 CSS 类的代码

$(".button-class").mousedown

修改代码后会是这个样子。

Elementor 上的按钮音效

第 4 步:向按钮添加 CSS 类

要将按钮连接到代码,我们需要给按钮添加 CSS 类,这样代码就知道点击了哪个按钮并触发了音效。

Elementor 上的按钮音效

这是一个带有声音效果的按钮。 您现在可以自定义按钮。 如果您想添加更多带有音效的按钮,可以通过复制部分代码并稍作修改来实现。

添加了带有音效的附加按钮

创建按钮或复制现有按钮

您可以通过右键单击现有按钮并选择复制来复制现有按钮,然后通过在该部分内右键单击将其粘贴到任何部分。

Elementor 上的按钮音效

复制部分代码并调整第二个按钮的变量和CSS类名

我们把之前触发音效的部分HTML代码复制一下,就是下面这段代码

//Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends

复制代码后,粘贴到下面 by 音频 1 结束. 修改变量 音频1 以及所有使用该变量的代码 音频1 在新创建的代码上 音频2.

另请参见: Elementor:如何从投资组合中创建效果卡

然后如果您为新按钮使用新的音效,请替换音效url并更改代码 按钮类 在您新创建的按钮 CSS 类中。

最终代码将如下图所示。

Elementor 上的按钮音效

替换按钮的 CSS 类名

Elementor 上的按钮音效

您新创建的按钮在单击时也会有声音效果。 您可以根据需要创建任意数量。

音频元素是一个很好的补充 网站Web. 它们不仅为网站提供了有吸引力的元素,还有助于给最终用户留下持久的印象。

另请参阅: Elementor:如何迁移 WordPress 网站

但是,动作或结果只有在显着强化或阐明对用户的重要信息时才应伴有声音。 告知用户需要他们注意的事情,以免对您产生负面影响 网站Web 来代替。

立即获取Elementor Pro!

结论

所以 ! 这就是本文的全部内容,它将向您展示如何添加按钮声音效果 Elementor. 如果您对如何到达那里有任何疑虑,请告知我们 评论.

但是,您也可以咨询 我们的资源,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建 或者那个 Divi:有史以来最好的WordPress主题.

但与此同时, 在您不同的社交网络上分享此文章.

...