Genişleyen Katmanlar Nasıl Oluşturulur Divi'de Uygulama İllüstrasyonlarını Etkilemek için Kaydırma Efekti
Yayınlanan: 2020-03-11Web sitenizde herhangi bir uygulama veya ürün sergilemek, statik resimler veya grafiklerle sınırlı olmak zorunda değildir. Divi'nin kaydırma efektleriyle, ziyaretçilerin ilgisini çeken ince ve etkili animasyonlar ekleyerek uygulama illüstrasyonlarına hayat verebilirsiniz. Bu öğreticide, Divi'de genişleyen katmanlar kaydırma efekti oluşturmanın basit bir yolunu keşfedeceğiz. Tek gereken, aynı boyutlara ve Divi oluşturucunun tüm yerleşik büyüsüne sahip üç görüntü (veya ekran görüntüsü).
Hemen atlayalım ve başlayalım.
Gizlice Bakış
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.
Hadi öğreticiye geçelim, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
- WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
- “Sıfırdan Oluştur” seçeneğini seçin.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de İlgi Çekici Bir Uygulama İllüstrasyonu için Genişleyen Katmanlar Kaydırma Efekti Oluşturma
Satır ekle
2 sütun (yarım bir buçuk) satır ekleyerek başlayalım.
Bölüme Geçici Marj Ekle
Kaydırma efektlerini daha sonra önizleyebilmek için, bölüme aşağıdaki gibi bir miktar üst ve alt kenar boşluğu ekleyin:
- kenar boşluğu: 80vh üst, 80vh alt
3 Görüntüyü Katman Olarak Ekleyin
Uygulama resminin üç katmanı olarak hizmet edecek üç resim oluşturacağız. Buradaki fikir, uygulamanın özelliklerinin aynı boyuta/boyutlara sahip üç görüntüsünü (veya ekran görüntüsünü) kullanmaktır, böylece görüntüler birbirinin üzerine tam olarak oturacaktır. Ardından Divi kaydırma efektlerini kullanarak üç katmanı hareket ettireceğiz.
İlk görselle başlayalım.
Resim 1 Oluştur
Sol sütuna bir görüntü modülü ekleyin.
Ardından ilk resmi modüle yükleyin. Üç görüntünün de aynı boyutlara sahip olduğundan emin olmayı unutmayın. Bu, 500 piksele 1050 pikseldir.
Resim 1 Ayarlar
Görüntü modülü ayarlarını açın ve aşağıdakileri güncelleyin:
Genişlik ve Kenar Boşluğu
- Genişlik: 300 piksel (masaüstü ve tablet), 150 piksel (telefon)
- Modül Hizalama: sol
- Kenar boşluğu: 0 piksel alt
Sınır
- Yuvarlatılmış Köşeler: 40px
- Kenar Genişliği: 15px
- Kenar Rengi: #ffffff
Kutu Gölge
- Kutu Gölgesi: Ekran Görüntüsüne bakın
- Kutu Gölge Dikey Konumu: 0px
- Kutu Gölge Bulanıklığı Gücü: 48 piksel
- Gölge Rengi: rgba(0,0,0,0.2)
Resim 2 Oluştur
2. resmi oluşturmak için 1. resmi çoğaltın.
Ardından, yinelenen görüntü modülünü aynı boyutlarda (500 piksele 1050 piksel) yeni bir görüntü ile güncelleyin.
Resim 2 Ayarlar
Ardından, aşağıdakileri güncelleyerek sınırı çıkarın:
Sınır
- Kenar Genişliği: 0px
Bu görüntü için bir kenarlığa ihtiyacımız yok, ancak görüntülerin sorunsuz bir şekilde istiflendiğinden emin olmak için kenarlık aralığını dolgu ile değiştirmemiz gerekiyor.
Dolgu malzemesi
- Dolgu: 15 piksel üst, 15 piksel alt, 15 piksel sol, 15 piksel sağ
Konum
Ardından görüntü 2'nin konumunu Mutlak olarak güncelleyin. Bu, resmin resim 1 ile mükemmel bir şekilde örtüşmesini sağlayacaktır.
- Pozisyon: Mutlak
Daha fazla bilgi için Divi'de mutlak konumun nasıl kullanılacağına ilişkin yazımızın tamamına göz atın.
Kaydırma Efektleri
Şimdi, sayfayı aşağı kaydırırken katmanımızı (resim 2) hareket ettiren kaydırma efektini eklemenin zamanı geldi.
Kaydırma efektlerini aşağıdaki gibi güncelleyin:
Dikey Hareket sekmesi altında…
- Dikey Hareketi Etkinleştir: EVET
- Başlangıç Ofseti: 0 (%0 görünüm alanında)
- Orta Ofset: 0 (%0 görünüm alanında)
- Bitiş Ofseti: -1 (%100 görünüm alanında)
Yatay Hareket sekmesi altında…
- Yatay Hareketi Etkinleştir: EVET
- Başlangıç Ofseti: 0 (%0 görünüm alanında)
- Orta Ofset: 1 (%50 görünüm alanında)
- Bitiş Ofseti: -1.5 (%100 görünüm alanında)
Fading In ve Out sekmesinin altında…
- Soldurmayı ve Yavaşlamayı Etkinleştir: EVET
- Opaklığı Başlatma: %0 (%0 görünüm alanında)
- Orta Opaklık: %100 (%10-15 görünüm alanında)
- Bitiş Opaklığı: %70 (%30 görünüm alanında)
Resim 3 Oluştur
Tüm kaydırma efektleri Resim 2'ye eklendikten sonra, resim 3'ü oluşturmaya hazırız.
Oluşturucunun altındaki ayarlar menüsünü açın ve katmanlar açılır penceresini dağıtmak için Katmanlar düğmesini seçin. Ardından, görüntü 3'ü oluşturmak için görüntü modülünü 2'yi sütun 1 içinde çoğaltın. Bunun için katmanlar özelliğini kullanmak, örtüşen modülleri seçmek zor olduğundan yararlıdır.
Şimdi yinelenen resim (resim 3) için ayarları açın ve yeni bir resim yükleyin. Aynı boyutlarda (500 piksele 1050 piksel) tuttuğunuzdan emin olun.
Resim 3 Kaydırma Efektleri
Gelişmiş sekmesi altında, görüntü 3 için kaydırma efektleri seçeneklerini güncelleyin.
Dikey Hareket sekmesi altında, dikey hareket ofsetini aşağıdaki gibi güncelleyin:
- Bitiş Ofseti: -2 (%100 görünüm alanında)
Yatay Hareket sekmesi altında, Yatay Hareketi aşağıdaki gibi güncelleyin:
- Orta Ofset: 2 (%50 görünüm alanında)
- Bitiş Ofseti: 3 (%100 görünüm alanında)
Fading In and Out sekmesi altında, Fading In and Out ayarlarını aşağıdaki gibi güncelleyin:
- Opaklığı Başlatma: %5 (%0 görünüm alanında)
- Orta Opaklık: %100 (%30-%40 görünüm alanında)
- Bitiş Opaklığı: %100 (%50 görünüm alanında)
Sonuç
Şimdiye kadarki sonuca bakın.
Eğriliği Dönüştürmeyi Sütun 1'e Ekle
Bu hali hazırda harika görünen bir efekt, ancak daha fazla 3D efekti oluşturmak için sütunu eğeceğiz.
Sütun 1 için ayarları açın ve aşağıdaki gibi bir dönüştürme eğriliği ekleyin:
Eğriliği Dönüştür (X ve Y ekseni): 8deg
Bu, genişleyen katmanlar üzerinde güzel bir 3 boyutlu efekt yaratacaktır.
Bu kadar!
İsteğe bağlı: 2. Sütun'a CTA ekleyin
Artık bazı ücretsiz kaydırma efektleriyle sağ sütuna herhangi bir başlık ve düğme (veya herhangi bir CTA) ekleyebiliriz. Bu çizimde aynı CTA'yı almak için yukarıdaki bu düzenin ücretsiz indirmesine göz atın.
Son sonuç
İşte nihai sonuç.
Ve işte tablet ve telefonda nasıl yığıldığı.
Divi Düzen Paketindeki Görüntüleri Kullanma
Bu eğitimde kullanılan görseller Shutterstock'tan sahte görsellerdir ve ayrıca kaydırma efektleri demo sayfamızda da yer almaktadır.
Tasarımı kendi ihtiyaçlarınıza uyacak şekilde değiştirmek için ücretsiz düzen paketlerimizden görüntüleri kullanabilir veya kendi ekran görüntülerinizi oluşturabilirsiniz. İşte Mobile App Layout Pack'teki görüntüleri kullanan örnek bir tasarım. Genişleyen katmanlar için kullanılan hafif görüntüleri tamamlamak için degrade bir arka plan da ekledim.
Birkaç dakika içinde tamamen farklı bir tasarımımız var!
Son düşünceler
Genişleyen katman kaydırma efekti, daha karmaşık CSS tekniklerine veya Fotoğraf Düzenlemeye başvurmak zorunda kalmadan uygulamaları veya ürünleri sergilemek için zarif bir çözümdür. Ve hemen hemen her şeyi göstermek için aynı tekniği kullanabilirsiniz. Görüntüleri kendiniz için değiştirmenin ve Divi'deki basit bir seçenekle tüm görüntü/katman koleksiyonunu eğmenin ne kadar kolay olduğunu seviyorum. Umarım, bu size harika Divi tasarımları yaratmanız için sizi güçlendirecek bir ilham verir.
Yorumlarda sizden haber bekliyorum.
Şerefe!