Divi'nin Sütun ve Modül Arka Planlarını Karışım Modlarıyla Çarpıcı Bir Şekilde Birleştirme

Tüm çeşitli Divi yerleşik seçenekleri ve düzenli özellik güncellemeleriyle, oluşturduğunuz web sitesi tasarımlarının kalitesi hızla yükselebilir. Uzun zamandır beklenen özellik güncellemelerinden biri filtreler ve karışım modlarıydı. Yeniden oluşturabileceğiniz bazı harika örnekleri zaten paylaştık ve bu listeye bir tane eklemek istiyoruz; Divi'nin sütun ve modül arka planlarını şaşırtıcı bir şekilde nasıl birleştirirsiniz. Karışım modları, Photoshop'taki katmanlar gibi çalışır; Örneğin, bir modüle bir harmanlama modu uyguladığınızda, karışım modu, karşısına çıkan bir sonraki şeyi içerecektir, bu durumda, bir sütundur. Bunun nasıl çalıştığını göstermek için, her tür web sitesi için kullanabileceğiniz çarpıcı bir örneği yeniden oluşturacağız.

Sonuç

Öğreticiye dalmadan önce, adım adım nasıl yeniden oluşturacağınızı göstereceğimiz örneğe bir göz atalım.

Masaüstünde

Tablette

Mobilde

Satır Ekle

Sütun Yapısı

Yeni bir sayfa açarak veya oluşturarak, standart bir bölüm ve üç eşit sütunlu bir satır ekleyerek başlayın.

Sütun 1 Gradyan Arka Planı

Bu satırın sütunlarının her birinin kendi gradyan arka planına ihtiyacı olacaktır. Sütununuza eklemek istediğiniz degrade arka planını (veya arka plan resmini) seçebilirsiniz. Ancak örnekle aynı sonucu elde etmek istiyorsanız, ilk sütun için aşağıdaki gradyan arka planını kullanın:

• İlk 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 Gradyan Yönü: 205deg
• Sütun 1 Başlangıç ​​Konumu: %29
• Sütun 1 Bitiş Konumu: %11

Sütun 2 Gradyan Arka Planı

İkinci sütun, aşağıdaki gradyan arka planını kullanır:

• İlk Renk: rgba(12,113,195,0.34)
• İkinci Renk: rgba(0,0,0,0)
• Sütun 2 Gradyan Türü: Doğrusal
• Sütun 2 Gradyan Yönü: 180deg
• 2. Sütun Başlangıç ​​Konumu: %45
• Sütun 2 Bitiş Konumu: %42

Sütun 3 Gradyan Arka Planı

Son sütunda aşağıdaki ayarlar gerekir:

• İlk 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 Gradyan Yönü: 156deg
• Sütun 3 Başlangıç ​​Konumu: %29
• Sütun 3 Bitiş Konumu: %11

boyutlandırma

Sütun gradyan arka planlarıyla işiniz bittiğinde, Tasarım sekmesine gidin, Boyutlandırma alt kategorisini açın ve 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

aralık

Tasarım sekmesine gidin ve satırınıza aşağıdaki özel dolguyu uygulayın:

• Üst: 27 piksel
• Sağ: 50 piksel
• Alt: 35 piksel
• Sol: 50 piksel

Sınır

Son olarak, sıramız için de bir bordüre ihtiyacımız olacak. Sol ve sağ kenarlık stillerine aşağıdaki ayarları atayarak başlayın:

• Kenar Genişliği: 4px
• Kenar Rengi: #b4e6df
• Bordür Stili: Çift

Üst kenarlık stiline geçin, aynı kenarlık genişliğini ve kenarlık stilini ekleyin ancak bunun yerine sınır renginiz olarak '#ebe68d'yi kullanın.

Alt kenarlık stili, kenarlık rengi için '#c58fdf' renk kodunu kullanıyor.

Metin Modülü Ekle

Başlık ve İçerik Ekle

Artık satır ayarlarınızı tamamladığınıza göre, bir Metin Modülü eklemeye geçmenin zamanı geldi. Bu Metin Modülünü bir kez oluşturacağız, daha sonra klonlayacağız ve kalan iki sütuna yerleştireceğiz. 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

