Divi's Scroll Efektleriyle Hazırlanmış ÜCRETSİZ Yatay Kendinden Kaydırma Listesini İndirin

Divi'nin kaydırma efektleri, oluşturduğunuz web sitelerine tonlarca yeni tasarım olanağı sunar. Her yeni özellikle birlikte, sayfalarınızı diğerlerinden farklı kılmak için kullanabileceğiniz harika Divi tekniklerini paylaşmaya çalışıyoruz. Bu öğretici farklı değil, bugün size yatay kendi kendine kaydırma listesinin nasıl oluşturulacağını göstereceğiz. Ziyaretçiler sayfanızı dikey olarak aşağı kaydırdıkça, yatay öğeler yatay olarak kayar. Bu, ayrı bir yatay kaydırma çubuğuna olan ihtiyacı ortadan kaldırır ve ziyaretçilerin sahip olduğu genel kullanıcı deneyimini geliştirir. Ayrıca, tüm sayfanızı ele geçirmeden toplu içerik paylaşmaya odaklanmanıza yardımcı olur. 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

Yatay Kendinden Kaydırılan Liste Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz yatay kendi kendine kaydırma listesi 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.

Yeniden Yaratmaya Başlayalım!

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üm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #d0d5db

taşmalar

Bölüm taşmalarını da gizleyin.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

Arka plan görüntüsü

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve bu öğreticinin başında paylaşılan indirme klasöründe bulabileceğiniz arka plan resmini yükleyin.

boyutlandırma

Satırın tasarım sekmesine gidin ve sonraki boyutlandırma ayarlarını değiştirin.

• Genişlik: %90 (Masaüstü), %100 (Tablet ve Telefon)
• Maksimum Genişlik: 1580 piksel

aralık

Boşluk ayarlarını da değiştirin.

• Alt Kenar Boşluğu: 200px (Masaüstü), 50px (Tablet ve Telefon)
• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

Seçtiğiniz bazı H2 içeriğini içeren bir Metin Modülü ile başlayarak modül ekleme zamanı.

H2 Metin Ayarları

Modülün H2 metin ayarlarını uygun şekilde değiştirin:

• Başlık 2 Yazı Tipi: Raleway
• Başlık 2 Yazı Ağırlığı: Yarı Kalın
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #d0d5db
• Başlık 2 Metin Boyutu: 70px (Masaüstü), 50px (Tablet), 40px (Telefon)

Sütuna Ayırıcı Modül Ekle

görünürlük

Ardından, 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

Daha sonra modülün çizgi rengini değiştirin.

• Çizgi Rengi: #d7dce2

boyutlandırma

Boyutlandırma ayarlarıyla birlikte.

• Bölücü Ağırlığı: 20px
• Genişlik: %11
• Modül Hizalaması: Merkez
• Yükseklik: 20 piksel

Sınır

Biraz sınır yarıçapı ekleyerek modül ayarlarını tamamlayın.

• Kenarlık: 20px (Tüm Köşeler)

2. Satır Ekle

Sütun Yapısı

Bir sonraki satıra. Aşağıdaki sütun yapısını kullanın:

aralık

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve farklı ekran boyutlarında sol ve sağ dolgu değerlerini değiştirin.

• Sol Dolgu: %0 (Masaüstü), %5 (Tablet ve Telefon)
• Sağ Dolgu: %0 (Masaüstü), %5 (Tablet ve Telefon)

Sütun Ayarları

Arka plan rengi

Ardından, sütun ayarlarına gidin ve bir arka plan rengi kullanın.

• Arka Plan Rengi: #d0d5db

aralık

Sütun doldurma değerlerini farklı ekran boyutlarında da değiştirin.

• Üst Dolgu: %3 (Masaüstü), %20 (Tablet), %30 (Telefon)
• Alt Dolgu: %2 (Masaüstü), %15 (Tablet), %20 (Telefon)
• Sol Dolgu: %2 (Masaüstü), %10 (Tablet ve Telefon)
• Sağ Dolgu: %2 (Masaüstü), %10 (Tablet ve Telefon)

Sınır

Ardından, kenarlık ayarlarına gidin ve sütun kabına bir miktar kenarlık yarıçapı ekleyin.

• Tüm Köşeler: 30 piksel

Ana Eleman CSS

Bazı duyarlı CSS kodları ekleyerek sütun ayarlarını tamamlayın. İki farklı kutu gölgesinin birleştirildiği neumorfizm tasarım stilini elde etmek için kutu gölgesi için CSS kullanıyoruz. Bununla birlikte, tasarımın genel stilini değiştirmek istiyorsanız, bu kutu gölgesini Divi tarafından oluşturulmuş bir kutu gölgesiyle değiştirmekten çekinmeyin. Ayrıca, daha küçük ekran boyutlarında sütunların birbirinin altında görünmesini sağlıyoruz.

Masaüstü:

box-shadow: #A2B1C6 9px 9px 30px,#ffffff -5px -0px 40px;

Tablet ve Telefon:

box-shadow: #A2B1C6 9px 9px 30px,#ffffff -5px -0px 40px;
width: 100% !important;
margin: 100px 0px 100px 0px !important;

taşmalar

Taşmaları görünür olarak ayarlayarak sütun ayarlarını tamamlayın. Bu, bu gönderinin önizlemesinde fark edebildiğiniz çakışmaları oluşturmamıza olanak tanır.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Sütuna Resim Modülü Ekle

