Elementor: как добавить звуковой эффект кнопки

Нужно узнать, как добавить звуковой эффект кнопки на Elementor ? Узнайте в этой статье.

Вы видите эти 2 кнопки?

Когда вы нажимаете на Кота, он издаст мяу, а когда вы нажмете кнопку на Цзянь, он будет издавать лай. В этой статье мы покажем вам, как добавить в 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 заканчивается. Изменить переменную audio1 и весь код, который использует переменную audio1 на вновь созданный код в audio2.

Смотрите также: Elementor: Как создать карту эффекта из портфолио

Затем замените URL-адрес звукового эффекта, если вы используете новый звуковой эффект для новой кнопки, и измените код. класс кнопки в ваших недавно созданных классах CSS кнопок.

Окончательный код будет выглядеть следующим образом.

Замените имя класса CSS кнопки

Ваша вновь созданная кнопка также будет иметь звуковой эффект при нажатии. Вы можете создать столько, сколько хотите.

Аудиоэлементы являются одним из замечательных дополнений к Веб-сайт. Они не только обеспечивают привлекательный элемент для веб-сайтов, но и помогают произвести неизгладимое впечатление на конечных пользователей.

Читайте также: Elementor: как перенести сайт WordPress

Однако действие или результат должны сопровождаться звуком только в том случае, если это значительно усиливает или уточняет важное сообщение для пользователя. Сообщите пользователю о чем-то, что требует его внимания, чтобы это не оказало негативного влияния на ваш Веб-сайт вместо этого.

Получите Elementor Pro прямо сейчас!

Заключение

Так ! Это все, что касается этой статьи, в которой показано, как добавить звуковой эффект кнопки на Elementor. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...