Sütunun arka planını nasıl birleştirilir & amp;Karışım moduna sahip divi modülü
Çeşitli Divi varsayılan seçenekleri ve normal özellik güncellemeleri ile, yaptığınız web sitesinin tasarımının kalitesi hızlı bir şekilde artabilir. Uzun zamandır beklenen özellik güncellemelerinden biri filtre ve karışım modudur. Yeniden yapabileceğiniz birkaç harika örnek paylaştık ve listeye bir tane eklemek istiyoruz; Sütun ve Divi modülünün arka planının çarpıcı bir şekilde nasıl birleştirileceği. Karışık mod, Photoshop’ta bir katman gibi çalışır; Karışım modunu modüle uyguladıktan sonra, örneğin, karışım modu, bu durumda bir sütun olan görünen bir sonraki şeyi içerecektir. Nasıl çalıştığını göstermek için, her tür web sitesi için kullanabileceğiniz inanılmaz bir örnek oluşturacağız.
Sonuçlar Eğiticiye girmeden önce, size adım adım nasıl yeniden yapacağınızı göstereceğimiz örneğe bakalım. Masaüstünde
Birinci renk: RGBA (140,170,3,0.34)
İkinci renk: RGBA (0.0,0,0)
Sütun 1 Gradyan Türü: Doğrusal
Sütun 1 Degrade Yönü: 205deg
Sütun 1 Başlangıç Pozisyonu:% 29
Sütun 1:% 11’in son konumu Sütun 2 Arka Plan Gradyanı İkinci sütun aşağıdaki gradyan arka planını kullanır:
Birinci Renk: RGBA (12,113,195.0.34)
İkinci Renk: RGBA (0.0,0,0) Sütun 2 gradyan: doğrusal
Sütun 2 gradyan yönü: 180deg
Sütun 2 Başlangıç Konumu:% 45
Sütun 2 Son Konum:% 42
Sütun 3 Arka Plan Grady Son sütun aşağıdaki ayarları gerektirir: Birinci Renk: RGBA (19,0,147.0.34)
İkinci renk: RGBA (0.0,0,0)
Sütun 3 Gradyan Türü: Doğrusal
Sütun 3 Degrade Yönü: 156deg
Sütun 3 Başlangıç Konumu:% 29
Sütun 3:% 11’in son konumu
Yapıştırıcı Sütun gradyanının arka planına karşı bitirdikten sonra, tasarım sekmesine devam edin, boyutlandırma alt kategorisini açın ve ‘Bu satır tam genişliği yap’ seçeneğini etkinleştirin. Mesafe Tasarım sekmesine geçin ve hattınıza aşağıdaki özel dolguyu uygulayın: Yukarıda: 27px
Doğru: 50 piksel
Aşağıda: 35px
Sol: 50 piksel
Son sınırda, hattımız için bir sınıra da ihtiyacımız var. Aşağıdaki ayarları sol ve sağ sınır kuvvetine ayarlayarak başlayın: Sınır Genişliği: 4px
Sınır rengi: #b4e6df
Sınır Gücü: Çift
Üst sınır kuvvetine geçin, aynı sınır genişliğini ve sınır kuvvetini ekleyin, ancak sınır renginiz olarak ‘#EBE68D’ kullanın. Alt sınır kuvveti, sınırın rengi için ‘#C58FDF’ renk kodunu kullanır. Metin Modülünü Ekle Başlık ve İçeriği Ekleyin Satır ayarlarınızı tamamladıktan sonra metin modülünü eklemeye devam etme zamanı. Bu metin modülünü bir kez yapacağız, bundan sonra klonlayacağız ve kalan iki sütuna koyacağız. Satırınızın ilk sütununa bir metin modülü ekledikten sonra yapmanız gereken ilk şey, içerik kutusuna biraz metin eklemektir; Bir başlık ve bir paragraf. Arka plan rengi daha sonra, arka plan alt kategorisini açın ve arka plan renginiz olarak ‘#e0d9ce’ kullanın.
Metin Ayarları Tasarım sekmesine geçin ve alt kategori metin için aşağıdaki ayarları kullanın: Metin Yazı Tipi: Amiko
Metin yazı tipi ağırlığı: normalMetin Boyutu: 13px
Metin rengi: #8A8680
Metin mektubu alanı: 3px
Yüksek çizgi metin: 1.9em
Metin Oryantasyonu: Orta
Başlık Metin Ayarları Metin başlığı için Metin Modülünüzün başlığı, aşağıdaki ayarları seçin:
Yazı Tip Başlığı: Amiko Font Ağırlığı Başlığı: Normal
Hizalama Metin Başlığı: Orta
Başlık Metin Boyutu: 29px
Başlık Metin Rengi: #8A8680
Hat Yüksekliği: 3EM
Metin modülünüze uyguladığınız özel marj ve dolgu mesafesi, masaüstü, tablet ve cep telefonunda farklı sonuçlar verir. Bu nedenle, bu değerlerin her seçenek için uygun olmasını sağlamak önemlidir. Bu, aynı görünümü korumanıza ve ziyaretçilerinizin sizinle iletişime geçebileceğini hissetmenize yardımcı olacaktır. Metin modülünüz için kullanmanız gereken özel marj ve dolgu aşağıdaki gibidir:
Üst Marj: -100 piksel Alt kenar boşluğu: -130px (masaüstü), 100 piksel (tablet ve cep telefonu)
Pilding Custom: 150px
Doğru: 30 piksel
Aşağıda: 150 piksel
Sol: 30 piksel
Bir sonraki sınır, sınır alt kategorisini açın ve tüm açılar için ‘4px’ kullanın.
Kutunun Gölgesi O zaman, Box Shadow Alt Kategorisini açın ve onun için aşağıdaki ayarları kullanın: Yatay konum gölge kutusu: 0px Dikey Konum Gölge Kutusu: 2px
Bulanık Güç Gölgesi Kutusu: 18px
Gölge kutularının dağılımının gücü: 0px
Gölge Rengi: RGBA (0.0,0,0,3)
Filtre son olarak, en az değil, metin modülünüzdeki karışım modunu etkinleştirin. Bu, metin modülünüzü sütun gradyanınızın arka planına karşı iyi bir şekilde karıştırır. Bu örnek için ‘Renk Dodge’ seçtik.
Klon Metin Modülü Üç kez ve kalan sütun klonlama metin modüllerine iki kez yerleştirin ve geri kalan iki sütuna yerleştirin. Değiştirilmesi gereken tek şey metin modülünün özel marjıdır. Alt Kategori Aralıklarını Değiştir İkinci metin modülü Tabletler ve cep telefonlarında özel marjı değiştirirken, masaüstü sürümünü olduğu gibi korurken: -100px Aşağıda: 130 piksel Alt Kategori Aralığı İkinci Metin Modülünü Değiştir İkinci metin modülü, tabletler ve cep telefonları için de bazı farklı özel marj değerleri gerektirir:
Yukarıda: -100px
Aşağıda: -130px Sonuçlar yapıldı! Size tüm ekran boyutlarında nasıl yeniden yapacağınızı gösterdiğimiz son sonuçlara bakalım.
Masaüstünde
Tablette Hücresel olarak
Bu yazıdaki son zihin, sofistike ve benzersiz sonuçlar elde etmek için sütunların ve modüllerin arka planını karışık modlarla nasıl birleştireceğinizi gösterdik. Bu tasarımı, web sitenizin tasarımınızı güçlendirmek ve ziyaretçilerinizin dikkatini çekmek için her tür web sitesinde kullanabilirsiniz. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! VectorsMarket / Shutterstock.com’dan Üstün Görüntü
