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.

Kanımızca, bir parallax efekti kullanmak ziyaretçilerin dikkatini çekmenin harika bir yoludur. İnsanları çeker ve daha uzun süre kalmalarını teşvik eder, bu da etkileşimi artırabilir. Sitenize şık, profesyonel bir his vermekle kalmayıp aynı zamanda daha yüksek dönüşümlere de yol açabileceğini bulduk.

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ığı modern bir web tasarım tekniğidir. Bu efekt, arka plan resimlerine derinlik katar ve daha etkileşimli hissetmelerini sağlar.

Parallax efekti, açılış sayfalarında, uzun biçimli içeriklerde, satış sayfalarında veya bir iş 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 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
• Yöntem 2: CSS ile WordPress Temasına Paralaks Efekti Ekleme
• Bonus: WordPress'te YouTube Videosunu Tam Ekran Arka Plan Olarak Ekleme

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, paralaks efektini mobil cihazlardaki kullanıcılara göstermek istemiyorsanız, o 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.

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

Web sitenizin tamamında tek bir görüntüyü paralaks arka planı olarak 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 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 ulaştığınızda, bir menü açmak için ekranın sağ üst köşesindeki üç noktalı simgeye tıklayın. Ardından, ‘Kod düzenleyici’ modunu seçin.

Şimdi, paralaks efekti için içeriği arasına ekleyerek aşağıdaki HTML kodunu kod düzenleyiciye eklemeniz gerekir:

<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.