Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62.

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

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

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

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

Шаг 1. Создайте кнопку

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

Как только кнопка будет готова, подготовьте звуковой эффект для кнопки и загрузите его в медиатеку WordPress. Вы можете использовать формат файла MP3 или WAV для звукового эффекта.

Чтобы загрузить звуковой файл в медиатеку WordPress, перейдите на панель инструментов WordPress и нажмите Медиа -> Добавить. Вы можете перетащить файлы или нажать Выбрать файлы загрузить их.

звуковой эффект кнопки на Elementor

Как только файлы будут загружены, Зайдите в медиатеку и нажмите на один из звуков, затем в появившемся окне скопируйте 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

Скопируйте часть кода и настройте переменные и имя класса 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 кнопок.

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

звуковой эффект кнопки на Elementor

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

звуковой эффект кнопки на Elementor

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

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

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

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

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

Заключение

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

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

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

...