Divi ile Bölünmüş Karışım Modu Başlığı Nasıl Oluşturulur

Karışım modlarının, üzerinde çalıştığınız tasarımın estetiğine biraz daha dikkat etmenize yardımcı olabileceği bir sır değil. Geçmişte, benzersiz ve muhteşem tasarımlar oluşturmanıza yardımcı olacak karışım modu ipuçlarını ve püf noktalarını ele aldık. Şimdi, sütun güncellemesi çıktığından, bu karışım modlarıyla yapabileceğiniz birkaç ekstra şey var. Bunlardan biri, bölünmüş bir karışım modu başlığı oluşturmaktır. Bu gönderide, modül ve sütun karışım modlarını, sütun arka plan renklerini ve negatif kenar boşluklarını birleştirerek nasıl çarpıcı bir sonuç elde edebileceğinizi göstereceğiz. 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.

Bölünmüş Karışım Modu Kahraman Bölümünü ÜCRETSİZ İndirin

Ellerinizi ücretsiz karışım modu kahraman bölümüne 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!

Youtube Kanalımıza Abone Olun

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

aralık

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyin ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Kutu Gölge

Kutu gölgesi seçeneklerine geçin ve ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 70px
• Gölge Rengi: rgba(0,0,0,0.07)

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

Degrade Arka Plan

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir degrade arka planı uygulayın. Bu gönderinin sonraki adımında, degrade arka planını bir karışım modu kullanarak bir arka plan görüntüsüyle birleştireceğiz.

• Renk 1: #00cbff
• Renk 2: #bf35ff
• Gradyan Yönü: 96deg

Arka plan görüntüsü

Satıra bir arka plan görüntüsü ekleyin ve bunu aşağıdaki arka plan görüntüsü ayarlarıyla birlikte kullanın:

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Ekran

boyutlandırma

Sonraki boyutlandırma ayarlarına gidin ve satırın bölüm kabının tüm genişliğini kaplamasına izin verin.

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

aralık

Sonraki satırın tüm varsayılan üst ve alt dolgularını kaldırın. Bu, bu gönderide daha sonra eklediğimiz sütun 2 arka plan renginin satır ve bölüm kaplarının üst ve alt kenarlarına temas etmesini sağlayacaktır.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Görüntülemek

Daha küçük ekran boyutlarında her iki sütunun da yan yana görünmesini sağlamak için satırın ana öğesine tek bir CSS kodu satırı ekleyeceğiz.

display: flex;

Sütun 2 Ayarları

Arka plan rengi

Genel satır ayarlarını tamamladıktan sonra devam edin ve ikinci sütunun ayarlarını açın. Beyaz bir arka plan rengi ekleyerek başlayın.

• Arka Plan Rengi: #FFFFFF

Filtreler

Tasarım sekmesine gidin ve tüm sütuna bir karışım modu ekleyin.

• Karışım Modu: Ekran

Sütun 1'e Bölücü Modülü Ekle

görünürlük

Modül eklemeye başlama zamanı! İlk sütunda ihtiyacımız olan tek modül bir Bölücü Modül. Bu modül, bir modül ortaya çıkmadan ilk sütunda alan yaratmamıza yardımcı olacaktır. Ayırıcının 'Bölücüyü Göster' seçeneğinin devre dışı olduğundan emin olun.

• Bölücüyü Göster: Hayır

aralık

Boşluk ayarlarına geçin ve ilk sütunda boşluk oluşturmak için biraz alt kenar boşluğu ekleyin.

• Alt Marj: 50vw

Metin Modülü #1'i Sütun 2'ye ekleyin

H1 Başlığı Ekle

İkinci sütuna geç! Burada, Metin Modülü başlığıyla başlayacağız. Seçtiğiniz bazı H1 içeriğini girin.

H1 Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Rengi: #FFFFFF
• Başlık Metni Boyutu: 12vw
• Başlık Harf Aralığı: -0.2vw

aralık

Ayrıca modülün etrafında biraz boşluk yaratıyoruz ve bazı özel kenar boşluğu değerleri uygulayarak onu sola doğru itiyoruz. Negatif sol kenar boşluğu, bölünmüş karışım modunun oluşturulmasında önemli bir rol oynar. Kopyanın herhangi bir arka plan rengi içermeyen ilk sütunun altında görünmesine izin verir.

• Üst Marj: 18vw
• Alt Marj: 2vw
• Sol Kenar Boşluğu: -27.3vw

Filtreler

Şimdi, bu sonraki adımda sihir gerçekleşecek! Satır arka planının görünmesini sağlamak için bir modül ve sütun harmanlama modunu birleştiriyoruz. Metin Modülü için aşağıdaki karışım modunu seçtiğinizden emin olun:

• Karışım Modu: Fark

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

İkinci modüle geçin! Seçtiğiniz bazı içeriği ekleyin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Poppins
• Metin Hizalama: Yasla
• Metin Rengi: #000000
• Metin Boyutu: 0.8vw (Masaüstü), 1.5vw (Tablet), 2.3vw (Telefon)
• Metin Satırı Yüksekliği: 2,5em (Masaüstü ve Tablet), 2,2em (Telefon)

aralık

Daha sonra bazı özel kenar boşluğu değerleri ekleyin.

• Alt Marj: 1vw
• Sol Kenar Boşluğu: 5vw
• Sağ Kenar Boşluğu: 14vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

Bir Bölücü Modül olan bir sonraki modüle geçin. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Tasarım sekmesine geçin ve çizgi ayarlarını buna göre değiştirin:

• Çizgi Rengi: #FFFFFF
• Çizgi Stili: Katı
• Çizgi Konumu: Üst

boyutlandırma

Ayırıcının boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 0.7vw
• Genişlik: %9
• Yükseklik: 0 piksel

aralık

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

• Üst Marj: 2vw (Masaüstü), 5vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: 3vw (Masaüstü), 6vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: 5vw

Filtreler

Son fakat en az değil, satır arka plan görüntüsünün ve degradenin görünmesini sağlamak için bir karışım modu uygulayın.

• Karışım Modu: Fark

Sütun 2'ye Düğme Modülü Ekle

Kopya Ekle

Bir Düğme Modülü olan bir sonraki ve son modüle geçin. Seçtiğiniz bir kopyayı girin.

hizalama

Tasarım sekmesine gidin ve düğme hizalamasının sola ayarlandığından emin olun.

• Düğme Hizalama: Sol

Düğme Ayarları

Düğme ayarlarını da değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #000000
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Poppins

aralık

Son olarak, boşluk ayarlarına bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Alt Kenar Boşluğu: 10vw (Masaüstü), 15vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: 5vw
• Üst Dolgu: 1vw
• Alt Dolgu: 1vw
• Sol Dolgu: 3vw
• Sağ Dolgu: 3vw

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

Son düşünceler

Bu gönderide, çarpıcı bölünmüş karışım modu başlıkları oluşturmak için Divi'nin yeni sütun seçeneklerini nasıl kullanacağınızı gösterdik. Bu eğitim, yalnızca Divi'nin yerleşik seçeneklerinin ne kadar çok yönlü olduğunu ve her Divi güncellemesinde üçüncü taraf tasarım yazılımının nasıl gereksiz hale geldiğini göstermeye yöneliktir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.