Ana İçeriğe Geç

herhangi WordPress tema üzerinde bir paralaks etkisi nasıl eklenir

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Son zamanlarda okuyucularımızdan biri bize herhangi bir WordPress temasına nasıl paralaks efekti ekleyeceğimizi sordu?

Paralaks efekti, arka plan görüntüsünün ön plandaki içeriğe göre daha yavaş kaydırıldığı günümüzde web'de popüler bir trend.

Bu eğitimde, herhangi bir WordPress temasına paralaks efektini kolayca nasıl ekleyeceğinizi göstereceğiz.

Ancak, WordPress'i hiç yüklemediyseniz, keşfedin Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için 

Ama neden burada olduğumuza dönelim.

Herhangi bir wordpress temasına paralaks efekti nasıl eklenir e1567702269161

Paralaks etkisi nedir?

Paralaks Etkisi, arka plan öğesinin ön plandaki içeriğe göre daha yavaş kaydırıldığı modern bir web tasarım tekniğidir. Bu efekt, arka plan görüntülerine derinlik katar ve onları etkileşimli hale getirir.

Bizim keşfedin 25 WordPress temaları ile bir web sitesi oluşturmak için paralaks

Paralaks efekti şu cihazlarda kullanılabilir: açılış sayfaları, satış sayfaları veya bir işletme web sitesinin ana sayfası. Uzun bir sayfada farklı bölümleri vurgulamanın harika bir yoludur.

çok premium WordPress temaları ana sayfalarında yerleşik bir paralaks etkisine sahiptir. Paralaks efektini çoğu eklentiyle de kullanabilirsiniz. WordPress sayfaların görsel oluşturulması.

Ancak, tüm WordPress temalarında yerleşik bir paralaks etkisi yoktur ve sayfaların görsel bir kurucusunu yalnızca paralaks etkisi için kullanmak istemeyebilirsiniz.

Paralaks efektinin herhangi bir WordPress temasına nasıl kolayca ekleneceğine bir göz atalım.

Yöntem 1: Bir eklenti kullanarak herhangi bir WordPress temasına paralaks efekti ekleyin

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

Yapmanız gereken ilk şey, eklentiyi yüklemek ve etkinleştirmek. Gelişmiş WordPress Arka Planları. Daha fazla ayrıntı için WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Eklentiyi etkinleştirdikten sonra, paralaks efekti eklemek istediğiniz sayfayı düzenlemeniz gerekir. Yeni düğmeyi fark edeceksiniz "Gelişmiş WordPress Arka Planları»Görsel düzenleyici araç çubuğunda.

Gelişmiş wordpress arka planı ekleyin

Üzerine tıklamak, eklemek istediğiniz çeşitli arka plan ayarlarını değiştirebileceğiniz bir açılır pencere açacaktır.

Öncelikle, arka plan olarak bir resim seçmeniz ve ardından seçeneği işaretlemeniz gerekir " Germek'.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Gelişmiş wordpress penceresi arka planı

O zaman düğmeye tıklamanız gerekir Resim Seç Kullanmak istediğiniz bir resmi indirmek veya seçmek için. Büyük bir görüntü kullandığınızdan emin olun, aksi halde pikselli görünür.

Bundan sonra, efekti etkinleştirmeniz gerekir Paralaks Bir tür paralaks efekti seçerek. Deneyebileceğiniz çok sayıda stil vardır. Kullanılan en yaygın paralaks efekti kaydırmadır.

düğmesine tıklayın Ekle Devam etmek için.

Eklenti bir kısa kod sizinle ilgili Yayıncılık Düzenleyici. Bu gibi görünecek:

