Herhangi Bir WordPress Temasına Paralaks Efekti Nasıl Eklenir

Paralaks efekti, arka plan görüntüsünün ön plan içeriğinden daha yavaş kaydığı bir web tasarım trendidir. Bu, derinlik ve hareket yanılsaması yaratarak web sitenizde daha etkileşimli bir kullanıcı deneyimi sunar.

Paralaks efekti, ziyaretçilerin dikkatini çekmek için harika bir yoldur. İnsanları çeker, daha uzun süre kalmalarını teşvik eder ve sitenize etkileşimi ve dönüşümleri artırabilecek şık, profesyonel bir his verir.

Bu makalede, herhangi bir WordPress temasına nasıl kolayca paralaks efekti ekleyeceğinizi göstereceğiz. Size esnek seçenekler sunmak için eklentiler ve özel kod kullanmak dahil olmak üzere çeşitli yöntemleri inceleyeceğiz.

Paralaks Efekti Nedir?

Paralaks efekti, arka planın ön plan içeriğinden daha yavaş kaydığı bir web tasarım tekniğidir. Bu, derinlik yanılsaması yaratır ve web sitenizin daha sürükleyici ve etkileşimli hissetmesini sağlar.

İçeriği vurgulamak veya bir hikaye anlatmak için sitenizin çeşitli yerlerinde paralaks efektini kullanabilirsiniz. İşte kullanabileceğiniz en yaygın yerler:

• Açılış Sayfaları: Kullanıcının gözünü harekete geçirici düğmelere yönlendirmek için.
• Uzun İçerik: Büyük metin bloklarını bölmek ve okuyucuları meşgul tutmak için.
• Satış Sayfaları: Ürün özelliklerini dinamik bir şekilde sergilemek için.
• Ana Sayfalar: İşletmeniz için güçlü bir ilk izlenim yaratmak için.

Birçok premium WordPress teması, ana sayfalarında yerleşik bir paralaks efekti ile birlikte gelir. Bu efekti çoğu WordPress sayfa oluşturucu eklentilerinde de kullanabilirsiniz.

Ancak, tüm temalarda bu özellik bulunmaz ve yalnızca bir parallax efekti için özel sayfa düzenleri oluşturmak üzere bir sayfa oluşturucu kullanmak istemeyebilirsiniz.

Bununla birlikte, herhangi bir WordPress temasına kolayca bir paralaks arka plan efekti eklemenin nasıl yapıldığına bakalım. Birkaç farklı yöntemi ele alacağız ve kullanmak istediğinize atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

Yöntem 1: Eklenti Kullanarak WordPress Temasına Paralaks Efekti Ekleme

Bu yöntem, WordPress temanıza herhangi bir kod eklemenizi gerektirmez. Kolaydır ve çoğu kullanıcı için önerilir.

Öncelikle, Advanced WordPress Backgrounds eklentisini yükleyip etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinden Ayarlar » AWB sayfasına gidin. Burada, parallax efektini görüntülenmesini istemediğiniz tarayıcılar veya cihazlar için kutuları işaretleyebilirsiniz.

Örneğin, mobil cihazlardaki kullanıcılara paralaks efektini göstermek istemiyorsanız, o kutuyu işaretleyebilirsiniz. Paralaks efektleri bazen küçük ekranlarda kaydırma performansını etkileyebilir, bu nedenle mobil kullanıcılar için devre dışı bırakmak genellikle iyi bir fikirdir.

Bundan sonra, ayarlarınızı kaydetmek için 'Değişiklikleri Kaydet' düğmesine tıklayın.

Ardından, Gutenberg blok düzenleyicisinde istediğiniz bir sayfayı veya gönderiyi açın.

Oraya vardığınızda, blok menüsünü açmak için ekranın sol üst köşesindeki blok ekle '+' düğmesine tıklayın.

Buradan, Arka Plan (AWB) bloğunu gönderiye bulup eklemeniz gerekir.

Şimdi ekranın sağ tarafındaki blok panelini açın ve paralaks arka plan olarak bir resim eklemek istiyorsanız 'Resim' sekmesine geçin.

Ardından, medya kütüphanesini açmak için ‘Resim Seç’ düğmesine tıklayın. Ayrıca, öne çıkan görseli arka plan olarak otomatik eklemek için ‘Öne çıkan görseli kullan’ düğmesine tıklayabilirsiniz.

Hatta sekmeler arasında geçiş yaparak efekt için bir arka plan rengi veya video ekleyebilirsiniz.

Bir resim ekledikten sonra, blok panelinden odak noktasını ayarlayabilir ve arka plan boyutunu yapılandırabilirsiniz. Ancak, arka plan boyutunu 'Kapak' olarak bırakmanızı öneririz.

Ardından, görüntünün opaklığını değiştirmek için kaydırıcıyı kullanabilirsiniz.

Bunu yaptıktan sonra, 'Paralaks' sekmesine gidin ve genişletin.

Buradan, açılır menüden parallax türünüzü seçebilirsiniz. Bir seçenek belirledikten sonra, değişiklikler otomatik olarak blok düzenleyiciye uygulanacak ve orada deneyebilirsiniz.

Örneğimizde, ‘Opacity + Scroll’ kullanıyoruz.

Efekti ekledikten sonra, blok menüsünü açmak için AWB bloğundaki '+' düğmesine tıklayın.

Artık bir paragraf, resim, video, alıntı veya istediğiniz başka bir blok ekleyebilirsiniz. Bu blok daha sonra paralaks efektiyle görüntülenecektir.

