Divi'de Kaydırmada Uzaklaştırma Başlık Geçişi Nasıl Oluşturulur

Uzaklaştırma başlığı kaydırma efekti oluşturmak, kullanıcıları içeriğinizle meşgul etmek için etkileyici bir tasarım öğesi olabilir. Efekt, Apple'ın macOS Catalina sayfasında gördüğünüze benzer. Bu eğitimde, size Divi ile kaydırmada nasıl uzaklaştırma başlık geçişi oluşturacağınızı göstereceğiz. İşin püf noktası, uzaklaştırma efekti oluşturmak için tüm satıra ölçekleme ve dikey hareket kaydırma efektleri eklemektir. Sonuç, kullanıcıları hoş bir şekilde şaşırtan güzel bir geçiştir.

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.

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:

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.

Divi'de Uzaklaştırma Üstbilgisi Efekti Nasıl Oluşturulur

Bölüm Yüksekliği

Bu tasarım için, kaydırma efektinin çalışması için biraz yer açmak için bölümümüze, görünümün yüksekliğinin ötesine uzanan bir yükseklik vermemiz gerekiyor.

Başka bir şey yapmadan önce bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Yükseklik: 150vh (masaüstü), 100vh (tablet), 100vh (telefon)
• Dolgu: 0 piksel üst, 0 piksel, alt

Sıra

Bölüm yüksekliği tamamlandıktan sonra bölüme tek sütunlu bir satır ekleyin.

Satır Arka Plan Resmi

Modül eklemeden önce satır ayarlarını açın ve bir arka plan resmi ekleyin. Resmin en az 1920 piksel genişliğinde olduğundan emin olun (büyük bir monitörün tam ekranına yayılacak kadar büyük).

Satır Boyutu ve Aralığı

Arka plan yerleştirildikten sonra, satırımızın sayfanın tüm genişliğini ve yüksekliğini kapladığından emin olmamız gerekir. Bunu yapmak için satır için aşağıdaki tasarım ayarlarını güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• Yükseklik: 100vh
• Dolgu: 0 piksel üst, 0 piksel alt

Satır Kutusu Gölgesi

Ardından sıraya bir kutu gölgesi verin. Uzaklaştırma efektini oluşturmak için satırı küçülten kaydırma efektini ekleyene kadar bunu görmeyeceğiz.

• Kutu Gölgesi: Ekran Görüntüsüne bakın
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 50px

Başlık Metni için bir Metin Modülü Ekleyin

Ardından, satırın içine yeni bir metin modülü ekleyin.

Metin içeriği

Gövde içeriğini aşağıdaki H2 başlığıyla güncelleyin:

<h2>Your Journey</h2>

Metin Tasarım Ayarları

Ardından metnin tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Başlık 2 Yazı Tipi: Poppins:
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Boyutu: 10vw
• Başlık 2 Çizgi Yüksekliği: 1.3em

Sütun Yüksekliği ve Arka Plan Yerleşimi

Metin modülü yerleştirildikten sonra, sütun ayarlarımızı, satır arka planımız için güzel bir bindirme olacak şekilde özelleştirmemiz gerekiyor. Bunu yapmak için arka plan rengini yarı saydam bir renkle güncellememiz ve sütuna %100 yükseklik vermemiz gerekecek.

Sütun 1 için ayarları açın ve aşağıdakileri güncelleyin:

• Arka plan rengi:

Gelişmiş sekmesinin altında, Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

height: 100%

Ardından, sütuna biraz dolgu ekleyin…

• Dolgu (masaüstü): 35vh üst
• Dolgu (tablet): 40vh üst

Sütun Kaydırma Etkisi

Ardından, kaydırma sırasında sütunu (arka plan rengi ve metniyle birlikte) solduracak bir kaydırma efekti ekleyin. Bunu yapmak için aşağıdakileri güncelleyin:

Fading In ve Out sekmesinin altında…

• Soldurmayı ve Yavaşlamayı Etkinleştir: EVET
• Opaklığı Başlatma: %100 (%0 görünüm alanında)
• Orta Opaklık: %100 (%70 görünüm alanında)
• Bitiş Opaklığı: %0 (%80 görünüm alanında)

Satıra Kaydırma Efektleri Ekle

Artık satıra kaydırma efektleri eklemeye başlayabiliriz.

Dikey Hareket

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Dikey Hareket Kaydırma Efekti (Masaüstü)

