Divi'nin Yapışkan Seçenekleriyle Kaydırmada Satırlar Nasıl Yığınlanır

Divi'nin yapışkan seçenekleri çıktığından beri, web sitenizin derlemelerinde, özellikle de başlıklarda farklı özellikleri nasıl kullanacağınızı gösterdik. Ancak, insanların web sitenizde sahip olduğu kullanıcı deneyimini geliştirmek ve web sitenizi parlak hale getirmek için yapışkan seçenekleri kullanmanın birçok yolu vardır. Örneğin bugünün öğreticisinde, Divi'nin yapışkan seçenekleriyle kaydırmada satırları nasıl yığacağınızı göstereceğiz. Bir satır, görünüm alanınızın üst kısmına dokunur dokunmaz, bir sonraki satırın altına inmeye başlar ve bu da güzel görünen bir yığın efekti verir. Tasarımı sıfırdan yeniden oluşturacağız ve bölümün 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

Satır İstifleme Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz sıra istifleme düzenine 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. İlk Satır Konseptini Oluşturun

Yeni Bölüm Ekle

aralık

Bu öğreticinin ilk bölümünde, ilk sıramızın temelini oluşturmaya başlayacağız. İlk satırdaki öğeleri şekillendirmeyi bitirdikten sonra, satır yığın efektini oluşturmak için onu tamamen yeniden kullanabiliriz. Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyin. Bölüm ayarlarını açın ve farklı ekran boyutlarına bazı özel dolgu değerleri uygulayın.

• Üst Dolgu:
  • Masaüstü: 100 piksel
  • Tablet: 40 piksel
  • Telefon: 25 piksel
• Alt Dolgu:
  • Masaüstü: 100 piksel
  • Tablet: 40 piksel
  • Telefon: 25 piksel

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 herhangi bir modül eklemeden satır ayarlarını açın ve aşağıdaki boyutlandırma ayarlarını uygulayın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %90
• Maksimum Genişlik: 2580 piksel

aralık

Ardından, tüm varsayılan üst ve alt dolguyu kaldırın.

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

Sütun 1 Ayarları

Arka plan rengi

Ardından, sütun 1 ayarlarını açın ve seçtiğiniz bir arka plan rengini uygulayın.

• Arka Plan Rengi: #2b343b

Arka plan görüntüsü

Bir arka plan resmi de kullanın. Bu eğitim boyunca görüntülenenleri kullanmak istiyorsanız, eğitimin başındaki sıkıştırılmış klasörü indirin ve arka plan resimlerini medya kitaplığınıza yükleyin.

• Arka Plan Resmi Boyutu: Sığdır

aralık

Sütunun tasarım sekmesine gidin ve aşağıdaki dolgu değerlerini farklı ekran boyutlarına uygulayın:

• Üst Dolgu:
  • Masaüstü: %25
  • Tablet: %40
  • Telefon: %50
• Alt Dolgu:
  • Masaüstü: %25
  • Tablet: %40
  • Telefon: %50
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sütun 2 Ayarları

Arka plan rengi

Ardından, ikinci sütunu açın ve orada da bir arka plan rengi kullanın.

• Arka Plan Rengi: #394751

aralık

Bazı özel dolgu değerleriyle birlikte.

• Üst Dolgu: %13
• Alt Dolgu: %13
• Sol Dolgu: %8
• Sağ Dolgu: %8

Kutu Gölge

Ve bir kutu gölgesi.

• Kutu Gölge Dikey Konumu: 20px
• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.14)

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

H2 İçeriği Ekle

Sütun 1'deki Metin Modülü ile başlayarak modül ekleme zamanı. İçerik kutusuna seçtiğiniz bazı H2 içeriğini yerleştirin.

H2 Metin Ayarları

Modülün tasarım sekmesine geçin ve H2 metin ayarlarını buna göre biçimlendirin:

• Başlık 2 Yazı Tipi: Alata
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu:
  • Masaüstü: 200 piksel
  • Tablet: 150 piksel
  • Telefon: 100 piksel
• Başlık 2 Harf Aralığı: -1px

Konum

Modülü gelişmiş sekmesinde de yeniden konumlandırın.

• Pozisyon: Mutlak
• Konum: Sol Üst
• Dikey Ofset: %2
• Yatay Ofset: %2

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

Kopya Ekle

Sütun 1'de ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Modülün tasarım sekmesine gidin ve düğmeyi buna göre biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #83a5bf
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 1 piksel
• Düğme Yazı Tipi: Alata

