WordPress sitenizdeki paralaks efekti kullanın
Zamanla, en şık web sitesi bile biraz bayat hissetmeye başlayabilir. İdeal denge, tam bir yeniden tasarımdan kaçınmadan işleri görsel olarak ilginç tutmaktır. Bir paralaks efekti kullanmak, web sitenizin çok fazla estetiğini ekleyebilir. Bu, metin tabanlı içeriğinizi bozarken görsel öğelerinizin öne çıkmasına yardımcı olabilir. Artan tutulum nedeniyle ziyaretçilerin sitenizde biraz daha uzun süre kaldıklarını bile not edebilirsiniz.
İçindekiler tablosu
1. Paralaks etkisi nedir?
2. Bir paralaks efekti eklerken dikkate alın
3. WordPress Parallax temasını seçin
4. WordPress sitenize bir paralaks efekti nasıl eklenir (eklentiler olsun ve olmayan)
5. WordPress Parallax eklentisini kullanma
5.1. 1. Paralaks eklentisini indirin
5.2. 2. Resmi seçin
5.3. 3. Paralaks’ı etkinleştirin ve paralaks türünü seçin
5.4. 4. ‘Paralaks fare’ özelliğini yönlendirin
6. CSS kullanarak WordPress’e paralaks ekleyin
6.1. 1. WordPress medya kitaplığınıza resim yükleyin
6.2. 2. Sayfaya/gönderiye HTML ekleyin
6.3. 3. Temanıza CSS ekleyin
7. Sitenizi WP motoruna ayarlayın
Bu kılavuzda, bir paralaks etkisi ve sitenize eklerken hatırlanması gereken bazı şeyler hakkında konuşacağız. Ardından, bu modern özelliği bir eklenti kullanmadan veya kullanmadan ekleyerek size rehberlik edeceğiz. Hadi gidelim!
Paralaks etkisi nedir? Paralaks veya paralaks rulosunun etkisi, kullanıcı bir web sayfasını eğittiğinde arka planın ön arka plan içeriğinden daha yavaş hareket ettiği zamandır. Bu hızda kontrast derinlik ve hareket yanılsaması yaratır. Web tasarımcıları genellikle ev sayfaları, talimat sayfaları veya parçalanabilecek parçaların olduğu yerlerde efektler kullanır. Bu, tek sayfa web sitesinde çok yararlı olabilir, çünkü yeni şeyler kullanıcıları içeriği kaydırmaya devam etmeye teşvik edebilir. Parallax Rolls paralaksının etkisini eklerken dikkate alındığında, WordPress sitenize birçok şey ekleyebilir, ancak yanlış yapılırsa, kullanıcı deneyimini (UX) ortadan kaldırabilir. Erişilebilirlik şüphesiz bu özellikten etkilenir, çünkü okumayı karmaşıklaştırabilir. Bir paralaks efekti oluştururken, bir arka plan görüntüsü dikkatlice seçmelisiniz. Tabii ki, yüksek kaliteli görüntüler istiyorsunuz, ancak çok sinir bozucu bir şey kullanmak istemiyorsunuz. WordPress Parallax temasını seçin Bu modaya uygun efekti almanın bir yolu, bir paralaks özelliği ile donatılmış bir WordPress teması seçmektir. Hızlı ve kolay bir şekilde paralaks ruloları eklemenize olanak tanıyan erişilebilecek çeşitli temalar vardır:
Oluştur: Bu tema, paralaks efektlerini birleştiren birkaç şablon içerir. Bu aynı zamanda bir e -ticaret sitesi oluşturmak için doğru seçimdir.
Divi: Divi bir WordPress teması ve popüler sayfa üreticisidir. Demo içeriği içe aktarmayı tercih ederseniz, bu tema doğuştan gelen paralakslı birçok özel gösteriye sahiptir.
Stockholm: Stockholm, premium eklentiler seçeneği ile paketlenmiş esnek bir temadır. Çevrimiçi bir portföy oluşturuyorsanız bu temayı görmek isteyebilirsiniz, çünkü sadeliği içeriğinize odaklanır. Elbette aralarından seçim yapabileceğiniz daha fazla tema vardır. Bununla birlikte, bu başlamak için birçok şey verir ve aynı zamanda diğer alanlarda da güç sunar.
WordPress sitenize bir paralaks efekti nasıl eklenir (eklentilerle ve eklentisiz) temanızda varsayılan bir paralaks olmasa bile, yine de sitenize kendiniz ekleyebilirsiniz. Bunu bir eklenti ile veya eklenti olmadan nasıl yapacağınızı göstereceğiz ve iki yöntemin adımlarını belirteceğiz. Paralaks rulosu eklemek için bir eklenti kullanarak WordPress Parallax eklentisini kullanmak oldukça kolaydır. Eklentiyi yükleyecek, ayarlarınızı yapılandıracaksınız ve hazırsınız. Bu adımları daha ayrıntılı olarak çalıştıralım. 1. Paralaks eklentilerini indirin Paralaks ruloları ekleyebilen birkaç eklenti vardır, ancak Gelişmiş WordPress Arka Planları (AWB) kullanmanızı öneririz. Bu, arka planınız için resim veya video kullanmanızı sağlayan ücretsiz bir WordPress Parallax eklentisidir:
Eklentiyi indirmek için eklentiler> yeni ekleyin ve diğerleri için yaptığınız gibi ‘Gelişmiş WordPress arka planları’ arayın.
Etkinleştirildikten sonra, paralaks arka planınızı gerçekten yapmaya geçebilirsiniz. 2. Buradaki resmi seçin, bir paralaks efekti görünmesini istediğiniz gönderi veya sayfaya gidin. AWB’nin resimleri seçmek ve sayfadaki efektleri konumlandırmak için kullanacağınız kendi bloğu vardır:
Burada, daha geleneksel bir paralaks efekti yerine kullanıcılar yuvarlandığında arka plan görüntüleri ve opaklık ölçeğini değiştirmeyi seçebilirsiniz. Bu, web sitenizde etkinin nasıl görüntülendiği konusunda daha fazla kontrol sağlar. Son olarak, navigasyon için kaydırma yerine sürtünmeye güvenme eğilimi gösteren mobil cihazlar için paralaks seçeneklerini devre dışı bırakmayı seçebilirsiniz (yükleme sayfasının hızındaki potansiyel etkiden bahsetmiyorum). 4. ‘Paralax fare’ özelliğini fare paralaksına geçecek şekilde yönlendirin, fareyi hareket ettirerek kontrol edilebilecek etkiyi ekleyecektir. Bu efektin diğer sürümleri gibi, etkinin süresini ve yoğunluğunu belirleyen boyutu ve hızı ayarlayabilirsiniz:
Dosya Seç düğmesini tıklayın ve bilgisayarınızda arka plan olarak kullanmak istediğiniz resmi bulun. Ardından, açın ve yükleme tamamlanana kadar bekleyin. Resimlerinizi yükledikten sonra, WordPress gösterge panosundan Medya> Kütüphaneye giderek medya kitaplığında arama yapın. Görüntünüzü bulduktan sonra URL dosyasını tıklayın ve açın pencerede bulun: Bağlantıyı kopyalamak için SOPING URL düğmesini tıklayın. Ardından, sitenize biraz kod ekleyeceğiz. 2. HTML ekleyin Bir sonraki sayfaya/gönderiye, aşağıdaki HTML’yi sayfaya ekleyeceksiniz veya bir paralaks efekti görünmesini istediğiniz yayın. Bir blok düzenleyici kullanıyorsanız, bu kodu özel bir HTML bloğu kullanarak ekleyebilirsiniz. Ancak bu, klasik editör kullanıcıları için metin düzenleyicisine de yerleştirilebilir:
