Divi ile Satır İçi Kaydırma Gösterimleri Oluşturma

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, size DJ Layout Pack'i kullanarak nasıl güzel inline scroll gösteriler oluşturabileceğinizi göstereceğiz. Bu, sayfanıza birden çok kez eklemek zorunda kalmadan web sitenizdeki belirli bir sütun kapsayıcısına dikkat çekmenin harika bir yoludur. Tekniğe, ziyaretçilerin sütun kabına tutunmalarına ve istedikleri zaman bırakmalarına yardımcı olacak havalı bir vurgulama/bırakma efekti ekleyeceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Ön izleme

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

masaüstü

Mobil

Satır İçi Kaydırma Gösterimi Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz satır içi kaydırma 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.

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!

Yeniden Yaratmaya Başlayalım!

DJ Layout Pack'in Ana Sayfasını Kullanarak Yeni Sayfa Oluşturun

Yeni Sayfa Ekle

Bu kullanım örneği öğreticisi için DJ düzenlerinden birini kullanacağız. Yeni bir sayfa oluşturarak, sayfanıza bir başlık vererek ve Visual Builder'a geçerek başlayın.

DJ Ana Sayfasını Yükle

DJ ana sayfa düzenini sayfanıza yükleyerek devam edin.

Sayfadaki Her Bölüme Daha Yüksek Z İndeksi Değeri Ekleyin

Kahraman Bölümüne Daha Yüksek Z İndeksi Ekle

Belirli bir sütunu sabitleyeceğiz ve istediğimiz yerde görünmesine izin vereceğiz. Bunun tersi de doğrudur; görünmesini istemediğimiz her yerde saklamak istiyoruz. Bunu yapmak için, sayfadaki her bölüme (sayfadaki 2. bölüm olan sütunun bulunduğu bölümün yanı sıra) daha yüksek bir z dizin değeri vereceğiz. Kahraman bölümünü açarak başlayın ve görünürlük ayarlarında z indeksini yükseltin.

• Z İndeksi: 2

Z Dizinini Kopyala

Z dizinini ekledikten sonra kopyalayabilirsiniz.

2. Bölüm Hariç Sayfadaki Diğer Bölümlere Yapıştır

Ve bunu, 2. bölüm (satır içi kaydırma gösterimine dönüştüreceğimiz sütunu içeren bölüm) hariç , sayfadaki diğer tüm bölümlere yapıştırın.

2. Bölümü Değiştir

Sütun İçeriğini Ayrı Satırlara Yerleştirin

Satır Sütun Yapısını Değiştir

Satırın sütun yapısından başlayarak ikinci bölümü değiştirmeye başlayalım.

Satırı Çoğalt

Satırı klonlayarak devam edin.

Satırlardaki Modülleri Sil

İlk sıradaki Metin ve Düğme Modüllerini ve ikinci sıradaki Ses Modüllerini çıkarın.

2. Bölümdeki 1. Satırı Değiştirin

Bazı Ses Modüllerini Kaldırın (Daha Küçük Ekran Boyutlarına Sığdırmak İçin)

Sonraki adımlarda, Ses Modüllerini içeren sütunu sabit hale getireceğiz. Şimdi, sütunun daha küçük ekran boyutlarının görüntü alanı yüksekliğine uyduğundan emin olmak için bazı Ses Modüllerini kaldırmamız gerekecek.

Satıra Alt Kenar Boşluğu Ekle

Satır ayarlarını açarak, tasarım sekmesine giderek ve biraz alt dolgu ekleyerek devam edin. Sütunun öğreticide daha sonra kaydırıldığında ortaya çıkmasına izin vermek için bu alana ihtiyacımız olacak.

• Alt Kenar Boşluğu: 700 piksel

Sütun Ayarlarını Aç

Sütunu satır içi kaydırma gösterimine dönüştürmeye başlama zamanı! Sütun ayarlarını açın.

Vurgulu Kutu Gölgesi

Ardından, tasarım sekmesine gidin ve fareyle üzerine gelindiğinde bazı kutu gölge değerlerini değiştirin.

