Çarpıcı Karıştırma Efektleri Oluşturmak için Divi'nin Yeni Sütun Filtresi Ayarlarını Kullanma

Divi'nin yeni sütun filtresi ayarları birçok yaratıcı şekilde kullanılabilir. Bu gönderide, bir ana satır arka plan görüntüsünü sütun içeriğiyle nasıl karıştıracağınızı göstereceğiz. Çarpıcı bir etki yaratmak için modüllere farklı renk gradyanları ve bir sütun “ekran” karışım modu ekleyeceğiz. Bu tasarımın, bir sonraki Divi projenizde sütun karışım modlarını kullanmanız için size ilham vereceğini umuyoruz. JSON dosyasını da ü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

ÜCRETSİZ Sütun Karışım Modları Düzenini İndirin

Ellerinizi ücretsiz sütun harmanlama modları 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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yeniden Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

3 Sütun Satırlı Yeni Bölüm Ekle

Üç sütunlu bir satıra sahip yeni bir bölüm ekleyerek tasarımı başlatın.

Bölüm Aralığı

Bölüm ayarlarını açın ve aralığı ayarlayın.

• Sol ve Sağ Kenar Boşluğu: 3vw
• Üst ve Alt Dolgu: 84px

Satır Ayarları

Arka plan

Herhangi bir modül eklemeden önce satır ayarlarını değiştireceğiz. Bir arka plan rengi ekleyerek başlayın.

• Arka Plan Rengi: Orta Gri #c4c4c4

Ardından, bir arka plan görüntüsü yükleyin ve bir karışım modunu kullanarak arka plan rengini görüntüyle karıştırın.

• Arka Plan Resmi Karışımı: Çarpma

boyutlandırma

Sonraki satırın boyutlandırma ayarlarını yapın.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliğini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Varsayılan satır dolgusunu da kaldırın.

• Üst ve Alt Dolgu: 0px

Kutu Gölge

Satıra basit bir kutu gölgesi ekleyerek devam edin.

• Kutu Gölgesi: İlk Seçenek

görünürlük

Görünürlük sekmesinde Z indeksini ayarlayın.

• Z-endeksi: 1

Stil Sütunu 1

İlk sütunun ayarlarını girin.

Filtreler

Filtreler sekmesindeki sütuna bir ekran karışım modu uygulayın.

• Karışım Modu: Ekran

Hover Dönüşüm Ölçeği

Dönüştürme seçeneği grubuna girin ve vurgulu dönüştürme ölçeği ayarlarını değiştirin.

• Dönüştürme Ölçeği: Hem x hem de y eksenlerinde %105

görünürlük

Sütunun görünürlük sekmesine girin ve taşma ayarlarını yapın.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

geçişler

Geçişler sekmesine gidin ve yumuşak bir geçiş oluşturmak için geçiş süresini ayarlayın.

• Geçiş Süresi: 500 ms

Sütun 1'e Metin Modülü Ekle

Her sütun üç metin modülü içerir. Seçtiğiniz bazı H2 içeriği ile sütun 1'e bir ilk metin modülü ekleyin ve ayarları aşağıdaki gibi yapın.

Arka plan

Arka planı bir renk gradyanı ile şekillendirin.

• Arka plan: Gradyan
• Degrade Renk Bir: #5498ff
• Degrade Renk İki: #16fff3
• Gradyan Yönü: 235 derece
• Başlangıç ​​Konumu: %37

aralık

Daha sonra bazı özel boşluk değerleri ekleyin.

• Üst ve Alt Dolgu: 6vw
• Sol ve Sağ Dolgu: 3vw

Başlık Metni

Başlık metni ayarlarını girin ve H2 metin ayarlarını buna göre biçimlendirin:

• Başlık 2 Yazı Ağırlığı: Ultra Kalın
• Başlık 2 Yazı Tipi Stili: TT
• Başlık 2 Metin Rengi: Siyah #oooooo
• Başlık 2 Metin Boyutu:
  • Masaüstü: 5vw
  • Tablet: 11vw
  • Telefon: 13vw
• Başlık 2 Satır Yüksekliği:
  • Masaüstü: 4.3vw
  • tablet: 9vw
  • Telefon: 10.5vw

Filtreler

Filtre ayarlarına gidin ve bir ekran karışım modu ekleyin.

• Karışım Modu: Ekran

Sütun 1'e 2. Metin Modülü Ekle

Seçtiğiniz bazı paragraf içeriğiyle ikinci metin modülünü sütun 1'e ekleyerek devam edin.

Metin modülünü aşağıdaki gibi biçimlendirin:

Arka plan

Beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: Beyaz #ffffffff

Metin

Tasarım sekmesine girin ve metni buna göre ayarlayın:

