Elementor’a özel bir imleci ekleyin
Bu öğreticide Elementor web sitesine özel bir imleç takibi ekleyeceğiz (ancak bu, herhangi bir WordPress kurulumunda çalışacak şekilde kolayca ayarlanabilir). Özel imleç izleyicileri, iyi tasarlanmış birkaç yüksek kaliteli sitede bulunabilir ve bu benzersiz işlevi kendi kreasyonlarınıza nasıl ekleyeceğinizi göstermek istiyoruz.
Beautiful Special Cursor, kendinizi ve sitenizi paketten ayırt etmek için ücretsiz, basit ve çok yararlı elementlere özel imleç izleme ekler. Özel imleç izleyici nedir? Bu efektin “Özel Fare Pointer”, “İmleç İzleme” ve daha fazlası gibi birçok adı vardır. Temel olarak, bu, varsayılan işaretçinizi noktalar ve daireler gibi grafik öğelerle değiştirir.
Varsayılan işaretçiyi değiştirerek benzersiz bir Hover efekti ekleyebilirsiniz. Bu öğreticide, imleci belirtilen düğmeye yönlendirirken, işaretçimiz sınırlarına bağlı kalır. WordPress’e nasıl özel bir imleci eklersiniz? WordPress web sitesine özel imleç izleme eklemenin birkaç yolu vardır. Bazı eklentiler genel WordPress kurulumlarına uygulanırken, diğer ek unsurlar veya paketler imleç izleme yardımcı programını içerir. Tüm bu çözümler arasındaki benzerlik, onlara ödenmesidir. WordPress’in önde gelen çözümü “WP özel imleçleri | WordPress imleç eklentisi “, Elementor tabanlı WordPress kurulumu için ana çözüm, dinamik eklentilere dahil olan imleç izlemenin faydasıdır.
WP Özel İmleç Ayarları
Dinamik Teklif.OOO
Dynamic Addons, herhangi bir Elementor web sitesine iyi bir ektir, ancak yılda 49,00 $ değerinde, birçok içerik üreticisinin bütçesinin dışına yerleştirilir. Her ikisini de kullandık, ancak WordPress web sitesine ekledikleri fiyatlar ve ek kodlar bazen bu çözümü biraz istenmeyen hale getiriyor. Sonuçta, eklemek istediğimiz tek şey basit bir işaretçi değiştirme. Bu öğreticide, Elementor web sitesine imleç izleme eklemek için ücretsiz bir yol bulmak istiyoruz, işleri mümkün olduğunca basit ve kolay tutuyor. Web sitelerine özel bir imleci izlemenin etkisini eklemenin kolay yolları. Çözümümüz için hafif bir JavaScript kütüphanesi bulmak istiyoruz ve WordPress web sitesine özel bir imleç etkisi ekleyen orada bulunuyoruz. Garip bir şekilde, orada çok fazla teklif yok, çünkü bu efekti herhangi bir web sitesine entegre etmenin ana yolu CSS ve JavaScript kılavuzu koleksiyonudur. Bu öğretici, sitenize efekt ekleyerek size rehberlik eder:
Temel sorun, yaklaşık 100 sıra JavaScript ve CSS olması ve bu dile alışık değilseniz, bu öğretici uzmanlığınızın biraz ötesindedir.
Bizim için, kolayca entegre olan kütüphaneler arıyoruz – Elementor’a birkaç kod hattı ile eklenebilen kütüphaneler ve bunu etkilemek için bunu eklemenin hızlı ve kolay yollarını arayanlar için öğreticiler yazabileceğimiz kütüphaneler. Magicmouse.js: Kütüphane Özel İmleç İzler Aramamız, GitHub’ın Github’ın deposunu Magicmouse.js adlı kütüphaneden bulmamız için üretir. Githeb sayfasında, fare (imleç) için bazı olağanüstü efektler yapmak için kendisine “Light JavaScript kütüphanesi olarak adlandırılır. Web sitenizde – Magicmouse.js: https://magicmousejs.web.app “.
Bu mevcut bir JavaScript kütüphanesi olduğundan, WordPress web sitesine entegre etmek ve herhangi bir Elementor sayfasında başlatmak için yeterince kolay olmalıdır. Bu aynı zamanda çok hafif, sadece birkaç kilobayt dosya boyutu ile. Son olarak, bu kod beş ay önce yayınlanan nispeten yenidir, yani çoğu modern tarayıcı ile uyumlu olabilir. Açık kaynak olarak, bu herhangi bir uygulamada, ticari veya başka bir uygulamada kullanılabilir. Başka bir avantaj, karmaşık entegrasyon olmadan WordPress’te çalıştırılabilen JavaScript vanilyası üzerine inşa edilmesidir. Temel olarak, işaretçiyi özel bir imleçle değiştirmek için basit bir iş çıkarır ve herhangi bir WordPress web sitesine kolayca eklenebilir.
Dynamic Addons, herhangi bir Elementor web sitesine iyi bir ektir, ancak yılda 49,00 $ değerinde, birçok içerik üreticisinin bütçesinin dışına yerleştirilir. Her ikisini de kullandık, ancak WordPress web sitesine ekledikleri fiyatlar ve ek kodlar bazen bu çözümü biraz istenmeyen hale getiriyor. Sonuçta, eklemek istediğimiz tek şey basit bir işaretçi değiştirme. Bu öğreticide, Elementor web sitesine imleç izleme eklemek için ücretsiz bir yol bulmak istiyoruz, işleri mümkün olduğunca basit ve kolay tutuyor. Web sitelerine özel bir imleci izlemenin etkisini eklemenin kolay yolları. Çözümümüz için hafif bir JavaScript kütüphanesi bulmak istiyoruz ve WordPress web sitesine özel bir imleç etkisi ekleyen orada bulunuyoruz. Garip bir şekilde, orada çok fazla teklif yok, çünkü bu efekti herhangi bir web sitesine entegre etmenin ana yolu CSS ve JavaScript kılavuzu koleksiyonudur. Bu öğretici, sitenize efekt ekleyerek size rehberlik eder:
Temel sorun, yaklaşık 100 sıra JavaScript ve CSS olması ve bu dile alışık değilseniz, bu öğretici uzmanlığınızın biraz ötesindedir.
Bizim için, kolayca entegre olan kütüphaneler arıyoruz – Elementor’a birkaç kod hattı ile eklenebilen kütüphaneler ve bunu etkilemek için bunu eklemenin hızlı ve kolay yollarını arayanlar için öğreticiler yazabileceğimiz kütüphaneler. Magicmouse.js: Kütüphane Özel İmleç İzler Aramamız, GitHub’ın Github’ın deposunu Magicmouse.js adlı kütüphaneden bulmamız için üretir. Githeb sayfasında, fare (imleç) için bazı olağanüstü efektler yapmak için kendisine “Light JavaScript kütüphanesi olarak adlandırılır. Web sitenizde – Magicmouse.js: https://magicmousejs.web.app “.
Bu mevcut bir JavaScript kütüphanesi olduğundan, WordPress web sitesine entegre etmek ve herhangi bir Elementor sayfasında başlatmak için yeterince kolay olmalıdır. Bu aynı zamanda çok hafif, sadece birkaç kilobayt dosya boyutu ile. Son olarak, bu kod beş ay önce yayınlanan nispeten yenidir, yani çoğu modern tarayıcı ile uyumlu olabilir. Açık kaynak olarak, bu herhangi bir uygulamada, ticari veya başka bir uygulamada kullanılabilir. Başka bir avantaj, karmaşık entegrasyon olmadan WordPress’te çalıştırılabilen JavaScript vanilyası üzerine inşa edilmesidir. Temel olarak, işaretçiyi özel bir imleçle değiştirmek için basit bir iş çıkarır ve herhangi bir WordPress web sitesine kolayca eklenebilir.
Simple belgelere göre WordPress’e MagicMouse ekleyin, herhangi bir web sitesine bir Magic Mouse kütüphanesi yüklemek için JavaScript ve CSS dosyalarını gerçek siteye çağırmanız ve ardından sayfa başına başlatmanız gerekir. Daha sonra site genelinde özel bir Hover efekti de ekleyebilirsiniz. Eğiticimizin geri kalanı, JavaScript ve CSS dosyalarını WordPress sitemize tam olarak nasıl yükleyebileceğimizi tartışacak ve ardından Elementor sayfamızdaki gerçek efektleri başlatacağım.
Adım 2: Sayfalardaki ilk MagicMouse etkileri (tek sayfalar veya global)
Adım 3 (isteğe bağlı): yönün etkisini ayarlayın
Buradaki tüm adımlardan WordPress’e JS ve CSS MagicMouse dosyaları ekleyin, bu en zor ve karmaşık olacak. İlk olarak, GitHub’ın deposundaki en son dosyaları indireceğiz ve ardından Function.php dosyamızı düzenleyerek Core WP sitemize JS ve CSS dosyalarını gireceğiz.
Bu adım adım öğreticiyi takip ettiğiniz sürece, çok zor olmamalı, ancak bu adımı tamamen kaçırmak ve sadece sihirli farenin Elementor siteniz üzerindeki etkilerini başlatmak istiyorsanız, sahip olduğumuz bu eklentiyi indirebilirsiniz. WordPress’e bir kütüphane eklemek için özel olarak yapılmıştır.
Eklentiyi alın, indirin, ardından WordPress sitenize yükleyin. Daha sonra, kodu sayfanıza veya başlık elementine kopyalayıp eklemeyi içeren 2. Adım 2’ye atlayabilirsiniz. İşte burada!
Pekala, bu promosyonun sonu. WordPress’e nasıl bir kütüphane ekleyeceğinize bakalım.
WordPress’e JavaScript ve CSS eklenirken, bunu yapmak ve resmi olarak önerilen yönteme “Enqueing” denir (eklentimizin sizin için otomatik olarak yaptığı şey budur). İlk olarak, GitHub Repo’dan en son .js ve .css dosyasını indirin. Burada bulundular: Tek ihtiyacınız olan bu iki dosya:
Ardından, bu sayfaya bağlantı, FTP kullanarak bu iki dosyayı tema varlık klasörünüze yükleyin. Örneğimizde, Hello Elementor temasını kullanıyoruz.
Kök dizin temasında Varlık klasörüne gidin. Ardından Magic_mouse.js dosyasını Varlıklar klasörüne -> JS ve varlıklar klasöründeki Magic -ouse.css dosyasına iletin -> CSS.
Merhaba Elementor, varsayılan olarak JS ve CSS klasörlerini içermez, bu nedenle yalnızca yenilerini oluşturur ve dosya ekleriz. Dosya yüklendikten sonra WordPress’e ekleme zamanı. Yerel olarak (CDN aracılığıyla değil) barındırılan üçüncü bir bölüm komut dosyası ve stil sayfası yüklerken, WordPress sitenizin kuyruğuna kaydolmalı ve girmeniz gerekir.
Bunu yapmanın resmi yolu bir çocuk teması oluşturmak ve bir function.php özel dosyası hazırlamaktır, ancak biraz sapacağız, çünkü yöntemimizin yönetilmesi daha kolaydır. Kod snippet adlı ücretsiz eklentiyi indirin. Kurulduktan sonra yeni bir kod görüntüsü yapın. Bu, işlevlerinizi girme ihtiyacının yerini alır. Bu, herhangi bir şey için functions.php rotasını kullanmak yerine kullandığımız bir eklentidir.
Adım 2: Sayfalardaki ilk MagicMouse etkileri (tek sayfalar veya global)
Adım 3 (isteğe bağlı): yönün etkisini ayarlayın
Buradaki tüm adımlardan WordPress’e JS ve CSS MagicMouse dosyaları ekleyin, bu en zor ve karmaşık olacak. İlk olarak, GitHub’ın deposundaki en son dosyaları indireceğiz ve ardından Function.php dosyamızı düzenleyerek Core WP sitemize JS ve CSS dosyalarını gireceğiz.
Bu adım adım öğreticiyi takip ettiğiniz sürece, çok zor olmamalı, ancak bu adımı tamamen kaçırmak ve sadece sihirli farenin Elementor siteniz üzerindeki etkilerini başlatmak istiyorsanız, sahip olduğumuz bu eklentiyi indirebilirsiniz. WordPress’e bir kütüphane eklemek için özel olarak yapılmıştır.
Eklentiyi alın, indirin, ardından WordPress sitenize yükleyin. Daha sonra, kodu sayfanıza veya başlık elementine kopyalayıp eklemeyi içeren 2. Adım 2’ye atlayabilirsiniz. İşte burada!
Pekala, bu promosyonun sonu. WordPress’e nasıl bir kütüphane ekleyeceğinize bakalım.
WordPress’e JavaScript ve CSS eklenirken, bunu yapmak ve resmi olarak önerilen yönteme “Enqueing” denir (eklentimizin sizin için otomatik olarak yaptığı şey budur). İlk olarak, GitHub Repo’dan en son .js ve .css dosyasını indirin. Burada bulundular: Tek ihtiyacınız olan bu iki dosya:
Ardından, bu sayfaya bağlantı, FTP kullanarak bu iki dosyayı tema varlık klasörünüze yükleyin. Örneğimizde, Hello Elementor temasını kullanıyoruz.
Kök dizin temasında Varlık klasörüne gidin. Ardından Magic_mouse.js dosyasını Varlıklar klasörüne -> JS ve varlıklar klasöründeki Magic -ouse.css dosyasına iletin -> CSS.
Merhaba Elementor, varsayılan olarak JS ve CSS klasörlerini içermez, bu nedenle yalnızca yenilerini oluşturur ve dosya ekleriz. Dosya yüklendikten sonra WordPress’e ekleme zamanı. Yerel olarak (CDN aracılığıyla değil) barındırılan üçüncü bir bölüm komut dosyası ve stil sayfası yüklerken, WordPress sitenizin kuyruğuna kaydolmalı ve girmeniz gerekir.
Bunu yapmanın resmi yolu bir çocuk teması oluşturmak ve bir function.php özel dosyası hazırlamaktır, ancak biraz sapacağız, çünkü yöntemimizin yönetilmesi daha kolaydır. Kod snippet adlı ücretsiz eklentiyi indirin. Kurulduktan sonra yeni bir kod görüntüsü yapın. Bu, işlevlerinizi girme ihtiyacının yerini alır. Bu, herhangi bir şey için functions.php rotasını kullanmak yerine kullandığımız bir eklentidir.
Elementor sitemize .js ve .css dosyalarımızı kuyruklamak ve kaydetmek için görüntüleri kullanacağız. Temel olarak, ziyaretçiler sayfayı yüklediğinde sitede her iki dosyayı da içermektir. etiket ve etiket ile ne yapılabileceğini yaparsınız (bu bir şey yapmanın doğru yolu bu olsa da). İlk olarak, enqueue oluşturacağız ve fare_magic.js dosyalarını kaydedeceğiz. Bunu yapmak için .js dosyasının konumunu adlandırın ve belirleyin. Öğreticimizi takip ederseniz, bu satırın görüntülenmesidir: işlev Isotropic_enqueue_javascript () {wp_enqueue_script (‘mousemagic-js’, get_template_directory_uri (). ‘/Ssets/js/magic_mouse.js’); } Ardından, sayfanız ön uç ziyaretçileri için yüklendiğinde yükleyen dosyayı kaydedin. Add_action (‘wp_enqueue_scripts’, ‘izotropic_enqueue_javascript’); Şimdi stil sayfası CSS için de aynısını yapacağız (bu kod açısından biraz farklıdır): işlev Isotropic_enqueue_stylesheets () {wp_enqueue_style (‘Mousemagic-css’, get_template_directory_uri (); } Kayıt: add_action (‘wp_enqueue_scripts’, ‘Isotropic_enqueue_stylesheets’); Tam PHP parçalarınız şöyle görünecek:
Kod görüntülerini kaydedin ve etkinleştirin. Şimdi, web sitemiz ön ucuna yüklenip yüklenmediğimiz .css ve .js dosyasının olup olmadığını test edeceğiz. Herhangi bir Fonend sayfasına gidin ve Dev Araçlar Tarayıcısını (Ctrl + Shift + I) yükleyin. Devtools göründükten sonra, sayfanızı yeniden yüklemek için ağ sekmesini açın ve CRTL + R. Ardından, “Sihir” i arayın ve CSS ve JS dosyalarının görünüp görünmediğini kontrol edin. Evet ise, bu, sayfanıza yüklendikleri anlamına gelir ve ikinci adıma geçebilirsiniz. Bu bölümü kapsamak için, tüm ilk adımları geçmenizi sağlayan bir eklenti yaptığımızı tekrar bildirmek istiyorum. Sadece ikinci adıma yükleyin, etkinleştirin ve geçin. Daha basit bir kısım için şimdi sayfalar üzerindeki (tek veya global sayfalar) MagicMouse etkisinin başlatılması. MagicMouse şimdi web sitemize kuruldu. Tek yapmamız gereken, varsayılan imleci özel bir işaretçi ile değiştirmek için Elementor/WordPress sayfanıza anlatan küçük bir kod eklemektir. GitHub’daki belge, bu kodu efekt görüntülemek istediğiniz herhangi bir sayfaya eklemenizi söyler. İlk olarak, kodu/seçeneği tartışalım, sonra Elementor sitenize nasıl ekleyeceğinizi tartışalım. optionlar = {“cursorouter”: “circle-basic”, “hovereffect”: “circle-hareket”, “hoveritemmove”: false, “defaultcursor”: false, “ouTheight”: 30 }; MagicMouse (seçenekler);
Alıştırıcı “daire içi” veya “devre dışı” olabilir.
Alıştırıcı “daire içi” veya “devre dışı” olabilir.
HoverEffect’in üç seçeneği vardır: varsayılan: “Circle-hareket”, diğer seçenekler: “Pointer-bulanıklık”, “Pointer-Overlay” NOKTU VARSAYICI VE İLE İLGİLİ OLUR.
Dış genişlik ve ouTheight imleç etkisinin boyutunu belirler.
Seçeneklerinizi seçtikten/ayarladıktan sonra, artık sayfa yüklemesi üzerindeki efektini başlatacak ve stilinizi uygulayacak bir kod eklemeniz gerekir.Burada birkaç seçeneğiniz var.
Belirli bir sayfaya ekle
Küresel Ekle (Elementor Way)
Global ADD (WordPress yöntemi)
Her seçeneği tartışalım.Belirli bir sayfaya ekleyin kolaydır.İlk olarak, özel bir imleci görüntülemek istediğiniz sayfa için Elementor’un düzenleyicisini açın.Ardından, HTML öğesini sayfanıza sürükleyin.Son olarak, kodu yapıştırın, sayfayı kaydedin ve ön uçta önizleyin.Her şey iyi çalışıyorsa, şimdi Elementor web sitenizde özel bir imleç almanız gerekir.
Bunu küresel olarak yapmak (tüm sayfalara özel imleçler uygulamak), bu HTML + bloğunu Elementor’daki üstbilgi/altbilgi şablonuna ekleyerek yapılabilir. Ayrıca bir kod görüntüsü ve biraz PHP kullanarak sitenize bir kod ekleyebilirsiniz. Aşağıdaki öğretici bununla ilgilidir. Şimdi, sadece her şeyi test edin ve Elementor web sitenizde veya WordPress’te ücretsiz olarak özel bir metmilyalı olacak. Oldukça havalı, değil mi? İşaretçiniz belirli öğelerin üzerinde yüzdüğünde MagicMouse.js’nin özel efektlere destek verdiği özel düğme efektini ekleyin. Bu Video Demosuna bakın: İmleci düğmeye yönlendirdiğimizde, özel imlecimizin dış halkası sınıra kilitlenir. Oldukça havalı, değil mi? Bu JavaScript kütüphanesi bu etkiyi destekledi – tek yapmanız gereken SNAP efektini uygulamak istediğiniz öğelere 2 özel sınıf eklemek. Sihirli uçurtma uçurtma __ Rahatsız edici kısım, bu sınıfları sadece öğenin öğesine ekleyemeyeceğinizdir, çünkü işe yaramayacaktır. Bunun nedeni, Elementor öğelerinin birçok sınıfı, kimliği ve DOM katmanları olmasıdır. Elementor sitenizde SNAP efektinin çalışmasını istiyorsanız, demo sayfasındaki düğmelerimiz gibi saf HTML öğeleri eklemeniz gerekir:
İşte kod:
Küresel Ekle (Elementor Way)
Global ADD (WordPress yöntemi)
Her seçeneği tartışalım.Belirli bir sayfaya ekleyin kolaydır.İlk olarak, özel bir imleci görüntülemek istediğiniz sayfa için Elementor’un düzenleyicisini açın.Ardından, HTML öğesini sayfanıza sürükleyin.Son olarak, kodu yapıştırın, sayfayı kaydedin ve ön uçta önizleyin.Her şey iyi çalışıyorsa, şimdi Elementor web sitenizde özel bir imleç almanız gerekir.
Bunu küresel olarak yapmak (tüm sayfalara özel imleçler uygulamak), bu HTML + bloğunu Elementor’daki üstbilgi/altbilgi şablonuna ekleyerek yapılabilir. Ayrıca bir kod görüntüsü ve biraz PHP kullanarak sitenize bir kod ekleyebilirsiniz. Aşağıdaki öğretici bununla ilgilidir. Şimdi, sadece her şeyi test edin ve Elementor web sitenizde veya WordPress’te ücretsiz olarak özel bir metmilyalı olacak. Oldukça havalı, değil mi? İşaretçiniz belirli öğelerin üzerinde yüzdüğünde MagicMouse.js’nin özel efektlere destek verdiği özel düğme efektini ekleyin. Bu Video Demosuna bakın: İmleci düğmeye yönlendirdiğimizde, özel imlecimizin dış halkası sınıra kilitlenir. Oldukça havalı, değil mi? Bu JavaScript kütüphanesi bu etkiyi destekledi – tek yapmanız gereken SNAP efektini uygulamak istediğiniz öğelere 2 özel sınıf eklemek. Sihirli uçurtma uçurtma __ Rahatsız edici kısım, bu sınıfları sadece öğenin öğesine ekleyemeyeceğinizdir, çünkü işe yaramayacaktır. Bunun nedeni, Elementor öğelerinin birçok sınıfı, kimliği ve DOM katmanları olmasıdır. Elementor sitenizde SNAP efektinin çalışmasını istiyorsanız, demo sayfasındaki düğmelerimiz gibi saf HTML öğeleri eklemeniz gerekir:
İşte kod: