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 600.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 okurlarımızdan biri, herhangi bir WordPress temasına nasıl paralaks efekti ekleyeceğimizi sordu.

Paralaks etkisi, günümüzde web üzerinde, arka plan görüntüsünün önde gelen içerikten daha yavaş kaydırıldığı popüler bir eğilimdir.

Bu eğitici yazıda, herhangi bir WordPress temasına nasıl kolayca paralaks efekti ekleneceğini 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.

Paralaks efekti nedir?

Paralaks etkisi, arka plan öğesinin ön plan içeriğinden daha yavaş kaydırıldığı modern bir Web tasarım tekniğidir. Bu efekt arkaplan resimlerine derinlik katar ve onları etkileşimli yapar.

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

Paralaks etkisi kullanılabilir açılış sayfaları, satış sayfaları veya kurumsal bir web sitesinin ana sayfası. Bu, uzun bir sayfada farklı bölümleri vurgulamak için harika bir yoldur.

çok premium WordPress temaları Ana sayfalarında yerleşik bir paralaks etkisi var. 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.

Herhangi bir WordPress temasına paralaks efektinin nasıl kolayca ekleneceğini inceleyelim.

1 Yöntemi: Eklenti Kullanarak Herhangi Bir WordPress Temasına Paralaks Etkisi Ekleme

Bu yöntem, WordPress temanıza bir kod eklemenizi gerektirmez. Çoğu kullanıcı için daha kolay 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 göz atın.

Eklentiyi etkinleştirdikten sonra, paralaks efektini eklemek istediğiniz sayfayı değiştirmeniz gerekir. Yeni düğmeyi göreceksinizGelişmiş WordPress Arka PlanlarıGörsel editörün araç çubuğunda.

Üzerine tıklamak, eklemek istediğiniz farklı arka plan ayarlarını düzenleyebileceğiniz bir açılır pencere görüntüler.

Öncelikle, arka plan olarak bir resim seçmeniz, ardından "seçeneğini 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]

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 çeşit paralaks etkisi seçerek. Deney yapabileceğiniz birkaç stil vardır. Kullanılan en yaygın paralaks etkisi 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.

2 Yöntemi: 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 multimedya kitaplığınıza paralaks etkisi 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

Görüntüyü indirdikten sonra, görüntünün URL'sini, WordPress Media Library'deki görüntüyü düzenleyerek kopyalamanız gerekir.

Ardından, paralaks etkisini görüntülemek istediğiniz sayfaya aşağıdaki HTML kodunu eklemeniz gerekir. Bu HTML kodunu ayrıca cihazınıza da ekleyebilirsiniz. WordPress teması veya alt tema.

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]

div class = "paralaks"> <div class = "paralaks-content"> burada İçerik ... </ div> </ div>

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

.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 görüntüsünün URL'sini kendi resminizle değiştirmeyi unutmayın.

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

İşte bu kadar! Şimdi paralaks etkisini 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ğışı

Müşterileriniz tarafından belirtilen miktarlarla WooCommerce web sitenizdeki bu uzatma bağışlarını kabul edin. İstedikleri kadar verebilecekler. Her bağış, normal bir ürünü olarak sunulabilir. WooCommerce.


Müşteri alışveriş sepeti sayfasını görmezden gelirse veya bağış yapmadan doğrudan kasaya girerse, bağış sayfasını yukarıda belirten bir bağlantı görüntülenir, böylece bağış yapabilir.

WooCommerce Bağışını kullanmanın her adımı, ekran görüntüleri olan bir belgede açıklanmaktadır. Eklentiyi etkinleştirmeniz yeterlidir; sepette "Hediye 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.

Tüm LinkedIn özelliklerini blogunuza eklemek ve markanızı tüketicilerle doğrulamak için harika bir yol. Profilinizi potansiyel işverenlere veya işverenlere tanıtmak için görünümünüzü kişiselleştirme, ayarları yapılandırma ve diğer gelişmiş seçenekleri kullanma yeteneği sağlar.

Indir | gösteri | Web hosting

3. YouTuber

YouTubeR, web sitenizden YouTube'a video yüklemenizi ve videoları, oynatma listelerini ve YouTube kanallarını web sitenize kolayca entegre etmenizi sağlayan benzersiz bir WordPress eklentisidir.

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

Diğer özellikleri ise: imkanı Videoları YouTube’a WordPress web sitenizden kolayca yükleyin, ekleyin 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ştururken ve yönetirken size eşlik edecek diğer önerilen kaynakları keşfedin.

Sonuç

Hepsi bu kadar! Umarız çok yardımcı olmuştur. Tereddüt etmeyin 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 adresiniz gösterilmeyecektir. 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