Divi ile Güzel Bulanık Arka Planlar Nasıl Oluşturulur

Gradyan arka planları günümüzde karşılaştığınız hemen hemen her modern web sitesinin bir parçasıdır. Ancak daha karmaşık bir gradyan oluşturmak istediğinizde, muhtemelen görüntü düzenleme yazılımına yönelirsiniz. Divi ile bir alternatif var. Divi'nin sahip olduğu birçok yerleşik seçenek sayesinde, Görüntü Modüllerini bulanık arka planlara dönüştürebilirsiniz. Arka planları, yalnızca renklerin göründüğü bir noktaya kadar bulanıklaştıracağız ve böylece bir degrade oluşturacağız. Sıfırdan güzel bir örnek oluşturacağız ve ayrıca tasarım örneği JSON dosyasını ücretsiz olarak paylaşacağız!

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

Bulanık Arka Plan Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz bulanık arka plan 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!

Yaklaşmak

• Bir sütuna üç farklı modül ekliyoruz; iki Görüntü Modülü ve bir CTA Modülü
• İlk görüntü ilk görünümünü koruyor
• İkinci görüntü bulanıklaştırılacak ve boyutu artırılacaktır.
• Ayrıca, Görüntü Modülünde bulunan diğer filtre ayarlarıyla oynayarak renkleri iyileştireceğiz.
• CTA modülü, bulanık Görüntü Modülü ile örtüşecek ve onu arka plan olarak kullanacaktır.
• Görüntü Modülü #2'nin bulanıklık ve boyut artışının sütun kapsayıcısını aşmadığından emin olmak için sütun taşmasını gizleyeceğiz

Yeniden Oluşturmaya Başlayalım

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın.

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden, tasarım sekmesinde satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Maksimum Genişlik: %100

Sütun 2 Taşma

Gelişmiş sekmeye geçin ve tek bir CSS kodu satırı kullanarak sütun 2 taşmasını gizleyin. Bunu yapmak, hiçbir şeyin sütun kapsayıcısını aşmadığından emin olmamıza yardımcı olacaktır. Bu, özellikle bir Görüntü Modülünü bulanık bir arka plana dönüştürmeye başladığımızda ve boyutunu büyüttüğümüzde önemli hale gelecektir.

overflow: hidden;

Sütun 3 Taşma

Üçüncü sütun için de aynı şeyi yapın.

overflow: hidden;

Metin Modülü #1'i Sütun 1'e ekleyin

H2 Kopyası Ekle

İlk sütunda bir Metin Modülü ile başlayarak modül eklemeye başlama zamanı. Seçtiğiniz bazı H2 içeriğini girin.

H2 Metin Ayarları

Tasarım sekmesine gidin ve H2 metin ayarlarını değiştirin.

• Başlık 2 Yazı Tipi: Poppins
• Başlık 2 Metin Rengi: #232323
• Başlık 2 Metin Boyutu: 40px

aralık

Bazı özel üst kenar boşluğu da ekleyin.

• Üst Marj: 9vw

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

görünürlük

2. sütunda ihtiyacımız olan ikinci modül bir Bölücü Modüldür. '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 gidin ve çizgi rengini değiştirin.

• Çizgi Rengi: #000000

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

Seçtiğiniz bazı paragraf içeriğine sahip başka bir Metin Modülü ekleyerek devam edin.

Metin Ayarları

Sonraki metin ayarlarını değiştirin.

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Boyutu: 17px
• Metin Satırı Yüksekliği: 2.1em

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

Sütun 1'de ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Tasarım sekmesine gidin ve düğme ayarlarında düğmenin stilini belirleyin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #f4f4f4
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Poppins
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Bazı özel boşluk değerleri de ekleyin.

• Üst Kenar Boşluğu: 20px
• Alt Kenar Boşluğu: 20px
• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

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

1:1 Resim Yükle

İkinci sütuna geç! Burada ihtiyacımız olan ilk modül bir Görüntü Modülü. 1: 1 oranında bir resim yükleyin. Bu, resminizin tam kare olması gerektiği anlamına gelir (genişlik, yüksekliğe eşit olmalıdır).

boyutlandırma

Tasarım sekmesine gidin ve 'Tam Genişliğe Zorla' seçeneğini etkinleştirin.

• Tam Genişliği Zorla: Evet

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

1:1 Resim Yükle

2. sütunda ihtiyacımız olan ikinci modül başka bir Görüntü Modülü. Yine 1: 1 oranına sahip bir görüntü kullanıyoruz.

