Divi'nin Bölüm Bölücülerinin Altındaki Güzel Alt Bilgi Kaydırma Gösterimleri Nasıl Oluşturulur

Tüm tasarım trendleri boyunca, altbilgiler temel olmaya devam ediyor. İnsanlar onlara çok alıştı, bu da onları son derece kullanıcı dostu yapıyor. Ziyaretçilerin web sitenizdeki konaklamalarını düzenlemelerine ve tam olarak aradıkları sayfaya gitmelerine yardımcı olurlar. Divi ile tek bir bölümde her türlü altbilgiyi kolayca oluşturabilirsiniz.

Şimdi, altbilginize ekstra boyut ve etkileşim kazandırmak istiyorsanız, bu gönderiyi seveceksiniz. Bir altbilgi kaydırma gösterimi oluşturmak için bir altbilgi bölümünü bölüm ayırıcılarla yaratıcı bir şekilde birleştireceğiz.

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!

Youtube Kanalımıza Abone Olun

1. Yeni Boş Sayfa Oluşturun ve Tercih Edilen Düzeni Yükleyin

Yeni Boş Sayfa Ekle

Yapmanız gereken ilk şey, yeni bir boş sayfa oluşturmaktır.

SaaS Şirket Yerleşim Paketi Açılış Sayfasını Yükleyin

Visual Builder'a geçin ve SaaS Company Layout Pack'in açılış sayfasını yükleyin. Bu özel düzeni kullanmamıza rağmen, tekniğin üzerinde çalıştığınız her türlü sayfada çalışmasını sağlayabilirsiniz.

2. Her Bölüme Z Dizini Ekleyin ve Bölüm Animasyonlarını Kaldırın

Kahraman Bölümüne Z Dizini Ekle

Sayfadaki kahraman bölümünün z dizinini değiştirerek devam edin.

• Z İndeksi: 3

Z İndeksini Kopyalayın ve Sayfadaki Diğer Tüm Bölümlere Yapıştırın

Z dizinini kopyalayın ve sayfadaki diğer tüm bölümlere yapıştırın. Bölümlerin her biri için z indeksini artırmak, öğreticinin çalışması için çok önemli bir adımdır. Bu, bölümlerin her birinin, gönderiye daha sonra ekleyeceğimiz altbilgi bölümünün üstünde görünmesine izin verecektir.

Kahraman Bölümü Animasyonunu Kaldır

Altbilginin sayfanın en altına kadar gizli kalmasını sağlamak için tüm bölüm animasyonlarını da kaldıracağız. Kahraman bölümünü açın ve animasyonu kaldırın.

• Animasyon Stili: Yok

Animasyonu Sayfadaki Tüm Bölümlere Genişletin

Animasyon stillerini sayfa boyunca tüm bölümlere genişletin.

3. Sayfadaki Son Bölümü Değiştir

Arka Plan Rengini Değiştir

Sayfadaki son bölüme geçin ve arka plan rengini değiştirin.

• Arka Plan Rengi: #f2f2f2

4. Normal Bölüm #1'i Sayfanın Altına Ekleyin

Bölüm Ayarları

Arka plan rengi

Bu gönderinin önizlemesinde fark edebileceğiniz gibi, altbilgi bir bölüm ayırıcının altında görünecektir. Sayfamızın alt kısmında bu bölüm ayırıcıya yeni bir bölüm ayıracağız. Bölüm ayarlarını açın ve tamamen şeffaf bir arka plan rengi kullanın. Bu, konumu altta olsa bile altbilginin bölüm kabının içinden görünmesini sağlar.

• Arka Plan Rengi: rgba(0,0,0,0)

Üst Bölücü

Bölümün tasarım sekmesine gidin ve istediğiniz bir üst ayırıcıyı ekleyin.

• Bölücü Stili: Listede Bul
• Bölücü Yüksekliği: 250px (Masaüstü), 150px (Tablet), 100px (Telefon)
• Bölücü Yatay Tekrar: 2x

Z İndeksi

Bu yeni bölümün de artırılmış bir z indeksine ihtiyacı var.

• Z İndeksi: 3

5. Normal Bölüm #2'yi Sayfanın Altına Ekleyin

Bölüm Ayarları

Arka plan rengi

Altbilgi bölümünü oluşturma zamanı! Sayfanın altına yeni bir normal bölüm daha ekleyin ve istediğiniz bir arka plan rengini seçin.

• Arka Plan Rengi: #202332

boyutlandırma

Tasarım sekmesine gidin ve genişliğin '%100' olduğundan emin olun.

• Genişlik: %100

aralık

Ayrıca bölümün üst dolgusunu da artırmamız gerekecek.

• Üst Dolgu: 500px

Z İndeksi

Bu bölüme atadığımız z dizini, sayfadaki diğer bölümlerden daha düşüktür. Bu, sayfanın en altına gelene kadar bölümü gizlememize yardımcı olacaktır.

• Z İndeksi: 2

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

