Divi'nin Kaydırma Efektleriyle Kaydırmada Modül Örtüşmeleri Nasıl Oluşturulur

Tasarımınızda örtüşmeler kullanmanın popülaritesi son birkaç yılda arttı. Tasarımınıza daha soyut bir görünüm ve his verir. Aynı zamanda yerden tasarruf etmenize yardımcı olur ve bu da gereken dikey kaydırmayı sınırlar. Divi'nin içinde, modüllere zahmetsizce örtüşmeler eklemenin birkaç yolu vardır. Ayrıca ekstra mil gidebilir ve biraz kaydırma etkileşimi ekleyebilirsiniz! Bugünün Divi eğitiminde, negatif kenar boşluğu ve Divi'nin dikey hareketli kaydırma efektini kullanarak kaydırmada ince modül çakışmalarının nasıl oluşturulacağını göstereceğiz. Yeniden oluşturduğumuz tasarım güzel bir görüntü katmanı içeriyor ve 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

Modül Örtüşmelerini Kaydırma Düzeninde ÜCRETSİZ olarak indirin

Ellerinizi kaydırma düzenindeki ücretsiz modül örtüşmelerine 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!

Genel Adımlar

Yeni Bölüm Ekle

aralık

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: %10
• Alt Dolgu: %10

1. Satır Ekle

Sütun Yapısı

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

aralık

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve boşluk ayarlarına biraz alt kenar boşluğu ekleyin.

• Alt Kenar Boşluğu: 100 piksel

Sütuna Metin Modülü #1 Ekle

H2 İçeriği Ekle

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

Başlık 2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Abril Fatface
• Başlık 2 Metin Boyutu: 100px (Masaüstü), 70px (Tablet), 60px (Telefon)

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

görünürlük

İhtiyacımız olan bir sonraki modül bir Bölücü Modül. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Tasarım sekmesine gidin ve çizgi ayarlarını aşağıdaki gibi değiştirin:

• Çizgi Rengi: #333333
• Çizgi Stili: Katı
• Çizgi Konumu: Üst

boyutlandırma

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

• Bölücü Ağırlığı: 6px
• Genişlik: %10 (Masaüstü), %20 (Tablet), %30 (Telefon)

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Bu satırda ihtiyacımız olan son modül, bazı açıklama içeriğine sahip başka bir Metin Modülüdür.

Metin Ayarları

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

• Metin Yazı Tipi: Karla
• Metin Boyutu: 18px
• Metin Satırı Yüksekliği: 2.2em

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanan bir sonraki satıra geçin:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

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

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

Yer Paylaşımını Yükle

1. sütunda, ihtiyacımız olan ilk modül bir Görüntü Modülüdür. Bu gönderinin başında indirebildiğiniz indirme klasöründe bulabileceğiniz bindirme görüntü dosyasını yükleyin.

Arka plan görüntüsü

Ardından, seçtiğiniz bir arka plan resmini yükleyin.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez

boyutlandırma

Bir sonraki adımda Görüntü Modülünü tam genişliğe zorlayın.

• Tam Genişliği Zorla: Evet

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

H3 ve Açıklama İçeriği Ekle

Seçtiğiniz bazı H3 ve açıklama içeriğini içeren bir Metin Modülü olan bir sonraki modüle geçin.

Arka plan rengi

Modülün arka plan rengini değiştirin.

• Arka Plan Rengi: #333333

Metin Ayarları

Ardından tasarım sekmesine geçin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Karla
• Metin Boyutu: 18px
• Metin Satırı Yüksekliği: 2.2em
• Metin Rengi: Açık

H3 Metin Ayarları

H3 metin ayarlarında da bazı değişiklikler yapın.

• Başlık 3 Yazı Tipi: Abril Fatface
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Boyutu: 50px

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve farklı ekran boyutlarının genişliğini değiştirin.

• Genişlik: %70 (Masaüstü), %80 (Tablet), %100 (Telefon)
• Modül Hizalaması: Merkez

aralık

Bazı özel kenar boşluğu ve dolgu değerleri de kullanıyoruz.

• Üst Marj: -%26
• Üst Dolgu: %15
• Alt Dolgu: %15
• Sol Dolgu: %10
• Sağ Dolgu: %10

Yatay Hareket Kaydırma Etkisi

Ve gelişmiş sekmesindeki kaydırma efektlerine biraz yatay hareket ekleyerek modül ayarlarını tamamlayacağız.

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 4
• Orta Ofset: 4 (%5'te)
• Bitiş Ofseti: 0 (%10'da)
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

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

Kopya Ekle

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

hizalama

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

• Düğme Hizalama: Merkez

Düğme Ayarları

Ardından, düğmeyi buna göre şekillendireceğiz:

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

• Düğme Yazı Tipi: Karla
• Düğme Yazı Ağırlığı: Kalın

aralık

Ve modülün boşluk ayarlarına bazı özel kenar boşlukları ve dolgu değerleri ekleyerek modül ayarlarını tamamlayacağız.

• Üst Marj: -4%
• Üst Dolgu: %2
• Alt Dolgu: %2
• Sol Dolgu: %7
• Sağ Dolgu: %7

Modülleri Sütun 1'e Klonla ve Kopyaları Sütun 2'ye Yerleştir

1. sütundaki modülleri tamamladıktan sonra, tüm modülleri klonlayabilir ve kopyaları satırın ikinci sütununa yerleştirebilirsiniz.

Arka Plan Resmini ve İçeriğini Değiştirin

Arka plan resmini ve içeriğini değiştirdiğinizden emin olun.

Tüm Satırı Klonla

Ardından, tüm satırı istediğiniz kadar klonlayın.

Arka Plan Resimlerini ve İçeriğini Değiştirin

Arka plan resimlerini ve içeriğini burada da değiştirin ve işiniz bitti!

Ö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'nin yeni kaydırma efektleriyle kaydırmada ince modül çakışmalarının nasıl oluşturulacağını gösterdik. Tasarımımızın genel görünümünü ve verdiği hissi yükseltmek için negatif üst kenar boşluğunu Divi'nin yerleşik dikey hareketli kaydırma efektiyle etkili bir şekilde birleştirdik. Yeniden oluşturduğumuz tasarım, güzel bir görüntü yerleşimi içeriyordu 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.