Sıra arka planı nasıl birleştirilir & amp;Yeni divi seçenekleriyle yaratıcı bir şekilde sütun
Bu Divi öğreticisinde, şaşırtıcı sonuçlar oluşturmak için satır ve sütunların arka plan seçeneklerini nasıl birleştirebileceğinizi göstereceğiz. Doğru kombinasyon ve ayarları seçerek, web sitenizin genel görünümünü ve hissini geliştiren bir tasarım elde edebilirsiniz. Ne hakkında konuştuğumuzu göstermek için adım adım adım oluşturmanıza yardımcı olacağımıza bir örnek verdik. Bu sonucu varsayılan Divi seçeneğini kullanarak yaptık, bu nedenle ek CSS eklemenize gerek yok. Sonuçlar Bu öğreticiyi adım adım izlerseniz, aşağıdaki sonuçları elde edebileceksiniz:
Bu sonucu elde etmek için üç farklı çizgi kullanmış olsak da, her şey daha büyük bir resmin parçası gibi görünüyor. Başlayalım! Yeni bir sayfa için görsel yapımcılara dönüp Divi Builder’ı etkinleştirin ve görsel oluşturucuya geçin. Yapmamız gereken ilk bölümü oluşturun Yeni bir standart parça oluşturmak. Birbirimizi yapacağımız ve birleştireceğimiz tüm satırlar bu bölümün bir parçası olacaktır. Satırda bir kutu gölge efekti oluşturmak için, gradyanın aşağıdaki bölümünün arka planını ekleyeceğiz:Birinci renk: RGBA (61,65,86,0,59)
Renk İkinci: #F7F7F7
Gradyan Türü: Radyal
Radyal yön: aşağıda
Başlangıç Pozisyonu:% 31
Son pozisyon:% 76 Bir Sütun Satır Ekle Yapmamız gereken bir sonraki şey, bu bölüme bir sütun satırı eklemektir. Bu satır, nihai sonuçlarımızdan aşağıdaki bölümleri temsil edecektir: Geniş bir satır için satır ve sütun ayarları devam eder ve tasarım sekmesinde tam genişlik oluşturur. Satır Arka Plan Ayarları Daha sonra, İçerik sekmesine dönebilir ve aşağıdaki gradyan arka planı ekleyebilirsiniz: İlk Renk: #3D4156
İkinci renk: RGBA (114,81,114.0.91)
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç pozisyonu:% 0
Son pozisyon:% 65
Arka plan görüntülerini (bu durumda desen) yükleyin ve arka plan görüntülerinin bir karışımı olarak ‘çarpın’ seçeneğini seçin. Bir sonraki sütunun arka plan ayarı, aşağı kaydırın ve gradyanın aşağıdaki arka plan ayarlarını satır sütununuza ayarlayın: Birinci Renk: RGBA (255,255,255.0.15)
İkinci renk: RGBA (214,44,104.0)
Sütun Gradyan Türü: Doğrusal
Sütun gradyan yönü: 161deg
İlk Konum Sütunu:% 43
Sütun Final Konumu:% 43
Hattınıza aşağıdaki dolguyu ekleyerek daha fazla mesafe: Üst: 20 piksel
Doğru: 30 piksel
Sol: 30 piksel
Ve sütununuza biraz dolgu:
Üst: 200px
Aşağıda: 200px
Metin Modülünü Ekle Yapacağımız bir sonraki şey metin modülünü satıra eklemek ve metin modülünün metin alt kategorisinde aşağıdaki değişiklikleri yapmaktır: Metin yazı tipi: Playfair ekranı
Metin yazı tipi boyutu: 77px (masaüstü), 64 (tablet), 51 (cep telefonu)
Metin rengi: #f7f7f7
Metin hattı yüksekliği: 1.7 (masaüstü), 1em (tablet ve cep telefonu)
Bölme modülünü ekleyin. Aynı sekmeyi aşağı kaydırın ve arka plan rengi olarak ‘RGBA (114.57,114.0.91)’ kullanın. Tasarım sekmesine geçin ve bölücü renginiz olarak ‘#3D4156’ seçeneğini seçin. Styles alt kategorisini açın ve bölücü stiliniz olarak ‘katı’ ve bölücü konumunuz olarak ‘yukarıda’ kullanın. Ardından, Boyut Alt Kategorisine Aşağıdaki Ayarları Belirleyin: Bölücü Ağırlık: 11 Piksel Yükseklik: 23px
Genişlik:% 0
Modül hizalaması: sol
Son olarak, özel dolgu seçeneğine sol dolguyu ’48’ ekleyin.
Ayrı ayrı yapılmış olsa bile, önceki satırın bir uzantısı gibi ekleyeceğimiz sonraki üç satır satırını ekleyin. Tam satır için satır ve sütun ayarları yine, tam geniş olan yeni bir çizgi yaparak başlar. Satır Arka Plan Ayarları Ardından, aşağıdaki arka plan ayarlarını kullanın: Birinci Renk: RGBA (114,81,114.0.91) Renk İkinci: #F7F7F7
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 9
Son pozisyon:% 100
Bir arka plan deseni ekleyin ve arka plan görüntüsü karışımı olarak ‘çarpma’ kullanın.
Arka Plan Ayarları Sekmenin altındaki kaydırma sütununu ayarlar ve her sütun için arka plan rengi olarak ‘#f7f7f7’ kullanın. Uzay Alt Kategorisindeki Mesafe, her sütunun üst dolgusuna, alt, sağa ve sola ’30px’ ayarlayarak başlayın. Ardından, satırınızın masaüstü sürümüne aşağıdaki dolguyu ekleyin: Yukarıda: 19px Doğru: 200px
Sol: 200px
Biraz farklı bir tablette dolgu:
Yukarıda: 0px Doğru: 70px
Aşağıda: 0px
Sol: 70px
Ve cep telefonlarında dolgu aşağıdaki gibidir:
Yukarıda: 0px Doğru: 50 piksel
Aşağıda: 30px
Sol: 50 piksel
İlk metin modülünü ekleyin, metin modülünü satırın ilk sütununa ekleyerek devam edin. Ardından, Tasarım sekmesinin metin alt kategorisi için aşağıdaki ayarları kullanın:
Metin yazı tipi: Raleway Yazı tipi stili: kalın ve büyük harf
Metin yazı tipi boyutu: 23px
Metin rengi: #3D4156
Hat yüksekliği metni: 1.7em
Metin Oryantasyonu: Orta
İkinci metin modülünü ekleyin Bir öncekinin hemen altına başka bir metin modülü ekleyin ve bunun yerine aşağıdaki ayarları kullanın: Metin Yazı Tipi: Raleway
Metin yazı tipi boyutu: 12 piksel Metin rengi: #3D4156
Hat yüksekliği metni: 1.7em
Metin Oryantasyonu: Sol
Klon metin modülü ve iki metin modülü, klon yaptıktan ve ayrıca kalan iki sütuna yerleştirdikten sonra başka bir sütuna yerleştirin. Ekleyeceğimiz sütunun son sütununun bir satırını ekleyin, bir öncekiyle örtüşeceğimiz sütun. Bunu yapmamızın nedeni, bu şekilde farklı gradyan arka planlarını birleştirebilmemizdir. Yaptığımız üç satır ayrılmış olsa da, bir tane gibi hissedecekler. Bu arada, sadece bir tane değil, bazı gradyan arka planlarının tadını çıkarabiliriz.
Satır ve Sütun Ayarları Son satır için tam satır için ‘Bu satırı tam genişlik yap’ da etkinleştirmeliyiz.
Çizgi Arka Plan Ayarları Ardından, gradyanın arka planını satıra ekleyin: Birinci renk: RGBA (61,65,86.0) İkinci renk: RGBA (114,81,114.0.34) Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 45
Son pozisyon:% 91
Arka Plan Ayarları Sütun aynı sekmeyi aşağı kaydırın ve sütun için aşağıdaki gradyan arka planını kullanın:
Birinci Renk: RGBA (239,239,239.0.15)
İkinci renk: RGBA (214,44,104.0) Sütun Gradyan Türü: Doğrusal
Sütun gradyan yönü: 340deg
İlk Konum Sütunu:% 45
Sütun Final Konumu:% 45
Yapmamız gereken son şeyin mesafesi biraz dolgu ve marj eklemektir. Üst kenar boşluğuna ‘-100’ ekleyerek başlayın ve aşağıdaki özel dolguyu kullanmaya devam edin:
Yukarıda: 14px
Doğru: 30 piksel Sol: 30 piksel
Sütun da birkaç rulman gerektirir;Üst için ‘200px’ ve alt için ‘155px’. Bu yazıda sağladığımız farklı adımları izlediyseniz, aşağıdaki sonuçları elde edebilmelisiniz:
Yeni Divi seçeneği ile son zihin, birçok yeni şey mümkündür.Bunlardan biri, harika bir tasarım elde etmek için satırların ve sütunların arka planını birleştirmektir.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
Medjaja / Shutterstock.com tarafından Üstün Görüntü
