Divi ile güzel bir bulanıklık arka planı nasıl yapılır
Gradyanın mevcut arka planı, karşılaştığınız hemen hemen her modern web sitesinin bir parçasıdır. Ancak daha karmaşık bir gradyan yapmak istediğinizde, görüntü düzenleme yazılımını kullanma eğiliminde olabilirsiniz. Divi ile bir alternatif var. Divi’nin sahip olduğu birçok doğuştan gelen seçenek sayesinde, görüntü modülünü bulanık bir arka plan haline getirebilirsiniz. Arka planı sadece rengin göründüğü noktaya gizleyeceğiz ve böylece bir gradyan oluşturacağız. Başından beri güzel bir örnek oluşturacağız ve ayrıca JSON dosya tasarımlarının örneklerini ücretsiz olarak paylaşacağız!
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. 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!
Yaklaşmak
Bir sütuna üç farklı modül ekledik; İki görüntü modülü ve bir CTA modülü
İlk görüntü ilk görünümünü korur
İkinci resim gömülecek ve boyut artacak
Görüntü modülünde yer alan diğer filtre ayarlarıyla oynayarak rengi de artıracağız
CTA modülü, bulanık bir görüntü modülü ile örtüşecek ve arka plan olarak kullanacak
#2 modül modülünün boyutundaki bulanıklık ve artışın sütun kabını aşmamasını sağlamak için, sütun taşmasını gizleyeceğiz
Yaratıcı olmaya başlayalım
YouTube kanalına abone Olun, üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek yeni bir bölüm başlangıç ekliyoruz.
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 yapıştırıcı, satır ayarlarını açın ve tasarım sekmesindeki boyut ayarlarını değiştirin. Özel Talang genişliği kullanın: evet
Talang genişliği: 2
Maksimum genişlik:% 100
Sütun 2, devam eden sekmeye taştı ve bir CSS kod satırı kullanarak sütun 2 taşmasını gizledi. Bunu yapmak, hiçbir şeyin sütun kabını aşmamasını sağlamamıza yardımcı olacaktır. Bu, özellikle görüntü modülünü bulanık bir arka plana dönüştürmeye başladıktan ve boyutunu artırdıktan sonra önemli olacaktır. Taşma: gizli; Sütun 3 Taşmaları üçüncü sütun için de aynısını yapar. Taşma: gizli;
1 numaralı metin modülünü Sütun 1’e ekleyin H2’nin bir kopyasını ekleyin, ilk sütundaki metin modülünden başlayarak modülü eklemeye başlama zamanı. H2 içerik seçiminizden bir miktar girin. H2 Metin Ayarları Tasarım sekmesine geçin ve H2 metin ayarlarını değiştirin. Başlık 2 Yazı Tipi: Poppins Başlık 2 Renk Metni: #232323
Başlık 2 Metin Boyutu: 40 PX
Mesafe Özellik üzerine bazı kenar boşlukları da ekleyin.
Üst Marj: 9VW Bölme modülünü Sütun 1’e Sütun 1 görünürlüğüne ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet Hat tasarım sekmesine geçer ve çizginin rengini değiştirir.
Çizgi rengi: #000000 Sütun 1’e #2 metin modülünü ekleyin Dolgu ekleyin, seçeneğiniz paragraf içeriğinizi içeren başka bir metin modülü ekleyerek devam edin.
Metin Ayarları Sonraki metin ayarlarını değiştirir. Metin Yazı Tipi: Poppins Metin yazı tipi ağırlığı: ışık
Metin Boyutu: 17 piksel
Yüksek çizgi metin: 2.1em
Düğme modülünü Sütun 1’e ekleyin Bir sonraki bölümün bir kopyasını ekleyin ve son olarak 1 sütundaki ihtiyacımız olan düğme modülüdür. Seçtiğiniz bazı kopyaları girin.
Düğme Ayarları’ndaki Tasarım sekmesine ve düğme stiline hareket düğmesini ayarlayın. Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 20px
Metin Renk Düğmesi: #000000
Arka Plan Renk Düğmesi: #F4F4F4
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Poppins
Mektup Ağırlığı Düğmesi: Kalın
Yazı tipi stili düğmesi: büyük harf
Mesafe Bazı özel alan değerleri de ekleyin.
Üst kenar boşluğu: 20px Alt kenar boşluğu: 20 piksel
Üst dolgu: 20px
Dolgu Alt: 20 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 50px
Modül Şekil #1’i Sütun 2’ye ekleyin Şekil 1: 1’i ikinci sütuna yükleyin! Burada ihtiyacımız olan ilk modül bir görüntü modülü. 1: 1 oranında görüntü yükleyin. Bu, görüntünüzün mükemmel bir kare olması gerektiği anlamına gelir (genişlik yükseklikle aynı olmalıdır).
Yapıştırıcı tasarım sekmesine geçti ve ‘Force Fullwidth’ seçeneğini etkinleştirdi. Tam geniş zorla: Evet Sütun 2’ye Modül Şekil #2 ekleyin Şekil 1: 1 Sütun 2’de ihtiyacımız olan ikinci modül başka bir görüntü modülüdür. Bir kez daha, 1: 1 oranında görüntüler kullanıyoruz.
Yapıştırıcı tasarım sekmesine taşındı ve boyut ayarlarını değiştirdi. Tam geniş zorla: Evet Yükseklik: 320 piksel
Bazı negatif kenar boşlukları ekleyerek bu ve önceki modül arasında örtüşmek için mesafe.
Üst Marj: -100 piksel Bir sonraki filtre, filtre ayarlarını değiştireceğiz. Bu, görüntüyü bulanık bir arka plana dönüştürdüğümüz kısımdır.
Doygunluk:% 200 Parlaklık:% 145
Kontrast:% 117
Yüzlü: 40 piksel
Ölçek dönüşümü Görüntülerin tüm sütun genişliğini kapsadığından emin olmak için dönüşüm ayarlarındaki boyutu artıracağız. Satır ayarlarına eklediğimiz gizli sütun taşması sayesinde kimse sütun kabını aşmayacaktır.
Doğru:% 180 Aşağıda:% 180
CTA modülünü sütun 2’ye ekleyin, bir sonraki içeriğin içeriğini ekleyin ve son olarak ikinci sütunda ihtiyacımız olan şey CTA modülüdür. Seçtiğiniz bazı kopyaları girin.
Bağlantı ayarlarına taşımak için bağlantıyı ekleyin ve düğmeyi tasarımda görünmesini sağlamak için düğme bağlantısının URL’sini ekleyin. Arka plan rengini silin Arka plan rengini silin. Arka plan rengini kullanın: hayır Başlık Metni Ayarları Tasarım sekmesini açarak ve başlık metninin başlığını değiştirerek devam edin. Başlık Başlığı Seviyesi: H3
Yazı Tip Başlığı: Poppins Başlık Metin Boyutu: 40 PX
Başlık mektubu aralığı: -1px
Gövde metnini ayarlamak İçindekiler metin ayarlarını da değiştirir.
Gövde yazı tipi: Poppins
Vücut ağırlığı: ışık Vücut Hattı Yüksekliği: 2.2em
Düğmeyi düğme ayarlarıyla birlikte ayarlayın.
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 20px Metin Renk Düğmesi: #fffffff
Gradyan Renk 1: RGBA (244,244,244.0.4)
Gradyan Rengi 2: RGBA (255,255,255.0)
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Poppins
Mektup Ağırlığı Düğmesi: Kalın
Yazı tipi stili düğmesi: büyük harf
Üst kenar boşluğu: 50 piksel
Üst dolgu: 20px
Dolgu Alt: 20 piksel Sol dolgu: 50 piksel
Sağ dolgu: 50px
Son fakat en az değil, bazı negatif üst kenarlar ekleyerek bu modül ve opak arka plan arasında örtüşme yapın. Ayrıca modülün sol ve sağ taraflarında bazı beyaz boşluklar bıraktık
Üst Marj: -250px
Sol dolgu: 2VW Doğru dolgu: 2VW
Tüm modülleri sütun 2 ve yinelendirmedeki tüm modülleri klonlamak İkinci sütunda tüm modülleri bitirdikten sonra, klonlayabilir ve kopyayı üçüncü sütuna yerleştirebilirsiniz.
Değiştirme Görüntü Modülünü Değiştir #1 Modülde Görüntü Değiştir Görüntünü Değiştir Görüntü #1.
Değiştir yinelenen yinelenen görüntü modülü #2 Görüntüyü Değiştir Sütundaki ikinci görüntü modülü için de aynısını yapın. Filtre ayarlarını değiştirin ve filtre ayarlarını ikinci görüntü modülünden de değiştirin. Doygunluk:% 180 Parlaklık:% 102 Kontrast:% 117
Yüzlü: 35px
CTA Duplicate Modül Değiştir kopyası CTA modülü içeriğini değiştirerek devam edin.
İlk düğme gradyan rengi ile birlikte gradyan düğmesinin arka planını değiştirin ve bitmişsiniz!
Gradyan Renk 1: RGBA (244,244,244.0.15) Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü Hücresel
Bu yazıdaki son zihin, yalnızca varsayılan Divi seçeneğini kullanarak nasıl bulanık bir arka plan yapacağınızı gösterdik. Başlangıçtan, oluşturduğunuz her türlü web sitesi için kullanabileceğiniz güzel bir örnek oluşturduk. Bu öğretici, bu öğreticide paylaşılan ipuçlarını kullanarak kendi özel tasarımınızı oluşturmanıza ilham verir. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
Yaklaşmak
Bir sütuna üç farklı modül ekledik; İki görüntü modülü ve bir CTA modülü
İlk görüntü ilk görünümünü korur
İkinci resim gömülecek ve boyut artacak
Görüntü modülünde yer alan diğer filtre ayarlarıyla oynayarak rengi de artıracağız
CTA modülü, bulanık bir görüntü modülü ile örtüşecek ve arka plan olarak kullanacak
#2 modül modülünün boyutundaki bulanıklık ve artışın sütun kabını aşmamasını sağlamak için, sütun taşmasını gizleyeceğiz
Yaratıcı olmaya başlayalım
YouTube kanalına abone Olun, üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek yeni bir bölüm başlangıç ekliyoruz.
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 yapıştırıcı, satır ayarlarını açın ve tasarım sekmesindeki boyut ayarlarını değiştirin. Özel Talang genişliği kullanın: evet
Talang genişliği: 2
Maksimum genişlik:% 100
Sütun 2, devam eden sekmeye taştı ve bir CSS kod satırı kullanarak sütun 2 taşmasını gizledi. Bunu yapmak, hiçbir şeyin sütun kabını aşmamasını sağlamamıza yardımcı olacaktır. Bu, özellikle görüntü modülünü bulanık bir arka plana dönüştürmeye başladıktan ve boyutunu artırdıktan sonra önemli olacaktır. Taşma: gizli; Sütun 3 Taşmaları üçüncü sütun için de aynısını yapar. Taşma: gizli;
1 numaralı metin modülünü Sütun 1’e ekleyin H2’nin bir kopyasını ekleyin, ilk sütundaki metin modülünden başlayarak modülü eklemeye başlama zamanı. H2 içerik seçiminizden bir miktar girin. H2 Metin Ayarları Tasarım sekmesine geçin ve H2 metin ayarlarını değiştirin. Başlık 2 Yazı Tipi: Poppins Başlık 2 Renk Metni: #232323
Başlık 2 Metin Boyutu: 40 PX
Mesafe Özellik üzerine bazı kenar boşlukları da ekleyin.
Üst Marj: 9VW Bölme modülünü Sütun 1’e Sütun 1 görünürlüğüne ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet Hat tasarım sekmesine geçer ve çizginin rengini değiştirir.
Çizgi rengi: #000000 Sütun 1’e #2 metin modülünü ekleyin Dolgu ekleyin, seçeneğiniz paragraf içeriğinizi içeren başka bir metin modülü ekleyerek devam edin.
Metin Ayarları Sonraki metin ayarlarını değiştirir. Metin Yazı Tipi: Poppins Metin yazı tipi ağırlığı: ışık
Metin Boyutu: 17 piksel
Yüksek çizgi metin: 2.1em
Düğme modülünü Sütun 1’e ekleyin Bir sonraki bölümün bir kopyasını ekleyin ve son olarak 1 sütundaki ihtiyacımız olan düğme modülüdür. Seçtiğiniz bazı kopyaları girin.
Düğme Ayarları’ndaki Tasarım sekmesine ve düğme stiline hareket düğmesini ayarlayın. Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 20px
Metin Renk Düğmesi: #000000
Arka Plan Renk Düğmesi: #F4F4F4
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Poppins
Mektup Ağırlığı Düğmesi: Kalın
Yazı tipi stili düğmesi: büyük harf
Mesafe Bazı özel alan değerleri de ekleyin.
Üst kenar boşluğu: 20px Alt kenar boşluğu: 20 piksel
Üst dolgu: 20px
Dolgu Alt: 20 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 50px
Modül Şekil #1’i Sütun 2’ye ekleyin Şekil 1: 1’i ikinci sütuna yükleyin! Burada ihtiyacımız olan ilk modül bir görüntü modülü. 1: 1 oranında görüntü yükleyin. Bu, görüntünüzün mükemmel bir kare olması gerektiği anlamına gelir (genişlik yükseklikle aynı olmalıdır).
Yapıştırıcı tasarım sekmesine geçti ve ‘Force Fullwidth’ seçeneğini etkinleştirdi. Tam geniş zorla: Evet Sütun 2’ye Modül Şekil #2 ekleyin Şekil 1: 1 Sütun 2’de ihtiyacımız olan ikinci modül başka bir görüntü modülüdür. Bir kez daha, 1: 1 oranında görüntüler kullanıyoruz.
Yapıştırıcı tasarım sekmesine taşındı ve boyut ayarlarını değiştirdi. Tam geniş zorla: Evet Yükseklik: 320 piksel
Bazı negatif kenar boşlukları ekleyerek bu ve önceki modül arasında örtüşmek için mesafe.
Üst Marj: -100 piksel Bir sonraki filtre, filtre ayarlarını değiştireceğiz. Bu, görüntüyü bulanık bir arka plana dönüştürdüğümüz kısımdır.
Doygunluk:% 200 Parlaklık:% 145
Kontrast:% 117
Yüzlü: 40 piksel
Ölçek dönüşümü Görüntülerin tüm sütun genişliğini kapsadığından emin olmak için dönüşüm ayarlarındaki boyutu artıracağız. Satır ayarlarına eklediğimiz gizli sütun taşması sayesinde kimse sütun kabını aşmayacaktır.
Doğru:% 180 Aşağıda:% 180
CTA modülünü sütun 2’ye ekleyin, bir sonraki içeriğin içeriğini ekleyin ve son olarak ikinci sütunda ihtiyacımız olan şey CTA modülüdür. Seçtiğiniz bazı kopyaları girin.
Bağlantı ayarlarına taşımak için bağlantıyı ekleyin ve düğmeyi tasarımda görünmesini sağlamak için düğme bağlantısının URL’sini ekleyin. Arka plan rengini silin Arka plan rengini silin. Arka plan rengini kullanın: hayır Başlık Metni Ayarları Tasarım sekmesini açarak ve başlık metninin başlığını değiştirerek devam edin. Başlık Başlığı Seviyesi: H3
Yazı Tip Başlığı: Poppins Başlık Metin Boyutu: 40 PX
Başlık mektubu aralığı: -1px
Gövde metnini ayarlamak İçindekiler metin ayarlarını da değiştirir.
Gövde yazı tipi: Poppins
Vücut ağırlığı: ışık Vücut Hattı Yüksekliği: 2.2em
Düğmeyi düğme ayarlarıyla birlikte ayarlayın.
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 20px Metin Renk Düğmesi: #fffffff
Gradyan Renk 1: RGBA (244,244,244.0.4)
Gradyan Rengi 2: RGBA (255,255,255.0)
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Poppins
Mektup Ağırlığı Düğmesi: Kalın
Yazı tipi stili düğmesi: büyük harf
Üst kenar boşluğu: 50 piksel
Üst dolgu: 20px
Dolgu Alt: 20 piksel Sol dolgu: 50 piksel
Sağ dolgu: 50px
Son fakat en az değil, bazı negatif üst kenarlar ekleyerek bu modül ve opak arka plan arasında örtüşme yapın. Ayrıca modülün sol ve sağ taraflarında bazı beyaz boşluklar bıraktık
Üst Marj: -250px
Sol dolgu: 2VW Doğru dolgu: 2VW
Tüm modülleri sütun 2 ve yinelendirmedeki tüm modülleri klonlamak İkinci sütunda tüm modülleri bitirdikten sonra, klonlayabilir ve kopyayı üçüncü sütuna yerleştirebilirsiniz.
Değiştirme Görüntü Modülünü Değiştir #1 Modülde Görüntü Değiştir Görüntünü Değiştir Görüntü #1.
Değiştir yinelenen yinelenen görüntü modülü #2 Görüntüyü Değiştir Sütundaki ikinci görüntü modülü için de aynısını yapın. Filtre ayarlarını değiştirin ve filtre ayarlarını ikinci görüntü modülünden de değiştirin. Doygunluk:% 180 Parlaklık:% 102 Kontrast:% 117
Yüzlü: 35px
CTA Duplicate Modül Değiştir kopyası CTA modülü içeriğini değiştirerek devam edin.
İlk düğme gradyan rengi ile birlikte gradyan düğmesinin arka planını değiştirin ve bitmişsiniz!
Gradyan Renk 1: RGBA (244,244,244.0.15) Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü Hücresel
Bu yazıdaki son zihin, yalnızca varsayılan Divi seçeneğini kullanarak nasıl bulanık bir arka plan yapacağınızı gösterdik. Başlangıçtan, oluşturduğunuz her türlü web sitesi için kullanabileceğiniz güzel bir örnek oluşturduk. Bu öğretici, bu öğreticide paylaşılan ipuçlarını kullanarak kendi özel tasarımınızı oluşturmanıza ilham verir. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
