Divi'nin Yapışkan Seçenekleriyle Paralaks Kopyalama Geçişleri Nasıl Oluşturulur

Sayfa tasarımlarınızı renklendirmek için yaratıcı yollar ararken paralaks efektleri işinize yarayabilir. Bu ekstra etkileşimi, fazla istilacı olmadan kaydırmaya getiriyorlar. Bu paralaks efektini sayfanızdaki birden çok bölüme genişletmenin bir yolunu arıyorsanız, bu eğiticiye bayılacaksınız. Bugün size Divi'nin yapışkan seçenekleriyle nasıl paralaks kopya geçişleri oluşturacağınızı göstereceğiz. Ziyaretçiler belirli bir bölümü geçer geçmez, kopya paralaks arka plan görüntüsüyle aşağı doğru kayar ve bu gerçekten temiz bir etki sağlar. Sıradaki bir sonraki bölüme ulaşılır ulaşılmaz, kopya başka bir başlıkla değiştirilir. Aradığımız sonuç tüm ekran boyutlarında harika görünüyor ve JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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!

https://youtu.be/uZCD0__Apjk

Youtube Kanalımıza Abone Olun

1. Eleman Yapısını Oluşturun

Yeni Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bu efekt, özellikle oluşturmak üzere olduğumuz düzenin üstünde ve altında içeriğiniz varsa iyi çalışır.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %95
• Maksimum Genişlik: %100

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütun Arka Plan Resmi

Artık genel satır ayarlarını değiştirdiğimize göre, satırımızın içindeki sütuna da bazı özel ayarlar uygulayacağız. Sütun ayarlarını açarak başlayın.

Bir arka plan resmi yükleyin ve üzerinde bir paralaks efekti etkinleştirin.

• Paralaks Etkisini Kullan: Evet
• Paralaks Yöntemi: CSS

Sütun Aralığı

Ardından, tasarım sekmesine gidin ve bazı özel alt dolgu uygulayın.

• Alt Dolgu: 50vh

Metin Modülü #1'i Sütun 1'e ekleyin

H2 İçeriği Ekle

Seçtiğiniz bazı H2 içeriğini içeren bir Metin Modülü ile başlayarak modül ekleme zamanı.

H2 Metin Ayarları

Modülün tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Yazı Tipi Stili: Büyük Harf
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu:
  • Masaüstü: 9vw
  • Tablet: 14vw
  • Telefon: 15vw

Filtreler

Filtre ayarlarında da bir karışım modunu etkinleştiriyoruz.

• Karışım Modu: Yer Paylaşımı

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

Bu sütunda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Link ekle

Ardından, bir bağlantı ekleyin.

Düğme Ayarları

Ardından modülün tasarım sekmesine geçin ve düğme ayarlarını buna göre değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu:
  • Masaüstü: 2vw
  • Tablet & Telefon: 7vw
• Düğme Metin Rengi: #ffffff
• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 0.06vw

• Düğme Yazı Tipi: Karla
• Düğme Simgesini Göster: Evet
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

aralık

Bazı özel üst ve alt dolguları da ekleyin.

• Üst Dolgu: %8
• Alt Dolgu: %8

Konum

Modülü sütunun sağ alt köşesinde yeniden konumlandırarak modül ayarlarını tamamlayın.

• Pozisyon: Mutlak
• Konum: Sağ Alt

2. Etki için Gerekli Adımlar

Metin Modülünü Yapıştırın

Artık gerekli tüm unsurlarla tasarımımızın temelini oluşturduğumuza göre, paralaks kopya geçişini etkinleştirmenin zamanı geldi. Bunu yapmak için Divi'nin Metin Modülündeki yerleşik yapışkan seçeneklerini kullanacağız. Modülün ayarlarını açın, gelişmiş sekmesine gidin ve aşağıdaki yapışkan ayarları uygulayın:

• Yapışkan Konum: En Üstte Yapış
• Yapışkan Üst Ofset: 150 piksel
• Alt Yapışkan Limit: Bölüm
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

Metin Modülü Aralığını Değiştir

Varsayılan

Artık bu modülde yapışkan seçenekleri etkinleştirdiğimize göre, yapışkan stiller uygulayabiliriz. Varsayılan olarak, modül sütunun kendisinin üzerine yerleştirilecektir. Ve modülün beyaz metin rengi nedeniyle, bölümün arka plan rengiyle karışacak ve orada hiç metin yokmuş gibi görünmesini sağlayacaktır. Bu konumlandırmayı oluşturmak için farklı ekran boyutlarında bir miktar negatif üst kenar boşluğu kullanacağız.

• Üst boşluk:
  • Masaüstü: -10vw
  • Tablet: -14vw
  • Telefon: -15vw

Yapışkan

Metin Modülü yapışkan hale getirildikten sonra tekrar görüntüye gelmesini istiyoruz. Bunun olmasını sağlamak için, bu üst kenar boşluğunu yapışkan bir durumda "0vh" değerine geri getireceğiz.

• Yapışkan Üst Kenar Boşluğu: 0vh

Bölüm Aralığı

Ayrıca, arka planın ve Metin Modülünün renkli olarak birleşebilmesi için bölümümüzün üstünde ve altında biraz boşluğa ihtiyacımız olacak. Bunu yapmak için, bölüm ayarlarını tekrar açacağız ve bazı özel üst ve alt dolgular uygulayacağız.

• Üst Dolgu: 10vh
• Alt Dolgu: 10vh

Tüm Bölümü İstediğiniz Kadar Kez Klonlayın

Bölüm tasarımını tamamladıktan sonra, istediğiniz kadar klonlayabilirsiniz.

İçeriği ve Bağlantıları Değiştir

Yinelenen bölümlerin içindeki her modülün içeriğini ve bağlantılarını değiştirdiğinizden emin olun ve işiniz bitti!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu yazıda, Divi'nin yapışkan seçenekleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha doğrusu, paralaks efektini sayfanızdaki birden çok bölüme genişletmenize olanak tanıyan paralaks kopya geçişlerini nasıl oluşturacağınızı gösterdik. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.