Divi:すべての時間の中で最高のWordPressテーマ!

もっと 901.000のダウンロードDiviは世界で最も人気のあるWordPressテーマです。 完全で使いやすく、62以上の無料テンプレートが付属しています。

Elementorにボタンの効果音を追加する方法を見つける必要がありますか? この記事で調べてください。

これらの2つのボタンが表示されますか?

クリックすると 猫の、ニャーを鳴らし、ボタンをクリックすると チェン、吠える音がします。 この記事では、追加する方法を紹介します Elementor クリックしたときのボタンの効果音。

Elementorのボタンに効果音を追加する方法

ステップ1:ボタンを作成する

まず、ボタンを作成する必要があります。Elementorにはボタンを美しく見せるためのオプションが多数あるため、必要に応じてボタンをカスタマイズできます。

ボタンの準備ができたら、ボタンの効果音を準備し、WordPressメディアライブラリにアップロードします。 効果音にはMP3またはWAVファイル形式を使用できます。

サウンドファイルをWordPressメディアライブラリにアップロードするには、WordPressダッシュボードに移動してクリックします メディア->追加。 ファイルをドラッグアンドドロップするか、クリックすることができます ファイルを選択 それらをアップロードします。

Elementorのボタン効果音

ファイルがダウンロードされたら、メディアライブラリに移動し、サウンドのXNUMXつをクリックしてから、表示されるウィンドウでコピーします。 ファイルのURL 効果音のリンクを取得します。

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コード.

Elementorでウェブサイトを簡単に作成

Elementorを使用すると、 簡単かつ無料 プロフェッショナルな外観のウェブサイトやブログのデザイン。 あなたが自分でできるウェブサイトに多額のお金を払うのをやめなさい。

効果音リンクを使用して置き換えます 効果音-URL ステートメントで

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

ボタンのCSSクラスを選択し、ボタンのクラスCSSクラスのコードを変更します

$(".button-class").mousedown

コードを変更すると、次のようになります。

Elementorのボタン効果音

ステップ4:ボタンにCSSクラスを追加する

ボタンをコードに接続するには、CSSクラスをボタンに追加する必要があります。これにより、コードはどのボタンがクリックされたかを認識し、効果音をトリガーします。

Elementorのボタン効果音

そして、これは効果音付きのボタン用です。 これで、ボタンをカスタマイズできます。 また、効果音付きのボタンをさらに追加したい場合は、コードの一部をコピーして少し変更することで実行できます。

効果音付きのボタンを追加

ボタンを作成するか、既存のボタンをコピーします

既存のボタンを右クリックして[コピー]を選択し、そのセクション内を右クリックして任意のセクションに貼り付けることで、既存のボタンをコピーできます。

Elementorのボタン効果音

コードの一部をコピーし、XNUMX番目のボタンの変数とCSSクラス名を調整します

効果音をトリガーする以前のHTMLコードの一部をコピーしてみましょう。以下のコードです。

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

コードをコピーしたら、すぐ下に貼り付けます オーディオによる1終了。 変数を変更します オーディオ1 および変数を使用するすべてのコード オーディオ1 で新しく作成されたコード オーディオ2.

参照してください: Elementor:ポートフォリオからエフェクトカードを作成する方法

次に、新しいボタンに新しい効果音を使用している場合は、効果音のURLを置き換えて、コードを変更します ボタンクラス 新しく作成したボタンCSSクラスで。

最終的なコードは次の画像のようになります。

Elementorのボタン効果音

ボタンのCSSクラス名を置き換えます

Elementorのボタン効果音

新しく作成したボタンをクリックすると、効果音も鳴ります。 いくつでも作成できます。

オーディオ要素は、Webサイトへの優れた追加機能のXNUMXつです。 これらは、Webサイトに魅力的な要素を提供するだけでなく、エンドユーザーに永続的な印象を与えるのにも役立ちます。

また読みます: Elementor:WordPressWebサイトを移行する方法

ただし、アクションまたは結果は、ユーザーへの重要なメッセージを大幅に強化または明確にする場合にのみ、音を伴う必要があります。 代わりにWebサイトに悪影響を与えないように、注意が必要なことをユーザーに通知します。

Elementor Proを今すぐ入手!

結論

それで ! Elementorにボタンの効果音を追加する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...

0 株式
シェア
さえずります
Enregistrer