Ardından, Arka Plan alt kategorisini açın ve arka plan renginiz olarak '#e0d9ce' kullanın.

Metin Ayarları

Tasarım sekmesine gidin ve Metin alt kategorisi için aşağıdaki ayarları kullanın:

• Metin Yazı Tipi: Amiko
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 13px
• Metin Rengi: #8A8680
• Metin Harf Aralığı: 3px
• Metin Satır Yüksekliği: 1.9em
• Metin Yönü: Merkez

Başlık Metni Ayarları

Metin Modülünüzün başlık metni için aşağıdaki ayarları seçin:

• Başlık Yazı Tipi: Amiko
• Başlık Yazı Tipi Ağırlığı: Normal
• Başlık Metni Hizalama: Orta
• Başlık Metni Boyutu: 29px
• Başlık Metni Rengi: #8A8680
• Yön Çizgisi Yüksekliği: 3em

aralık

Metin Modülünüze uyguladığınız özel kenar boşluğu ve dolgu, masaüstü, tablet ve telefonda farklı sonuçlar verir. Bu nedenle, bu değerlerin seçeneklerin her biriyle eşleştiğinden emin olmak gerekir. Ziyaretçilerinizin sizinle iletişim kurduğu her yerde aynı görünümü ve hissi korumanıza yardımcı olur. Metin Modülünüz için kullanmanız gereken özel kenar boşluğu ve dolgu aşağıdaki gibidir:

• Üst Kenar Boşluğu: -100px
• Alt Kenar Boşluğu: -130px (Masaüstü), 100px (Tablet ve Telefon)
• Özel Dolgu: 150 piksel
• Sağ: 30 piksel
• Alt: 150 piksel
• Sol: 30 piksel

Sınır

Ardından, Border alt kategorisini açın ve tüm köşeler için '4px' kullanın.

Kutu Gölge

Ardından, Kutu Gölge alt kategorisini açın ve bunun için aşağıdaki ayarları kullanın:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Kutu Gölge Bulanıklığı Gücü: 18 piksel
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: rgba(0,0,0,0.3)

Filtre

Son olarak, Metin Modülünüzde bir karışım modunu etkinleştirin. Bu, Metin Modülünüzün sütun gradyan arka planınızla güzel bir şekilde karışmasını sağlayacaktır. Bu örnek için 'Color Dodge'ı seçtik.

Metin Modülünü Üç Kez Klonla ve Kalan Sütunlara Yerleştir

Yeni oluşturduğunuz Metin Modülünü iki kez klonlayın ve kalan iki sütuna yerleştirin. Değiştirilmesi gereken tek şey, Metin Modülünün özel kenar boşluğudur.

İkinci Metin Modülünün Boşluk Alt Kategorisini Değiştir

Masaüstü sürümünü olduğu gibi tutarken tablet ve telefondaki Özel Kenar Boşluğunu şu şekilde değiştirin:

• Üst: -100 piksel
• Alt: 130 piksel

İkinci Metin Modülünün Boşluk Alt Kategorisini Değiştir

İkinci Metin Modülü, tablet ve telefon için de bazı farklı Özel Kenar Boşluğu değerlerine ihtiyaç duyar:

• Üst: -100 piksel
• Alt: -130 piksel

Sonuç

Yapılmıştı! Şimdi tüm ekran boyutlarında nasıl yeniden oluşturacağınızı gösterdiğimiz sonuca son bir göz atalım.

Masaüstünde

Tablette

Mobilde

Son düşünceler

Bu gönderide, gelişmiş ve benzersiz sonuçlar elde etmek için sütun arka planlarını ve modülleri karışım modlarıyla nasıl birleştireceğinizi gösterdik. Bu tasarımı, web sitenizin tasarımını güçlendirmek ve ziyaretçilerinizin dikkatini çekmek için herhangi bir web sitesinde kullanabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!

Öne Çıkan Görsel VectorsMarket / Shutterstock.com