Divi'nin Yapışkan Seçenekleriyle Scroll'da Etkileşimli Bir Liste Nasıl Oluşturulur

Divi'nin yapışkan seçenekleri, oluşturduğunuz ve tasarladığınız sayfalara zahmetsizce etkileşim eklemenize olanak tanır. Yalnızca statik bir liste oluşturmadan birden fazla öğeden bahsetmenin bir yolunu arıyorsanız, bu öğreticiden keyif alacaksınız. Bugün size Divi'nin yapışkan seçeneklerini kullanarak kaydırmada nasıl etkileşimli bir liste oluşturacağınızı gösteriyoruz. İnsanlar bölümü aşağı kaydırdıkça, soldaki listeye farklı öğeler eklenir. Bu, bir genel bakış tutmaya yardımcı olur. Ücretsiz JSON dosyasını da 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!

Eleman Yapısı Oluştur

Yeni Bölüm Ekle

Arka plan rengi

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüme bir arka plan rengi ekleyin.

• Arka Plan Rengi: #f2f2f2

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:

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

Sütun 1 Arka Plan Rengi

Ardından, sütun 1 ayarlarını açın ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #f2f2f2

Sütun 1 Boşluk

Sonraki sütunun boşluk ayarlarını değiştirin.

• Üst Dolgu:
  • tablet: 20 piksel
  • Telefon: 20 piksel
• Alt Dolgu:
  • tablet: 20 piksel
  • Telefon: 20 piksel
• Sol Dolgu: %3
• Sağ Dolgu: %3

Sütun 1 Z İndeksi

Ve gelişmiş sekmesinde sütunun z dizinini artırın.

• Z İndeksi: 12

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

İçerik Ekle

Sütun 1'deki ilk Metin Modülü ile başlayarak modül ekleme zamanı. İstediğiniz içeriği ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Playfair Ekranı
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: İtalik
• Metin Rengi: #bfbfbf
• Yazı Boyutu:
  • Masaüstü: 2vw
  • tablet: 5vw
  • Telefon: 8vw
• Metin Satırı Yüksekliği: 1em

Metin Modülü #2'yi Sütun 2'ye ekleyin

H3 İçeriği Ekle

Seçtiğiniz bazı H3 içeriğiyle sütuna başka bir Metin Modülü ekleyin.

H3 Metin Ayarları

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

• Başlık 3 Yazı Tipi: Playfair Gösterimi
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Rengi: #000000
• Başlık 3 Metin Boyutu:
  • Masaüstü: 3vw
  • Tablet: 10vw
  • Telefon: 12vw

aralık

Daha sonra bazı özel üst ve alt kenar boşlukları ekleyin.

• Üst Marj: 2vh
• Alt Marj: 2vh

Ölçeği Dönüştür

Ardından, bazı özel dönüştürme ölçeği ayarları uygulayın.

• Her ikisi de: %300

Dönüştür Çeviri

Ve aşağıdaki dönüştürme çeviri ayarlarını uygulayarak modül ayarlarını tamamlayın:

• Alt: %30

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

görünürlük

Sütun 1'de ihtiyacımız olan son modül bir Bölücü Modüldür. “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 buna göre hat ayarlarını değiştirin:

• Çizgi Rengi: #000000
• Çizgi Stili: Katı
• Çizgi Konumu: Üst

boyutlandırma

Modülün boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 4px
• Bölücü Yüksekliği: 4px

Sütun 2'ye Görüntü Modülü Ekle

Görüntü Kutusunu Boş Bırak

2. sütunda, ekleyeceğimiz ilk modül bir Görüntü Modülüdür. Görüntü kutusunu boş bırakın.

Arka plan görüntüsü

Bunun yerine bir arka plan resmi kullanın.

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

aralık

Arka plan görüntüsünün görünmesine izin vermek için aralık ayarlarını aşağıdaki gibi değiştireceğiz:

• Üst boşluk:
  • Masaüstü: 15vh
  • Tablet & Telefon: 0vh
• Üst Dolgu: 33vh
• Alt Dolgu: 33vh

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

İçerik Ekle

İhtiyacımız olan sonraki ve son modül, Görüntü Modülünün altındaki bir Metin Modülüdür. Seçtiğiniz bazı açıklama içeriğini ekleyin.

Metin Ayarları

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

• Yazı Tipi: Kabin
• Metin Rengi: #000000
• Yazı Boyutu:
  • Masaüstü: 1.2vw
  • Tablet: 2.3vw
  • Telefon: 3.4vw
• Metin Satırı Yüksekliği: 1,6em

aralık

Modülün boşluk ayarlarını uygun şekilde değiştirerek modül ayarlarını tamamlayın:

• Sol Dolgu:
  • Tablet ve Telefon: %5
• Sağ Dolgu: %5

Yapışkan Efektler Uygula

1. sütunu sabitleyin

Artık tüm öğeler yerine oturduğuna göre, yapışkan ayarları uygulamaya başlayabiliriz. Sütun 1 ayarlarını açın ve gelişmiş sekmesinde aşağıdaki duyarlı yapışkan ayarları kullanın:

• Yapışkan Konum: En Üstte Yapış
• Alt Yapışkan Sınır
  • Masaüstü: Bölüm
  • Tablet ve Telefon: Satır
• Çevreleyen Yapışkan Elemanlardan Ofset:
  • Masaüstü: Evet
  • Tablet ve Telefon: Hayır
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

1. Sütundaki Metin Modülü #1: Yapışkan Ayarlar

Boy uzunluğu

Artık 1. sütun yapışkan hale getirildi, bu sütunun içindeki öğelere bazı yapışkan ayarlar uygulamaya başlayabiliriz. İlk Metin Modülünün yüksekliği ile başlayacağız.

• Yükseklik: 0 piksel
• Yapışkan Yükseklik: Otomatik

opaklık

Opaklığı da değiştiriyoruz.

• Opaklık: %0
• Yapışkan Opaklık: %100

1. Sütundaki Metin Modülü #2: Yapışkan Ayarlar

Ölçeği Dönüştür

Ardından, 1. sütundaki ikinci Metin Modülünü açacağız. Dönüştürme ölçeği değerlerini yapışkan bir durumda “%100”e getirin.

• Yapışkan İkisi: %100

Dönüştür Çeviri

Yapışkan dönüştürme çeviri ayarlarını da değiştirin.

• Yapışkan Alt: %0

Geçiş

Ve gelişmiş sekmesinde geçiş süresini artırarak modül ayarlarını tamamlayın.

• Geçiş: 1000ms

Bölücü Modül: Yapışkan Ayarlar

Maksimum genişlik

Son olarak, Bölücü Modülün maksimum genişliğini de değiştireceğiz.

• Maksimum Genişlik: 0px
• Yapışkan Maksimum Genişlik: 120 piksel

Satırı İki Kez Klonla

İlk satırınız tamamlandığında, iki kez klonlayabilirsiniz.

Tüm İçeriği ve Görselleri Değiştir

Tüm içeriği ve resimleri 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 spesifik olarak, kaydırmada nasıl etkileşimli bir liste oluşturacağınızı gösterdik. İnsanlar bölüm tasarımını aşağı kaydırırken, listenizin farklı öğeleri sol tarafta toplanır. Bu, yapılandırılmış bir genel bakış sağlar ve etkileşimli bir tasarım oluşturmanıza yardımcı olur. Sayfalarınızda paylaşmak istediğiniz herhangi bir liste türü için bu yaklaşımı kullanabilirsiniz! 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.