Elementor: چگونه یک جلوه صوتی دکمه اضافه کنیم

باید نحوه اضافه کردن افکت صدای دکمه را دریابید Elementor ؟ در این مقاله اطلاعات کسب کنید.

آیا این 2 دکمه را می بینید؟

وقتی روی از گربه، یک میو می کند و وقتی روی دکمه کلیک می کنید چین، صدای پارس تولید خواهد کرد. در این مقاله نحوه اضافه کردن را به شما نشان خواهیم داد Elementor یک جلوه صوتی به دکمه هنگام کلیک کردن.

نحوه اضافه کردن افکت صدا به دکمه در المنتور

مرحله 1: یک دکمه ایجاد کنید

ابتدا باید دکمه را ایجاد کنید، می توانید دکمه را همانطور که می خواهید سفارشی کنید، زیرا Elementor گزینه های زیادی برای زیبا کردن دکمه شما دارد.

مرحله 2: پیوند افکت صدا را آماده کنید

پس از آماده شدن دکمه، اکنون افکت صوتی دکمه را آماده کرده و آن را در کتابخانه رسانه وردپرس آپلود کنید. برای جلوه های صوتی می توانید از فرمت فایل MP3 یا WAV استفاده کنید.

برای آپلود فایل صوتی در کتابخانه رسانه وردپرس، به داشبورد وردپرس بروید و کلیک کنید رسانه -> افزودن. می توانید فایل ها را بکشید و رها کنید یا کلیک کنید فایل ها را انتخاب کنید برای آپلود آنها

پس از دانلود فایل ها، به کتابخانه رسانه بروید و روی یکی از صداها کلیک کنید، سپس در پنجره ای که ظاهر می شود، کپی کنید. آدرس فایل برای دریافت لینک افکت صوتی

مرحله 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 غیر.

از پیوند جلوه صوتی خود برای جایگزینی استفاده کنید Sound-effect-URL در دستورالعمل

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

کلاس‌های CSS را برای دکمه انتخاب کنید و کد کلاس‌های کلاس CSS دکمه را تغییر دهید

$(".button-class").mousedown

پس از اصلاح کد به شکل زیر در می آید.

مرحله 4: یک کلاس CSS به دکمه اضافه کنید

برای اتصال دکمه به کدها، باید کلاس‌های CSS را به دکمه اضافه کنیم تا کد بداند روی کدام دکمه کلیک شده و جلوه‌های صوتی را فعال می‌کند.

و این برای دکمه ای با جلوه صوتی است. اکنون می توانید دکمه خود را سفارشی کنید. و اگر می خواهید دکمه های بیشتری با جلوه های صوتی اضافه کنید، با کپی بخشی از کد و کمی تغییر آن امکان پذیر است.

دکمه های اضافی با جلوه های صوتی اضافه شده است

دکمه را ایجاد کنید یا دکمه موجود را کپی کنید

می‌توانید با کلیک راست روی دکمه موجود و انتخاب Copy، دکمه موجود را کپی کنید، سپس با کلیک راست در داخل آن بخش، آن را در هر بخش قرار دهید.

بخشی از کد را کپی کنید و متغیرها و نام کلاس CSS دکمه دوم را تنظیم کنید

بیایید برخی از قسمت‌هایی از کد HTML قبلی که باعث ایجاد افکت صوتی می‌شود را کپی کنیم، این کد زیر است

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

پس از کپی کردن کد، آن را دقیقا در زیر قرار دهید توسط Audio 1 Ends. متغیر را اصلاح کنید صوتی 1 و تمام کدهایی که از متغیر استفاده می کنند صوتی 1 در کد جدید ایجاد شده در صوتی 2.

همچنین ببینید: Elementor: نحوه ایجاد یک کارت افکت از یک نمونه کار

سپس اگر از جلوه صوتی جدید برای دکمه جدید استفاده می کنید، آدرس جلوه صوتی را جایگزین کنید و کد را تغییر دهید کلاس دکمه در کلاس های CSS دکمه ای که به تازگی ایجاد کرده اید.

کد نهایی مانند تصویر زیر خواهد بود.

نام کلاس CSS دکمه را جایگزین کنید

دکمه تازه ایجاد شده شما نیز با کلیک کردن یک جلوه صوتی خواهد داشت. شما می توانید هر تعداد که می خواهید ایجاد کنید.

عناصر صوتی از جمله موارد اضافه شده به a وب سایت. آنها نه تنها یک عنصر جذاب برای وب سایت ها فراهم می کنند، بلکه به ایجاد یک اثر ماندگار در کاربران نهایی کمک می کنند.

دفعات بازدید: Elementor: چگونه یک وب سایت وردپرس را مهاجرت کنیم

با این حال، عمل یا نتیجه فقط در صورتی باید با صدا همراه باشد که پیام مهمی را به طور قابل توجهی برای کاربر تقویت یا شفاف کند. کاربر را از چیزی که نیاز به توجه دارد مطلع کنید تا تاثیر منفی روی شما نداشته باشد وب سایت به جای

اکنون Elementor Pro را دریافت کنید!

نتیجه

بنابراین ! این همه برای این مقاله است که به شما نشان می دهد چگونه جلوه صدای دکمه را به آن اضافه کنید Elementor. اگر در مورد نحوه رسیدن به آنجا نگرانی دارید، به ما اطلاع دهید نظر.

با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...