İnanılmaz karıştırma efektleri oluşturmak için Divi’nin yeni sütun filtre ayarlarını kullanın
Divi’nin yeni sütun filtresi ayarları birçok yaratıcı şekilde kullanılabilir. Bu yazıda, ana satırın arka plan görüntüsünün sütun içeriği ile nasıl birleştirileceğini göstereceğiz. İnanılmaz efektler oluşturmak için modüle farklı bir renk gradyanı ve karışık “ekran” modülü ekleyeceğiz. Bu tasarımın size bir sonraki Divi projenizde sütun karışım modunu kullanmanız için ilham vereceğini umuyoruz. JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Masaüstü
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.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Yaratıcı başlayalım!
YouTube kanalına abone Olun, üç sütun satırı ile yeni bir parça ekleyerek tasarlamaya başlayan 3 sütunlu bir satırla yeni bir parça ekliyoruz.
Aralık Bölümü Bölümün ayarlarını açın ve alanı ayarlayın. Sol ve sağ kenar boşluğu: 3VW
Üst ve Alt Dolgu: 84 piksel
Arka plan çizgisi ayarları Herhangi bir modül eklemeden önce satır ayarlarını değiştireceğiz. Arka plan rengi ekleyerek başlayın. Arka Plan Rengi: Orta Gri #C4C4C4
Ardından, arka plan görüntülerini yükleyin ve arka plan renklerini karışık modlar kullanarak görüntülerle karıştırın. Arka plan görüntü karışımı: çarpın
Yapışkan Bir sonraki satır boyutu ayarlarını ayarlayın. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek Eşitle Sütun: Evet
Genişlik:% 100
Maksimum genişlik:% 100
Varsayılan satır dolgunun mesafesini kaldırın. Üst ve alt dolgu: 0px
Kutunun gölgesi sıraya basit bir kutu gölgesi ekleyerek devam eder. Kutu Gölgesi: İlk Seçenek
Görünürlük Görünürlük sekmesindeki Z dizinini ayarlar. Z-index: 1
Stil Sütun 1 İlk sütun ayarlarını girin. Filtre Ekran Karışım Modunu Filtre sekmesindeki sütuna uygulayın. Karışık Mod: Ekran
Dönüşüm Ölçeğini Dönüşüm Seçenek Grubuna yönlendirin ve Hover Dönüşüm Ölçeği ayarlarını değiştirin. Dönüşüm Ölçeği: X ve Y ekseninde% 105
Görünürlük Sütun Görünürlüğü sekmesine girer ve taşma ayarlarını ayarlar. Yatay taşma: görünür
Dikey taşma: görünür
Geçiş geçiş sekmesine geçer ve düzgün bir geçiş yapmak için geçiş süresini ayarlar. Geçiş Süresi: 500 MDT Metin modülünü üç metin modülü içeren her sütun 1 sütun 1’e ekledi. İlk metin modülünü seçtiğiniz bazı H2 içeriğiyle Sütun 1’e ekleyin ve ayarları aşağıdaki gibi ayarlayın.
Renk gradyanı ile arka plan tarzı arka plan. Arka plan: gradyan Gradyan Renk Bir: #5498ff
Gradyan Renk İki: #16FFF3
Gradyan yönü: 235 derece
Başlangıç Pozisyonu:% 37
Mesafe Bir sonraki özel alan değerleri ekleyin.
Üst ve Alt Dolgu: 6VW
Başlık 2 Renk Metni: Siyah #OOOOOO
Başlık 2 Metin Boyutu:
Masaüstü: 5VW
Tablet: 11vw
Telefon: 13VW
Post 2 hat yüksekliği:
Masaüstü: 4.3vw
Tablet: 9VW
Telefon: 10.5vw
Filtreler, ayarları filtrelemek ve ekran karışımı modu eklemek için hareket eder.
Karışık Mod: Ekran Sütun 1’e 2. metin modülünü ekleyin.
Metin modülü stili aşağıdaki gibi: arka plan beyaz bir arka plan rengi ekleyin. Arka plan rengi: beyaz #ffffff Tasarım sekmesine girilen metin ve metni ayarlayın:
Metin yazı tipi: Montserrat Hizalama metni: haklı
Metin Rengi: Koyu Gri #333333
Yazı Boyutu:
Masaüstü: 0.8VW
Tablet: 2VW
Telefon: 2.5vw
Uzay metin mektubu: -0.04vw
Yüksek satır metin:
Masaüstü: 2.7vw
Tablet: 5.5vw
Telefon: 6VW
Aralık, metnin etrafında boş alanlar yapmak için boşluk ayarlarını da ayarlar.
Üst ve alt kenar boşlukları: 0.5vw Üst ve Alt Dolgu:
Masaüstü: 5VW
Tablet + Telefon: 15VW
Sol dolgu: 5VW
Doğru yatak:
Masaüstü: 5VW
Tablet + Telefon: 25VW
Son fakat en az değil, Filtre sekmesine ekran karışımı modunu uygulayın. Karışık Mod: Ekran
Sütun tasarımını tamamlamak için 3. metin modülünü sütun 1’e ekleyin, üçüncü metin modülünü birkaç kopya ile ekleyin. Bu modülün tamamını bir düğme olarak kullanıyoruz. Modül stili aşağıdaki gibi: Bir bağlantı ekle bağlantı ayarlarına seçim bağlantısı ekleyin. Birisi modülün herhangi bir yerine tıklanır tıkladığı anda, başka bir yere yönlendirilir.
Arka plan gradyan kuvveti ilk metin modülüne uyacak şekilde. Arka plan: gradyan Gradyan Renk Arka Plan Bir: #5498ff Gradyan renk arka planı iki: #16fff3
Gradyan yönü: 235 derece
Tasarım sekmesine ve metin stiline aşağıdaki gibi girilen metin:
Metin yazı tipi: Montserrat
Metin yazı tipi: Ağırlık Metin yazı tipi stili: altı çizili
Renk Alt Çizgi Metin: Beyaz #ffffff
Metin Rengi: Siyah #000000
Yazı Boyutu:
Masaüstü: 1.5vw
Tablet: 3.3vw
Telefon: 4VW
Hat yüksekliği metni: 1em
Mesafe, metnin modülde daha uygun hale getirmek için boşluk ayarlarını ayarlar.
Üst ve Alt Dolgu:
Masaüstü: 2VW Tablet: 6VW
Telefon: 9VW
Sol dolgu: 3VW
İlk sütunu bitirdikten, satır ayarlarını açtıktan ve ikinci ve üçüncü sütunları sildikten sonra Sütun 1’i iki kez kopyalayın. 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 gerekiyor.
Sütun 2 / Metin Modülü 1 Arka Plan
İlk metin modülünün arka planını farklı bir renk gradyanına değiştirin. Gradyan Renk Arka Plan Bir: #C870FF Gradyan renk arka planı iki: #ff355a
Sütun 2 / Metin Modülü 2 Gölge Kutusu
Ardından, iç kutu gölgesini metin modülüne 2 ekleyin.
Gölge Kutusu: Altıncı Seçenek Bulanık Güç Gölgesi Kutusu: 20px
Kutu Stoklarının Mukavemeti Kutusu: 17px Gölge Renk Kutusu: 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ı ilk modülle eşleşecek şekilde ayarlayın.
Gradyan Renk Arka Plan Bir: #C870FF
Gradyan renk arka planı iki: #ff355a
Sütun 3 / Modül Metin 1 Üçüncü sütuna arka plan! Metin modülünün gradyanının arka planını değiştir 1 Uygun: Gradyan Renk Arka Plan Bir: #FF4800
Gradyan rengi arka plan iki: #fc9a2a
Sütun 2 / Metin Modülü 3 Arka Plan Üçüncü metin modülü için aynı gradyan arka planını kullanın.
Gradyan Renk Arka Plan Bir: #FF4800
Gradyan rengi arka plan iki: #fc9a2a Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Bu, bu yazıda bir sargıdır, size Divi sütun ayarlarını kullanarak inanılmaz bir kombinasyon efekti ile üç sütun tasarımının nasıl oluşturulacağını gösteriyoruz. Yaptığınız herhangi bir web sitesinde kullanabileceğiniz güzel sonuçları elde etmek için modül ayarlarını, sütunları ve satırları birleştirdik. Bu öğretici de kendi alternatif tasarımınızı yaratmanız için size ilham vermesini umuyoruz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Yaratıcı başlayalım!
YouTube kanalına abone Olun, üç sütun satırı ile yeni bir parça ekleyerek tasarlamaya başlayan 3 sütunlu bir satırla yeni bir parça ekliyoruz.
Aralık Bölümü Bölümün ayarlarını açın ve alanı ayarlayın. Sol ve sağ kenar boşluğu: 3VW
Üst ve Alt Dolgu: 84 piksel
Arka plan çizgisi ayarları Herhangi bir modül eklemeden önce satır ayarlarını değiştireceğiz. Arka plan rengi ekleyerek başlayın. Arka Plan Rengi: Orta Gri #C4C4C4
Ardından, arka plan görüntülerini yükleyin ve arka plan renklerini karışık modlar kullanarak görüntülerle karıştırın. Arka plan görüntü karışımı: çarpın
Yapışkan Bir sonraki satır boyutu ayarlarını ayarlayın. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek Eşitle Sütun: Evet
Genişlik:% 100
Maksimum genişlik:% 100
Varsayılan satır dolgunun mesafesini kaldırın. Üst ve alt dolgu: 0px
Kutunun gölgesi sıraya basit bir kutu gölgesi ekleyerek devam eder. Kutu Gölgesi: İlk Seçenek
Görünürlük Görünürlük sekmesindeki Z dizinini ayarlar. Z-index: 1
Stil Sütun 1 İlk sütun ayarlarını girin. Filtre Ekran Karışım Modunu Filtre sekmesindeki sütuna uygulayın. Karışık Mod: Ekran
Dönüşüm Ölçeğini Dönüşüm Seçenek Grubuna yönlendirin ve Hover Dönüşüm Ölçeği ayarlarını değiştirin. Dönüşüm Ölçeği: X ve Y ekseninde% 105
Görünürlük Sütun Görünürlüğü sekmesine girer ve taşma ayarlarını ayarlar. Yatay taşma: görünür
Dikey taşma: görünür
Geçiş geçiş sekmesine geçer ve düzgün bir geçiş yapmak için geçiş süresini ayarlar. Geçiş Süresi: 500 MDT Metin modülünü üç metin modülü içeren her sütun 1 sütun 1’e ekledi. İlk metin modülünü seçtiğiniz bazı H2 içeriğiyle Sütun 1’e ekleyin ve ayarları aşağıdaki gibi ayarlayın.
Renk gradyanı ile arka plan tarzı arka plan. Arka plan: gradyan Gradyan Renk Bir: #5498ff
Gradyan Renk İki: #16FFF3
Gradyan yönü: 235 derece
Başlangıç Pozisyonu:% 37
Mesafe Bir sonraki özel alan değerleri ekleyin.
Üst ve Alt Dolgu: 6VW
Sol ve sağ dolgu: 3VW
Başlık Metni Başlık metin ayarlarını ve uygun H2 Metin Ayarları stilini girin:
Başlık 2 Font Ağırlığı: Ultra Kalın
Başlık 2 Renk Metni: Siyah #OOOOOO
Başlık 2 Metin Boyutu:
Masaüstü: 5VW
Tablet: 11vw
Telefon: 13VW
Post 2 hat yüksekliği:
Masaüstü: 4.3vw
Tablet: 9VW
Telefon: 10.5vw
Filtreler, ayarları filtrelemek ve ekran karışımı modu eklemek için hareket eder.
Karışık Mod: Ekran Sütun 1’e 2. metin modülünü ekleyin.
Metin modülü stili aşağıdaki gibi: arka plan beyaz bir arka plan rengi ekleyin. Arka plan rengi: beyaz #ffffff Tasarım sekmesine girilen metin ve metni ayarlayın:
Metin yazı tipi: Montserrat Hizalama metni: haklı
Metin Rengi: Koyu Gri #333333
Yazı Boyutu:
Masaüstü: 0.8VW
Tablet: 2VW
Telefon: 2.5vw
Uzay metin mektubu: -0.04vw
Yüksek satır metin:
Masaüstü: 2.7vw
Tablet: 5.5vw
Telefon: 6VW
Aralık, metnin etrafında boş alanlar yapmak için boşluk ayarlarını da ayarlar.
Üst ve alt kenar boşlukları: 0.5vw Üst ve Alt Dolgu:
Masaüstü: 5VW
Tablet + Telefon: 15VW
Sol dolgu: 5VW
Doğru yatak:
Masaüstü: 5VW
Tablet + Telefon: 25VW
Son fakat en az değil, Filtre sekmesine ekran karışımı modunu uygulayın. Karışık Mod: Ekran
Sütun tasarımını tamamlamak için 3. metin modülünü sütun 1’e ekleyin, üçüncü metin modülünü birkaç kopya ile ekleyin. Bu modülün tamamını bir düğme olarak kullanıyoruz. Modül stili aşağıdaki gibi: Bir bağlantı ekle bağlantı ayarlarına seçim bağlantısı ekleyin. Birisi modülün herhangi bir yerine tıklanır tıkladığı anda, başka bir yere yönlendirilir.
Arka plan gradyan kuvveti ilk metin modülüne uyacak şekilde. Arka plan: gradyan Gradyan Renk Arka Plan Bir: #5498ff Gradyan renk arka planı iki: #16fff3
Gradyan yönü: 235 derece
Tasarım sekmesine ve metin stiline aşağıdaki gibi girilen metin:
Metin yazı tipi: Montserrat
Metin yazı tipi: Ağırlık Metin yazı tipi stili: altı çizili
Renk Alt Çizgi Metin: Beyaz #ffffff
Metin Rengi: Siyah #000000
Yazı Boyutu:
Masaüstü: 1.5vw
Tablet: 3.3vw
Telefon: 4VW
Hat yüksekliği metni: 1em
Mesafe, metnin modülde daha uygun hale getirmek için boşluk ayarlarını ayarlar.
Üst ve Alt Dolgu:
Masaüstü: 2VW Tablet: 6VW
Telefon: 9VW
Sol dolgu: 3VW
İlk sütunu bitirdikten, satır ayarlarını açtıktan ve ikinci ve üçüncü sütunları sildikten sonra Sütun 1’i iki kez kopyalayın. 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 gerekiyor.
Sütun 2 / Metin Modülü 1 Arka Plan
İlk metin modülünün arka planını farklı bir renk gradyanına değiştirin. Gradyan Renk Arka Plan Bir: #C870FF Gradyan renk arka planı iki: #ff355a
Sütun 2 / Metin Modülü 2 Gölge Kutusu
Ardından, iç kutu gölgesini metin modülüne 2 ekleyin.
Gölge Kutusu: Altıncı Seçenek Bulanık Güç Gölgesi Kutusu: 20px
Kutu Stoklarının Mukavemeti Kutusu: 17px Gölge Renk Kutusu: 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ı ilk modülle eşleşecek şekilde ayarlayın.
Gradyan Renk Arka Plan Bir: #C870FF
Gradyan renk arka planı iki: #ff355a
Sütun 3 / Modül Metin 1 Üçüncü sütuna arka plan! Metin modülünün gradyanının arka planını değiştir 1 Uygun: Gradyan Renk Arka Plan Bir: #FF4800
Gradyan rengi arka plan iki: #fc9a2a
Sütun 2 / Metin Modülü 3 Arka Plan Üçüncü metin modülü için aynı gradyan arka planını kullanın.
Gradyan Renk Arka Plan Bir: #FF4800
Gradyan rengi arka plan iki: #fc9a2a Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Bu, bu yazıda bir sargıdır, size Divi sütun ayarlarını kullanarak inanılmaz bir kombinasyon efekti ile üç sütun tasarımının nasıl oluşturulacağını gösteriyoruz. Yaptığınız herhangi bir web sitesinde kullanabileceğiniz güzel sonuçları elde etmek için modül ayarlarını, sütunları ve satırları birleştirdik. Bu öğretici de kendi alternatif tasarımınızı yaratmanız için size ilham vermesini umuyoruz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
