Elementor Web Sitesine Komut Dosyası Eklemenin 3 Kolay Yolu (Tam Bir Kılavuz)

Yayınlanan: 2022-12-14

Bazen JavaScript kullanarak Elementor web sitenize farklı araçlar ve hizmetler eklemeniz gerekir. Ya da web sitenizi daha fazla öne çıkarmak için özel JavaScript işlevselliğini uygulamak isteyebilirsiniz.

Ama nasıl yapacaksın? JavaScript'i Elementor'a nasıl ekleyebilirsiniz?

Bu yazıda size nasıl olduğunu göstereceğim.

Elementor'a hazır bir betik veya özel JavaScript kodu eklemek isteyip istemediğinizi düşündüğünüzden daha kolay.

Bu yazıda, Elementor'da komut dosyası eklemek için üç yöntem paylaşacağım.

İçindekiler
  1. Elementor Web Sitelerine Ne Zaman JavaScript Eklemeniz Gerekir?
  2. Elementor'da Komut Dosyası Nasıl Eklenir (3 Basit Yol)
  3. Elementor'da Komut Dosyası Eklemeyle İlgili SSS
  4. Sarma

Elementor Web Sitelerine Ne Zaman JavaScript Eklemeniz Gerekir?

JavaScript, istemci tarayıcısında çalışan bir programlama dilidir. Bu popüler betik dili ile web sitenize sınırsız sayıda gelişmiş özellik ve işlevsellik ekleyebilirsiniz.

Elementor size web sitesi tasarımını zahmetsiz hale getirme seçeneği sunar. Ancak hesap makinesi, animasyonlar ve diğer harika şeyler gibi işlevsel bir özellik eklemek istediğinizde Javascript kullanabilirsiniz.

Belirli etkileşimli işlevleri eklerken, Elementor web sitenize üçüncü taraf JavaScript kitaplıkları veya çerçeveleri eklemeniz gerekebilir.

Google Analytics, AdSense, Etiket Yöneticisi ve diğer hizmetleri etkinleştirmek istiyorsanız, etkinleştirme komut dosyası etiketini web sitenizin üstbilgi veya altbilgi alanına eklemeniz gerekir.

Elementor'da Komut Dosyası Nasıl Eklenir (3 Basit Yol)

Şimdi bu makalenin asıl kısmına yani Elementor'a JavaScript nasıl eklenir kısmına geliyoruz.

Aşağıdaki 3 yöntemi inceleyin:

  1. Elementor HTML gereci
  2. Elementor Pro özel kod özelliği
  3. Ücretsiz bir eklenti kullanın

Başlayalım.

Yöntem 1: Elementor HTML Widget'ı

Sayfayı Elementor düzenleyici paneline açın.

Burada, özel JavaScript kodunu kullanarak bir yukarı kaydırma özelliği uygulayacağız.

Basit bir düğme ekledim ve ' başa dön ' şeklinde bir CSS düğme kimliği belirledim. Bu düğme kimliğini kullanarak işlevselliği daha sonra halledeceğim.

Başa dön düğmesi ekle

Şimdi HTML widget'ını sayfanızdaki herhangi bir yere sürükleyip bırakın.

Elementor HTML widget'ı ekleyin

