Elementor’a ön yükleyici nasıl eklenir
Ön yükleyici (veya yükleme animasyonu), web sayfaları yükleme işleminin ilerlemesini gösterir. Sunucular ve tarayıcılar sayfalarınızı oluşturmak için birlikte çalışırken sadece birkaç saniye sürerler, ancak önemli amaçlara hizmet edebilir – içerik yüklerken ziyaretçileri web sitenizde tutun.
Onlar olmadan, siteniz büyükse, ziyaretçiler orada siteyi ziyaret etmek ve sayfaları, önce HTML içeriğini, sonra CSS’yi, sonra yazı tipini, sonra resimleri oluşturmanın kötü sürecini görmek zorunda kalabilirler … Bu kötü bir ilk izlenim ve Uzun zaman alıyorsa, ziyaretçilerin “Geri” düğmesini tıklamaları kolay olabilir ve Google’daki ikinci bağlantıya gidebilir. İyi değil!
Komik ve eğlenceli animasyonlar içerir. Elementor’a nasıl önceden yükleyici yapılacağını görelim. Elementor web sitenize animasyonlu bir Pramu’um eklemek için bir eklenti arıyorsanız, Elementor ile Elementor’a Preloader eklemek, en iyisi Loftloader.
Bunu son birkaç yıldır birçok projede kullanıyoruz – yüklendiğinde logolarını görüntülemek isteyen basit bir şirket web sitesinden SpeedOPP raporumuza (eylemde görmek için URL’yi girin). Bu eklentiyi Elementor ile kullanmanızı öneririz, çünkü geçmişte kullandık ve iyi çalıştık. Bunu yönetmesi de çok basit. Bu yol.
İlk adım elementine ön yükleyicileri eklemek için bir Loftloader kullanın, eklenti dosyasını Envato’dan alın. Loftloader’ın Pro sürümünü seçtik, çünkü sınırlı bir Lite sürümünden daha fazla özellik ile donatılmıştır. Yalnızca ayarlayamayacağınız (ancak ücretsiz) çok temel bir net yükleyici arıyorsanız, bir sonraki bölüme gidin. Ancak, çok fazla ayar eklemek istiyorsanız, bu en iyi seçimdir. WordPress sitenize yüklendikten sonra, Ayar düğmesini tıklayın (veya ekranı açarak, ayarlayarak oraya gidin). Bu, önceden uyumlu ayarlamalar içerecektir. Artık ayarlamak için birkaç seçeneğiniz var. Loftloader’ı müşterimizin Elementor sitesinde nasıl ayarladığımızı görelim.
Komik ve eğlenceli animasyonlar içerir. Elementor’a nasıl önceden yükleyici yapılacağını görelim. Elementor web sitenize animasyonlu bir Pramu’um eklemek için bir eklenti arıyorsanız, Elementor ile Elementor’a Preloader eklemek, en iyisi Loftloader.
Bunu son birkaç yıldır birçok projede kullanıyoruz – yüklendiğinde logolarını görüntülemek isteyen basit bir şirket web sitesinden SpeedOPP raporumuza (eylemde görmek için URL’yi girin). Bu eklentiyi Elementor ile kullanmanızı öneririz, çünkü geçmişte kullandık ve iyi çalıştık. Bunu yönetmesi de çok basit. Bu yol.
İlk adım elementine ön yükleyicileri eklemek için bir Loftloader kullanın, eklenti dosyasını Envato’dan alın. Loftloader’ın Pro sürümünü seçtik, çünkü sınırlı bir Lite sürümünden daha fazla özellik ile donatılmıştır. Yalnızca ayarlayamayacağınız (ancak ücretsiz) çok temel bir net yükleyici arıyorsanız, bir sonraki bölüme gidin. Ancak, çok fazla ayar eklemek istiyorsanız, bu en iyi seçimdir. WordPress sitenize yüklendikten sonra, Ayar düğmesini tıklayın (veya ekranı açarak, ayarlayarak oraya gidin). Bu, önceden uyumlu ayarlamalar içerecektir. Artık ayarlamak için birkaç seçeneğiniz var. Loftloader’ı müşterimizin Elementor sitesinde nasıl ayarladığımızı görelim.
İlk olarak, ön yükleyicinin etkinleştirildiğinden emin olun. Ardından, görünüm kurallarınızı belirleyin. Genellikle verandanın unsurlarında veya sayfalarında yürümek için ön hazırlık hazırlarız ve site yeterince ağırsa ve yüklemek için zaman gerektiriyorsa, küresel olarak etkinleştireceğiz. Gerekirse sayfaları ve yayınları da hariç tutabilirsiniz. Bu, yönün yönüne ve bunun gibi şeylere geldiğinde yararlıdır.
Ekran Koşulları
Ekran Koşulları
Arka plan ayarı daha sonra, arka planı ayarlayın. Genellikle müşterinin markasına uygun sağlam ve koyu renkler kullanırız. Şüphe varsa, Gray’i seçin. Ayrıca bir resim de seçebilirsiniz (Photoshop gibi bir şeyle yapılmış bir arka plan kullanıyorsanız iyi).
Ön yükleyici için en önemli ayarlardan biri arka plan ayarına dahildir; “Son Animasyon”. Her zaman solmayı seçiyoruz, ancak bölünmeden küçülmeye kadar birçok seçeneğiniz var.
Manipüle edilecek bir sonraki ayar gerçek yükleme simgesidir. Birçok ön ayar arasından seçim yapabilirsiniz, ancak bu aracı çok güçlü kılan şey, kendi dosyanızı yükleyebilmenizdir. Bu animasyonlu GIF, şirket logosu veya herhangi bir şeyden oluşabilir. Lotti ve diğer karmaşık animasyonların entegre edilebilmesi için HTML kodu da ekleyebilirsiniz. Çok güçlü! Müşterilerimizin yükleyicileri için genellikle karanlık bir arka plan, beyaz şirket logosu veya özel olarak tasarlanmış gif yükleme seçmek için hareket ederiz … böyle bir şey:
Manipüle edilecek bir sonraki ayar gerçek yükleme simgesidir. Birçok ön ayar arasından seçim yapabilirsiniz, ancak bu aracı çok güçlü kılan şey, kendi dosyanızı yükleyebilmenizdir. Bu animasyonlu GIF, şirket logosu veya herhangi bir şeyden oluşabilir. Lotti ve diğer karmaşık animasyonların entegre edilebilmesi için HTML kodu da ekleyebilirsiniz. Çok güçlü! Müşterilerimizin yükleyicileri için genellikle karanlık bir arka plan, beyaz şirket logosu veya özel olarak tasarlanmış gif yükleme seçmek için hareket ederiz … böyle bir şey:
Kaynaklar İlerleme yükleme çubuğu, sayfayı yüklemek için gereken yüzdeyi veya süreyi görüntüler, simge/logonuzun altında veya üstünde görüntülenebileceğiniz özel mesajlar ve daha fazlası gibi daha az önemli seçenekler vardır. Elementor da dahil olmak üzere herhangi bir WordPress sitesi için bu harika çözümü gerçekten yapan bazı yardımcı programlar da vardır. Herhangi bir sayfaya yerleştirilecek kısa kodlar üretin (Elementor’da kısa kod blokları kullanın), ön planda öğelerin animasyonu, belirli öğelere animasyon yüklemesini uygulayın (tüm sayfalar değil – kimlikler ve özel öğeler sınıflarıyla eşleştirildiğinde kullanışlıdır) , belirli cihazlarda etkinleştirin ve yükleme süresini min/maks.
Yapılandırmayı bitirdiğinizde, “Yayınla” yı tıklamanız yeterlidir ve katil ön yükleyiciniz seçtiğiniz sayfada görüntülenir. Elementor’a ön yükleyici eklemek için ön yükleyici plus kullanın, ücretsiz bir çözüm arıyorsanız (ancak daha sınırlı), Preloader Plus hakkında birçok iyi şey duyduk.
Yapılandırmayı bitirdiğinizde, “Yayınla” yı tıklamanız yeterlidir ve katil ön yükleyiciniz seçtiğiniz sayfada görüntülenir. Elementor’a ön yükleyici eklemek için ön yükleyici plus kullanın, ücretsiz bir çözüm arıyorsanız (ancak daha sınırlı), Preloader Plus hakkında birçok iyi şey duyduk.
Eklentiyi yükleyin, arka plan, simge, ilerleme bıçakları ve diğerlerini etkinleştirebileceksiniz.
Loftloader Lite sürümü var, ancak çok sınırlı. Artı kullanımı daha kolaydır ve daha fazla özellik ile donatılmıştır. Elementor Client Web Sitemize gelirken, ön yükleyici yerine Royal’den Loftloader’a alışveriş yapmamızın ana nedeni, Loft’un ücretsiz eklentiye dahil olmayan birçok özellik ile gelmesidir. Ayrıca, müşterilerimiz değiştirmek istiyorsa Bir prapemaat ayarı, kod hakkında bilgiye sahip olmasalar bile yapılması oldukça kolaydır (özellikle bizim için gerekli olan şey, çünkü web sitemizi kullanımı çok kolay pazarlıyoruz). Elementor’a Kod (Kopyala/Yapıştır) ile ön yükleyiciyi ekleyin, ancak eklentiyi tartıştık, ancak bu aslında Elementor’a ön yükleyici eklemenizi önerdiğimiz bir yöntemdir. Kodlama yolunu alırsanız, esneklik, kontrolün avantajlarından yararlanırsınız ve her şeyin en iyisi ücretsizdir. Kendiniz düşünebilirsiniz, bu konuda hiçbir şey bilmiyorum ve yine de eklentiler kullanacağım, ancak bu herhangi bir Elementor web sitesine uygulamak için yeterince basit ve paranızı tasarruf edecek.
Yapmanız gereken tek şey aşağıdaki kodu kopyalamak ve eklemektir. Nasıl çalıştığını açıklayacağız, böylece web sitenizin ihtiyaçlarına uyacak şekilde değiştirebilirsiniz. GIF/Yük Resim Bu kod buradan alınır, sonra değiştirilir.
Loftloader Lite sürümü var, ancak çok sınırlı. Artı kullanımı daha kolaydır ve daha fazla özellik ile donatılmıştır. Elementor Client Web Sitemize gelirken, ön yükleyici yerine Royal’den Loftloader’a alışveriş yapmamızın ana nedeni, Loft’un ücretsiz eklentiye dahil olmayan birçok özellik ile gelmesidir. Ayrıca, müşterilerimiz değiştirmek istiyorsa Bir prapemaat ayarı, kod hakkında bilgiye sahip olmasalar bile yapılması oldukça kolaydır (özellikle bizim için gerekli olan şey, çünkü web sitemizi kullanımı çok kolay pazarlıyoruz). Elementor’a Kod (Kopyala/Yapıştır) ile ön yükleyiciyi ekleyin, ancak eklentiyi tartıştık, ancak bu aslında Elementor’a ön yükleyici eklemenizi önerdiğimiz bir yöntemdir. Kodlama yolunu alırsanız, esneklik, kontrolün avantajlarından yararlanırsınız ve her şeyin en iyisi ücretsizdir. Kendiniz düşünebilirsiniz, bu konuda hiçbir şey bilmiyorum ve yine de eklentiler kullanacağım, ancak bu herhangi bir Elementor web sitesine uygulamak için yeterince basit ve paranızı tasarruf edecek.
Yapmanız gereken tek şey aşağıdaki kodu kopyalamak ve eklemektir. Nasıl çalıştığını açıklayacağız, böylece web sitenizin ihtiyaçlarına uyacak şekilde değiştirebilirsiniz. GIF/Yük Resim Bu kod buradan alınır, sonra değiştirilir.
Kod Dili: HTML, XML (XML) WordPress site başlığınıza girilir (bunu yapmanın birkaç yolu tartışacağız).
/ ** gövde kaplaması **/ gövde #yük {ekran: blok; Yükseklik:%100; Taşma: gizli; Konum: Sabit; Üst: 0; Sol: 0; Genişlik:%100; Z-endeks: 9901; Opaklık: 1; Arka Plan rengi: #ffffff; Görünürlük: Görünür; -Webkit-Transition: Hepsi. 35s kolaylık; Geçiş: Hepsi. 35s kolaylık; } gövde #load .loader-Removed {opaklık: 0; Görünürlük: gizli; } .Spinner-yükleyici .load-wrap {arka plan Arka Plan pozisyonu: Merkez Merkez; Arka Plan-Tekrar: Yenilenmez; Metin-align: merkez; Genişlik:%100; Yükseklik:%100; } Kod Dili: CSS (CSS) Stil sayfanıza gidin (Elementor’daki özel bir CSS’ye veya ekranın altındaki özel CSS’ye ekleyebilirsiniz, ayarlayabilirsiniz).
Son olarak, sayfa yayınlandığında Pre -Unrest’i görüntüleyen ve saklayan birkaç JS ile bağladık:
<? PHP}); Kod Dili: JavaScript (JavaScript) Bir sayfa koleksiyonundaki hazırlıklar: Şuna benzer suş:
id == 120) {?>
Kod Dili: HTML, XML (XML) yalnızca ID 120 ile belirli sayfalara/yayınlara hazırlıklar uygular.
Abone Olun ve Paylaşın
Bu içeriği beğendiyseniz, aylık WordPress haber koleksiyonumuza, web sitesi ilhamına, özel tekliflere ve ilginç makalelere abone olun. İstediğiniz zaman abone olmayı bırakın.Spam yapmıyoruz ve asla e -postanızı satmayacağız veya paylaşmayacağız.
Kod Dili: HTML, XML (XML) yalnızca ID 120 ile belirli sayfalara/yayınlara hazırlıklar uygular.
Abone Olun ve Paylaşın
Bu içeriği beğendiyseniz, aylık WordPress haber koleksiyonumuza, web sitesi ilhamına, özel tekliflere ve ilginç makalelere abone olun. İstediğiniz zaman abone olmayı bırakın.Spam yapmıyoruz ve asla e -postanızı satmayacağız veya paylaşmayacağız.
