Divi'de Kaydırmada Hareketli Görüntü Gölgeleri Nasıl Oluşturulur

Web tasarımı dünyasında, gölgeleri genellikle Photoshop'ta ekleyebileceğimiz bir şey veya bir CSS özelliği (kutu gölgesi veya metin gölgesi gibi) olarak düşünürüz. Ancak Divi ile kutunun (veya kutu-gölgenin) dışında düşünebiliriz. Divi'nin yerleşik filtre ve kaydırma efekti seçeneklerinde yalnızca birkaç ayar yaparak herhangi bir görüntüyü gerçeğe yakın bir gölgeye dönüştürebiliriz.

Bu eğitimde, size Divi'de kaydırmada hareketli görüntü gölgelerinin nasıl oluşturulacağını göstereceğiz. İşin püf noktası, benzersiz bir şekle sahip bir PNG görüntüsü bulmaktır, böylece görüntü bir kez dönüştürüldüğünde şekli koruyacak ve görüntünün gerçekçi bir gölgesi gibi görünecektir. Görüntü/gölge hazır olduktan sonra, kullanıcı kaydırdıkça gölgeyi hareket ettirmek için birkaç kaydırma efekti ekleyebiliriz. Bu olağandışı (ancak tanıdık) efekt, sitenize yeni bir hayat getirecek çarpıcı bir tasarım öğesi ekleyecektir.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir 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.

Dosyaları İndirin

Ü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.

İNDİRMEK

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!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak,

Bölüm 1: Bölüm Düzenini Tasarlama

Bu ilk bölümde, hareketli görüntü gölge kaydırma efektini tamamlamak için hızlı bir bölüm düzeni tasarlayacağız.

İki Sütunlu Satırı Ekle

Başlamak için normal bölüme iki sütunlu bir satır ekleyin.

Metin Modülünü Ekleyin

Sol sütunda yeni bir metin modülü ekleyin. Bu bizim sahte metin içeriğimiz olarak hizmet edecek.

Metin içeriği

Ardından, aşağıdaki HTML'yi gövde içeriğinin içine yapıştırın:

<h2>Our Wedding</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Metin Tasarımı

Tasarım sekmesi altında, ayarları aşağıdaki gibi güncelleyin:

• Metin Metin Boyutu: 16px
• Metin Satır Yüksekliği: 2em

• Başlık 2 Yazı Tipi: konfor
• Başlık 2 Metin Rengi: #444235
• Başlık 2 Metin Boyutu: 60px (masaüstü), 40px (tablet)

Resim Tasarımı Vurgusu Ekle

Metin modülünün altına, metne tasarım vurgusu olarak hizmet edecek bir resim ekleyeceğiz. Bütünsel Şifacı Düzen Paketinden bir ağaç dalı görüntüsünü kullanacağız. Bu, daha sonra hareketli görüntü gölgelerimiz için kullanacağımız görüntünün aynısı olacaktır.

Resim eklemek

Metin modülünün altına yeni bir görüntü modülü ekleyin.

Ardından resmi yükleyin.

Görüntü Tasarımı

Tasarım sekmesi altında, filtre ayarlarını kullanarak görüntünün opaklığını azaltın.

• Opaklık: %20

Ardından, aşağıdaki dönüştürme seçeneğini kullanarak görüntüyü sola ve yukarı doğru hareket ettirin:

• Dönüştürme X-Eksenini Çevir: -%20
• Y Eksenini Dönüştür: -%90

Görüntü Konumu

Ardından görüntüye mutlak bir konum verin.

• Pozisyon: Mutlak

Bölüm 2: Hareketli Görüntü Gölgelerini Oluşturma

Sol sütundaki sahte içerik bittiğinde, görüntüyü ve hareketli görüntü gölgelerini oluşturmaya başlamaya hazırız.

Ana Resim Ekle

Sağ sütuna yeni bir görüntü modülü ekleyin.

Ardından en az 800 piksel genişliğinde bir resim yükleyin. Bir ağaç dalının hareketli görüntüsünü ekleyeceğimiz için, dışarıda bir yerin resmini kullanmak mantıklı.

Ardından, modülün altındaki varsayılan alt kenar boşluğunu aşağıdaki gibi çıkarın:

• Alt Kenar Boşluğu: 0px

Hareketli Görüntü Gölgesi Oluşturma 1

Şimdi ilk hareketli görüntü gölgesini oluşturmaya hazırız. Temel fikir, resmin şeffaf arka planının gösterilmemesi için PNG dosya formatında bir resim kullanmaktır. Ardından, görüntüyü gölge gibi görünecek şekilde dönüştürmek için parlaklığı, opaklığı ve bulanıklığı ayarlamak için filtre efektlerini kullanacağız. PNG görüntüsünün benzersiz bir şekli olduğundan, gölge de aynı şekli koruyacaktır.