• Dikey Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 0 (%5 görünüm alanında)
• Orta Ofset: 4,5 (%50 görünüm alanında)
• Bitiş Ofseti: 4,5 (%100 görünüm alanında)

Dikey Hareket Kaydırma Efekti (Tablet)

• Başlangıç ​​Ofseti: 0 (%30 görünüm alanında)

Hareket tetikleme efektini öğenin altına güncellediğinizden emin olun. Bu, kaydırma efektinin çalışması için anahtardır. Bunu yapmak için aşağıdakileri güncelleyin:

• Hareket Efekti Tetikleyicisi: Elemanın Altı

İçeri ve Dışarı Soluk

Kaydırmada görünümün üst kısmından ayrılmadan hemen önce başlığın solmasını sağlamak için, satır ayarlarını açın ve aşağıdakileri güncelleyin:

Solma ve Kaydırma Efekti

• Soldurmayı ve Yavaşlamayı Etkinleştir: EVET
• Opaklığı Başlatma: %100 (%0 görünüm alanında)
• Orta Opaklık: %100 (%85 görünüm alanında)
• Bitiş Opaklığı: %0 (%100 görünüm alanında)

Yukarı ve Aşağı Ölçekleme

Başlığı "uzaklaştırma" yapmak için kaydırmada %50'ye düşürmemiz gerekir. Bunu yapmak için aşağıdakileri güncelleyin:

masaüstü

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
• Başlangıç ​​Ölçeği: %100 (%5 görünüm alanında)
• Orta Ölçek: %50 (%50 görünüm alanında)
• Bitiş Ölçeği: %50 (%100 görünüm alanında)

Tablet

Tablette aşağıdakileri ayarlayın:

• Başlangıç ​​Ölçeği: %100 (%30 görünüm alanında)
• Orta Ölçek: %40 (%50 görünüm alanında)

Bu, uzaklaştırma başlığı bölümümüzle ilgilenir!

Metnin İkinci Bölümünü Oluşturma

Artık, kullanıcı sayfayı aşağı kaydırdıkça ana başlığın altında görünecek olan ikinci statik içerik bloğu için yeni bir bölüm oluşturabiliriz.

Yeni Bölüm Ekle

Bunu yapmak için önce önceki bölümün altında yeni bir normal bölüm oluşturun.

Tek Sütunlu Satır Ekle

Ardından bölüme tek sütunlu bir satır ekleyin.

Yinelenen Metin Modülü

Metin modülünü yukarıdaki ilk bölümün başlığıyla çoğaltın ve yeni bölüm sütununa yapıştırın. Ardından metin modülü içeriğini aşağıdaki metinle güncelleyin:

<h2>Begins Today...</h2>

Metin Ayarlarını Güncelle

Ardından, metne aşağıdaki gibi birkaç tasarım ayarlaması yapın:

• Başlık 2 Metin Rengi: #333333
• Başlık 2 Metin Boyutu: 5vw

Satır Ayarlarını Güncelle

Metin bittiğinde, satır ayarlarını açın ve genişliği aşağıdaki gibi güncelleyin:

• Genişlik: %100
• Maksimum Genişlik: %100

Bölüm Ayarları

Ardından bölüm ayarlarını açın ve aralığı biraz eşitlemek için biraz dolgu ekleyin.

• Dolgu: 10vw alt

Bu kadar. Şimdi şu ana kadarki sonucu canlı sayfada kontrol edebiliriz.

Ek Başlık Bölümleri Oluşturma

Ek başlık bölümleri oluşturmak için ilk iki bölümü çoğaltın ve aşağıya taşıyın. Bu, katmanlar özelliği veya tel çerçeve görünümü kullanılarak kolayca yapılabilir.

Ardından satır arka plan resmini güncelleyin.

İki metin modülünün içindeki başlık metnini değiştirin.

Ve bu kadar. Artık, uzaklaştırma başlığı efektiyle oluşmaya başlayan eksiksiz bir düzen görmeye başlayabilirsiniz.

Son sonuç

Son düşünceler

Uzaklaştırma başlığı kaydırma efekti oluşturmak oldukça basittir (ve hızlıdır). Ancak tasarım, tüm tarayıcı boyutlarında doğru bir şekilde elde etmek için biraz zor olabilir. Sağlanan indirme, web siteniz için ince ayar yapabileceğiniz çalışan bir modeli keşfetmenize yardımcı olacaktır. Umarım, faydalı ve ilham verici bulursunuz.

Yorumlarda sizden haber bekliyorum.

Şerefe!