Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor.

Elementor'da bir düğme ses efektinin nasıl ekleneceğini öğrenmeniz mi gerekiyor? 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 düğmeyi oluşturmanız gerekir, düğmeyi istediğiniz gibi özelleştirebilirsiniz, çünkü Elementor'da düğmenizin güzel görünmesi için birçok seçenek vardır.

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.

Elementor'da düğme ses efekti

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.

Elementor'da düğme ses efekti

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.

Elementor ile web sitenizi kolayca oluşturun

Elementor oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

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.

Elementor'da düğme ses efekti

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.

Elementor'da düğme ses efekti

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.

Elementor'da düğme ses efekti

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.

Elementor'da düğme ses efekti

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

Elementor'da düğme ses efekti

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

Ses öğeleri, bir web sitesine yapılan harika eklemeler arasındadır. 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

Bununla birlikte, 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 bilgilendirmek, bunun yerine web siteniz üzerinde olumsuz bir etki yaratmaz.

Elementor Pro'yu Hemen Alın!

Sonuç

Böyle ! Elementor'da düğme ses efektinin nasıl ekleneceğini gösteren bu makale bu kadar. 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ş.

...