Fotoğraf yükleniyor

Bir Görüntü Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bir resmi yükleyin.

hizalama

Modülün tasarım sekmesine gidin ve görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

aralık

Negatif üst kenar boşluğu da ekleyin.

• Üst Marj: -%10

Filtreler

Ardından, filtre ayarlarına gidin ve tüm doygunluğu kaldırın. Bazı ek kontrastlar da ekliyoruz.

• Doygunluk: %0
• Kontrast: %200

Konum

Tüm modülü yeniden konumlandırarak modül ayarlarını tamamlayın.

• Pozisyon: Mutlak
• Yer: Üst Merkez

Sütuna Metin Modülü #1 Ekle

H3 İçeriği Ekle

İhtiyacımız olan bir sonraki modül, seçtiğiniz bazı H3 içeriğine sahip bir Metin Modülü.

H3 Metin Ayarları

Modülün tasarım sekmesine gidin ve H3 metin ayarlarını buna göre değiştirin:

• Başlık 3 Yazı Tipi: Raleway
• Başlık 3 Yazı Ağırlığı: Yarı Kalın
• Başlık 3 Metin Rengi: #7e8a98
• Başlık 3 Metin Boyutu: 28px

Sütuna Ayırıcı Modül Ekle

Bölücüyü Göster

Metin Modülünün hemen 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

Daha sonra modülün çizgi rengini değiştirin.

• Çizgi Rengi: #d7dce2

boyutlandırma

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

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

Sınır

Ardından, sınır ayarlarına gidin ve bir sınır yarıçapı kullanın.

• Tüm Köşeler: 20px

Ana Eleman CSS

Modülün ana elemanına aynı tür neumorfizm kutusu gölgesi ekleyerek modül ayarlarını tamamlayın. Yine, bunun yerine Divi yerleşik kutu gölgesini kullanmakta özgürsünüz.

box-shadow: #A2B1C6 9px 9px 30px,#ffffff -5px -0px 40px;

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Sırada, bazı açıklama içeriğine sahip başka bir Metin Modülümüz var.

Metin Ayarları

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

• Metin Yazı Tipi: Raleway
• Metin Rengi: #7e8a98
• Metin Satır Yüksekliği: 2.7em
• Metin Hizalama: Sol

Sütuna Düğme Modülü Ekle

Kopya Ekle

Son olarak, bir Düğme Modülüne de ihtiyacımız olacak. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Ardından, tasarım sekmesine gidin ve düğmeyi buna göre biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 17px
• Düğme Metin Rengi: #7e8a98
• Düğme Arka Plan Rengi: #d0d5db
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 100 piksel
• Düğme Yazı Tipi: Raleway

aralık

Aralık ayarlarında da bazı değişiklikler yapacağız.

• Alt Marj: -5%
• Üst Dolgu: 30 piksel
• Alt Dolgu: 30px
• Sol Dolgu: 100 piksel (Masaüstü ve Tablet), 50 piksel (Telefon)
• Sağ Doldurma: 100px (Masaüstü ve Tablet), 50px (Telefon)

Ana Eleman CSS

Aynı neumorfizm kutusu gölgesini kullanacağız.

box-shadow: #A2B1C6 9px 9px 30px,#ffffff -5px -0px 40px;

Konum

Ve modülü yeniden konumlandırarak Düğme Modül ayarlarını tamamlayın.

• Pozisyon: Mutlak
• Yer: Alt Merkez

Satırı Kendinden Kaydırma Listesine Dönüştür

Satır Boyutlandırmasını Değiştir

Şimdi, bu öğreticinin son bölümünde, ikinci satırı kendi kendine kayan bir listeye dönüştüreceğiz. İstenen sonuca ulaşmak için ilk adım, satır ayarlarını açmak ve boyutlandırma ayarlarını aşağıdaki gibi değiştirmektir:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Genişlik: %220 (Masaüstü), %100 (Tablet ve Telefon)
• Maksimum Genişlik: %220 (Masaüstü), %100 (Tablet ve Telefon)

Klon Sütunu 5x

Ardından, sütunu beş kez klonlayın.

Yatay Hareket Kaydırma Efekti Ekle

Kendinden kayan liste efektini gerçekleştirmek için biraz yatay hareket ekleyeceğiz.

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti:
  • Masaüstü: 8
  • Tablet & Telefon: 0
• Orta Ofset: 0 (%40'ta)
• Bitiş Ofseti:
  • Masaüstü: -35 (%62'de)
  • Tablet & Telefon: 0

Bölüm Dolgusunu Artır

Bölümünüze biraz ek dolgu ekleyerek tasarımı tamamlayın. Bu kadar!

• Üst Dolgu: 300 piksel (Masaüstü), 100 piksel (Tablet ve Telefon)
• Alt Dolgu: 300 piksel (Masaüstü), 100 piksel (Tablet ve 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 yazıda, Divi'nin kaydırma efektleriyle yatay kendi kendine kaydırma listesinin nasıl oluşturulacağını gösterdik. Ziyaretçileriniz dikey olarak aşağı kaydırırken, yatay sütun listesi kendi kendine kayar ve her seferinde listenin farklı bölümlerini ortaya çıkarır. Bu, toplu içerik paylaşmanın ve ziyaretçilerinizin kullanıcı deneyimini iyileştirmenin harika bir yoludur. 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.