İnanılmaz bir bölüm geçişi yapmak için yeni bir divi sütun yapısı nasıl kullanılır
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimi kapsamında, inanılmaz bir bölüm geçişi yapmak için yeni Divi sütun yapısını nasıl kullanacağınızı göstereceğiz. Sayfa tasarımımızı bir sonraki seviyeye getirmek için farklı sütun yapılarını bazı Divi varsayılan seçenekleriyle birleştireceğiz.
Haydi Yapalım şunu! Başlayalım, yalnızca Divi Varsayılan seçeneğini kullanarak baştan yapacağımız üç farklı örneğe bakarak başlayalım. Bu örnekler daha küçük ekran boyutlarında iyi görünür.
Üst dolgu: 0px
Aşağıda dolgu: 0px Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısına sahip bölüme yeni bir satır ekleyerek devam edin: Yapışkan Sıranın genişliğini de arttırın:
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 0 Bir sonraki varsayılan dolgunun üstünü ve altını çıkarın: Üst Dolgu: 0px
Aşağıda dolgu: 0px
Sırayı daha canlı hale getirmek için süzün, filtre ayarlarında doygunluğu arttırın: Doygunluk:% 200
#1 bölücü modülünü Sütun 1’e ekleyin Tasarımımızdaki ilk kareyi oluşturmak için bölücüleri gizle, sütun 1’e bir bölücü modülü ekleyeceğiz. ‘Göster görüntüleme’ seçeneğini devre dışı bırakın. Arka Plan Bir sonraki gradyan, gradyanın arka planını bölücü modülüne ekleyin: Renk 1: RGBA (255,255,255.0)
Renk 2: RGBA (176,182,219.0.34)
Kareler yapmak için mesafe, boşluk değerini değiştirin: Üst Marj: -120px
Üst dolgu: 120px
Dolgu Alt: 120 piksel
Klon Bölü Modülü ve Sütun 2’ye yerleştirin Bölücü modülünü, klonları değiştirmeyi bitirdikten ve ikinci sütuna yerleştirin. Gradyanın arka planını değiştirin Bu kopyada, gradyanın arka planından başlayarak bazı değişiklikler yapılması gerekir: Renk 1: RGBA (228,237,234.0.58)
Renk 2: RGBA (255,255,255.0)
Aralığı Değiştirme Aynı zamanda aralık ayarlarını da değiştirin. Bu, bu bölücü modülü ile ilk sütundaki mesafeyi artıracaktır. Üst kenar boşluğu: 142px
Üst dolgu: 120px
Dolgu Alt: 120 piksel
Klon bölücü modülü #1 iki kez ve sütun 3 ve 5 klonlama mor bölücü modüllerini iki kez yerleştirin ve kopyaları sütun 3 ve 5’e yerleştirin. Klon bölücü modülü #2 ve sütun 4 klonlama ve yeşil bölücü modülüne yerleştirin ve sütun 4’e yerleştirin. Bölücü modülünü Tablet ve Cep Telefonunda 3, 4 ve 5 sütunlarındaki gizle Sütun 3’teki bölücü modülünü açın, elbette, geçişin daha küçük bir ekran boyutu kadar iyi görünmesini istiyoruz. Bu yüzden kullandığımız modüllerden bazılarını gizleyeceğiz. Sütun 3’teki bölücü modülü ayarlarını açarak başlayın. Tablet ve cep telefonuna saklanarak Gelişmiş sekmesini açın ve modülü cep telefonu ve tablet üzerindeki devre dışı bırakın. Görünürlük gücümüzü kopyalayın Bölücileri Sütun 4 ve 5’teki de gizlemelidir. İşlemi hızlandırmak için, Sütun 3’teki bölücü görünürlük ayarlarını kopyalayın:
Görünürlüğü takın ve 4 ve 5. sütunlardaki bölücü modüllerine yapıştırın. Geçiş bölüm #2 İkinci bölümden bir geçiş yapmak için yeni bir parça ekleyin, buraya yeni bir parça ekleyin: Üst Bölücü bölümün ayarlarını açın ve aşağıdaki üst bölücüyü ekleyin: Bölme Stili: Listede bulun Renk Renk: #ffffff
Böcek Yüksekliği: 236px
Flip bölücü: dikey
Bölme Ayarları: Yukarıdaki İçerik Bölümü
Alt bölücü de, alt bölücüyü de ekleyin:
Bölme Stili: Listede bulun Renk Renk: #ffffff
Böcek Yüksekliği: 236px
Bölme Ayarları: Yukarıdaki İçerik Bölümü
Mesafe Değişimi Daha fazla alan ayarları:
Üst kenar boşluğu: 100 piksel Alt kenar boşluğu: 100 piksel
Üst dolgu: 0px
Aşağıda dolgu: 0px
Yeni bir satır ekleyin Sütun yapısı, yeni bir bölüme satır ekleme zamanıdır! Aşağıdaki sütun yapısını seçin:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve genişliği değiştirin: Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe Tüm dolguyu varsayılan olarak da silin:
Üst dolgu: 0px Aşağıda dolgu: 0px
Bir sonraki arka plan renginin 1. sütunu 1’e bölücü modülünü ekleyin, bölücü modülünü ilk sütuna ekleyin. Ayarları açın ve arka plan renkleri ekleyin: Arka plan rengi: RGBA (176,182,219.0.34)
Bölücü rengi bölücünün rengini de değiştirin: Renk Renk: #ffffff
Sonra bölücü stili, stil ayarlarını girin ve aşağıdaki bölücü stilini kullanın:
Bölme Stili: ÇiftBölücü Ağırlık Bölücü Ağırlığı aşağıdaki gibi olmalıdır: Bölücü ağırlığı: 18px
Son fakat en az değil, özel bir yatak kullanarak bölücü modülünün boyutunu artırın: Üst dolgu: 50 piksel
Dolgu Alt: 50 piksel Klon Bölme Modülü ve Sütun 2’ye yerleştirin Birinci sütunda bölücü modülü ile bitirdikten sonra klonlar ve kopyayı ikinci sütuna yerleştirin.
Arka plan rengini değiştirin Bu kopyanın arka plan rengini değiştirin:
Arka plan rengi: #E4EDEA Klonlama Bölü Modülü #1 ve Sütun 3 ve 5’e yerleştirin Mor Bölüdülük modülünü iki kez klonlayarak ve kopyasını Sütun 3 ve 5’e yerleştirerek devam edin. Klon bölücü modülü #2 ve sütun 4 klonlama ve yeşil bölücü modülüne yerleştirin ve kopyayı sütun 4’e yerleştirin.
Tabletler ve Cep Telefonlarında 3, 4 & 5 Sütunlardaki Bölme Modülünü Gizle Tabletler ve Cep Telefonlarında Gizle İlk bölüm geçişinin örnekleri için yaptığımızla aynı şeyi yapacağız. Bölüm 3’teki bölücü modülü ayarlarını açın ve cep telefonları ve tabletlere gizleyin. Görünürlük kuvvetini bu görünürlük kuvvetini kopyalayın. Görünürlüğü takın ve 4 ve 5. sütunlardaki bölücü modüllerine yapıştırın. Geçiş bölüm #3 Sayfanıza son bölüm geçişini eklemek için yeni bir bölüm ekleyin, buraya yeni bir parça ekleyin: Üst bölücü bölümün ayarlarını açın ve üst bölücüyü ekleyin: Bölme Stili: Bölme listesinde bulun: #ffffff Böcek Yüksekliği: 150 piksel Bölme Ayarları: Yukarıdaki İçerik Bölümü
Alt alt bölücü en düşüktür:
Bölme Stili: Listede bulun
Renk Renk: #ffffff
Böcek Yüksekliği: 150 piksel Flip bölücü: dikey
Bölme Ayarları: Yukarıdaki İçerik Bölümü
Mesafe o zaman, alan ayarlarını açık ve bazı değişiklikler yapın:
Üst kenar boşluğu: 100 piksel
Alt kenar boşluğu: 100 piksel
Üst dolgu: 0px Aşağıda dolgu: 0px
Bu bölümde ihtiyacımız olan satır sütun yapısının yeni bir satırını ekleyin, aşağıdaki sütun yapısına sahiptir:
Herhangi bir modül eklemeden yapıştırıcı, çizgi ayarlarınızı açın ve satırınızı geniş ekleyin:
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet Talang genişliği: 1 Mesafe Tüm dolguyu yukarı ve aşağı silmek Sonraki Varsayılan:
Üst dolgu: 0px
Aşağıda dolgu: 0px
Bölücü modülünü #1 Sütun 1’e ekleyin 1 bölücü modülünü ilk sütuna ekleyerek devam edin. ‘Ekran göster’ seçeneğini devre dışı bırakın. Arka Plan Rengi Arka plan rengini bölücüye ekleyin:
Arka plan rengi: RGBA (176,182,219.0.34)
Mesafe, üst ve alt pedleri kullanarak modülün boyutunu arttırır: Üst dolgu: 100 piksel Dolgu Alt: 100 piksel
Klon Bölme Modülü ve Sütun 2’ye yerleştirin Birinci sütundaki bölücü modülünün arka plan rengini değiştirin ve kopyayı ikinci sütuna yerleştirin. Ayarları açın ve arka plan rengini değiştirin: Arka plan rengi: RGBA (228,237,234.0.58)
Klonlama Bölü Modülü #1 ve Sütun 3 ve 5 Klonlama Mor Böcek Modüllerini iki kez yerleştirin ve Sütun 3 ve 5’e yerleştirin.
Klon bölücü modülü #2 ve sütun 4 klonlamanın yanı sıra yeşil bir bölücü modülüne yerleştirin ve 4 sütun içine yerleştirin. Tabletler ve cep telefonu üzerinde Sütun 3’te. Görünürlük kuvvetini bu görünürlük kuvvetini kopyalayın.
Görünürlük kuvvetini takın ve 4 ve 5. sütunlardaki bölücü modülüne yapıştırın ve bitti! Önizleme Şimdi tüm adımları geçtikten sonra, yaptığımız son üç farklı örneğe bakalım. Bu kullanım durumunun blog yazısındaki son zihin, inanılmaz bir bölüm geçişi oluşturmak için yeni Divi sütun yapısını nasıl kullanacağınızı gösterdik.Bu öğretici, her hafta tasarım ekipmanı kutunuza bir şeyler koymaya çalıştığımız devam eden Divi Tasarım Girişimimizin bir parçasıdır.Bir sorunuz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