aralık

Daha sonra bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Konum

Ve modülü gelişmiş sekmesinde yeniden konumlandırın.

• Pozisyon: Mutlak
• Konum: Sağ Alt

Metin Modülü #1'i Sütun 2'ye ekleyin

H3 İçeriği Ekle

İkinci sütuna geçin. Seçtiğiniz bazı H3 içeriğiyle ilk Metin Modülünü ekleyin.

H3 Metin Ayarları

Modülün tasarım sekmesine gidin ve aşağıdaki H3 metin stillerini uygulayın:

• Başlık 3 Yazı Tipi: Alata
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu: 40px

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

İlk Metin Modülünün altına 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 Ayarları

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

• Çizgi Rengi: #f3f0ee

boyutlandırma

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

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

aralık

Ve boşluk ayarlarına biraz alt kenar boşluğu ekleyerek modül ayarlarını tamamlayın.

• Alt Marj: %20

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

İçerik Ekle

Bölücü Modülünün hemen altına başka bir Metin Modülü ekleyin. Seçtiğiniz bazı açıklama içeriğini girin.

Metin Ayarları

Modülün metnini buna göre biçimlendirin:

• Metin Yazı Tipi: Montserrat
• Metin Rengi: #ffffff
• Yazı Boyutu:
  • Masaüstü: 15 piksel
  • Tablet ve Telefon: 14px
• Metin Satır Yüksekliği: 2em

2. Satırı İstifleme Öğesine Dönüştürün

Satır Ayarları

Z İndeksi

Artık ilk sıramızı yerleştirdiğimize göre, sıra yapışkan sıra istifleme ayarlarını uygulamaya geldi. Yığınlama efektinin otomatik olarak gerçekleşmesi için satırımızı yeniden kullanmak üzere klonlamadan önce bu ayarları uygulayacağız. Satır ayarlarını açın, gelişmiş sekmeye gidin ve az dizini 1'i uygulayın. Bu z dizini, sonraki her satırın bir önceki satırın üstüne yerleştirilmesini sağlamamıza yardımcı olacaktır.

• Z İndeksi: 1

Yapışkan Ayarlar

Ardından kaydırma efektleri ayarlarına gideceğiz ve aşağıdaki yapışkan ayarları uygulayacağız:

• Yapışkan Konum:
  • Masaüstü: En Üstte Kal
  • Tablet ve Telefon: Yapışma
• Alt Yapışkan Limit: Bölüm
• Çevredeki Yapışkan Elemanlardan Ofset: Hayır

3. İstifleme Satırını Aynı Bölümde Yeniden Kullanın

Klon Satırı x3

Artık yapışkan seçeneklerimiz uygulandığına göre, tüm satırı istediğimiz kadar tekrar kullanabiliriz.

Genel Değişiklikler

Tüm Kopyayı Değiştir

Her kopyada kopyayı değiştirdiğinizden emin olun.

Sütun 1 Arka Plan Renklerini ve Görüntülerini Değiştir

Sütun 1 ile birlikte arka plan renkleri ve resimleri.

• Kopya 1: #edc1b6
• 2. kopya: #efe7e2
• Kopya 3: #f7f6f4

Sütun 2 Arka Plan Renklerini Değiştir

Yinelenen her satırın ikinci sütunu için de farklı renkler kullanıyoruz.

• Kopya 1: #ffd1c1
• 2. kopya: #fff8f2
• Kopya 3: #fffaf7

Düğme Arka Plan Renklerini Değiştir

Ardından, yinelenen her satırdaki düğme arka plan renklerini değiştireceğiz.

• Kopya 1: #c18a7a
• 2. kopya: #bab5b2
• Kopya 3: #c98f7d

Açık Arka Plan Renklerine Sahip Satırlarda Yapılan Değişiklikler

Metin Renklerini Değiştir

Son olarak, satırlardaki her Metin Modülü için metin rengini daha açık bir arka plan rengiyle değiştireceğiz. Bu kadar!

• Metin Rengi: #2b343b

Ö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 gönderide, sayfa tasarımınızda Divi'nin yapışkan seçenekleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, çekici bir tasarım ve kullanıcı deneyimi oluşturmak için satırları nasıl yığacağınızı gösterdik. Sıfırdan güzel bir tasarım örneği oluşturduk ve siz de JSON dosyasını ü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.