Satır ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

Sütun Aralığı

Sonraki sütun 1 ayarlarını açın ve biraz sol dolgu ekleyin.

• Sol Dolgu: 20px

Sütun Sağ Kenarlık

Sütuna da bir sağ kenarlık ekleyin.

• Sağ Kenar Genişliği: 1px
• Sağ Kenar Rengi: #515151

Sütun Stillerini Kopyala Yapıştır

Stilleri genişleterek veya kopyala-yapıştır seçeneğini kullanarak değişiklikleri tüm sütunlara uygulayın.

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

Fotoğraf yükleniyor

Modül eklemeye başlama zamanı! İlk sütuna yeni bir Resim Modülü ekleyin ve logonuzu yükleyin.

boyutlandırma

Tasarım sekmesine geçin ve farklı ekran boyutlarının genişliğini değiştirin.

• Genişlik: %35 (Masaüstü), %30 (Tablet), %25 (Telefon)
• Modül Hizalama: Sol

aralık

Biraz alt kenar boşluğu da ekleyin.

• Resmin Altındaki Boşluğu Göster: Evet
• Alt Kenar Boşluğu: 50px

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

İçerik Ekle

İkinci sütuna geç! Seçtiğiniz bazı içeriklerle ilk Metin Modülünü ekleyin.

Metin Ayarları

Metin ayarlarını değiştirin.

• Metin Yazı Tipi: Nunito Sans
• Metin Yazı Tipi Ağırlığı: Yarı Kalın
• Metin Rengi: #ffffff
• Metin Boyutu: 19px

aralık

Ve farklı ekran boyutlarına bazı özel üst ve alt kenar boşlukları ekleyin.

• Üst Kenar Boşluğu: 15px (Masaüstü ve Tablet), 10px (Telefon)
• Alt Kenar Boşluğu: 15px (Masaüstü ve Tablet), 10px (Telefon)

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

İçerik Ekle

İkinci sütuna ikinci bir Metin Modülü ekleyin ve istediğiniz içeriği girin.

Link ekle

Altbilgi öğesiyle eşleşen bir bağlantı ekleyin.

• Modül Bağlantı URL'si: #

Metin Ayarları

Sonraki metin ayarlarını değiştirin.

• Metin Yazı Tipi: Nunito Sans
• Metin Rengi: #dbdbdb
• Metin Boyutu: 17px

aralık

Ve farklı ekran boyutlarına bazı özel üst ve alt dolgu ekleyin.

• Üst Kenar Boşluğu: 15px (Masaüstü ve Tablet), 10px (Telefon)
• Alt Kenar Boşluğu: 15px (Masaüstü ve Tablet), 10px (Telefon)

Metin Modülü #2'yi Gerektiği Kadar Kez Klonlayın

2. sütundaki ikinci Metin Modülünü gerektiği kadar klonlayın.

İçeriği Değiştir

İçeriği değiştirdiğinizden emin olun.

Bağlantıları Değiştir

Bağlantılarla birlikte.

• Modül Bağlantı URL'si: #

2. Sütundaki Modülleri Klonla ve Kalan Sütunlara Yerleştir

İkinci sütunu tamamladıktan sonra, her iki modülü de gerektiği kadar klonlayabilir ve kopyaları satırın kalan iki sütununa yerleştirebilirsiniz.

İçeriği Değiştir

Her kopyanın içeriğini değiştirin.

Bağlantıları Değiştir

Bağlantı ile birlikte.

• Modül Bağlantı URL'si: #

6. Bölüm 2'yi Sayfanın Altına Sabitleyin

Özel CSS Ekle

Şimdi, kaydırma gösterimini oluşturmak için, bölümün ana öğesine iki satır CSS kodu ekleyerek altbilgi bölümünün sayfamızın altına yapışmasını sağlayacağız.

position: fixed;
bottom: 0;

7. Ortaya Çıkarma Efekti Oluşturmak için Bölüm #1'e Alt Kenar Boşluğu Ekleyin

Farklı Ekran Boyutlarına Alt Kenar Boşluğu Ekle

Ayrıca sayfamızın alt kısmında, altbilginin görünmesine izin verecek bir alana ihtiyacımız olacak. Bölüm ayırıcıyı içeren bölümü açın ve farklı ekran boyutlarına biraz alt kenar boşluğu ekleyin ve işiniz bitti!

• Alt Kenar Boşluğu: 400 piksel (Masaüstü), 700 piksel (Tablet), 800 piksel (Telefon)

Ö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, benzersiz bir efekt oluşturmak için bölüm ayırıcıların altında güzel altbilgi kaydırma gösterimlerinin nasıl oluşturulacağını gösterdik. Bu, herhangi bir alt bilgiyi etkileşimli hale getirmenin ve alt bilgide listelenen öğelere dikkat çekmenin harika bir yoludur. Umarız bu öğretici, kendi bölüm ayırıcı altbilginizi ortaya çıkarmanız için size ilham verir! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.

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.