Divi'de Dinamik Kaydırma Efekti Oluşturmak için Bir Bölümdeki Öğeler Nasıl Kaydırılır

Bir bölüm içindeki kayan öğeler, kullanıcı sayfayı aşağı kaydırdıkça içeriği ortaya çıkarmak için etkili ve benzersiz bir yol sağlayabilir. Divi ile öğeleri, mevcut yerleşik konum seçeneklerini kullanarak onlara sabit bir konum vererek yüzdürebilirsiniz. Ve sabit öğeleri statik öğeler, animasyon ve paralaks ile birleştirdiğinizde içeriğiniz canlanacak!

Bu öğreticide, güzel, dinamik bir kaydırma efekti oluşturmak için Divi'deki bir bölümde öğelerin (görüntüler ve bir tanıtıcı modül) nasıl yüzdürüleceğini göstereceğiz!

Başlayalım!

Gizlice Bakış

İşte inşa edeceğimiz kayan elemanlar tasarımına hızlı bir bakış.

Youtube Kanalımıza Abone Olun

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.

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.

NOT: Öğeleri düzenlemek için Divi Builder'ı görsel modda kullanmak istiyorsanız, tel kafes görünüm modunu dağıtmanız ve Orta bölümün varsayılan Z İndeksini geri yüklemeniz gerekecektir.

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.
4. Bu eğitimde kullanılan görsellerin aynısını kullanmak için, Candy Shop Düzen Paketinden görselleri indirmek için buraya tıklayabilirsiniz.

Üç Sütunlu Bir Bölüm Oluşturma

Üç sütunlu bir satır oluşturarak işleri yoluna koyalım.

Ardından satır ayarlarını aşağıdaki gibi güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

Sütun 1 için ayarları açın ve aşağıdaki dolguyu ekleyin:

• Dolgu: 10vw Üst, 5vw Alt

Bu, görüntülerin düzenini biraz şaşırtmaya ve sütunumuza biraz yükseklik eklemeye yardımcı olacaktır.

2. sütun için ayarları açın ve aşağıdaki Z İndeksini ekleyin:

• Z İndeksi: 12

Bu, orta sütuna ekleyeceğimiz tanıtım modülünün, bölümdeki diğer tüm içeriklerin üzerinde kalmasını sağlayacaktır.

Statik ve Sabit Konumlu Görsellerin Eklenmesi

Bir sonraki adım, kayan görüntüleri sol ve sağ sütunlarımıza eklemek olacaktır. Görüntülerin dördü statik (varsayılan) konumlarını koruyacak, ancak iki tanesine sabit bir konum vereceğiz. Bu, bazılarının yüzdüğü yanılsamasını vermeye yardımcı olacaktır.

Resim #1 (statik)

Sütun 1'e yeni bir görüntü modülü ekleyin.

Modüle bir resim yükleyin.

Görüntü için aşağıdaki tasarım ayarlarını güncelleyin:

• Genişlik: 200 piksel
• Modül Hizalama: sağ
• Bulanıklık: 2 piksel
• Dönüştür Çevirisi (Y): -58 piksel
• Dönüştür Çevirisi (X): 63 piksel

Resim #2 (Sabit)

Sütun 1'deki birincinin altına ikinci bir görüntü modülü ekleyin.

Modüle yeni bir resim yükleyin.

Resim #2 için tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: 200 piksel
• Pozisyon: Sabit
• Konum: Sol Üst
• Dikey Ofset: %7
• Yatay Ofset: %5

Resim #3 (Statik)

1. sütundaki ikincinin altına üçüncü bir resim ekleyin.

Modüle yeni bir resim yükleyin.

Görüntünün tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: 300 piksel
• Modül Hizalaması: Sağ
• Dönüştür Çevir (Y): 179 piksel
• Dönüştür Çevir (X): 128 piksel

Resim #4 (Statik)

3. sütuna dördüncü bir görüntü modülü ekleyin.

Modüle yeni bir resim yükleyin.

Resim #4 için tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: 200 piksel
• Modül Hizalama: Sol
• Bulanıklık: 4 piksel
• Dönüştür Çevirisi (Y): -9px
• Dönüştür Çevirisi (X): -30 piksel

Bulanıklık efekti, görüntünün daha uzakta olduğu yanılsamasını vermeye yardımcı olur.

Resim #5 (Sabit)

Ardından, sütun 3'te 4 numaralı görüntünün altına yeni bir görüntü modülü ekleyin.

Modüle aşağıdaki gibi yeni bir resim yükleyin:

Resim #5 için tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: 200 piksel
• Pozisyon: Sabit
• Konum: Sağ Alt
• Dikey Ofset: %7
• Yatay Ofset: %5

Resim #6 (Statik)

Altıncı ve son resmi, 3. sütundaki #5 numaralı görselin altına ekleyin.

Modüle yeni bir resim yükleyin.

