Divi Web Sitenize Şık Bir Ön Yükleyici Nasıl Eklenir

Bir ekran yükünü izlemek sıkıcıdır. Neler olduğunu söyleyemememiz de endişe verici olabilir. Bir şeye tıkladığımızda bir tür geri bildirim görmeyi bekliyoruz. Bilgisayarın tıklamamızı kabul ettiğini ve istediğimizi bize verdiğini bilmek istiyoruz. Yükleme ekranları daha sonra bir ön yükleyiciden yararlanabilir.

Ön yükleyici, sayfa yüklenirken ekranda görünen hareketli bir grafiktir. Ön yükleyiciler, sayfanın yüklendiğine dair bazı görsel ipuçlarını göstermenin ve hatta siz sayfa başındayken misafiri eğlendirmenin harika bir yoludur. Bu eğitimde, DP Preloader adlı bir eklenti kullanarak Divi'ye nasıl ön yükleyici ekleneceğini göreceğiz. Kullanımı kolaydır ve hatta ön yükleyicinizi kendinize ait olacak şekilde özelleştirebilirsiniz.

Hadi bir bakalım.

Gizlice Bakış

Bisiklet Tamiri düzen paketindeki açılış sayfasını kullanıyorum. Ayrıca #4 Theme Builder düzen paketinden başlığın özelleştirilmiş bir sürümünü kullanıyorum. Site öğeleriyle iyi çalışan bir ön yükleyici seçtim ve ön yükleyiciyi açılış sayfasının tasarımına uyacak şekilde biçimlendirdim. Bu, bir masaüstü ekranındaki ön yükleyicidir.

Ön yükleyici bir telefonda böyle görünür. Bir telefonda görüntülenmesini veya görüntülenmesini sağlayabilirsiniz ve hangi ekran boyutunu görüntüleyeceğini belirlemek için kesme noktasını bile ayarlayabilirsiniz. Nasıl çalıştığını görebilmemiz için telefonlar için etkin bıraktım.

Youtube Kanalımıza Abone Olun

DP Preloader'ı yükleyin

DP Preloader'ı Divi Marketplace'ten satın alın. DP Preloader, ön yükleyicinin nasıl ve nerede görüntüleneceğine dair birçok seçeneğe sahip üçüncü taraf bir eklentidir. Normalde 13 dolara mal olur ve sınırsız web sitesi kullanımı ile bir yıllık destek ve güncellemeleri içerir.

Önceden tanımlanmış 55 ön yükleyici, bir GIF'i ön yükleyici olarak kullanmak için özel bir yükleme seçeneği, animasyonlar, belirli sayfalarda görüntüleme seçeneği, mobil cihazlarda gizleme, mobil kesme noktaları ayarlama vb. boş şablonlar, ancak standart başlık veya Tema Oluşturucu kullanılarak varsayılan şablonla mükemmel şekilde çalışır. Divi web sitenize önceden hazırlanmış ve özel ön yükleyiciler eklemek için mükemmel bir seçimdir.

Eklentiyi satın alıp indirdikten sonra, WordPress kontrol panelinizdeki eklentiler menüsüne gidin ve Yeni Ekle 'yi tıklayın. Eklentiler listesi göründüğünde, ekranın üst kısmındaki Eklenti Yükle'yi seçin.

Dosya Seç'i seçin ve bilgisayarınızdaki sıkıştırılmış dosyaya gidin ve onu seçin. Şimdi Kur'a tıklayın ve kurulumun bitmesini bekleyin.

Yükleme tamamlandığında, Eklentiyi Etkinleştir'i tıklayın. Ön yükleyici artık Divi web sitenizle kullanım için kurulmaya hazırdır.

DP Ön Yükleyici Seçenekleri

DP Preloader'ın web sitenizde görüntülenmesi için ayarlanması gerekir. WordPress Panosundaki Divi menüsüne gidin, Tema Seçenekleri öğesini seçin ve ardından DP Ön Yükleyici sekmesini seçin. Divi Seçenekleri ekranındaki tüm ayarlarda olduğu gibi, ayarların etkili olması için değişiklikleri kaydettiğinizden emin olun.

DP Ön Yükleyici Genel Seçenekleri

Ön yükleyici varsayılan olarak devre dışıdır, bu nedenle etkinleştirilmesi gerekecektir. Diğer genel ayarları varsayılan değerlerinde bırakıyorum, ancak bunu, belirttiğiniz cihaz genişliğinde veya daha küçük bir cihaz genişliğiyle mobil cihazlarda gizlemeyi seçebilirsiniz.

• Ön Yükleyiciyi Sitede Görüntüle – etkinleştir

DP Ön Yükleyici Görüntü Ayarları

