Divi'nin Yapışkan Seçenekleriyle Scroll'da Kahraman Bölümünüzü Nasıl Kapatırsınız

Şu anda web sitenizin Divi içindeki kahraman tasarımı üzerinde çalışıyorsanız, kaydırmaya efekt eklemenin bazı ilginç yollarını arıyor olabilirsiniz. Divi'nin yapışkan seçenekleriyle bir çok tasarım olanağı mümkündür. Bugünkü eğitimde, bu olasılıklardan birini vurgulayacağız. Zahmetsiz yapışkan stiller uygularken kaydırmada bölümünüzü nasıl kapatacağınızı adım adım göstereceğiz. Eğitimin ilk bölümünde tasarımı oluşturmaya odaklanacağız ve ikinci bölümde gerekli olan sabit ayarlara geçeceğiz! 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.

1. Tasarım Yapısı Oluşturun

Yeni Bölüm Ekle

Arka plan rengi

Eğitimin ilk bölümünde, tasarımı oluşturmaya odaklanacağız. İkinci bölümde, yapışkan efektleri uygulayacağız. Yeni bir sayfa oluşturun veya mevcut bir sayfayı açın ve ona yeni bir bölüm ekleyin. Bölüm ayarlarını açın ve bir arka plan rengi uygulayın.

• Arka Plan Rengi: rgba(53,44,43,0.17)

aralık

Bölümün tasarım sekmesine gidin ve boşluk değerlerini aşağıdaki gibi değiştirin:

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

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

Modül eklemeden satır ayarlarını açın, tasarım sekmesine geçin ve boyutlandırma ayarlarını buna göre değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik:
  • Masaüstü: %80
  • Tablet & Telefon: %90
• Maksimum Genişlik: 2580 piksel

aralık

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

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

Sütun 1 Ayarları

aralık

Ardından, sütun 1 ayarlarını açın ve aralık ayarlarını aşağıdaki gibi değiştirin:

• Üst Dolgu:
  • Masaüstü: 25vh
  • Tablet & Telefon: 10vh
• Alt Dolgu:
  • Masaüstü: 25vh
  • Tablet & Telefon: 10vh
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sütun 2 Ayarları

Arka plan görüntüsü

Ardından, sütun 2 ayarlarını açın ve seçtiğiniz bir arka plan resmini yükleyin.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez

görünürlük

Bunun daha küçük ekran boyutlarında çalıştığından emin olmak için, tablet ve telefon için gelişmiş sekmesinde ikinci sütunu gizleyeceğiz.

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

H1 İçeriği Ekle

Sütun 1'deki ilk Metin Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bazı H1 içeriğini ekleyin.

H1 Metin Ayarları

Modülün tasarım sekmesine gidin ve H1 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık Yazı Tipi: Kızıl Metin
• Başlık Metni Boyutu:
  • Masaüstü: 6vh
  • tablet: 50 piksel
  • Telefon: 40 piksel
• Yön Çizgisi Yüksekliği: 1.2em

Sütun 1'e Bölücü Modülü Ekle

görünürlük

Ardından, sütun 1'e bir Bölücü Modül ekleyeceğiz. “Bölücüyü Göster” seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Modülün tasarım sekmesine gidin ve hat ayarlarını değiştirin.

• Çizgi Rengi: #35241f

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 5px
• Genişlik: %21
• Yükseklik: 5 piksel

Metin Modülü #2'yi Sütun 1'e ekleyin

Açıklama İçeriği Ekle

Sütun 1'de ihtiyacımız olan sonraki ve son modül başka bir Metin Modülüdür. Seçtiğiniz bazı açıklama içeriğini ekleyin.

Metin Ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Karla
• Metin Boyutu: 18px
• Metin Satırı Yüksekliği: 2.1em

2. Satır Ekle

Sütun Yapısı

Bu efektin çalışması için, aynı bölümün içine ilk satırın altına yeni bir satır eklemeniz önemlidir. Bu satırın bir arka plan rengine ve ilk satırın altına sığabilmesi için yeterli yüksekliğe ve genişliğe ihtiyacı olacaktır. Bu tasarım için aşağıdaki sütun yapısını kullanıyoruz:

Arka plan rengi

Ardından, bir arka plan rengi ekleyeceğiz.

• Arka Plan Rengi: #35241f

boyutlandırma

Boyutlandırma ayarlarını da değiştiriyoruz.

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

aralık

Boşluk ayarları ile birlikte.

• Üst Dolgu:
  • Masaüstü: 30vh
  • Tablet & Telefon: 0vh