JavaScript kodunuzu içerik alanına ekleyin. benimkini ekledim

 <script> let mybutton = document.getElementById("back-to-top"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } mybutton.addEventListener("click", scrollToTop); function scrollToTop() { window.scrollTo({ top: 0, behavior: "smooth" }); </script>

Kodun tamamını HTML <script></ script> etiketiyle sarmaladığınızdan emin olun. Düğme kimliğini tetiklemek istediğiniz yere yerleştirin.

Elementor'da özel JavaScript kodu ekleyin

Son olarak, mevcut değişiklikleri kaydetmek için yeşil Güncelle düğmesine tıklayın.

Her şeyin düzgün çalışıp çalışmadığını görmek için web sitesini ziyaret edin.

İşte aldın! Özel JavaScript ile Elementor web sitenize harika bir özellik eklediniz!

Yöntem 2: Elementor Pro Özel Kod Özelliği

Elementor HTML widget'ı, Elementor web sitenize ham JavaScript veya HTML kodu ekleme seçeneği sunar.

Ancak Elementor özel kod özelliği daha fazla olasılıkla gelir. Web sitenizin üstbilgi ve altbilgi alanına komut dosyası etiketleri eklemek için kullanabilirsiniz.

Elementor > Özel Kod'a gidin.

Elementor özel kodu

Şimdi kodunuzun başlığını yazın ve yapıştırın. <head> , <body> start ve </body> end öğelerini ekleyeceği kod konumunu ayarlayabilirsiniz.

Ayrıca önceliği 1 ile 10 arasında tanımlayın. Daha düşük bir sayı, daha yüksek öncelik anlamına gelir.

Öncelik 1'i ayarladıysanız, bir kullanıcı web sitenizi ziyaret ettiğinde komut dosyası ilk önce oluşturulur.

Elementor özel koduyla Bootstrap CDN komut dosyası ekleyin

Şimdi, açılır listeden koşulu ayarlayın ve ardından Kaydet düğmesine basın.

Koşulu ayarla

Çek ver. Tam olarak planladığınız gibi görüntülenmelidir.

Başlığa eklenen komut dosyası etiketini kontrol edin

Yöntem 3: Ücretsiz Bir Eklenti Kullanın

WPCode, web sitenizin üstbilgi ve altbilgi alanına özel kod ve komut dosyası etiketleri eklemenizi sağlayan ücretsiz bir eklentidir. Web sitenize ekleyebileceğiniz birçok önceden hazırlanmış kod parçacığı içeren kullanışlı bir kitaplıkla birlikte gelir.

Elementor web sitemizin altbilgi kısmına birkaç komut dosyası ekleyelim.

Öncelikle eklentiyi web sitenize kurun.

Ardından Kod Parçacıkları > Üstbilgi ve Altbilgi'ye gidin.

Kod Parçacığı üst bilgi alt bilgi bölümü

Şimdi script etiketini uygun yere ekleyin. Üst bilgi, gövde ve alt bilgi alanına ekleyebilirsiniz.

Altbilgiler bölümüne iki adet üçüncü taraf kitaplık komut dosyası ekledik.

Son olarak, Değişiklikleri Kaydet düğmesine basın.

WPCode eklentisi ile Elementor'a komut dosyası ekleyin

Şimdi web sitenize gidin ve betiğin çalıştığından emin olun.

Altbilgi alanında eklenen komut dosyasını kontrol edin

Elementor'da Komut Dosyası Eklemeyle İlgili SSS

İnsanların Elementor sayfalarına JavaScript ekleme hakkında sık sık sordukları soruların yanıtlarını bulalım.

Elementor Siteme Ücretsiz Komut Dosyası Ekleyebilir miyim?

Evet, JavaScript kodunu Elementor'a ücretsiz olarak ekleyebilirsiniz. Ancak web sitenizin üst bilgi veya alt bilgi alanına bir komut dosyası etiketi eklemek için yalnızca premium sürümle birlikte gelen Elementor Özel Kod özelliğini kullanmanız gerekir.

Elementor'a HTML, CSS ve JavaScript'i Nasıl Eklersiniz?

Elementor'a HTML ve JavaScript eklemek için Elementor HTML widget'ını kullanabilirsiniz. Özel CSS kodu eklemek için Gelişmiş > Özel CSS'ye gidin ve kodunuzu yazın.

Özel JavaScript Kodu Web Sitesi Tasarımımı Bozabilir mi?

Tam olarak değil! Ancak JavaScript'in nasıl çalıştığını bilmiyorsanız, bunun için bir şans olabilir. Önce bir hazırlık web sitesinde test etmenizi öneririz. Her şey yolunda giderse canlı siteye ekleyebilirsiniz.

Sarma

Bir Elementor web sitesine özel JavaScript eklemek, nasıl yapılacağını bildiğiniz zaman kolaydır. Harika görüntü efektleri eklemek veya WordPress temanızın veya Elementor'unuzun izin vermediği benzersiz bir özelliği uygulamak isteyip istemediğiniz. Burada özel JavaScript bir süper kahraman gibi çalışır.

JavaScript ile daha iyi özelleştirme yapabilir ve web sitenizi ziyaretçiler için daha çekici hale getirebilirsiniz.

Bu kılavuzda, Elementor web sitesine komut dosyası eklemenin 3 yolunu paylaştım.

Umarım bu makaleyi beğenirsiniz ve aradığınız çözümü bulursunuz.

Bunun gibi daha kullanışlı ipuçları ve püf noktaları almak için bültenime katılın. Gönderiyi paylaşın ki diğerleri de öğrensin.

İyi günler!