Elementor’a FullPage.js ekleyin (eklentiler olmadan)

Bu öğreticide, tam ekran sayfaları arasında otomatik olarak kaydırmanızı sağlayan benzersiz bir JavaScript kütüphanesi olan Elementor’a FullPage.js ekleyeceğiz. Bu, Elementor web sitenize profesyonel bir görünüm ekleyebilir ve bu nedenle orada daha popüler JavaScript kütüphanelerinden biridir. HTML öğesi bloğundan daha fazlasını kullanarak web sitenize fullpage.js girmenin basit bir yolunu göstermek için bu kılavuzu yapıyoruz. Unutmayın, FullPage.js’yi doğrudan Elementor web sitenize girmenizi sağlayan 39,00 $ karşılığında bir WordPress Premium eklentisi var.
Temel olarak, bir fullpage.js kütüphanesi alır ve her şeyi otomatik olarak düzenler ve güzel bir grafik kullanıcı arayüzü sunar. Elementor Editor’dan görüntülenen son etkimiz. Pahalı bir eklenti yok! Burada daha ucuz bir kılavuz tartışacağız. Bu öğretici, JS’ye alışık olmayan biri için yapılır, ancak bu kafanızın ötesine geçerse, eklentiyi kontrol etmeyi düşünün.
Doğru kodu görmek için Elementor Şablon dosyasını ve sayfa üreticisine nasıl entegre ettiğimizi alın. [Metin links_pemburian = “satın alma”]
FullPage.js’i Elementor’a yükleyin Adından da anlaşılacağı gibi, bu JavaScript kitaplığı tam tarayıcı sayfaları arasında kaydırmanıza olanak tanır. Fareyi aşağı kaydırdığınızda, ekran bir sonraki bölüme kilitlenir. İşte eylemdeki örnekler:
Bu örnekte, oldukça basit görünüyor, ancak gerçek uygulamada, web sitesinin tasarımcısı, sayfalar dolduğunda içeriği görüntülemek için büyük olasılıkla karmaşık animasyonlar ve geçişler kullanacaktır. İlham arıyorsanız, bu JavaScript Kütüphanesi’ni kullanan bir web sitesi koleksiyonu: Dikkate alınması gereken bir şey: Bu reklamı kullanmayı planlıyorsanız, ticari bir lisansa ihtiyacınız var. 9 kilodan (bir kez) başlar, bu yüzden çok kötü değil. Bu, GPLV3 ile uyumlu bir açık kaynak projesi için de ücretsizdir.
Artık kütüphanenin ne yaptığını ve nasıl çalıştığını bildiğimize göre, bir eklenti kullanmadan Elementor web sitesine koymak için çalışalım. Bu sadece paramızı tasarruf etmekle kalmayacak, aynı zamanda bize daha fazla esneklik ve güç verecektir. İlk Elementor sayfasını hazırlayın, Elementor sayfanızı ayarlayın. Örneğimiz için, yüksekliği görünüm ile aynı olacak şekilde ayarlayan üç ayrı element parçası ekledik. İstediğiniz kadar çok parça ekleyebilirsiniz, sadece görünüm ile aynı yüksekliğe sahip olduklarından emin olun. Ancak, FullPage.js tam sayfalar için yapılır – bu ayar olmadan entegrasyon işe yaramaz.
Her bölüme içeriğinizi yerleştirin. Bu örnek bu kütüphane için pratik kullanım vakalarını gerçekten tartışmaz, ancak genellikle her sayfayı alt sayfaya yol açan minimum bir içerikle doldurursunuz. Örneğin, bir ajans web siteniz varsa, her bölümde portföyleri, hizmetleri, kahramanları, iletişim formlarını ve diğerlerini gösteren fullpage.js’yi ana sayfada kullanabilirsiniz. Kullanıcınız sayfayı aşağı kaydırdığında, CSS veya paralaks animasyonları aracılığıyla görüntüleme alanına giren öğelerle memnuniyetle karşılanır. Bu etkilerin her ikisi de Elementor ve Pro -Elementor’un orijinal kurulumunu içerir. Son olarak, özel CSS sınıfının her bir bölümünü “.slide” verin. Bu, Elementor Editor’a “Devam” girerek ve orada bir ders hazırlayarak yapıldı. Sayfanız düzenlendikten sonra, JavaScript kütüphanesini Elementor sitesine gerçekten yükleme zamanı. Bu JavaScript Kütüphanesi Elementor’a FullPage.js ve Fullpage.css ekleyin, ayrıca bir CSS stil sayfası içermesi gerekir. Her ikisi de CDN kullanılarak Elementor sayfamıza yüklenir. Kendi kod tabanınızı korumanıza gerek olmadığı için bu rotayı öneririz. JavaScript kütüphanesini Elementor’a girmek söz konusu olduğunda, iki seçeneğiniz var. Daha kalıcı yöntem, etiketini PHP üzerinden WordPress sitesi başlığınıza eklemektir. Nasıl yapılacağını öğrenmek istiyorsanız, bu makaleyi takip edin.