WordPress'te Paralaks Etkisi Nedir ve Nasıl Eklenir
Yayınlanan: 2021-12-12Bir WordPress teması arayan veya bir temayla birlikte gelen çeşitli özellikleri ve işlevleri araştıran herkes, muhtemelen en iyi tema özellikleri arasında listelenen paralaks kaydırma adlı bir şey fark etmiştir. Herkes paralaks kaydırmanın gerçekte ne olduğunu bilmiyor ve bir web sitesinde gördüklerinde onu tanıyanlar bile muhtemelen bunun hakkında fazla bir şey bilmiyorlar. Bu yüzden size bu popüler teknikten biraz daha bahsetmenin ve bir eklenti kullanarak veya bir paralaks WP teması seçerek bunu web sitenize nasıl ekleyebileceğinizi göstermenin iyi bir fikir olacağını düşündük. Paralaks kaydırmalı web siteleri iyi bir nedenle popülerdir ve çevrimiçi dünyadaki en son trendleri takip etmek istiyorsanız, bununla ilgili her şeyi bilmeniz yeterlidir.
Web sitenize paralaks efekti ekleme konusunda emin değilseniz, doğru kararı vermenize yardımcı olmaya çalışacağız:
- Paralaks kaydırma nedir?
- Bir eklenti kullanarak paralaks efekti nasıl eklenir
- En iyi WordPress paralaks temaları ve şablonları
Genel olarak bir kavram olarak WordPress paralaks kaydırma ve paralaksını tanımlamanın birçok yolu vardır. Bunun olası bir tanımı, paralaks kaydırmanın, farklı hızlarda hareket etmeleri dışında, arka plan ve ön planın her ikisinin de canlandırıldığı bir teknik olabilir. Arka plan, ön plandaki nesnelerden daha yavaş hareket eder, bu da bir derinlik yanılsaması yaratır. Teknik, WordPress temalarında yaygın olarak kullanılmaktadır , ancak açıkçası bu popüler CMS ile sınırlı değildir.
Kısa bir tarihçe
Paralaks kelimesi aslında astronomiden gelmektedir. İki farklı bakış noktasından bakıldığında bir nesnenin yönündeki görünür yer değiştirmeyi veya uyumsuzluğu tanımlar. Uzaydaki cisimlerden biri size daha yakın olduğu için bazen farklı hızlarda hareket ediyormuş gibi göründüğünü biliyor musunuz? Ön plandaki nesnelerin dinamiği, arka plandaki nesnelerin dinamiğinden her zaman daha hızlı ve daha enerjik görünür. "Gerçek hayatta" bu mantıklıdır, çünkü gerçek hayat üç boyutludur. Peki ya tasarım? Gerçek hayat gibi görünmesini sağlayabiliriz ve bu aslında tasarımcıların paralaks ile elde etmek istedikleri ana efektlerden biridir .
Bildiğimiz gibi paralaks, ilk olarak video oyunu tasarımının altın çağında, daha doğrusu yandan kaydırmalı atari oyunlarıyla tanıtıldı. Amacı, oyunculara daha ilgi çekici ve sürükleyici bir deneyim sağlama umuduyla sahneye derinlik ve dinamikler eklemek ve hikaye anlatımını geliştirmekti.
Bu 1980'lerin başındaydı. 2010'ların başlarına hızlı ileri sarın ve web tasarımına uygulanan ilk paralaks kaydırma denemelerine sahip olursunuz. Bugün, yıllar sonra, dünyada bir şekilde veya diğerinde WordPress paralaks kaydırmasıyla karşılaşmamış neredeyse hiç kimse yok.
Nasıl çalışır
Kulağa karmaşık gelebilir, ancak sitenize paralaks efekti eklemek oldukça basittir. Paralaks kaydırma aslında çok basit bir tasarım konseptini takip eder . Arka planı ve ön planı alıyorsun ve animasyon kullanarak farklı hızlarda hareket etmelerini sağlıyorsun. Bir kullanıcı sayfayı aşağı kaydırdığında, arka plan, resimler, galeriler, videolar, metin veya başka herhangi bir içerik parçası içerebilen ön plandaki nesnelerden daha yavaş görünür. Sonuç olarak, her şey arka plana sabitlenmiş olarak orada oturmak yerine uzayda yüzüyormuş gibi görünür.
WordPress paralaks kaydırma tasarımının tek, evrensel bir teknik olmadığını unutmayın. Günümüzde kullanılan farklı paralaks tasarım stilleri vardır, ancak bunların çoğu çoklu katman kullanımına dayanmaktadır . Katmanların her birine bir kaydırma işlevi ve belirlenmiş bir hız atanır. Bundan sonra, farklı tarayıcılar ve görüntüleyiciler için uygun CSS veya HTML düzeltmeleri uygulanır ve bu kaynakların en son sürümlerinin doğru sözdizimini kullandığınızdan emin olun, aksi takdirde her şey iyi çalışmaz.
Neden İyi
Paralaks kaydırma bu günlerde o kadar popüler hale geldi ki , dünyada onu bir şekilde, biçimde veya biçimde kullanmayan hiçbir web sitesi yok gibi görünüyor. Bu, elbette doğru değil, ancak meselenin gerçeği devam ediyor - bu teknik, özellikle WordPress sitelerinde yaygın olarak kullanılmaktadır . Peki paralaks kaydırma ile ilgili onu web tasarımcıları için bu kadar çekici kılan nedir?
Cevap, kullanıcı deneyiminde yatıyor olabilir. Paralaks kaydırma , bir web sitesindeki içeriği algılamamız için dinamik ve heyecan verici bir yol oluşturur . Derinlik ve hareket yanılsaması yaratarak bizi içine çeker. Paralaks aynı zamanda harika bir hikaye anlatma aracıdır , çünkü kullanıcıyı farklı içerik öğelerine yönlendirir. Tabii doğru kullanmak şartıyla. Paralaks kullanımının pek çok kötü örneği var. Bazen tasarımcıların bunu nasıl olduğunu bildikleri için ortaya koymuş gibi geliyor, aslında bununla ilgili söyleyecek hiçbir şeyleri yok.
Kullanıcılar eğlenmeyi sever. WordPress video arka plan eklentilerini kullanarak kolayca ekleyebileceğiniz video arka planları gibi kanıtlanmış tariflerin yanı sıra, Paralaks kaydırma da bunu yapmanın harika bir yoludur. Ayrıca işletmeler için, izleyicileri web sitelerinin odaklarının olmasını istedikleri bölümlerine kelimenin tam anlamıyla sürüklemeleri için harika bir yoldur. Örneğin, ürün veya hizmet sayfaları.
Her durumda, kaydırma davranışı kesinlikle bir sürpriz unsuru içeriyor. Doğru yapıldığında kullanıcıyı memnun eder ve bu bir web sitesi için her zaman iyi bir şeydir.
Yeni başlayanlar ve orta seviye kullanıcılar için paralaks eklemenin en iyi yolu, açık ara bir eklenti kullanmaktır. Piyasada çok sayıda mükemmel paralaks eklentisi var ve bunların çoğu WordPress web sitenize paralaks eklemenize yardımcı olmak için mükemmel bir iş çıkarıyor. Bu makalenin amaçları doğrultusunda, Advanced WordPress Backgrounds eklentisini kullanacağız.
Öncelikle paralaks efekti eklemek için yapılmış olsa da, bu araç diğer birçok ilginç özelliği kapsar. Örneğin , metnin arkasına statik bir arka plan eklemek için kullanabilirsiniz . Ek olarak, belirli bir satıra arka plan eklemenize de yardımcı olur. Bir paragrafı arka plan ekleyerek renklendirmek istediğinizde, bu eklenti bunu tek tıklamayla yapmanızı sağlayacaktır.
Eklentiyi Yükleme
İlk olarak, eklentiyi normal şekilde kurmanız ve etkinleştirmeniz gerekecek. Yapılacak ilk şey, arka ucunuza gitmek ve eklentiyi aramaktır. Eklentiler'e ve ardından Yeni Ekle'ye tıklayın. Arama alanına Gelişmiş WordPress Arka Planları yazın ve bulduktan sonra Yükle'ye tıklayın. Kurulum işlemi tamamlandığında, Etkinleştir'e tıklayın. Yeni eklentiniz şimdi Eklentiler menünüzde listelenmelidir.
Klasik Düzenleyici ile Paralaks Eklemek için Eklentiyi Kullanma
Paralaks eklemek için sayfaya gidin veya eklenmesini istediğiniz yere gönderin. Editörünüzde yeni bir düğme göreceksiniz. Üzerine gelindiğinde Advanced WordPress Backgrounds yazdığı ortaya çıkacaktır. Üzerine tıklayın ve farklı değerler belirleyeceğiniz ve paralaks efektiniz için ayarları değiştireceğiniz bir açılır pencere açın.
İlk önce arka plan türünü seçin. Bu örnekte, bir resim kullanacağız.
Yapmanız gereken bir sonraki şey, kullanmak istediğiniz bir görüntüyü seçmektir. Tam genişlikte bir görüntü için Stretch yazan kutuyu işaretleyin.
Bundan sonra paralaks efektini seçin. Biz parşömeni için gidiyoruz. İstediğiniz kaydırma hızını buradan da ayarlayabilirsiniz.
Paralaksın yanı sıra bahsetmeye değer bir fare etkisi var . Bu sayede fare imlecinizin altındaki görüntü üzerinde ağır çekim efekti oluşturabilirsiniz . Harika olan şey, aynı görüntü üzerinde paralaks ve fare efektlerini birleştirebilmenizdir. Sadece özel ihtiyaçlarınıza ve hedeflerinize bağlı olarak ihtiyaçlarınıza daha uygun olanı seçin.
Paralaks görüntünüzün boyutları ve yüksekliği Stiller sekmesi altında ayarlanabilir.
Son olarak, Ekle düğmesine tıklayın.
Aşağıdaki kısa kod şimdi düzenleyicinizde görünmelidir:
[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”dolu” awb_parallax=”kaydırma” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax″awb_mouse_10_30” İçeriğiniz Burada [/nk_awb]
“ Buraya İçeriğiniz ” kelimelerini gerçek içeriğinizle (metin, resim, video…) değiştirmeniz gerekecektir. Kaydet'e tıklamayı unutmayın.
Web sitenize gidin ve her şeyin düzgün çalışıp çalışmadığını görmek için paralaks eklediğiniz gönderiyi veya sayfayı kontrol edin.
Gutenberg Düzenleyicisi ile Paralaks Eklemek için Eklentiyi Kullanma
Bu eklenti aynı zamanda Gutenberg dostudur. Kullanmak için, paralaks efektini eklemeye başlamak için Arka Plan (AWB) bloğuna tıklayın.
Diğer tüm bloklarda olduğu gibi Arka Plan (AWB) bloğunun da Classic Editor'dakilerle hemen hemen aynı olan kendi seçenekleri vardır .
İşin güzel yanı, paralaks efekti ile bölüme renk, resim ve hatta video ekleyebilirsiniz. Ayrıca, dolgu, hızı veya paralaks türünü ekleyerek paralaksın boyutunu ayarlayabilirsiniz. Son olarak, Gutenberg daha önce bahsettiğimiz fare efektini destekler.
Paralaks kaydırma aslında göründüğünden daha doğru yapmak daha zordur. Özellikle bir WordPress acemi iseniz, paralaks efekti eklemek sizin için çok karmaşık görünebilir. Bu nedenle, şu anda piyasada bulabileceğiniz en iyi paralaks WordPress temalarının kısa bir listesini verirsek yardımcı olabileceğini düşündük.
- Bazaar – Modern, Keskin Bir e-Ticaret Teması
- PlayerX – Oyun ve eSporlar için Güçlü Bir Tema
- Açelya – Moda Fotoğrafçılığı Teması
- Boston – Kurumsal Paralaks WordPress Teması
- Hypnos – OnePage Paralaks WordPress Teması
Moda temaları, özellikle çevrimiçi mağazalar, paralaks kaydırmadan en çok yararlananlardır. Aslında, onsuz bir moda ve giyim sitesi, mağaza veya blog hayal etmek zor. Çarşı , bunu tam olarak anlamış gibi görünen temalardan biridir. Bu muhteşem tema , güzel hazırlanmış bir görünüm kitabı da dahil olmak üzere bazı çarpıcı sayfalarla birlikte gelir . Asimetrik mağaza sayfası, ürünlerinizi ziyaretçilerinizin alışveriş havasına sokacak şekilde sergilemek için idealdir .
Bazaar, güçlü Select Core eklentisi, özel ürün kısa kodları, video arka plan bölümleri, sosyal widget'lar ve özelleştirilebilir bir Google haritası ile birlikte gelir. Tema, elbette, tamamen duyarlı ve güçlü WPBakery sayfa oluşturucuyu içeriyor .
Bazaar'ı en iyi paralaks WordPress teması yapan özellikler:
- Pürüzsüz kaydırma
- SEO Optimize Edildi
- Çeviri Hazır
- Ücretsiz Slider Devrimi Eklentisi
- 1-Tıkla Demo İçeriği İçe Aktarma
Oyunlar, oyuncular, eSporlar ve stüdyolar hakkında her şey için bu heyecan verici tema, doğru yapılan paralaks kaydırmanın müthiş bir örneğidir . Oyun endüstrisinin doğası, tam da PlayerX'in masaya getirdiği türden dinamik ve heyecan verici bir kullanıcı deneyimi gerektirir.
Harika paralaks kaydırma ve kaydırıcılara ek olarak PlayerX, başarılı bir oyun sitesi için gerekli tüm özellikler ve işlevlerle doludur. Özel öğeler arasında mükemmel bilgi grafikleri, zengin tipografi, takım sunumları, referanslar, maç listesi ve bir akış kutusu bulunur.
Sonuç olarak PlayerX, paralaks kaydırmanın neyle ilgili olduğunu ve nasıl kullanılması gerektiğini gerçekten gösteren bir temadır.
PlayerX'i en iyi paralaks WordPress teması yapan özellikler:
- Maçlar ve Akış için Kısa Kodlar
- takım atlıkarınca
- Entegre Arama
- 7 Simge Yazı Tipi Paketi
- WooCommerce Uyumlu
Azalea , biri büyük ölçüde paralaks kaydırmaya dayanan bir dizi hazır ana sayfa düzenine sahip fotoğrafçılık için muhteşem, sofistike bir WordPress temasıdır. Moda fotoğrafçılığı için ideal olan Azalea, yaşam tarzı ve güzellikten fotoğraflarınızı satabileceğiniz blog ve mağazaya kadar başka amaçlar için de kullanılabilir. Ana sayfaların her biri tek kelimeyle çarpıcı, ancak paralaks olanın çoğu moda fotoğrafçısının takdir edeceğinden emin olduğumuz belirli bir çekiciliğe sahip olduğunu söylemeliyiz.
Açelya çok sağlamdır ancak bu, kullanımı zor olduğu anlamına gelmez. WordPress konusunda tamamen deneyimsiz biri bile, bu temayı kurmak ve son derece başarılı bir moda, güzellik ve yaşam tarzı fotoğrafçılığı web sitesini çalıştırmak için kolay bir zamana sahip olmalıdır.
Açelya'yı en iyi paralaks WordPress teması yapan özellikler:
- Geçiş Korumalı Prova Galerileri
- Paralaks Kısa Kodu
- Müşteriler Carousel
- CTA Kısa Kodu
- 5 Başlık Stili
Boston'la ilgili çok güzel bir şey, tek sayfalık bir web sitesi ile çok sayfalı bir web sitesi arasında seçim yapmanıza izin vermesidir. Bu esnekliğin yanı sıra, kapsamlı özelleştirme seçenekleri ve tabii ki bazı etkileyici paralaks sayfaları elde edersiniz.
Boston, şirketler, büyük şirketler ve ajanslar için özel olarak tasarlanmış bir paralaks WordPress temasıdır . İster tek sayfalık ister çok sayfalı bir web sitesini tercih edin, paralaksı göstermek için değil, ziyaretçileri modern bir hisle etkilemek için kullanan çok akıllı, profesyonel görünümlü bir web sitesine sahip olacaksınız. Tema, müşterileriniz ve müşterileriniz büyük olasılıkla göz atma işlemlerinin çoğunu el cihazlarında yaptıkları için önemli olan mobil öncelikli konsepte dayalı olarak geliştirildi. Oh, ve profesyonel kullanıcılar, daha az dosya içeren ve dolayısıyla çok daha hafif olan, kendileri için özel olarak yapılmış bir sürümün olduğunu öğrenmekten mutlu olacaklardır.
Boston'ı en iyi paralaks WordPress teması yapan özellikler:
- Işık Kutusu Önizlemesi
- Twitter Canlı
- Sınırsız Portföy Çalışması
- Flexslider ve Devrim Kaydırıcısı
- Çalışan İletişim ve Bülten Formu
Aradığınız son derece işlevsel, kapsamlı ve modern tek sayfalık bir web sitesiyse , Hypnos sizin için doğru tema olabilir. Bu duyarlı tema gerçekten çok amaçlı bir temadır . Küçük ve orta ölçekli işletme, ajans veya stüdyodan portföy, blog ve mağazaya kadar her şey için kullanabilirsiniz. Her ikisi de harika görünen ve mükemmel paralaks efektlerine sahip olan açık ve koyu bir versiyonla birlikte gelir.
Bunun da ötesinde, Hypnos çok sezgiseldir, mükemmel müşteri desteği ve çok sayıda özellik ile birlikte gelir. Bu temayla elde ettiğiniz sayfa oluşturucu özel bölümlerle birlikte gelir ve diğer şeylerin yanı sıra sıralanabilir bir portföy, çalışan iletişim formu, Devrim Kaydırıcısı ve Google yazı tiplerine de sahip olursunuz.
Hypnos'u en iyi paralaks WordPress teması yapan özellikler:
- WPML Uyumlu
- SEO Optimize Edildi
- Retina-Hazır
- Özel Önyükleyici
- Canlı Sohbet Desteği
Sonuç olarak
Paralaks kaydırma , WordPress web sitenizi kesinlikle iyileştirir , ancak yalnızca doğru yaparsanız. Sırf paralaks olsun diye paralaks eklemek çok saçma. Bu efekti kullanan pek çok web sitesiyle, aşırı doygunluğa ve itici, eski ve sıkıcı hale geldiği noktaya yaklaşıyor olabiliriz.
İkincisi, paralaks kaydırma doğru yapılmalıdır . Bir aksaklık olmadan çalışması gerekiyor, aksi takdirde site ziyaretçileriniz açıkçası rahatsız olacak.
Üçüncüsü, tek sayfalık web sitenize hayat vermek için paralaks kaydırmayı kullanmak çok baştan çıkarıcı olabilir, ancak gerçekten söyleyecek bir şeyiniz ve kullanıcılarınızın kaydırması için verecek içeriğiniz olduğundan emin olun.
Dördüncüsü, ilgi çekici, iyi düşünülmüş bir paralaks kaydırma efektiyle ziyaretçilerinizin ilgisini çekmeyi başardıysanız, bunun lehinize çalışmasını sağlamayı unutmayın. Onları daha da cezbetmek için CTA'larınızı dikkatlice planlayın .
Tabii ki, premium bir paralaks WP teması seçtiğinizde, temanın yazarları sizin için iyi düşündüğü için bu şeyler için endişelenmenize gerek yok.
Sonuç olarak, paralaks kaydırma oldukça harika. Evet, onu mahvetmenin yolları var ve evet, biraz aşırı doygunluk olabilir. Yine de site trafiğini artırmak ve dönüşüm oranlarınızı optimize etmek için güçlü bir araçtır. Ayrıca, harika görünüyor ve web sitenize havalı bir dokunuş katıyor .
WordPress paralaks kaydırma hakkında ne düşünüyorsunuz? Aşağıdaki yorumlar bölümünde sizden haber almak isteriz!
Umarız bu makaleyi faydalı bulmuşsunuzdur. Eğer beğendiyseniz, lütfen bu makalelerden bazılarına da göz atmaktan çekinmeyin!
- En İyi Havalı ve Şık WordPress Temaları
- Ziyaretçilerinizi Gülümseten Pop-up'lar için WordPress Eklentileri
- 5+ Resim-Mükemmel WordPress YouTube Eklentisi