DP Preloader, simge ve tam ekran arka plan kaplaması için renk seçmemize olanak tanır. Ayarlarımı görmeden önce tasarım fikirlerimi nereden aldığımı göstermek istedim. Görüntü Ayarları için düzenimdeki renkleri kullanıyorum. Bisiklet Tamiri açılış sayfası, kırmızı vurgulu beyaz bir arka plana sahiptir. Simge için düzen boyunca bulunan kırmızıyı ve arka plan için beyazı kullanacağım.

• Kırmızı – #ea3900
• Beyaz – #ffffff

Düzenimde ön yükleyiciyi seçerken bakabileceğim birkaç tasarım sırası var. Şekillerini, renklerini ve boyutlarını görmek için özellikle simgelere bakıyorum. Düzende çok sayıda tekerlek ve dişli var. Birkaç araç da var. Ön yükleyicilerin birçoğu araçlarla benzer şekillere sahip olduğundan, aynı zamanda tasarım fikirleri için adaydırlar. Şimdilik, yine de, tekerleklere ve dişlilere odaklanacağım.

Aralarından seçim yapabileceğiniz 55 ön yükleyici var. Bana dişlileri hatırlatan birini seçtim. Bazı ön yükleyicilerin varsayılan renkleri vardır, ancak bir sonraki bölümde ön yükleyicilerin her birinin rengini ayarlayabiliriz, böylece renge göre bir tane seçmek zorunda değiliz.

Ön yükleyicilerin altında, özel bir ön yükleyiciyi GIF olarak yükleyebileceğiniz başka bir seçenek grubu vardır. Genişliğini ve yüksekliğini de ayarlayabilirsiniz. Yerleşik ön yükleyicilerden birini kullandığım için boyut için ayarlama yapmama gerek kalmayacak. Bunlar varsayılan ayarlarında kalacak, ancak kendi ön yükleyicinizi yüklemek istemeniz durumunda ayarları göstermek istedim.

DP Ön Yükleyici Renk Ayarları

Hem renk hem de opaklık için ön yükleyici ve arka plan renkleri üzerinde kontrol sizde. Ön yükleyici için renkli noktayı seçin ve alana onaltılık kodu girin veya renginizi seçmek için seçiciyi kullanın. Arka plan rengi için de aynısını yapın. Arka plan rengi zaten istediğim renk, bu yüzden arka plan rengini varsayılan olarak bırakıyorum.

• Kırmızı – #ea3900
• Beyaz – #ffffff

DP Ön Yükleyici Animasyon Ayarları

Animasyon ayarları için, iki efektten hangisinin (FadeOut veya SlideUp) görüntüleneceğini, kararma hızını, gecikme süresini ve gövde opaklığını kontrol edebilirsiniz. Efekti SlideUp olarak değiştirdim, ön yükleyicinin daha görünür olması için yavaş bir solma hızı seçtim ve gecikme süresine 2000 ms (2 saniye) ekledim, böylece ön yükleyici benim örneğim için ekranda daha uzun süre kalacak.

• Önyükleyici Efektleri – SlideUp
• Ön Yükleyici Fadeout Hızı – Yavaş
• Ön Yükleyici Gecikme Süresi – 2350

Sonuçlar

Ön yükleyicinin masaüstünde nasıl göründüğü aşağıda açıklanmıştır. Tam olarak beklendiği gibi çalışıyor ve düzenime iyi uyuyor. Marka tutarlılığı için önemli olan web siteme ait gibi görünüyor.

Ön yükleyicinin bir telefonda nasıl göründüğü aşağıda açıklanmıştır.

Arka plan olarak kırmızı ve ön yükleyici olarak beyaz ile ters bir seçenek denemeye karar verdim. Renklerde yaptığım tek değişiklik, arka plana %75 opaklık eklemek oldu, böylece sayfa yüklenirken görünebilir. Ayrıca farklı bir ön yükleyici seçtim, böylece farklı bir şey görebilelim ve Ön Yükleyici Efektlerini FadeOut olarak değiştirdim. Bu masaüstü görünümüdür.

Bu telefon görünümü.

Biten Düşünceler

Divi web sitenize nasıl şık bir ön yükleyici ekleyeceğinize bakışımız bu. Divi web sitenize bir ön yükleyici eklemek, kullanıcıyı arka planda bir şeyler olduğu konusunda bilgilendirmeye yardımcı olur. DP Preloader bunun için mükemmeldir. Kullanımı kolaydır. Aralarından seçim yapabileceğiniz çok sayıda ön yükleyiciniz var ve ön yükleyici ile arka planın renkleri üzerinde kontrol sizde. Daha da özelleştirmek isterseniz kendi Gif'inizi yükleyebilir ve ön yükleyiciniz olarak kullanabilirsiniz.

Artık Divi web sitenize kolayca özel bir ön yükleyici ekleyebilirsiniz!

Senden duymak istiyoruz. Divi web sitenize bir ön yükleyici eklediniz mi? Aşağıdaki yorumlarda bize bildirin.

FastMotion / Shutterstock.com aracılığıyla Öne Çıkan Görsel