Elementor: Düğme Ses Efekti Nasıl Eklenir

Düğme ses efektinin nasıl ekleneceğini öğrenmeniz gerekiyor Elementor ? Bu makalede öğrenin.

Bu 2 düğmeyi görüyor musunuz?

üzerine tıkladığınızda kedinin, miyav yapacak ve düğmeyi tıkladığınızda chien, bir havlama sesi üretecektir. Bu yazımızda size nasıl ekleyeceğinizi göstereceğiz. Elementor tıklandığında düğmeye bir ses efekti.

Elementor'da düğmeye ses efekti nasıl eklenir

1. Adım: Bir düğme oluşturun

İlk önce butonu oluşturmanız gerekiyor, butonu istediğiniz gibi özelleştirebilirsiniz, çünkü Elementor düğmenizi güzelleştirmek için birçok seçeneğe sahiptir.

2. Adım: Ses efekti bağlantısını hazırlayın

Düğme hazır olduğunda, şimdi düğme için ses efektini hazırlayın ve WordPress medya kitaplığına yükleyin. Ses efekti için MP3 veya WAV dosya formatını kullanabilirsiniz.

Ses dosyasını WordPress medya kitaplığına yüklemek için WordPress panosuna gidin ve Medya -> Ekle. Dosyaları sürükleyip bırakabilir veya tıklayabilirsiniz. Dosyaları seçin onları yüklemek için.

Dosyalar indirildikten sonra, medya kitaplığına gidin ve seslerden birine tıklayın, ardından görünen pencerede kopyalayın. dosya URL'si ses efektinin bağlantısını almak için.

3. Adım: Aşağıdaki HTML kodunu ekleyin

Butondan ses üretebilmek için aşağıdaki HTML kodunu kullanmamız gerekmektedir.

<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>

Tuval alanına bir HTML widget'ı ekleyin ve kodu bloğa yapıştırın HTML Kodu.

Değiştirmek için ses efekti bağlantınızı kullanın Ses Efekti-URL'si talimatta

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

Düğme için CSS sınıflarını seçin ve sınıfların kodunu değiştirin, düğmenin CSS sınıfı

$(".button-class").mousedown

Kodu değiştirdikten sonra, böyle görünecek.

Adım 4: Düğmeye bir CSS sınıfı ekleyin

Butonu kodlara bağlamak için butona CSS sınıfları eklememiz gerekiyor ki kod hangi butona tıklandığını bilsin ve ses efektlerini tetiklesin.

Ve bu ses efektli bir düğme içindir. Artık düğmenizi özelleştirebilirsiniz. Ve ses efektli daha fazla düğme eklemek istiyorsanız, kodun bir kısmını kopyalayıp biraz değiştirerek yapılabilir.

Ses efektli ek düğmeler eklendi

Düğmeyi oluşturun veya mevcut düğmeyi kopyalayın

Mevcut düğmeyi sağ tıklayıp Kopyala'yı seçerek mevcut düğmeyi kopyalayabilir, ardından o bölümün içine sağ tıklayarak herhangi bir bölüme yapıştırabilirsiniz.

Kodun bir kısmını kopyalayın ve değişkenleri ve ikinci düğmenin CSS sınıf adını ayarlayın

Ses efektini tetikleyen önceki HTML kodunun bazı kısımlarını kopyalayalım, aşağıdaki kod aşağıdaki gibidir.

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

Kodu kopyaladıktan sonra hemen altına yapıştırın Ses 1 Bitiş. Değişkeni değiştir ses1 ve değişkeni kullanan tüm kodlar ses1 yeni oluşturulan kodda ses2.

Ayrıca bakınız: Elementor: Bir portföyden efekt kartı nasıl oluşturulur

Ardından, yeni düğme için yeni bir ses efekti kullanıyorsanız ses efekti url'sini değiştirin ve kodu değiştirin düğme sınıfı yeni oluşturulan düğme CSS sınıflarınızda.

Son kod aşağıdaki resim gibi görünecek.

Düğmenin CSS sınıf adını değiştirin

Yeni oluşturduğunuz buton, tıklandığında da ses efektine sahip olacaktır. İstediğiniz kadar oluşturabilirsiniz.

Ses öğeleri, büyük eklemeler arasındadır. Site Web. Yalnızca web siteleri için çekici bir unsur sağlamakla kalmaz, aynı zamanda son kullanıcılar üzerinde kalıcı bir izlenim yaratmaya da yardımcı olurlar.

Ayrıca Oku: Elementor: Bir WordPress web sitesi nasıl taşınır

Ancak, eyleme veya sonuca, yalnızca kullanıcıya önemli bir mesajı önemli ölçüde pekiştiriyor veya açıklıyorsa ses eşlik etmelidir. Kullanıcıyı, dikkat etmesi gereken bir şey hakkında bilgilendirin, böylece sizin üzerinde olumsuz bir etki yaratmaz. Site Web Bunun yerine.

Elementor Pro'yu Hemen Alın!

Sonuç

Bu yüzden ! Düğme ses efektinin nasıl ekleneceğini gösteren bu makale için hepsi bu kadar. Elementor. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa, bize içinde bildirin. Yorumlar.

Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...