• Kutu Gölge Bulanıklığı Gücü: 150 piksel
• Gölge Rengi: rgba(0,0,0,0.55)

Hover Dönüşüm Ölçeği

Dönüştürme ölçeği değerlerini değiştirerek, fareyle üzerine gelindiğinde sütunun boyutunu da artırın.

• Alt: %110
• Sağ: %110

Varsayılan Ana Eleman

Sütunu sabit hale getirmek için, sütunun ana öğesine birkaç satır CSS kodu ekleyeceğiz.

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

Ana Elemanın üzerine gelin

Sabit konumlu CSS satırını vurgulu ana öğeye de eklediğinizden emin olun. Bu, sütunun titremesini önleyecektir.

position: fixed;

Varsayılan Z İndeksi

Artık normal koşullarda modülün tüm sayfa içeriğinin altında görünmesini istiyoruz. Bunun olmasını sağlamak için sütunun z dizinini değiştireceğiz.

• Z İndeksi: 0

Z Endeksinin üzerine gelin

Ancak fareyle üzerine gelindiğinde, sütunun tüm sayfa içeriğiyle çakışmasını istiyoruz. Birisi sütunu yayınlar yayınlamaz, tüm sayfa içeriğinin arkasındaki yerine geri dönecektir. Üzerine gelindiğinde z dizinini buna göre değiştirin:

• Z İndeksi: 10

2. Bölümdeki 2. Satırı Değiştirin

Sütuna Üst Dolgu Ekle

Estetik amaçlar için, 2. bölümün ikinci satırındaki sütunu açacağız ve bazı özel üst dolgu ekleyeceğiz.

• Üst Dolgu: 80px

Sayfa Boyunca Bölümlere Özel Alt Kenar Boşluğu Ekle

Bölümü Bul

Bölüm Ayarlarını Aç

Artık satır içi kaydırma açıklama sütununu değiştirdiğimize göre, görünmesi için biraz boşluk oluşturmamız gerekiyor. Bunu zaten bulunduğu satır için yaptık (700 piksel alt dolgu), ancak sütunun sayfadaki diğer noktalarda da görünmesine izin vereceğiz. Aşağıdaki bölümün bölüm ayarlarını açın:

Alt Kenar Boşluğu Ekle

Aralık ayarlarına gidin ve biraz alt kenar boşluğu ekleyin. Alt kenar boşluğu eklemek, sayfada düşük z dizini sütununun görünmesine izin verecek boş alan yaratacaktır.

• Alt Kenar Boşluğu: 700 piksel

Bölümü Bul

Bölüm Ayarlarını Aç

Sonraki bölümü açın:

Alt Kenar Boşluğu Ekle

Ve buraya da biraz alt kenar boşluğu ekleyin.

• Alt Kenar Boşluğu: 700 piksel

Fazla Bölüm Dolgusunu Kaldır

2. Bölüm Alt Dolguyu Kaldırın

Şimdi yapmamız gereken tek şey, tasarımımızın satır içi kaydırma gösterimiyle eşleşme şeklini optimize etmek. Sayfadaki ikinci bölümü açın ve alt dolguyu çıkarın.

• Alt: 0 piksel

Bölümü Bul

Bölüm Ayarlarını Aç

Daha sonra aşağıdaki bölüm ayarlarını açın:

Alt Dolguyu Kaldır ve Üst Dolgu Ekle

Biraz üst dolgu ekleyin ve alt dolguyu çıkarın.

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

Bölümü Bul

Bölüm Ayarlarını Aç

Son bölüme geçiyoruz. Bölüm ayarlarını açın.

Üst Dolguyu Kaldır

Üst dolguyu çıkarın ve işiniz bitti!

• Üst Dolgu: 0px

Ö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, Divi ve DJ Layout Pack ile satır içi kaydırmalı gösterimlerin nasıl oluşturulacağını gösterdik. Bu, web sitenize etkileşim eklemenin harika bir yoludur. Bu öğreticinin, kendi sabit satır içi kaydırma gösterimlerinizi de oluşturmanız için size ilham vermesini umuyoruz! 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.