Holistic Healer Layout Pack'ten bir dalın aynı PNG görüntüsünü ekleyerek başlayalım.

İşte burada…

Görüntü modülünü sağ sütundaki görüntünün altına ekleyin.

Ardından görüntüyü modüle yükleyin.

Görüntü Filtreleri

Tasarım sekmesi altında, görüntünün gölge gibi görünmesi için filtreleri güncelleyin.

• Parlaklık: %0
• Opaklık: %25
• Bulanıklık: 8 piksel

Görüntü Konumu

Ardından, görüntü gölgesine, yukarıdaki ana görüntünün üzerine oturması için mutlak bir konum verin.

Görüntü Kaydırma Efektleri

Görüntü gölgesini taşımak için aşağıdaki kaydırma efektlerini güncelleyin.

Yatay Hareket sekmesi altında…

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 0 (%0'da)
• Orta Ofset: -3 (%50'de)
• Bitiş Ofseti: -6 (%100'de)

Yukarı ve Aşağı Ölçekleme sekmesi altında…

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
• Başlangıç ​​Ölçeği: %160 (%0'da)
• Orta Ölçek: %160 (%50'de)
• Bitiş Ölçeği: %160 (%100'de)

(NOT: Bu, gölgeyi %160'a kadar büyütecek ve tüm kaydırma efekti boyunca orada tutacaktır. Ancak ölçek yüzdelerini farklı noktalarda ayarlamaktan çekinmeyin.)

Dönen sekmenin altında…

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Dönüşü: 30° (%0'da)
• Orta Dönüş: 0° (%50'de)
• Bitiş Dönüşü: -30° (%100'de)

Şimdiye Kadar Sonucu Kontrol Etme

Bu noktada, canlı sayfayı aşağı kaydırabilmemiz için geçici olarak bölüme aşağıdaki marjı ekleyerek şu ana kadar sonucu görebiliriz.

• Marj: 70vh üst, 70vh alt

İşte etkinin şu ana kadar nasıl göründüğü.

Sütun Taşmasını Gizleme

Görüntü gölgesini ana görüntünün aynı sütununda tutmak için 2. sütunun ayarlarını açın ve taşma seçeneklerini aşağıdaki gibi güncelleyin:

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Şimdi sonucu kontrol edin.

Hareketli Görüntü Gölgesi 2 Oluşturma

İlk görüntü gölgemizi yerleştirdikten sonra, başka bir tane oluşturmak kolaydır. Tek yapmamız gereken mevcut görüntü gölgesini çoğaltmak ve kaydırma efektlerini güncellemek. Çift hareketli görüntü gölgeleri, görüntüde güzel bir örtü açma efekti yaratacaktır.

Mevcut Görüntü Gölgesini Çoğalt

Katmanlar modunu kullanarak gölge görüntüyü çoğaltın.

Kaydırma Efektlerini Güncelle

Ardından, kopya için ayarları açın ve kaydırma efektlerini aşağıdaki gibi güncelleyin:

Yatay Hareket sekmesi altında…

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 0 (%0'da)
• Orta Ofset: 3 (%50'de)
• Bitiş Ofseti: 6 (%100'de)

Dönen sekmenin altında…

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Dönüşü: 210° (%0'da)
• Orta Dönüş: 180° (%50'de)
• Bitiş Dönüşü: 150° (%100'de)

İşte sonuç…

Ana Görüntüye Yakınlaştırma Efekti Ekleme

Sütun taşması gizli olduğundan, hareketli görüntü gölgelerini tamamlayacak ince bir yakınlaştırma (veya ken yanma efekti) oluşturmak için kaydırmada ana görüntüyü ölçekleyebiliriz.

Bunu yapmak için ana görüntünün ayarlarını açın ve aşağıdakileri güncelleyin:

Yukarı ve Aşağı Ölçekleme sekmesi altında…

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
• Başlangıç ​​Ölçeği: %100 (%0'da)
• Orta Ölçek: %115 (%50'de)
• Bitiş Ölçeği: %130 (%100'de)

Bu, kullanıcı kaydırdıkça bir yakınlaştırma efekti yaratacaktır.

Son sonuç

Ve işte nihai sonuç.

Son düşünceler

Umarım bu hareketli görüntü gölgeleri benim için olduğu kadar sizin için de eğlenceli olmuştur. Daha da yaratıcı eklemeler yapma potansiyeline sahip basit ama çarpıcı bir tasarım öğesidir. Tasarımı size özel kılmak için farklı renkler, karışım modları ve diğer kaydırma efektleri eklemeyi keşfetmekten çekinmeyin.

Yorumlarda sizden haber bekliyorum.

Şerefe!