Elementor web sitesine 2 dakika içinde paralaks efekti nasıl eklenir
Bir paralaks efekti ekleyerek sitenizi kullanıcı deneyiminizi geliştirmek ister misiniz? Doğru yere geldin. WordPress sitenize bu benzersiz ama harika özelliği eklemek için tüm süreç boyunca size rehberlik edeceğiz. Parkalaks rulolarını kullanan birçok web sayfası görmüş olabilirsiniz, burada arka planın derinliği iletmek için ön plan öğesinden daha yavaş hareket ettiği. Bu etki nadir değildir. Her türlü web sitesi üzerinde bir paralaks etkisi bulacaksınız. Parallax, kullanıcı onlar için yaptığınız anlatıyı izlerken ürün/hizmet ayrıntılarınızı dinamik olarak ifade etmenizi sağlar.
Üstatlar Olağanüstü bir web sitesi tasarımı elde etmenize yardımcı olmanın yanı sıra, paralaks özellikleri çeşitli şekillerde kolaylaştırabilir. Beğenmek:
Kullanıcı deneyimini geliştirin
Baskının oranını azaltma
Kullanıcı katılımını artırın
Bununla birlikte, bu özelliği manuel olarak eklemek çok zaman ve çaba gerektirir, ayrıca programlama becerilerine de ihtiyacınız vardır. Ancak bir WordPress siteniz varsa, endişelenmenize gerek yoktur. Çünkü Elementors gibi sayfa yapımcıları, herhangi bir kodlama veya profesyonelin yardımı olmadan web sitenizde paralaks efektleri eklemenize yardımcı olacaktır. Bu nedenle, bugünün öğreticisinde, paralaks etkisinin ne olduğunu, neden kullanmanız gerektiğini ve Elementor kullanarak nasıl bir paralaks efekti oluşturacağınızı açıklıyoruz.
Temel bilgilerle başlayalım. Bilir miyiz? Paralaks etkisi nedir?
Yön sayfası
satış sayfası
İş web sitesi
Seyahat web siteleri
Özel portföy web siteleri, vb.
Önemli Not: Poral Paralax Web Siteleri için Rolls Uygulama yanlışsa, bu yüzden ilginç bir web sitesi şablonu seçmelisiniz. Bu, web sitenizin iyi bir yapı elde etmesine yardımcı olacaktır.
En kullanışlı web sitesi tasarım şablonu hakkında daha fazla bilgi edinin, Elementor’daki paralaks efekti türü
Genel olarak, iki tür paralaks tasarım deseni görebilirsiniz. Paralaks kaydırma efekti ve fare efekti. Ancak, web sitenize göre daha fazla model almak için bu kalıpları birleştirebilirsiniz. 01. Paralaks ruloları, Roundarys’e dayalı çalışan Page 02. Fare efekt, fareyi hareket ettirdiğinizde çalışalım.
Yatay olarak kaydırın
Sıçan yolu
bulanık etki
Etkiyi Oynamak
Fare Etkisi
Sıçan izi fare etkisi soluk bir geçiştir. Yukarıdan aşağıya ne kadar çok hareket ederseniz, gezinme otomatik olarak görünür. Çok ilginç ve ilginç görünüyor. Tabii ki, web sitenizi kullanıcı deneyiminizi geliştirecektir. Bu tasarımı, kullanıcılar için yeni konuları ortaya çıkarmak için uygulayabilir veya sadece bir sırada ne var!
Yağ Medya Görüntü Kredisi
Döndürme Etkisi Efekt Efektasyonu, öğeye hareket eklemek anlamına gelir. Bu nedenle, kullanıcı sayfada gezinirken veya sayfayı aşağı kaydırırken, öğe saat yönünün tersine veya saat yönünün tersine döner. Bu, web sitenize eklemek için iyi bir etki olabilir. Web sitenizi kaydırırken kullanıcılarınıza video izliyormuş gibi hissettirebilirsiniz.
Arka Plan Kaydırma En eski tasarım desenlerinden biri arka plan kaydırma efektidir. Bu, bu tasarıma başlamak için iyi bir yoldur. Sayfaya aşağı kaydırdığınızda görüntünün tek tek değiştiğini görebilirsiniz. Ayrıca, yukarıdan aşağıya doğru kaydırdığınızda bir hikaye alacaksınız. Bir sayfa web siteniz varsa, bu tasarım sizin için olağanüstü olabilir. Resim Kredi: Cadillac & Dinosaur
Daniel Spatzek örnekleri
Bir proje için bir maket yaptığınızı söyleyin, ancak biraz sıkıcı ve onu baharatlamak istiyorsunuz. Yatay parşömenleri kullanarak mekiği ekranın ortasına uçurmak başarılı olmalıdır. Gördüğünüz gibi, etki yukarıdan aşağıya doğru ilerlediğiniz gibi çalışır.
Son fakat en az değil, fare etkisi, tartışılacak bir paralaks fare etkisi var. Çok basit ve havalı görünüyor. Farenin koruyucusunu hareket ettirdikten sonra, tüm pencere hareket edecektir. Ayrıca, bir uzay gemisindeymiş gibi hissedeceksiniz. Böylece bu tasarım desenini sitenize uygulayabilirsiniz. Ancak bunu belirli bir bölüme eklemenizi öneririz. Sayfalar, portföy bölümleri veya sorgu sayfaları gibi. Bu şekilde web sitenizde daha fazla olmak için dikkatlerini çekebilirsiniz.
Her ne kadar birçok web sitesinde görebileceğiniz çok fazla paralaks efekti olmasına rağmen. Ancak web sitenizde uygulayabileceğiniz en popüler efektlerden bazılarını aldık. Web sitenizi daha çekici hale getirmek ve iyi bir tasarımla dikkat çekmek için buraya tıklayın, size bir paralaks efekti nasıl ekleyeceğinizi göstereceğiz.
Bir element kullanarak bir paralaks efekti nasıl oluşturulur
Elementlerle paralaks tasarımları yapmak için gereksinimler
WordPress
Elementor (Ücretsiz ve Pro)
Eleman
Hareketin etkisini ekleyin Gelişmiş parça altında hareket bulacaksınız. Ayrıca iki alt bölüm vardır. Kaydırma efekti ve fare efekti. Ayrıca yapışkan öğeler, animasyon, animasyon süresi ve animasyon gecikmeleri kullanabilirsiniz.
Tasarım bölümlerinizden birini seçin, ardından bu özelliği eklemek için devam eden bölüme tıklayın. Bu durumda, başlığı seçtik. Bundan sonra ekranın sağ tarafındaki düzenlenen simgeye tıklayın. Ve sonra hareketin etkisine daha fazla dokunun.
Paralaks efekti ekle
Dikey kaydırma
Bulanıklık
Ölçek
Tasarımı uygulamak için dikey kaydırma, her şeyden önce tasarım bölümlerinden birini tıklayın. Ve ardından Gelişmiş> Hareket Etkisi’ne gidin> Dikey kaydırma düğmesine dokunun.
Not: İstediğiniz parçayı girmek ve düzenlemek için bu seçeneği seçmelisiniz. Değilse, düzgün çalışmaz. Düğmeyi bir kalem gibi tıkladıktan sonra kaydırma efektini ayarlayabilirsiniz. Yönü yukarı ve aşağı değiştirebileceğiniz için, bakış açısını optimize ederek öğe kaydırma hızını ayarlayın. Tasarımınızın ilerlemesini doğru ekranın yanında da görebilirsiniz.
Dikey kaydırma efekti gibi yatay kaydırma efektleri, artık yatay kaydırma için de aynısını yapabilirsiniz. Tasarım bölümünüzü seçin ve Gelişmiş> Hareketler> Kaydırma Etkisi> Yatay Etkisi’ne gidin.
Şeffaflık Efektleri Şeffaflık efektlerinin web sitenizde nasıl çalıştığını görelim. Bunu yapmak için şeffaf seçeneğine bir kez daha dokunun ve ayarları ayarlayın. Burada dört tür şeffaflık efekti kullanabilirsiniz. Ayrıca, seviyeyi 1’den 10’a ayarlayabilirsiniz.
Bulanık efekt bir kez daha, tasarımınızın bir kısmını seçin. Bizim durumumuzda benim hakkımda yer aldık. Aynı şekilde, Düzenle seçeneğini tıklayın ve hareketin etkisini bulmak için gelişmiş ayarlara gidin. Ardından bulanıklık efekti bulun ve üzerine tıklayın. Tasarımınıza uygulanacak dört efekt bulacaksınız. Ayrıca, mavi seviyeye uyum sağlayabilirsiniz.
Mevcut etkiyi çevirin, döner etkinin nasıl çalıştığını gösterme zamanıdır. Aynı şekilde, tasarım bölümlerinizden birini seçin ve tasarımınız üzerindeki dönme efektini elde etmek için Gelişmiş Tasarım seçeneğini ayarlayın.
Bu sıçan etkisi iki tür etki içerir; 3D fare ve eğim izleri. Bir fare izi uygularken, farenizin yönüne veya ters yöne yönlendirebilirsiniz.
Şimdi istediğiniz tasarım desenini seçin ve başlamak için Ekle düğmesini tıklayın!
Tasarımı sayfanıza girdikten sonra, paralaks efekti otomatik olarak hareket edecektir!
Elementor web sitenize bir paralaks efekti oluşturmak için daha önce yapılmış bir paralaks tasarımı eklemek için Happy Addons’ı bu şekilde kullanabilirsiniz. Happy Addons kullanmayı sever misiniz? Tam bir WordPress web sitesi oluşturmak için daha mutlu eklentiler özelliklerini kontrol edebilirsiniz.
Tüm mutlu eklentileri kontrol edeyim!
Paralaks efekti hakkında bazı SSS’ler
Cevap: Kaydırma efekti Elementor Pro özelliklerinden biridir. Başka bir deyişle, bu özellikleri kullanmak için Pro Elementor’u kullanmanız gerekir. Aşağıda yatay kaydırma efekti uygulanmadan önce bir örnek verilmiştir. Ve işte yatay kaydırma uygulandıktan sonra bir örnek.
Bir öğeye nasıl yapışkan bir etki eklerim?
Cevap: Yapışkan bir rulo efekti uygulamak için, devam> rulo efekti> yapışkan olarak gezinin ve üst seçeneği seçin. Bundan sonra, sayfanın üstüne yapışacaktır.
Web sitesi tasarımına manuel olarak bir paralaks efekti eklemek, özellikle yeni başlayanlar için bir paralaks etkisi eklemek, ne olacağını öğrenin. Ayrıca, otomatik olarak bir paralaks efekti sunan özel bir WordPress teması yoktur. Bu durumda Elementor, kullanıcı dostu ve sürükle ve bırak tesisleri nedeniyle ilk tercihiniz olabilir. Ayrıca, yerleşik mutlu eklentiler özelliği tasarım deneyiminizi bir sonraki seviyeye taşıyacaktır. Bu öğretici, web sitenizin görünümünü değiştirmenize, en iyi düzeni üretmenize ve muhteşem sayfalar oluşturmanıza yardımcı olur. Serbest çalışan, küçük bir işletme veya tüm şirket olmanız önemli değil – herkes mevcut web sitelerine bir paralaks efekti ekleyebilir. Sadece adımlarımızı takip edin ve web sitenizde bazı olağanüstü paralaks efektleri yapmaya başlayın. Değerli geri bildirimlerinizi ve önerilerinizi aşağıdaki yorumlar bölümümüzden paylaşabilirsiniz. Sesinizi duymaktan ve gerçek zamanlı cevap vermekten mutluluk duyuyoruz! Şimdi mutlu eklentilere ihtiyacım var!