Elementor: Как да добавите звуков ефект на бутон

Трябва да разберете как да добавите звуков ефект на бутона Elementor ? Разберете в тази статия.

Виждате ли тези 2 бутона?

Когато щракнете върху От котката, ще издаде мяукане и когато щракнете върху бутона на Chien, той ще произведе лай. В тази статия ще ви покажем как да добавите 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

След като копирате кода, го поставете точно отдолу от Аудио 1 Завършва. Променете променливата Аудио1 и целия код, който използва променливата Аудио1 върху новосъздадения код в Аудио2.

Вижте също: Elementor: Как да създадете карта с ефект от портфолио

След това заменете URL адреса на звуков ефект, ако използвате нов звуков ефект за новия бутон, и променете кода бутон клас във вашите новосъздадени бутони CSS класове.

Крайният код ще изглежда като следното изображение.

Заменете името на CSS класа на бутона

Новосъздаденият ви бутон също ще има звуков ефект при щракване. Можете да създадете колкото искате.

Аудио елементите са сред страхотните допълнения към a уеб сайт. Те не само осигуряват привлекателен елемент за уебсайтове, но също така помагат да се създаде трайно впечатление на крайните потребители.

Прочетете още: Elementor: Как да мигрираме на уебсайт на WordPress

Действието или резултатът обаче трябва да бъдат придружени със звук само ако значително подсилват или изясняват важно съобщение за потребителя. Информирайте потребителя за нещо, което се нуждае от внимание, така че да не окаже отрицателно въздействие върху вас уеб сайт вместо това.

Вземете Elementor Pro сега!

Заключение

Така ! Това е всичко за тази статия, която ви показва как да добавите звуков ефект към бутона Elementor. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни в рамките на Връзка.

Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.

Но междувременно, споделете тази статия във вашите различни социални мрежи.

...