Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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 etkileşimli bir kullanıcı deneyimi oluşturur.

Bize göre, paralaks efekti kullanmak ziyaretçilerin dikkatini çekmek için harika bir yoldur. İnsanları içeri çeker ve daha uzun süre kalmalarını teşvik ederek etkileşimi artırabilir. Bunun yalnızca sitenize şık ve profesyonel bir hava katmakla kalmadığını, aynı zamanda daha yüksek dönüşümlere de yol açabileceğini gördük.

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

Add a Parallax Effect to Any WordPress Theme

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.

Disable the parallax effect on devices or browsers

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.

Add the AWB block

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

Choose an image as the parallax background

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.

Choose image size and opacity for the parallax effect

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.

Choose parallax effect

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.

Click the + button in the parallax block to open the block menu

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.

Parallax effect preview

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.

Copy image URL from the Attachment details prompt

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.

Not: WPCode’un kullanabileceğiniz ücretsiz bir planı da vardır. Ancak, premium planı tercih etmek kod parçacıklarından oluşan bulut kütüphanesi, koşullu mantık ve daha fazlası gibi özelliklerin kilidini açabilir.

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.

Add new snippet

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.

Choose the CSS Snippet option for the Parallax code snippet

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.

Add image URL in the custom code

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.

Choose an insertion method

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.

Save parallax effect snippet

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

Switch to the code editor from the three-dot menu icon

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

Add HTML code in the editor

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.

Parallax effect GIF

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.

An example of a YouTube video background in WordPress

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.

Umarız bu makale herhangi bir WordPress temasına kolayca paralaks efekti eklemeyi öğrenmenize yardımcı olmuştur. WordPress sitenize sonsuz kaydırmayı nasıl ekleyeceğinize dair başlangıç kılavuzumuzu ve web sitesi grafikleri için en iyi Canva alternatifleri listemizi de görmek 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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

20 yorumBir Cevap Bırakın

  1. Mrteesurez

    I have hearing parallax effect but didn’t understand how it actually works. This guide is helpful as explained it clearly with implementation. I will like to try it out. Thanks.

    • WPBeginner Support

      Glad we could help show what the effect is :)

      Yönetici

  2. Christer

    Maybe I’m stupid but what should I insert under “your own content here” in the shortcode? Is the content the post or what?

    Chris

    • WPBeginner Support

      You would insert the content you would want on that page.

      Yönetici

  3. Saswata Baksi

    Can I add this on the post header code, i.e. before the title on individual post?

    • WPBeginner Support

      You would likely want a sticky header for what it sounds like you’re wanting, otherwise, you would want to reach out to the support for your specific theme for that customization.

      Yönetici

  4. Jessica

    Why not show a live example (URL) of the parallax effect? I can’t even picture it.

    • WPBeginner Support

      Thanks for your feedback, we’ll certainly take this into consideration for any updates to this article :)

      Yönetici

  5. Andres

    Hello and thank your for this guide.
    Ive implemented Solution #2 on my site, its working great except for the fact that its not working on mobile. Is there a known issue with that?
    Thanks

    • Chris

      Hi, I tried thesecoond code solution but itis not Responsive and gets dinged by google.
      I have tryed a few fixes, mostly using media breaks and messing with margins but cannot get to to work.
      Or
      How do you disable in mobile?

      Thanks in advance
      Chris

      • WPBeginner Support

        At the moment we do not have the recommended CSS to detect mobile devices.

        Yönetici

  6. Alex

    I love this plugin, however, I’m trying to create a full height background image that will fit the whole screen whatever browser window size is opened. Then, once the window is loaded, I can scroll to see the rest of my webpage. I see that the demo nK uses works this way:

    I’m wondering what additional css or settings I need to use to create this effect.

    Thank you so much!

  7. gayana

    i have added the parallax plugin . i have got the Symbol which was in picture but am not getting where to add the code .I have added that in custom css in appearance .I am not getting any picture or effects.

  8. David

    Rather than repeat this for every page/post, can I just do it the once using the Additional CSS box?

    I want the parallax effect site wide.

    Thanks

  9. Mahdi Sadeghi

    That was Awesome :)
    Thank You.

  10. Thomas Greenbank

    If I use the plugin for this, do I have to leave it active, or can I deactivate the plugin once I’ve set up the parallex effect?

    • WPBeginner Support

      Hi Thomas,

      You’ll have to keep using the plugin as long as you want to keep parallax background effects.

      Yönetici

  11. Ed

    Is there a way to make the background (its URL) a variable that can be set when the related HTML is added to a post? The alternative of having multiple custom CSS segments (.parallaz1, .parallax2, …..) to cover each possible background is unwieldy at best.

    A CSS novice trying to learn. Point me to a site or two and I’ll figure it out for myself, but right now don’t even know what to search for.

    Thanks

      • WPBeginner Support

        Hi Ed,

        You can add CSS classes using Custom Fields. You can assign a custom field to an article, and then in your theme files look for the custom meta data and then use it as your CSS class.

        Yönetici

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.