Divi ile Sütun Kaplarına Kaydırma Etkileri Nasıl Sınırlandırılır

Divi'nin kaydırma efektleri, oluşturduğunuz tasarıma tamamen yeni bir boyut kazandırmaya yardımcı olur. Her yeni Divi özelliğiyle, web tasarımınızı farklı bir perspektiften görmenize yardımcı olacak öğreticileri de paylaşmaya çalışıyoruz. Bu öğreticide, modül kaydırma efektlerini sütun kapsayıcılarıyla nasıl sınırlayacağınızı göstereceğiz. Bu, ne tür bir kaydırma efekti eklerseniz ekleyin, modülün hareket efektinin sütun kapsayıcısını geçemeyeceği anlamına gelir. Bu, güzel bir kutulu ve etkileşimli tasarımla sonuçlanır. Sıfırdan bir örnek oluşturacağız ve siz de JSON dosyasını ü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

Ücretsiz Limit Kaydırma Efektleri Düzenini ÜCRETSİZ olarak indirin

Ellerinizi ücretsiz limit kaydırma efektleri 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!

Youtube Kanalımıza Abone Olun

Yeni Normal Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın.

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz satıra herhangi bir modül eklemeden 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
• Genişlik: %90
• Maksimum Genişlik: 1580 piksel

Sütun 1 Ayarları

Arka plan görüntüsü

Ardından, sütun 1 ayarlarını açın ve bu öğreticinin başındaki indirme klasöründe bulabileceğiniz 'divi-column-background' görüntüsünü yükleyin.

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

aralık

Boşluk ayarlarına geçin ve biraz üst ve alt dolgu ekleyin.

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

Sınır

Bazı yuvarlak köşeler de ekleyin.

• Tüm Köşeler: 20px

Kutu Gölge

Ayrıca ince bir kutu gölgesi kullanacağız.

• Kutu Gölge Dikey Konumu: 51px
• Kutu Gölge Bulanıklığı Gücü: 46px
• Gölge Rengi: rgba(0,0,0,0.08)

taşmalar

Ve taşmaları gizli olarak ayarlayarak sütun ayarlarını tamamlayacağız. Bu, bu eğitimin çok önemli bir parçasıdır. Taşmaları gizli olarak ayarlayarak, sütun kabı içindeki hiçbir modülün onu aşmamasını sağlarsınız.

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

Metin Modülü #1'i Sütun 1'e ekleyin

H3 İçeriği Ekle

Sütun 1'deki ilk Metin Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bazı H3 içeriğini ekleyin.

H3 Metin Ayarları

Tasarım sekmesine gidin ve H3 metin ayarlarını buna göre değiştirin:

• Başlık 3 Yazı Tipi: Poppins
• Başlık 3 Yazı Tipi Ağırlığı: Ağır
• Başlık 3 Metin Rengi: rgba(0,0,0,0.15)
• Başlık 3 Metin Boyutu: 200px (Masaüstü), 150px (Tablet), 100px (Telefon)
• Başlık 3 Harf Aralığı: -12px (Masaüstü), -10px (Tablet), -7px (Telefon)

aralık

Modülümüzün genişliğini artırmak için, boşluk ayarlarına bir miktar negatif sol ve sağ kenar boşluğu ekleyeceğiz.

• Sol Kenar Boşluğu: -50%
• Sağ Kenar Boşluğu: -50%

Yatay Hareket

Kaydırma efekti ayarlarına biraz yatay hareket ekleyerek modül ayarlarını tamamlayacağız. Burada başka herhangi bir kaydırma efekti kullanmaktan çekinmeyin, ne yapmayı seçerseniz seçin, sütun kapsayıcısını geçmeyecektir çünkü bu eğitimdeki önceki adımlardan birinde sütun taşmalarını gizledik.

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

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

Başka bir Metin Modülü olan bir sonraki modüle geçin. Seçtiğiniz bazı açıklama içeriğini ekleyin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #969696
• Metin Boyutu: 18px (Masaüstü), 16px (Tablet), 14px (Telefon)
• Metin Satırı Yüksekliği: 2.4em

aralık

Farklı ekran boyutlarındaki marj değerlerini ayarlayarak modül ayarlarını tamamlayın.

• Üst Kenar Boşluğu: 100px (Masaüstü), 60px (Tablet), 50px (Telefon)
• Alt Kenar Boşluğu: 200px (Masaüstü), 180px (Tablet), 100px (Telefon)
• Sol Kenar Boşluğu: 100px (Masaüstü), 50px (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 100px (Masaüstü), 50px (Tablet ve Telefon)

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

Kopya Ekle

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

Düğme Ayarları

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

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 24px (Masaüstü), 20px (Tablet), 18px (Telefon)
• Düğme Metin Rengi: #000000
• Gradyan Rengi 1: #f2f2f2
• Gradyan Rengi 2: #ffffff
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 270deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: -1px
• Düğme Yazı Tipi: Poppins
• Düğme Yazı Tipi Ağırlığı: Orta
• Düğme Simgesini Göster: Evet
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

aralık

Ardından, bazı özel boşluk değerleri ekleyin.

• Alt Kenar Boşluğu: 50px
• Üst Dolgu: 50px
• Alt Dolgu: 50px

Konum

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

• Pozisyon: Mutlak
• Konum: Sol Alt

Sütun 2'ye Görüntü Modülü Ekle

Fotoğraf yükleniyor

İkinci sütunda ihtiyacımız olan tek modül bir Görüntü Modülüdür. Seçtiğiniz bir resmi yükleyin.

boyutlandırma

Ardından, boyutlandırma ayarlarında tam genişliği zorlayın.

• Tam Genişliği Zorla: Evet

Sınır

Daha sonra farklı ekran boyutlarında kenarlık ayarlarını değiştirin.

• Sol Üst: 0px (Masaüstü), 20px (Tablet ve Telefon)
• Sağ Üst: 20px
• Sol Alt: 0px (Masaüstü), 20px (Tablet ve Telefon)
• Sağ Alt: 20px

Konum

Ve modülü masaüstünde yeniden konumlandırın. Daha küçük ekran boyutlarında varsayılana geri getirin.

• Konum: Mutlak (Masaüstü), Varsayılan (Tablet ve Telefon)
• Konum: Merkez (Masaüstü)

Satırı İstediğiniz Kadar Kez Klonlayın

Satırı ve tüm modüllerini tamamladıktan sonra, tüm satırı istediğiniz kadar klonlayabilirsiniz.

İçeriği ve Resmi Değiştir

Kopyayı ve resmi uygun şekilde 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 taşma seçeneklerini modül kaydırma efektleriyle birlikte kullanarak kaydırma efektlerinizi sütun kaplarıyla nasıl sınırlayacağınızı gösterdik. Bir modül sütun kapsayıcısını geçer geçmez kaybolur ve bu da düzgün kutulu etkileşimli bir tasarımla sonuçlanır. 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.