Resim #6 için tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: 300 piksel
• Modül Hizalama: Sol
• Dönüştür Çevirisi (Y): 62 piksel
• Dönüştür Çevir (X): -122 piksel

Sabit Konumlu Blurb Ekleme

Son içeriği bölümümüze eklemeye hazırız. Bu, aynı zamanda sabit bir konumda olacak ana öne çıkan tanıtım yazısı olacaktır.

Orta sütuna bir tanıtıcı modül ekleyin (sütun 2).

Ardından tanıtım yazısının içeriğini aşağıdaki gibi güncelleyin:

• Başlık: Tatlı Fırsat

Ardından, metin sekmesinin altındaki gövdeye aşağıdaki HTML'yi ekleyin:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

<a href="#">Learn More</a>

Açıklamaya bir resim ekleyin.

Aşağıdaki ayarları güncelleyerek tanıtım yazısı tasarlayın:

• Arka Plan Rengi: #ffffff
• Metin Hizalama: Merkez
• Başlık Yazı Tipi: Konser Bir
• Başlık Metin Rengi: #0a2d61
• Başlık Metin Boyutu: 50px
• Gövde Yazı Tipi: Konser Bir
• Gövde Metni Boyutu: 20px
• Gövde Çizgisi Yüksekliği: 1.8em
• Bağlantı Yazı Tipi Stili: TT
• Bağlantı Metni Rengi: #ff3d97
• Bağlantı Metni Boyutu: 20px
• Bağlantı Harfi Aralığı: 5px
• Genişlik: 400 piksel
• Dolgu: 30 piksel üst, 30 piksel alt, 30 piksel sol, 30 piksel sağ

• Yuvarlatılmış Köşeler: 10px
• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Bulanıklığı Gücü: 80px

Son olarak, tanıtım yazısına merkezi bir konuma sahip sabit bir konum verin.

• Pozisyon: Sabit
• Konum: Orta/Merkez

Sahte Üst ve Alt Bölüm Oluşturma

Geçerli bölümün altına yeni bir normal bölüm ekleyin.

Bölüme bir arka plan rengi verin.

• Arka Plan Rengi: #4DB9FF

Ardından, kayan elemanlarla bölümümüzde kaydırmak için yeterli alana sahip olabilmemiz için biraz yükseklik verin.

• Yükseklik: 100vh

Sahte bölümü çoğaltın ve kopyayı sayfanın en üstüne taşıyın, böylece kayan öğeler içeren ana bölümümüz orta bölüm olur.

Orta Bölüme son dokunuşlar

Tasarımı bitirmek için bölüme paralaks arka planı ekleyerek başka bir hareket katmanı ekleyeceğiz. Ayrıca taşmayı da gizlememiz gerekecek. Ancak asıl sorun, sabit elemanlarımızın hala üst ve alt bölümlerin üstünde görünmesidir. Bunu düzeltmek için bölümümüze -1 Z İndeksi vermemiz gerekiyor.

• Arka Plan Resmi: resim ekle
• Paralaks Etkisini Kullan: EVET
• Paralaks Etkisi: Gerçek Paralaks
• Yatay Taşma: Gizli
• Dikey Taşma: Gizli
• Z İndeksi: -1

NOT : Bölüme Z İndeksi -1 verdiğinizde, masaüstü görünüm modundaki görsel oluşturucu düzgün çalışmayabilir. Bu nedenle, bölümü daha fazla düzenlemek için tel kafes görünüm modunu dağıtmanız gerekebilir.

Statik Öğeler için Ek Animasyon

Dört statik görüntüyü seçmek için çoklu seçimi kullanın ve ardından aşağıdaki animasyon ayarlarıyla öğe ayarlarını güncelleyin:

• Animasyon Stili: Slayt
• Animasyon Yönü: Yukarı
• Animasyon Süresi: 4000ms
• Animasyon Opaklığı Başlatma: %100

Bu, kaydırma sırasında görüntülendiğinde görüntülerin kayan etkisini ekleyecektir.

Son sonuç

İşte nihai sonuç.

Son düşünceler

Divi'de bir öğeyi kaydırmak, ona sabit bir konum vermek için yalnızca birkaç tıklamayı ve ardından tarayıcınızda sabit kalmasını istediğiniz yere yerleştirmek için ofsetleri kullanmayı gerektirir. Ardından, sabit öğelerin yalnızca belirli bir bölümde görünür olmasını sağlamak için Z Dizini'ni kullanabilirsiniz. Temel kurulum tamamlandıktan sonra, bölümü canlandırmak için ek statik öğeler, paralaks arka planı ve animasyon ekleyerek kaydırma efektini iyileştirebilirsiniz. Umarım bu, bir sonraki Divi yapınızla biraz yaratıcı olmanız için size ilham verir.

Bu bölümü tamamen yeni bir düzeye taşımak istiyorsanız, artık Divi'de yerleşik olan yeni Kaydırma Efektlerimize göz atın.

Yorumlarda sizden haber bekliyorum.

Şerefe!