Divi'nin Yeni Taşma Seçenekleriyle Kaydırmalı Galeri Modeli Nasıl Oluşturulur

Web sitenizde görsel göstermenin yaratıcı bir yolunu mu arıyorsunuz? Okumaya devam ettiğinizden emin olun, çünkü bu yazıda size yalnızca Divi'nin yerleşik seçeneklerini kullanarak nasıl kaydırma galerisi maketi oluşturacağınızı göstereceğiz. Somut olarak, bir bölümü maket haline getireceğiz ve bölümdeki tüm satırların maketin parçası olmasını sağlayacağız. Tekniği edindikten sonra, istediğiniz her türlü içeriği bir mobil modelde öne çıkarabilecek ve sayfalarınıza kısa sürede etkileşim ekleyebileceksiniz.

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

Scroll Gallery Mockup Design'ı ÜCRETSİZ olarak indirin

Ellerinizi ücretsiz kaydırma galerisi maket tasarımına 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!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

boyutlandırma

Yeni bir sayfa oluşturarak veya mevcut bir sayfayı açarak başlayın ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın ve boyutlandırma ayarlarında genişlik ve maksimum genişliği değiştirin.

• Genişlik: 25vw (Masaüstü), 60vw (Tablet), 80vw (Telefon)
• Maksimum Genişlik: 25vw (Masaüstü), 60vw (Tablet), 80vw (Telefon)

aralık

Ardından, boşluk ayarlarına gidin, tüm varsayılan üst ve alt dolguları kaldırın ve boşluk oluşturmak için biraz üst ve alt kenar boşluğu ekleyin.

• Üst Marj: 9vw
• Alt: 9vw
• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sınır

Bölümün kenarlık ayarlarına giderek devam edin ve her köşeye '30px' ekleyerek mobil maket şeklini oluşturun.

Kutu Gölge

Şeklin geçmesine izin vermek için ince bir kutu gölgesi ekleyin.

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

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme ilk satırı ekleyerek devam edin:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve satırın bölümün tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki varsayılan üst ve alt dolguyu kaldırın.

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

Kutu Gölge

Ve bir kutu gölgesi de ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.92)

Z İndeksi

Son olarak, görünürlük ayarlarında Z indeksini artırarak satırın (ve özellikle kutu gölgesinin) bir sonraki satırla çakıştığından emin olacağız.

• Z İndeksi: 99

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

Bu satırda ihtiyacımız olan tek modül, bazı H2 içeriğine sahip bir Metin Modülüdür.

H2 Metin Ayarları

H2 kopyasını ekledikten sonra H2 metin ayarlarına gidin ve bazı değişiklikler yapın.

• Başlık 2 Yazı Tipi: Abril Fatface
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu: 1.5vw (Masaüstü), 3.5vw (Tablet), 5vw (Telefon)

aralık

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

• Üst Kenar Boşluğu: 1.5vw (Masaüstü ve Tablet), 3.5vw (Telefon)
• Alt Kenar Boşluğu: 1.5vw (Masaüstü ve Tablet), 3.5vw (Telefon)

2. Satır Ekle

Sütun Yapısı

İkinci sıraya! Burada, aşağıdaki sütun yapısını kullanıyoruz:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın bölümün tüm genişliğini kaplamasına izin verin. Sonraki adımlarda dikey kaydırma efekti oluşturmak için yüksekliği ve maksimum yüksekliği de değiştiriyoruz.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• Yükseklik: 38vw (Masaüstü), 100vw (Tablet), 120vw (Telefon)
• Maksimum Yükseklik: 38vw (Masaüstü), 100vw (Tablet), 120vw (Telefon)

aralık

Ardından, boşluk ayarlarına gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Dikey Taşma

Daha önce de belirtildiği gibi, bu satırı dikey olarak kaydırılabilir hale getiriyoruz. Bunu yapmak için satırın görünürlük ayarlarındaki dikey taşmayı değiştirmemiz gerekecek.

• Dikey Taşma: Kaydır

Sütuna Resim Modülü Ekle

Fotoğraf yükleniyor

Devam edin ve satıra ilk Görüntü Modülünü ekleyin ve istediğiniz bir görüntüyü yükleyin. Bu eğitim boyunca kullandığımız görüntüleri Wedding Planner Layout Pack gönderisine giderek indirebilirsiniz.

boyutlandırma

Duyarlı bir sonuç elde etmek için Görüntü Modülünde 'Tam Genişliğe Zorla' seçeneğini etkinleştirdiğinizden emin olun.

• Tam Genişliği Zorla: Evet

aralık

Sonraki boşluk ayarlarına gidin ve alt kenar boşluğu ekleyerek bununla ve sonraki modül arasında biraz boşluk oluşturun.

• Alt Marj: 1vw

Görüntü Modülünü İstediğiniz Kadar Klonlayın

İlk Görüntü Modülünü değiştirmeyi bitirdikten sonra, onu istediğiniz kadar klonlayabilirsiniz.

Farklı Görseller Yükle

Elbette, kopyaların her birinde görüntüyü değiştirmek isteyeceksiniz.

3. Satır Ekle

Sütun Yapısı

Üçüncü ve son sıraya! Aşağıdaki sütun yapısını kullanıyoruz:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve satırın bölümün tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Daha sonra bazı özel üst ve alt dolgu değerleri ekleyin.

• Üst Dolgu: 2.1vw (Masaüstü), 3.5vw (Tablet), 5vw (Telefon)
• Alt Dolgu: 2.1vw (Masaüstü), 3.5vw (Tablet), 5vw (Telefon)

Kutu Gölge

Ve derinlik oluşturmak için bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.92)

Z İndeksi

Bu satırın (ve özellikle kutu gölgesinin) önceki satırla çakıştığından emin olmak için Z indeksini artıracağız.

• Z İndeksi: 99

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

Kopya Ekle

Bu satırda ihtiyacımız olan tek modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

hizalama

Ardından tasarım sekmesine gidin ve düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğme ayarlarını da değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2.5vw (Tablet), 3.5vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 1px
• Düğme Yazı Tipi: Abril Fatface

aralık

Ve özel dolgu değerlerini kullanarak istediğiniz şekli oluşturun.

• Üst Dolgu: 0,5vw (Masaüstü), 1vw (Tablet), 2vw (Telefon)
• Alt Dolgu: 0,5vw (Masaüstü), 1vw (Tablet), 2vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 7vw (Tablet), 9vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 7vw (Tablet), 9vw (Telefon)

Stil Kaydırma Çubuğu

2. Satıra CSS Kimliği ekleyin

Kaydırma çubuğuna stil vermek isteyip istemediğiniz size kalmış. Bunu yaparsanız, ikinci satırı açın ve ona bir CSS sınıfı ekleyin.

• CSS Sınıfı: görüntü kaydırma çubuğu

Sayfa Ayarlarını Aç

Ardından, satır ayarlarını açın.

CSS Kullanarak Stil Kaydırma Çubuğu

Ve gelişmiş sekmesindeki Özel CSS kutusuna aşağıdaki CSS kodu satırlarını ekleyin:

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

Ö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, yalnızca Divi'nin yerleşik seçenekleriyle güzel bir kaydırma galerisi maketinin nasıl oluşturulacağını gösterdik. Bu yazının başında, JSON düzenini ücretsiz olarak indirebilir ve üzerinde çalıştığınız herhangi bir web sitesinde kullanabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne 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.