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

Herhangi bir WordPress temasına paralaks efekti eklemek ister misiniz?

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

Bu makalede, herhangi bir WordPress temasına nasıl kolayca paralaks efekti ekleyebileceğinizi göstereceğiz.

Paralaks Etkisi Nedir?

Paralaks efekti, arka planın ön plandaki içerikten daha yavaş kaydırıldığı modern bir web tasarım tekniğidir. Bu efekt arka plan görüntülerine derinlik katar ve daha etkileşimli hissettirir.

Paralaks efekti açılış sayfalarında, uzun biçimli içeriklerde, satış sayfalarında veya bir işletme web sitesinin ana sayfasında kullanılabilir.

Uzun bir sayfadaki farklı bölümleri vurgulayabilir, sitenin genel görsel çekiciliğini artırabilir, kullanıcı etkileşimini artırabilir ve blogunuzda bir mesaj iletmek veya bir hikaye anlatmak için harika bir araç olabilir.

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

Ancak, tüm temalar bu özelliğe sahip değildir ve sadece paralaks efekti için özel sayfa düzenleri oluşturmak üzere bir sayfa oluşturucu kullanmak istemeyebilirsiniz.

Bunu söyledikten sonra, herhangi bir WordPress temasına nasıl kolayca paralaks arka plan efekti ekleyebileceğimize 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üklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından WordPress panosundan Ayarlar ” AWB sayfasını ziyaret edin. Burada, paralaks efektini görüntülemek istemediğiniz tarayıcılar veya cihazlar için kutuları işaretleyebilirsiniz.

Örneğin, paralaks efektini mobil cihazlardaki kullanıcılara göstermek istemiyorsanız, bu kutuyu işaretleyebilirsiniz.

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.

Buraya geldiğinizde, 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 bulmanız ve gönderiye eklemeniz gerekir.

Şimdi ekranın sağ tarafındaki blok panelini açın ve paralaks arka planı olarak bir görüntü eklemek istiyorsanız ‘Görüntü’ sekmesine geçin.

Bundan sonra, medya kitaplığını başlatmak için ‘Görsel Seç’ düğmesine tıklayın. Öne çıkan görseli otomatik olarak arka plan olarak eklemek için ‘ Öne çıkan görseli kullan’ düğmesine de tıklayabilirsiniz.

Bu sekmelere geçerek efekt için bir arka plan rengi veya video bile ekleyebilirsiniz.

Bir görsel 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 sekmeyi genişletin.

Buradan, açılır menüden paralaks türünüzü seçebilirsiniz. Bir seçenek belirlediğinizde, değişiklikler otomatik olarak blok düzenleyicide uygulanacak ve burada test edebileceksiniz.

Örneğimizde, ‘Opaklık + Kaydırma’ 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 efekti ile görüntülenecektir.

Son olarak, ayarlarınızı kaydetmek için en ü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: WordPress Temasına CSS ile Paralaks Efekti Ekleme

Web sitenizin tamamında paralaks arka plan olarak tek bir görsel kullanmak istiyorsanız bu yöntem tam size göre.

Öncelikle, kullanmak istediğiniz görseli Medya ” Yeni Medya Dosyası Ekle sayfasını ziyaret ederek WordPress medya kitaplığınıza yüklemeniz gerekecektir.

Bunu yaptıktan sonra, resmin üzerine tıklayarak ve ‘Ek ayrıntıları’ istemini açarak resmin URL’sini kopyalamanız gerekir.

Bunu yaptıktan sonra, tema dosyalarınıza özel CSS kodu eklemeniz gerekir. Ancak kodu yazarken yapacağınız en küçük bir hata sitenizi bozabilir ve erişilemez hale getirebilir.

Bu yüzden WPCode kullanmanızı öneririz. CSS de dahil olmak üzere özel kod eklemeyi süper güvenli ve kolay hale getiren piyasadaki en iyi WordPress kod parçacıkları eklentisidir.

Öncelikle WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılı talimatlar için WordPress eklentisinin nasıl kurulacağına ilişkin başlangıç kılavuzumuza bakın.

Etkinleştirmenin ardından WordPress panosundan Kod Parçacıkları ” + Parçacık Ekle sayfasını ziyaret edin ve ‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ seçeneğinin altındaki ‘Parçacık Kullan’ düğmesine tıklayın.

Bu sizi, özel kodunuz için bir başlık ekleyerek başlayabileceğiniz ‘Özel Snippet Oluştur’ sayfasına götürecektir.

Bundan sonra, 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, kodun background-image: url satırındaki örnek URL’yi resminizin URL’si ile değiştirdiğinizden emin olun.

Bu görsel, web sitenizin tamamında paralaks efektinin arka planı olarak kullanılacaktır.

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

Bazı HTML kodlarını eklediğinizde snippet web sitenizde otomatik olarak yürütülecektir.

Son olarak, sayfanın en üstüne geri gidin ve ‘Etkin Değil’ anahtarını ‘Etkin’ olarak değiştirin.

Ardından, ayarlarınızı kaydetmek için ‘Snippet’i Kaydet’ düğmesine tıklayın.

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

Oraya vardığınızda, bir menü açmak için ekranın sağ üst köşesindeki üç nokta simgesine tıklayın. Ardından, ‘Kod düzenleyici’ modunu seçin.

Şimdi, aşağıdaki HTML kod unu, paralaks efekti için içerikle birlikte kod düzenleyicisine eklemeniz gerekir:

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

Daha sonra üst kısımdaki ‘Kod Düzenleyiciden Çık’ bağlantısına tıklayarak görsel blok düzenleyiciye kolayca geri dönebilirsiniz.

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

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

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

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

Paralaks 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. Arka plan olarak tam ekran bir YouTube videosu duyguları uyandırabilir ve kitlenizle daha derin bir bağlantı oluşturabilir.

Ö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 bir arka plan YouTube videosu 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 görüntülemek için video arka planlarını kullanabilirsiniz. Hatta tam ekran video arka planında başarı hikayelerini bile sergileyebilirsiniz.

Daha fazla ayrıntı için WordPress’te tam ekran arka plan olarak bir YouTube videosunun nasıl ekleneceğine ilişkin eğitimimize bakabilirsiniz.

Bu makalenin herhangi bir WordPress temasına kolayca paralaks efekti eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. WordPress blog yazılarınız için telifsiz görselleri nasıl bulacağınıza dair başlangıç rehberimize ve en çok aranan WordPress ipuçları, püf noktaları ve hack‘leri listemize de göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.