boyutlandırma

Tasarım sekmesine gidin ve boyutlandırma ayarlarını değiştirin.

• Tam Genişliği Zorla: Evet
• Yükseklik: 320 piksel

aralık

Negatif üst kenar boşluğu ekleyerek bu modül ile önceki modül arasında bir örtüşme oluşturun.

• Üst Kenar Boşluğu: -100px

Filtreler

Ardından, filtre ayarlarını değiştireceğiz. Bu, görüntüyü bulanık bir arka plana çevirdiğimiz kısımdır.

• Doygunluk: %200
• Parlaklık: %145
• Kontrast: %117
• Bulanıklık: 40 piksel

Ölçeği Dönüştür

Resmin sütunun tüm genişliğini kapladığından emin olmak için dönüştürme ayarlarında boyutu artıracağız. Satır ayarlarına eklediğimiz gizli sütun taşması sayesinde hiçbir şey sütun kapsayıcısını aşamaz.

• Sağ: %180
• Alt: %180

Sütun 2'ye CTA Modülü Ekle

İçerik Ekle

İkinci sütunda ihtiyacımız olan sonraki ve son modül bir CTA Modülüdür. Seçtiğiniz bir kopyayı girin.

Link ekle

Bağlantı ayarlarına gidin ve düğmenin tasarımda görünmesini sağlamak için bir düğme bağlantı URL'si ekleyin.

Arka Plan Rengini Kaldır

Arka plan rengini de kaldırın.

• Arka Plan Rengini Kullan: Hayır

Başlık Metni Ayarları

Tasarım sekmesine gidip başlık metni ayarlarını değiştirerek devam edin.

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: Poppins
• Başlık Metin Boyutu: 40px
• Başlık Harf Aralığı: -1px

Gövde Metni Ayarları

Gövde metni ayarlarını da değiştirin.

• Gövde Yazı Tipi: Poppins
• Gövde Yazı Tipi Ağırlığı: Hafif
• Gövde Çizgisi Yüksekliği: 2.2em

Düğme Ayarları

Düğme ayarları ile birlikte.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Metin Rengi: #ffffff
• Gradyan Rengi 1: rgba(244,244,244,0.4)
• Gradyan Rengi 2: rgba(255,255,255,0)
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Poppins
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

• Üst Kenar Boşluğu: 50px
• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

aralık

Son olarak, bir miktar negatif üst kenar boşluğu ekleyerek bu modül ile bulanık arka plan arasında bir örtüşme oluşturun. Ayrıca modülün sol ve sağ tarafında biraz boşluk bırakıyoruz.

• Üst Kenar Boşluğu: -250px
• Sol Dolgu: 2vw
• Sağ Dolgu: 2vw

Tüm Modülleri Sütun 2'ye Klonla ve Kopyaları Sütun 3'e Yerleştir

İkinci sütundaki tüm modülleri tamamladıktan sonra, onları klonlayabilir ve kopyaları üçüncü sütuna yerleştirebilirsiniz.

Yinelenen Görüntü Modülü #1'i Değiştir

Resmi değiştir

Görüntü Modülü #1'deki görüntüyü değiştirin.

Yinelenen Görüntü Modülü #2'yi Değiştir

Resmi değiştir

Sütundaki ikinci Görüntü Modülü için de aynısını yapın.

Filtre Ayarlarını Değiştir

Ve ikinci Görüntü Modülünün filtre ayarlarını da değiştirin.

• Doygunluk: %180
• Parlaklık: %102
• Kontrast: %117
• Bulanıklık: 35 piksel

Yinelenen CTA Modülünü Değiştir

Kopyayı Değiştir

CTA Modülünün içeriğini değiştirerek devam edin.

Düğme Degrade Arka Planını Değiştir

İlk düğme gradyan rengiyle birlikte ve bitirdiniz!

• Gradyan Rengi 1: rgba(244,244,244,0,15)

Ö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

Son düşünceler

Bu gönderide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak nasıl bulanık arka planlar oluşturabileceğinizi gösterdik. Oluşturduğunuz her türlü web sitesi için kullanabileceğiniz sıfırdan güzel bir örnek oluşturduk. Bu öğreticinin, bu öğreticide paylaşılan ipuçlarını kullanarak kendi özelleştirilmiş tasarımlarınızı oluşturmanız için size ilham vereceğini umuyoruz. 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.