• Alt Dolgu: 30vh
• Sol Dolgu: %10
• Sağ Dolgu: %10

Sütun 1'e Görüntü Modülü Ekle

Resim Yükle (Yalnızca Tablet ve Telefon)

Ardından, ilk sütuna bir Görüntü Modülü ekleyeceğiz. Bu modül, daha küçük ekran boyutlarında ilk satırda kullanılan görüntünün yerini alacaktır. Yalnızca tablet ve telefon için bir resim kullanın.

aralık

Modülün tasarım sekmesine gidin ve alt kenar boşluğunu aşağıdaki gibi değiştirin:

• Alt Kenar Boşluğu:
  • Masaüstü: 0 piksel
  • Tablet ve Telefon: 50px

Sütun 1'e Bölücü Modülü Ekle

görünürlük

Ardından, Görüntü Modülünün altına bir Bölücü Modül ekleyin ve “Bölücüyü Göster” seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Modülün tasarım sekmesine gidin ve çizgi rengini değiştirin.

• Çizgi Rengi: #ffffff

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 5px
• Yükseklik: 5 piksel

Sütun 1'e Metin Modülü Ekle

H2 İçeriği Ekle

Ardından, seçtiğiniz bazı H2 içeriğine sahip bir Metin Modülü ekleyin.

H2 Metin Ayarları

H2 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık 2 Yazı Tipi: Kızıl Metin
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu:
  • Masaüstü: 6vh
  • tablet: 50 piksel
  • Telefon: 40 piksel

Sütun 2'ye Metin Modülü Ekle

Açıklama İçeriği Ekle

2. sütunda, ihtiyacımız olan tek modül, bazı açıklama içeriğine sahip bir Metin Modülüdür.

Metin Ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Karla
• Metin Yazı Tipi Ağırlığı: Ultra Hafif
• Yazı Boyutu:
  • Masaüstü: 30 piksel
  • Tablet ve Telefon: 18px
• Metin Satırı Yüksekliği: 2.2em
• Metin Rengi: Açık

2. Yapışkan Efektler Uygulayın

Satır Z Dizin Değerlerini Değiştir

1. sıra

Tasarımımızın temelini oluşturduğumuza göre, kahraman kapağı efektini oluşturmak için gereken bazı ek adımlara odaklanabiliriz. İlk satırın ayarlarını açarak başlayın ve gelişmiş sekmesinde z dizinini değiştirin.

• Z İndeksi: 1

2. sıra

İkinci satırın z dizinini de değiştirin. Bu değerin ilk satırın değerinden yüksek olması gerekir.

• Z İndeksi: 2

1. Sıra Yapışkanı Çevir

Ardından, ilk satırın ayarlarını tekrar açın ve gelişmiş sekmeye yapışkan bir efekt uygulayın. Alt yapışkan sınırın bölüm olarak ayarlandığından emin olmanız önemlidir.

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

Sütun 1 Yapışkan Ayarlar

Yapışkan Arka Plan Rengi

Satır yapışkan hale getirildikten sonra, satırın alt öğelerine bazı yapışkan stiller uygulamaya başlayabiliriz. Sütun 1 ayarlarını açarak başlayın ve aşağıdaki yapışkan arka plan rengini uygulayın:

• Yapışkan Arka Plan Rengi: #edeaea

Yapışkan Dönüştürme Eğriliği

Ardından tasarım sekmesine gidin ve aşağıdaki yapışkan eğrilik değerini uygulayın:

• Yapışkan Alt Eğim: -4deg

Sütun 2 Yapışkan Ayarlar

Yapışkan Dönüştürme Eğriliği

2. sütunda, dönüştürme ayarlarında aynı yapışkan eğrilik değerini kullanacağız.

• Yapışkan Alt Eğim: -4deg

Metin Modülü Yapışkan Dönüştürme Eğriliği (x2)

Ve yapışkan durumda sütun 1'deki her iki Metin Modülü için alt eğriliği 4 dereceye değiştirerek tasarımı ve efekti tamamlayacağız. Bu, negatif yapışkan sütun eğrilik değerini eşitleyecektir.

• Yapışkan Alt Eğim: 4 derece

Ö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 eğitimde, Divi'de kahraman tasarımınızla nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, kaydırmada kahraman bölümünüzü nasıl kapatacağınızı ve aynı anda ona yapışkan stilleri nasıl uygulayacağınızı gösterdik! Eğitimin ilk bölümünde tasarımı oluşturmaya odaklandık ve ikinci bölümde efekti elde etmek için gereken yapışkan ayarları uyguladık. 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.