[nk_awb awb_type = "image" awb_stretch = "true" awb_image = "22" awb_image_size = "full" awb_parallax = "kaydırma" awb_parallax_speed = "0.5" awb_mouse_parallax_speed = "30" burada [/ nk_awb]

Değiştir " bu içerik Kendi içeriğinize göre sayfanızı kaydedin.

Web sitenizi ziyaret ederek eylemin devam ettiğini görebilirsiniz.

WordPress üzerinde paralaks etkisi2. Yöntem: CSS ile herhangi bir WordPress temasına "Paralaks" efektini ekleyin

Bu yöntem, "HTML / CSS" hakkında bazı bilgilerin yanı sıra WordPress temalarının ve eklentilerinin nasıl çalıştığını bilmenizi gerektirir.

Öncelikle, WordPress medya kitaplığınıza, paralaks efekti için kullanmak istediğiniz görüntüyü ziyaret ederek yüklemeniz gerekir. medya> Yeni ekle '.

Keşfeterek daha ileri gidin WordPress blog medyayı organize etmek nasıl

Resmi yükledikten sonra, resmi WordPress medya kitaplığında düzenleyerek resmin URL'sini kopyalamanız gerekir.

Görsel url'sini wordpress'e kopyalayın

Ardından, paralaks efektini görüntülemek istediğiniz sayfaya aşağıdaki HTML kodunu eklemeniz gerekir. Bu HTML kodunu şuraya da ekleyebilirsiniz: WordPress teması veya alt tema.

div class = "paralaks"> İçeriğiniz burada ...

Sonra aşağıdaki özel CSS kodunu WordPress temanıza eklemeniz gerekir.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

.parallax {background-image: url ( "http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); yüksekliği: 100%; arka plan bağlanma: Sabit; Arka plan-konumu: merkezi; Arka plan-tekrar: no-tekrar; Arka plan boyutu: kapak; kenar sol: -410px; margin-right: -410px; } .parallax içeriği {genişliği: 50%; kenar: 0 otomatik; Renk: #fff; dolgu üstü: 50px; }

Arka plan resminin URL'sini kendi resminizle değiştirmeyi unutmayın.

Artık değişikliklerinizi kaydedebilir ve web sitenizi ziyaret edebilirsiniz.

Wordpress paralaks etkisi örneği

Burada ! Artık paralaks efektini WordPress web sitenize ekleyebilirsiniz.

Ayrıca bazı temaları ve premium WordPress eklentilerini keşfedin  

Modern bir görünüm kazandırmak ve blogunuzun veya web sitenizin rahatlığını artırmak için diğer WordPress eklentilerini kullanabilirsiniz.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. WooCommerce Bağışı

WooCommerce web sitenizdeki bu uzantı bağışlarını müşteriler tarafından belirtilen miktarlarda kabul edin. Bu onların istedikleri kadar vermelerini sağlayacaktır. Her bağış, normal bir ürünü olarak sunulabilir. WooCommerce


Woocommerce bağış eklentisi

Müşteri alışveriş sepeti sayfasını atlarsa veya bağış yapmadan doğrudan ödeme sayfasına giderse, ödeme sayfasının üzerinde bağış yapabilmeleri için bir bağlantı görünecektir.

WooCommerce Bağışını kullanmanın her adımı, ekran görüntüleriyle birlikte bir belgede açıklanmıştır. Sadece eklentiyi etkinleştirin ve sepette "Bağış ekle" alanını bulacaksınız.

Indir | gösteri Web hosting

2. LinkedIn Daha Fazla

LinkedIn Plus, LinkedIn profilinizi blogunuzda sunmanıza izin veren bir WordPress eklentisidir. Aynı zamanda çok yazarlı bloglar için de çalışır. Yayınlarınıza, sayfalarınıza veya WordPress widget'larınıza Follow and Share düğmelerini ekler.Linkedin artı LinkedIn wordpress eklentisi

Blogunuza tüm LinkedIn özelliklerini eklemenin ve markanızı tüketicilerle doğrulamanın harika bir yoludur. Profilinizi potansiyel işe alımcılara veya işverenlere tanıtmak için görünümünü özelleştirmenize, ayarları yapılandırmanıza ve diğer gelişmiş seçenekleri etkinleştirmenize olanak tanır. 

Indir | gösteri | Web hosting

3. YouTuber

YouTubeR, web sitenizden YouTube videoları yüklemenize ve YouTube videolarını, oynatma listelerini ve kanallarını web sitenize kolayca yerleştirmenize olanak tanıyan benzersiz bir WordPress eklentisidir.

Youtuber youtube wordpress eklentisi

Bu eklenti ile, web sitenizde istisnai video galerileri oluşturma şansına sahipsiniz.

Diğer özellikleri ise: imkanı WordPress web sitenizden YouTube'a kolayca video yükleyin, entegrasyon web sitenize kolay videolar, oynatma listeleri ve YouTube kanalları, Visual Composer, çalma listelerinde sonsuz kaydırma, mükemmel önbellekleme, duyarlı düzen, ayrıntılı belgeler ve daha fazlası.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Indir | gösteri | Web hosting

Önerilen Kaynaklar

Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.

Sonuç

Hepsi bu! Umarız çok yardımcı olmuştur. Çekinme En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Herhangi bir öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar.

... 

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
6 hisseleri
hisse3
cıvıltı
Enregistrer3