Divi ile Bölünmüş Karışım Modu Başlığı Nasıl Yapılır
Karışık modların üzerinde çalıştığınız tasarım estetiğine ekstra dikkat etmenize yardımcı olabileceği bir sır değil. Geçmişte, benzersiz ve güzel tasarımlar yapmanıza yardımcı olan karışık moda ipuçlarını ve püf noktalarını tartıştık. Şimdi, sütun güncellemesi ortaya çıktığı için, bu karışık modla yapabileceğiniz bazı ek şeyler var. Bunlardan biri bölünmüş karışım modu başlığı yapmak. Bu yazıda, sütunlar, sütun arka plan renkleri ve negatif kenar boşluklarının modüllerini ve karışım modlarını birleştirerek nasıl şaşırtıcı sonuçlar elde edebileceğinizi göstereceğiz. JSON dosyalarını ücretsiz olarak da indirebilirsiniz!
Haydi Yapalım şunu. Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
YouTube kanalımıza abone olun, yaratıcı olmaya başlayalım! Mesafenin yeni bir bölümünü ekleyin Üzerinde çalıştığınız sayfaya yeni normal parçayı ekleyin ve tüm üst ve alt dolguyu silin.
Üst dolgu: 0px
Aşağıda dolgu: 0px
Kutunun gölgesi kutu gölge seçeneğine geçer ve pürüzsüz bir kutu gölgesi ekler. Bulanık Güç Gölgesi Kutusu: 70px
Gölge Rengi: RGBA (0.0,0,0.07)
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden gradyan arka planı, satır ayarlarını açın ve gradyanın arka planını uygulayın. Bu yazının bir sonraki adımında, gradyanın arka planını bir karışım modu kullanarak bir arka plan görüntüsü ile 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 aşağıdaki arka plan görüntü ayarlarıyla bir kombinasyon halinde kullanın: Arka Plan Görüntü Boyutu: Kapak
Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Arka Plan Görüntü Karışımı: Ekran
Yapıştırıcı Bir sonraki boyut ayarlarını açın ve satırın kabın tüm genişliğini almasına izin verin. Özel Talang’ın genişliğini kullanın: Evet Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Genişlik:% 100
Maksimum genişlik:% 100
Bir sonraki satırdan tüm dolgunun varsayılan olarak yukarı ve aşağı mesafesini kaldırın. Bu, daha sonra bu yazıya eklediğimiz sütun 2’nin arka plan renginin sıra kabının ve parçalarının üst ve alt sınırlarına dokunmasını sağlayacaktır.
Üst dolgu: 0px Aşağıda dolgu: 0px
İki sütunun daha küçük bir ekran boyutunun yanında görünmesini sağlamak için, satırın ana öğesine bir CSS kod satırı ekleyeceğiz.
Ekran: Flex; Ayarlar Sütun 2 Renk Arka Planı Genel satır ayarlarını tamamladıktan sonra, ikinci sütun ayarlarını açıp açın. Beyaz bir arka plan rengi ekleyerek başlayın.
Arka plan rengi: #ffffff Filtre tasarım sekmesine geçer ve tüm sütuna bir karışım modu ekler.
Karışık Mod: Ekran Bölme modülünü sütun 1 görünürlüğüne ekleyin. İlk sütunda ihtiyacımız olan tek modül bölücü modülüdür. Bu modül, modülü getirmek zorunda kalmadan ilk sütunda yer açmamıza yardımcı olacaktır. Bölücü üzerindeki ‘Dispload’ seçeneğinin devre dışı bırakıldığından emin olun.
Divisor göster: hayır Mesafe boşluk ayarlarına geçer ve ilk sütunda yer açmak için bazı alt kenar boşlukları ekler.
H1 Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin: Yazı Tip Başlığı: Poppins Başlık Mektubu Ağırlığı: Kalınlık
Metin Rengi Başlık: #fffffffffe Boyut Metin Başlığı: 12VW
Uzay Mektubu Başlığı: -0.2VW
Mesafemiz ayrıca modülün etrafında biraz yer açar ve bazı özel marj değerleri uygulayarak sola iter. Negatif sol marj, bölünmüş karışım modu oluşturmada önemli bir rol oynar. Bu, kopyanın bir kısmının arka plan rengi içermeyen ilk sütunun altında görünmesini sağlar.
Üst Marj: 18VW
Alt marj: 2VW Sol kenar boşluğu: -27.3vw
Şimdi filtreleyin, bir sonraki adımda bir mucize oluşacak! Satırın arka planının görüntülenmesini sağlamak için modülleri ve kolon karışım modlarını birleştiriyoruz. Metin modülü için aşağıdaki karışım modunu seçtiğinizden emin olun:
Karışık Mod: Fark
Sütun 2’ye Metin Modülü #2 ekleyin İkinci modüle doldurun! İstediğiniz bazı içerikleri ekleyin. Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin Yazı Tipi: Poppins Hizalama metni: haklı çıkar Metin rengi: #000000
Metin Boyutu: 0.8VW (masaüstü), 1.5vw (tablet), 2.3vw (telefon)
Yüksek çizgi metin: 2.5EM (masaüstü ve tablet), 2.2em (telefon)
Mesafe Bir sonraki özel marj değerleri ekleyin.
Alt marj: 1VW
Sol kenar boşluğu: 5VW Sağ kenar boşluğu: 14VW (masaüstü), 4VW (tablet), 5VW (Telefon)
Bölücü modülünü Sütun 2’ye ekleyin Bir sonraki modüle, bölücü modülüne daha fazla görünürlük. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
Hattı tasarım sekmesine taşıyın ve uygun satır ayarlarını değiştirin: Çizgi rengi: #ffffff
Hat Gücü: Katı Hat Pozisyonu: Üst
Yapıştırıcı değişimi ayrıca bölücü boyutunun düzenlenmesi.
Bölücü ağırlığı: 0.7vw
Genişlik:% 9 Yükseklik: 0px
Mesafe ve bazı özel alan değerleri ekleyin.
Üst kenar: 2VW (masaüstü), 5VW (tablet ve cep telefonu)
Alt kenar boşluğu: 3VW (masaüstü), 6VW (tablet ve cep telefonu) Sol kenar boşluğu: 5VW Son fakat en az değil, satırların ve gradyanların arka plan görüntülerinin görüntülenmesini sağlamak için bir karışım modu uygulayın.
Karışık Mod: Fark
Düğme modülünü sütun 2’ye ekleyin Bir sonraki ve son olarak düğme modülüne bir kopya ekleyin. Seçtiğiniz bazı kopyaları girin.
Hizalama Tasarım sekmesine geçer ve düğmenin sola düzenleneceğinden emin olun. Düğmenin Aydınlanması: Sol
Düğme ayarlarını da değiştir düğmesini ayarlayın. Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 1VW (Masaüstü), 2VW (Tablet), 3VW (Telefon)
Metin Renk Düğmesi: #000000 Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Poppins
Mesafe ve son olarak, boşluk ayarlarına bazı özel kenar boşlukları ve dolgu değerleri ekleyin.
Alt kenar boşluğu: 10vw (masaüstü), 15VW (tablet ve cep telefonu)
Sol kenar boşluğu: 5VW
Üst Dolgu: 1VW Dolgu Alt: 1VW
Sol dolgu: 3VW
Doğru dolgu: 3VW
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.
YouTube kanalımıza abone olun, yaratıcı olmaya başlayalım! Mesafenin yeni bir bölümünü ekleyin Üzerinde çalıştığınız sayfaya yeni normal parçayı ekleyin ve tüm üst ve alt dolguyu silin.
Üst dolgu: 0px
Aşağıda dolgu: 0px
Kutunun gölgesi kutu gölge seçeneğine geçer ve pürüzsüz bir kutu gölgesi ekler. Bulanık Güç Gölgesi Kutusu: 70px
Gölge Rengi: RGBA (0.0,0,0.07)
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden gradyan arka planı, satır ayarlarını açın ve gradyanın arka planını uygulayın. Bu yazının bir sonraki adımında, gradyanın arka planını bir karışım modu kullanarak bir arka plan görüntüsü ile 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 aşağıdaki arka plan görüntü ayarlarıyla bir kombinasyon halinde kullanın: Arka Plan Görüntü Boyutu: Kapak
Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Arka Plan Görüntü Karışımı: Ekran
Yapıştırıcı Bir sonraki boyut ayarlarını açın ve satırın kabın tüm genişliğini almasına izin verin. Özel Talang’ın genişliğini kullanın: Evet Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Genişlik:% 100
Maksimum genişlik:% 100
Bir sonraki satırdan tüm dolgunun varsayılan olarak yukarı ve aşağı mesafesini kaldırın. Bu, daha sonra bu yazıya eklediğimiz sütun 2’nin arka plan renginin sıra kabının ve parçalarının üst ve alt sınırlarına dokunmasını sağlayacaktır.
Üst dolgu: 0px Aşağıda dolgu: 0px
İki sütunun daha küçük bir ekran boyutunun yanında görünmesini sağlamak için, satırın ana öğesine bir CSS kod satırı ekleyeceğiz.
Ekran: Flex; Ayarlar Sütun 2 Renk Arka Planı Genel satır ayarlarını tamamladıktan sonra, ikinci sütun ayarlarını açıp açın. Beyaz bir arka plan rengi ekleyerek başlayın.
Arka plan rengi: #ffffff Filtre tasarım sekmesine geçer ve tüm sütuna bir karışım modu ekler.
Karışık Mod: Ekran Bölme modülünü sütun 1 görünürlüğüne ekleyin. İlk sütunda ihtiyacımız olan tek modül bölücü modülüdür. Bu modül, modülü getirmek zorunda kalmadan ilk sütunda yer açmamıza yardımcı olacaktır. Bölücü üzerindeki ‘Dispload’ seçeneğinin devre dışı bırakıldığından emin olun.
Divisor göster: hayır Mesafe boşluk ayarlarına geçer ve ilk sütunda yer açmak için bazı alt kenar boşlukları ekler.
Alt marj: 50vw
Sütun 2’ye Metin Modülü #1 ekleyin H1 başlığı ikinci sütuna ekleyin! Burada başlık metin modülü ile başlayacağız. Seçtiğiniz bazı H1 içeriklerini girin.H1 Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin: Yazı Tip Başlığı: Poppins Başlık Mektubu Ağırlığı: Kalınlık
Metin Rengi Başlık: #fffffffffe Boyut Metin Başlığı: 12VW
Uzay Mektubu Başlığı: -0.2VW
Mesafemiz ayrıca modülün etrafında biraz yer açar ve bazı özel marj değerleri uygulayarak sola iter. Negatif sol marj, bölünmüş karışım modu oluşturmada önemli bir rol oynar. Bu, kopyanın bir kısmının arka plan rengi içermeyen ilk sütunun altında görünmesini sağlar.
Üst Marj: 18VW
Alt marj: 2VW Sol kenar boşluğu: -27.3vw
Şimdi filtreleyin, bir sonraki adımda bir mucize oluşacak! Satırın arka planının görüntülenmesini sağlamak için modülleri ve kolon karışım modlarını birleştiriyoruz. Metin modülü için aşağıdaki karışım modunu seçtiğinizden emin olun:
Karışık Mod: Fark
Sütun 2’ye Metin Modülü #2 ekleyin İkinci modüle doldurun! İstediğiniz bazı içerikleri ekleyin. Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin Yazı Tipi: Poppins Hizalama metni: haklı çıkar Metin rengi: #000000
Metin Boyutu: 0.8VW (masaüstü), 1.5vw (tablet), 2.3vw (telefon)
Yüksek çizgi metin: 2.5EM (masaüstü ve tablet), 2.2em (telefon)
Mesafe Bir sonraki özel marj değerleri ekleyin.
Alt marj: 1VW
Sol kenar boşluğu: 5VW Sağ kenar boşluğu: 14VW (masaüstü), 4VW (tablet), 5VW (Telefon)
Bölücü modülünü Sütun 2’ye ekleyin Bir sonraki modüle, bölücü modülüne daha fazla görünürlük. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
Hattı tasarım sekmesine taşıyın ve uygun satır ayarlarını değiştirin: Çizgi rengi: #ffffff
Hat Gücü: Katı Hat Pozisyonu: Üst
Yapıştırıcı değişimi ayrıca bölücü boyutunun düzenlenmesi.
Bölücü ağırlığı: 0.7vw
Genişlik:% 9 Yükseklik: 0px
Mesafe ve bazı özel alan değerleri ekleyin.
Üst kenar: 2VW (masaüstü), 5VW (tablet ve cep telefonu)
Alt kenar boşluğu: 3VW (masaüstü), 6VW (tablet ve cep telefonu) Sol kenar boşluğu: 5VW Son fakat en az değil, satırların ve gradyanların arka plan görüntülerinin görüntülenmesini sağlamak için bir karışım modu uygulayın.
Karışık Mod: Fark
Düğme modülünü sütun 2’ye ekleyin Bir sonraki ve son olarak düğme modülüne bir kopya ekleyin. Seçtiğiniz bazı kopyaları girin.
Hizalama Tasarım sekmesine geçer ve düğmenin sola düzenleneceğinden emin olun. Düğmenin Aydınlanması: Sol
Düğme ayarlarını da değiştir düğmesini ayarlayın. Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 1VW (Masaüstü), 2VW (Tablet), 3VW (Telefon)
Metin Renk Düğmesi: #000000 Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Poppins
Mesafe ve son olarak, boşluk ayarlarına bazı özel kenar boşlukları ve dolgu değerleri ekleyin.
Alt kenar boşluğu: 10vw (masaüstü), 15VW (tablet ve cep telefonu)
Sol kenar boşluğu: 5VW
Üst Dolgu: 1VW Dolgu Alt: 1VW
Sol dolgu: 3VW
Doğru dolgu: 3VW
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.
