العنصر: كيفية إضافة تأثير صوت الزر

تحتاج إلى معرفة كيفية إضافة تأثير الصوت على الزر Elementor ؟ اكتشف في هذا المقال.

هل ترى هذين الزرين؟

عند النقر فوق ملف من القط، ستجعل مواء ، وعند النقر فوق الزر الموجود على ملف شين، سوف يصدر صوت نباح. في هذه المقالة ، سنوضح لك كيفية إضافة ملفات Elementor تأثير صوتي على الزر عند النقر فوقه.

كيفية إضافة المؤثرات الصوتية إلى الزر في Elementor

الخطوة 1: إنشاء زر

تحتاج أولاً إلى إنشاء الزر ، يمكنك تخصيص الزر كما تريد ، لأن Elementor لديه العديد من الخيارات لجعل الزر جميلاً.

الخطوة 2: قم بإعداد رابط المؤثرات الصوتية

بمجرد أن يصبح الزر جاهزًا ، قم الآن بإعداد المؤثر الصوتي للزر وتحميله إلى مكتبة وسائط WordPress. يمكنك استخدام تنسيق ملف MP3 أو WAV للتأثير الصوتي.

لتحميل ملف الصوت إلى مكتبة وسائط WordPress ، انتقل إلى لوحة معلومات WordPress وانقر فوق وسائل الإعلام -> إضافة. يمكنك سحب الملفات وإفلاتها أو النقر فوقها اختر الملفات لتحميلها.

بمجرد تنزيل الملفات ، انتقل إلى مكتبة الوسائط وانقر على أحد الأصوات ، ثم انسخ في النافذة التي تظهر عنوان URL للملف للحصول على رابط التأثير الصوتي.

الخطوة 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.

استخدم رابط المؤثرات الصوتية ليحل محل تأثير الصوت URL في البيان

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

اختر فئات CSS للزر وعدّل رمز فئات فئة CSS للزر

$(".button-class").mousedown

بعد تعديل الكود ، سيبدو هكذا.

الخطوة 4: أضف فئة CSS إلى الزر

لتوصيل الزر بالرموز ، نحتاج إلى إضافة فئات CSS إلى الزر ، حتى يعرف الرمز الزر الذي يتم النقر فوقه وتشغيل المؤثرات الصوتية.

وهذا لزر له تأثير صوتي. يمكنك الآن تخصيص الزر الخاص بك. وإذا كنت ترغب في إضافة المزيد من الأزرار بتأثيرات صوتية ، فيمكن القيام بذلك عن طريق نسخ جزء من الكود وتعديله قليلاً.

تمت إضافة أزرار إضافية مع المؤثرات الصوتية

قم بإنشاء الزر أو انسخ الزر الموجود

يمكنك نسخ الزر الموجود عن طريق النقر بزر الماوس الأيمن فوق الزر الموجود وتحديد نسخ ، ثم لصقه في أي قسم عن طريق النقر بزر الماوس الأيمن داخل هذا القسم.

انسخ جزءًا من الكود واضبط المتغيرات واسم فئة 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. تعديل المتغير audio1 وكل الكود الذي يستخدم المتغير audio1 على الكود الذي تم إنشاؤه حديثًا بتنسيق audio2.

انظر أيضا: العنصر: كيفية إنشاء بطاقة تأثير من محفظة

ثم استبدل عنوان url الخاص بالمؤثر الصوتي إذا كنت تستخدم مؤثرًا صوتيًا جديدًا للزر الجديد وقم بتغيير الرمز فئة زر في فئات CSS للأزرار التي تم إنشاؤها حديثًا.

سيبدو الرمز النهائي مثل الصورة التالية.

استبدل اسم فئة CSS للزر

سيكون للزر الذي تم إنشاؤه حديثًا تأثير صوتي أيضًا عند النقر فوقه. يمكنك إنشاء ما تريد.

تعد عناصر الصوت من بين الإضافات الرائعة لملف موقع انترنت. فهي لا توفر عنصرًا جذابًا لمواقع الويب فحسب ، بل تساعد أيضًا في خلق انطباع دائم لدى المستخدمين النهائيين.

اقرأ أيضا: العنصر: كيفية ترحيل موقع WordPress

ومع ذلك ، يجب أن يكون الإجراء أو النتيجة مصحوبًا بصوت فقط إذا كان يعزز أو يوضح رسالة مهمة للمستخدم بشكل كبير. أبلغ المستخدم بشيء يحتاج إلى اهتمامه حتى لا يكون له تأثير سلبي عليك موقع انترنت في مكان.

احصل على Elementor Pro الآن!

وفي الختام

لذا ! هذا كل ما في هذه المقالة التي توضح لك كيفية إضافة تأثير صوتي للزر Elementor. إذا كانت لديك أية مخاوف بشأن كيفية الوصول ، فأخبرنا بذلك تعليقات.

ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...