Son olarak, ayarlarınızı saklamak için üstteki ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın.

Şimdi, paralaks efektini çalışırken görmek için WordPress sitenizi ziyaret edebilirsiniz.

Yöntem 2: CSS ile WordPress Temasına Paralaks Efekti Ekleme

Bir eklenti kullanmadan paralaks efekti eklemek istiyorsanız, bu yöntem tam size göre. Temanıza özel CSS eklemenizi ve efekti göstermek istediğiniz yere manuel olarak HTML eklemenizi gerektirir.

Öncelikle, kullanmak istediğiniz görseli, Medya » Yeni Medya Dosyası Ekle sayfasını ziyaret ederek WordPress medya kütüphanenize yüklemeniz gerekecektir.

Bunu yaptıktan sonra, üzerine tıklayıp ‘Eklenme ayrıntıları’ istemini açarak resmin URL'sini kopyalamalısınız.

Bunu yaptıktan sonra, özel CSS kodu tema dosyalarınıza eklemelisiniz. Ancak, kodu yazarken yapılan en küçük bir hata bile sitenizi bozabilir ve erişilemez hale getirebilir.

Bu nedenle WPCode kullanmanızı öneririz. Piyasada CSS dahil özel kodu eklemeyi süper güvenli ve kolay hale getiren en iyi WordPress kod parçacığı eklentisidir.

Öncelikle WPCode eklentisini yükleyip etkinleştirmeniz gerekir. Ayrıntılı talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair başlangıç kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinden Kod Parçacıkları » + Parçacık Ekle sayfasına gidin ve 'Özel Kodunuzu Ekle (Yeni Parçacık)' seçeneği altındaki 'Parçacığı Kullan' düğmesine tıklayın.

Bu sizi özel kodunuz için bir başlık eklemeye başlayabileceğiniz 'Özel Kod Parçacığı Oluştur' sayfasına götürecektir.

Ardından, sağdaki Kod Türü açılır menüsünden 'CSS Snippet' seçeneğini seçin.

Ardından, aşağıdaki özel CSS kodunu ‘Kod Önizleme’ kutusuna ekleyin:

.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
 
.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
} 

Bunu yaptıktan sonra, kodunuzdaki background-image: url satırındaki örnek URL'yi kendi resminizin URL'si ile değiştirdiğinizden emin olun.

Bu resim, web sitenizdeki paralaks efektinin arka planı olarak kullanılacaktır.

Ardından, 'Ekleme' bölümüne gidin ve 'Otomatik Ekle' modunu seçin.

Kod parçacığı, ona bazı HTML kodları ekledikten sonra web sitenizde otomatik olarak yürütülecektir.

Son olarak, sayfanın en üstüne geri kaydırın ve 'Etkin Değil' anahtarını 'Etkin' olarak değiştirin.

Ardından, ayarlarınızı kaydetmek için 'Kod Parçasını Kaydet' düğmesine tıklayın.

Şimdi paralaks efektini eklemek istediğiniz WordPress yazısını veya sayfasını açma zamanı.

Oraya gittiğinizde, blok menüsünü açmak için 'ekle bloğu' '+' düğmesine tıklayın. Ardından, Özel HTML bloğunu arayın ve seçin.

Şimdi, bloğa aşağıdaki HTML kodunu yapıştırmanız gerekiyor:

<div class="parallax">
<div class="parallax-content">
 
Your content goes here...
 
</div>
</div>

Ardından, üstteki 'Kod Düzenleyicisinden Çık' bağlantısına tıklayarak görsel blok düzenleyiciye kolayca geri dönebilirsiniz.

Bundan sonra, sayfa veya gönderi için içeriğin geri kalanını görsel blok düzenleyicisine ekleyin.

Son olarak, ayarlarınızı kaydetmek için ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın.

Şimdi, parallax efektini çalışırken görmek için WordPress blogunuzu ziyaret etmeniz yeterli.

Bonus: WordPress'te YouTube Videosunu Tam Ekran Arka Plan Olarak Ekleme

Parallax efektinin yanı sıra, WordPress'te tam ekran arka plan olarak bir YouTube videosu da ekleyebilirsiniz.

Bu, kullanıcılarınız için sürükleyici bir deneyim sağlayabilir ve WordPress sitenizin görsel çekiciliğini artırabilir. Tam ekran bir YouTube videosu arka plan olarak duyguları harekete geçirebilir ve hedef kitlenizle daha derin bir bağ kurabilir.

Örneğin, web sitenizde bir çekiliş düzenliyorsanız, sayfayı daha heyecanlı hale getirmek ve kullanıcıları yarışmaya katılmaya teşvik etmek için arka plan YouTube videosunu kullanabilirsiniz.

Benzer şekilde, kar amacı gütmeyen bir yardım kuruluşunuz varsa, kuruluşunuzun etkisini, misyonunu ve hizmet ettiğiniz bireylerin veya toplulukların hikayelerini sergilemek için video arka planlarını kullanabilirsiniz. Tam ekran video arka planında başarı hikayelerini bile sergileyebilirsiniz.

Daha fazla ayrıntı için, WordPress'te YouTube videosunu tam ekran arka plan olarak ekleme eğitimimize göz atabilirsiniz: WordPress'te YouTube videosunu tam ekran arka plan olarak ekleme.

Bu makalenin, herhangi bir WordPress temasına kolayca paralaks efekti eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, WordPress sitenize sonsuz kaydırma ekleme hakkındaki başlangıç kılavuzumuzu ve web sitesi grafikleri için en iyi Canva alternatifleri listemizi de görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.