• Metin Yazı Tipi: Montserrat
• Metin Hizalama: Yaslanmış
• Metin Rengi: Koyu Gri #333333
• Yazı Boyutu:
  • Masaüstü: 0.8vw
  • Tablet: 2vw
  • Telefon: 2.5vw
• Metin Harf Aralığı: -0.04vw
• Metin Satır Yüksekliği:
  • Masaüstü: 2.7vw
  • Tablet: 5.5vw
  • Telefon: 6vw

aralık

Metnin etrafında boş alan oluşturmak için boşluk ayarlarını da yapın.

• Üst ve Alt Marj: 0.5vw
• Üst ve Alt Dolgu:
  • Masaüstü: 5vw
  • Tablet + Telefon: 15vw
• Sol Dolgu: 5vw
• Sağ Dolgu:
  • Masaüstü: 5vw
  • Tablet + Telefon: 25vw

Filtreler

Son olarak, filtreler sekmesinde bir ekran karışım modu uygulayın.

• Karışım Modu: Ekran

Sütun 1'e 3. Metin Modülü Ekle

Sütun tasarımını tamamlamak için, bazı CTA kopyalarıyla üçüncü bir metin modülü ekleyin. Bu modülün tamamını bir düğme olarak kullanıyoruz.

Modülü aşağıdaki gibi şekillendirin:

Link ekle

Bağlantı ayarlarında seçtiğiniz bir bağlantıyı ekleyin. Birisi modülde herhangi bir yere tıkladığında, başka bir yere yönlendirilecektir.

Arka plan

Arka plan gradyanını ilk metin modülüyle eşleşecek şekilde stillendirin.

• Arka plan: Gradyan
• Arka Plan Degrade Rengi Bir: #5498ff
• Arka Plan Degrade Rengi İki: #16fff3
• Gradyan Yönü: 235 derece

Metin

Tasarım sekmesine girin ve metni aşağıdaki gibi biçimlendirin:

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Ağır
• Metin Yazı Tipi Stili: Altı çizili
• Metin Alt Çizgi Rengi: Beyaz #ffffff
• Metin Rengi: Siyah #000000
• Yazı Boyutu:
  • Masaüstü: 1.5vw
  • Tablet: 3.3vw
  • Telefon: 4vw
• Metin Satırı Yüksekliği: 1em

aralık

Metni modüle daha iyi sığdırmak için boşluk ayarlarını yapın.

• Üst ve Alt Dolgu:
  • Masaüstü: 2vw
  • Tablet: 6vw
  • Telefon: 9vw
• Sol Dolgu: 3vw

1. Sütunu İki Kez Çoğalt

İlk sütunu tamamladıktan sonra, satır ayarlarını açın ve ikinci ve üçüncü sütunları silin. Ardından, ilk sütunu iki kez çoğaltın. Tabii ki, sütun 2 ve 3'teki modüllerde bazı değişiklikler yapmamız gerekecek.

Sütun 2 / Metin Modülü 1 Arka Planı

• Arka Plan Degrade Rengi Bir: #c870ff
• Arka Plan Degrade Rengi İki: #ff355a

Sütun 2 / Metin Modülü 2 Kutu Gölgesi

• Kutu Gölgesi: Altıncı Seçenek
• Kutu Gölge Bulanıklığı Gücü: 20px
• Kutu Gölge Yayılma Gücü: 17px
• Kutu Gölge Rengi: rgba(225,33,255,0.06)

Sütun 2 / Metin Modülü 3 Arka Plan

Üçüncü metin modülünün arka plan gradyanını birinci modülle eşleşecek şekilde ayarlayın.

• Arka Plan Degrade Rengi Bir: #c870ff
• Arka Plan Degrade Rengi İki: #ff355a

Sütun 3 / Metin Modülü 1 Arka Planı

Üçüncü sütuna! Metin modülü 1'in gradyan arka planını uygun şekilde değiştirin:

• Arka Plan Degrade Rengi Bir: #ff4800
• Arka Plan Degrade Rengi İki: #fc9a2a

Sütun 2 / Metin Modülü 3 Arka Plan

• Arka Plan Degrade Rengi Bir: #ff4800
• Arka Plan Degrade Rengi İki: #fc9a2a

Ö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

Bu bir Sargı

Bu yazıda, Divi'nin sütun ayarlarını kullanarak çarpıcı bir karışım efektiyle üç sütunlu bir tasarımın nasıl oluşturulacağını gösterdik. Oluşturduğunuz herhangi bir web sitesinde kullanabileceğiniz güzel bir sonuç elde etmek için modül, sütun ve satır ayarlarını birleştirdik. Umarız bu eğitim size kendi alternatif tasarımlarınızı yaratmanız için ilham verir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!