Divi'de Buzlu Cam Arka Plan Tasarımı Nasıl Oluşturulur

Web siteniz için buzlu cam bir arka plan eklemek, arka planlarınızı ve metninizi benzersiz bir şekilde öne çıkaran yeni bir tasarım öğesi olabilir. Buzlu cam arka plan efekti oluşturmanın püf noktası, hedef öğenin arkasındaki arka planı bulanıklaştırmaktır. Başka bir deyişle, iki öğeyi, hedef arka plan, öğenin arkasındaki arka planın bulanık bir versiyonunu ortaya çıkaran buzlu cam gibi görünecek şekilde karıştırmak istiyoruz.

Bu derste size Divi'de buzlu cam arka plan tasarımı oluşturmanın üç yöntemini göstereceğiz. İlk olarak, tek bir CSS satırı ile buzlu arka planlar oluşturacak güçlü arka plan filtresi CSS özelliğini tanıtacağız. Ardından, güzel buzlu arka plan tasarımları oluşturmak için Divi öğelerini (arka plan stilleri ve filtrelerle) katmanlamayı içeren diğer iki yöntemi göstereceğiz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak onları indirmeniz gerekecek. İ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

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Buzlu Cam Arka Plan Tasarımları Nasıl Oluşturulur

Yöntem 1: Arka Plan Filtresi CSS Özelliğini Kullanarak Buzlu Cam Arka Plan Oluşturma

Bu ilk örnekte, arka plan filtresi CSS özelliğini kullanarak buzlu Cam Arka Plan tasarımı oluşturmanın en kolay yöntemini göstereceğiz. Kolay çünkü istediğimiz sonucu elde etmek için yalnızca bir satır CSS'ye ihtiyacımız var. Dezavantajı, şu anda arka plan filtresini (IE ve Firefox) desteklemeyen birkaç tarayıcı olmasıdır.

Buzlu arka plan tasarımının amacı, yalnızca hedef öğenin arka planını bulanıklaştırmak değil, öğenin arkasındaki arka planı bulanıklaştırmaktır. Backdrop-filter özelliği, hedef öğenin altındaki (veya arkasındaki) öğeye bir bulanıklık filtresi efekti uygulayarak bunu yapabilir.

İşte nasıl yapılacağı.

Bölüm Arka Plan Resmini Ekleme

İlk olarak, bölüme tek sütunlu bir satır ekleyin.

Bölüm ayarlarını açın ve ona bir arka plan görüntüsü verin.

Satır Arka Plan Rengini ve Arka Plan filtresini ekleme

Ardından, satır ayarlarını açın ve aşağıdaki gibi yarı saydam beyaz bir arka plan rengi ekleyin:

• Arka Plan Rengi: rgba(255,255,255,0.3)

Tasarım sekmesi altında, satırın boyutunu ve aralığını aşağıdaki gibi güncelleyin:

• Genişlik: %90
• Maksimum Genişlik: 900 piksel
• Dolgu: %5 üst, %5 alt, %5 sol, %5 sağ

Gelişmiş sekmesinin altında, ana öğeye aşağıdaki CSS'yi ekleyin:

-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);

Bu, öğenin arka planına 10 piksellik bir bulanıklık filtresi ekleyecektir. Satıra CSS uygulanmış olsa bile, bölüm arka plan görüntüsünün efekt tarafından nasıl bulanıklaştırıldığına dikkat edin. CSS'deki piksel değerini değiştirerek bulanıklık miktarını artırabilir veya azaltabilirsiniz.

Metin Modülü ile İçerik Ekleme

Buzlu arka planımız için bir miktar içerik sağlamak için satırın sütununa bir metin modülü ekleyin.

Ardından aşağıdaki HTML'yi metin sekmesinin altındaki gövdeye yapıştırın:

<h2>Frosted Glass Background</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Tasarımı cilalamak için metin stillerini aşağıdaki gibi güncelleyelim:

• Metin Yazı Tipi Ağırlığı: Yarı Kalın
• Metin Metin Rengi: #33345b
• Metin Metin Boyutu: 16px
• Metin Satır Yüksekliği: 2em
• Başlık 2 Yazı Tipi: Poppins
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Yazı Tipi Stili: TT
• Başlık 2 Metin Hizalama: Sol
• Başlık 2 Metin Rengi: #33345b
• Başlık 2 Metin Boyutu: 70px (masaüstü), 40px (tablet), 25px (telefon)
• Başlık 2 Harf Aralığı: 2px
• Başlık 2 Çizgi Yüksekliği: 1.3em

Sonuç

İşte nihai sonuç. Sana bunun kolay olacağını söylemiştim!

Yöntem 2: Paralaks ve Katmanlı Modülleri Kullanarak Buzlu Cam Arka Plan Oluşturma

Bu sonraki yöntem için, Divi'de buzlu cam arka plan efektini nasıl yarattığımız konusunda biraz yaratıcı olacağız. Bunu oluşturmak o kadar kolay olmasa da, artı tarafı tasarımın tüm tarayıcılarda desteklenmesidir. Bu nedenle, arka plan filtresi için güvenilir bir geri dönüş arıyorsanız, bu işe yarayacaktır.

İşte nasıl yapılacağı.

Paralaks Arka Plan Resmiyle Bölüm Ekleme

İlk olarak, az önce oluşturduğumuz bölümün altında yeni bir normal bölüm oluşturun.

Ardından bölüme tek sütunlu bir satır ekleyin.

CSS yöntemini kullanarak bölüme Paralaks efektli bir arka plan görüntüsü verin:

• Paralaks Etkisini Kullan: EVET
• Paralaks Yöntemi: CSS

Önceki Metin Modülüyle Aynı İçeriği Ekleme

Ardından, yukarıdaki ilk bölümden/örnekten metin modülünü kopyalayın ve yeni bölümün satırına yapıştırın.

Sütun Ayarları

Ardından, yinelenen metin modülümüzü içeren sütunun ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:

• Dolgu: %10 üst, %10 alt, %10 sol, %10 sağ

Gelişmiş sekmesi altında, taşma görünürlüğünü aşağıdaki gibi güncelleyin:

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Metin Modülü ile Bulanık Arka Plan Görüntüsü Katmanı Ekleme

Artık içeriğimiz ve bölüm arka plan paralaks resmimizi yerleştirdiğimize göre, içeriğimizin arkasındaki buzlu arka planı oluşturacak iki metin modülünden (veya katmanlardan) ilkini eklememiz gerekiyor.

İlk olarak, bulanık bir görüntü katmanı görevi görecek bir metin modülü ekleyeceğiz.

Devam edin ve mevcut metin modülünün altına yeni bir metin modülü ekleyin.

Metin modülünü, metin içeriğini içeren metin modülünün üzerine taşıyın.

Ardından, gövde içeriğini boş kalacak şekilde çıkarın. Bu modüle sadece arka plan görüntüsü için ihtiyacımız olacak.

Ardından, aynı CSS paralaks efektini kullanarak aynı arka plan resmini metin modülüne ekleyin:

• Paralaks Etkisini Kullan: EVET
• Paralaks Yöntemi: CSS

Arka plan görüntüsünde aynı CSS paralaks efektini kullandığımızdan, aynı görüntüyü bölüm arka planının aynı sabit konumunda gösterdiğinden görüntü arka planını fark etmeyeceksiniz.

Tasarım sekmesi altında, metin modülüne aşağıdaki filtreyi ekleyin:

• Bulanıklık: 10 piksel

Şimdi paralaks arka plan görüntüsünün bulanık bir versiyonuna sahibiz.

Ardından, metin modülüne mutlak bir konum verin:

• Pozisyon: Mutlak

Modül mutlak bir konumda olduğuna göre, modül sütunun tam genişliğini ve yüksekliğini kaplayacak şekilde boyut stilini güncelleyebiliriz.

• Genişlik: %100
• Yükseklik: %100

Artık bulanık görüntü yerinde ve buzlu cam efektinin devreye girdiğini görebiliyoruz.

Bulanık Görüntü Bindirmesini Başka Bir Metin Modülüyle Ekleme

Bir sonraki adım, tasarımı tamamlamak için hafif bir kaplama görevi görmesi için bulanık görüntü metin modülünün üstüne başka bir metin modülü eklemektir.

Bindirmeyi oluşturmak için bulanık görüntü metin modülünü çoğaltın.

Yinelenen metin modülünün ayarlarını açın ve arka plan resmini silin.

Ardından aşağıdaki arka plan rengini ekleyin:

• Arka Plan Rengi: rgba(255,255,255,0.5)

Tasarım sekmesinin altında bulanıklık filtresini 0 piksele getirin.

Şimdi nihai sonucu kontrol edin.

Yöntem 3: Gerçek Görüntü Boyutlarını ve Katmanlı Modülleri Kullanarak Buzlu Cam Arka Plan Oluşturma

Buzlu arka plan ile paralaks etkisi harika, ancak oluşturulan buzlu arka planlarla paralaks etkisi ile sınırlı olmak istemeyebilirsiniz. Aynı efekt, gerçek boyutlarında arka plan resimleri kullanılarak da yapılabilir.

Bu son yöntem için, görüntüleri gerçek boyutlarında kullanarak sütun düzeyinde buzlu arka plan tasarımları oluşturacağız. İşlem, yukarıdaki yöntem 2'ye benzer. Avantajı, bir Divi satırının birden çok sütununda buzlu arka planlar oluşturmak için bu yöntemi kullanabilmenizdir.

Önceki Bölümü Çoğalt

Tasarımı hızlı başlatmak için ikinci örneğimizi içeren ikinci bölümü çoğaltın.

Bölüm Arka Planını Güncelle

Bölüm ayarlarını açın, arka plan resmini silin ve aşağıdaki arka plan rengini ekleyin:

• Arka Plan Rengi: #33345b

Sütun Arka Planını ve Doldurmayı Güncelle

Ardından, sütun ayarlarını açın ve önceki örnek için kullanılan arka plan görüntüsünün aynısını ekleyin. Yalnızca bu sefer arka plan resmi boyutunun Gerçek Boyut olarak ayarlandığından emin olun:

• Arka Plan Resmi: Gerçek Boyut

Ardından, sütun ayarlarını yeni dolgu ile aşağıdaki gibi güncelleyin:

• Dolgu: %10 üst, %10 alt, %15 sol, %15 sağ

Bulanık Görüntü Metni Modül Görüntüsünü Güncelle

Ardından, bulanık görüntü metin modülünün ayarlarını açın ve arka plan görüntü boyutunu gerçek boyuta ayarladığınızdan emin olarak sütun arka planı için kullanılan görüntünün aynısını ekleyin:

• Paralaks Etkisi Kullan: HAYIR
• Arka Plan Resmi Boyutu: Gerçek Boyut

Bulanık Görüntü ve Bindirme Metin Modüllerinin Boyut ve Konum Konumunu Değiştirin

Artalan bulanık görüntü metin modülü ve bindirme metin modülü çevresinde gereken boşluğu oluşturmak için, her iki modülü de seçmek için çoklu seçimi kullanın ve boyutlandırma seçeneklerini aşağıdaki gibi güncelleyin:

• Genişlik: %80
• Yükseklik: %80

Ardından, mutlak konum konumunu ortalanmış olarak güncelleyin:

• konum: ortalanmış

İşte nihai sonuç.

Küçük Ayarlamalarla Birden Çok Sütun Düzeni Oluşturun

Hatta iki sütunlu bir düzen için sütunu çoğaltabilirsiniz. Buzlu arka planın içeriğin arkasına oturduğundan emin olmak için başlık metni boyutunu ve sütun dolgusunu ayarlamanız gerekecektir. Ayrıca sütun için kullanılan arka plan resimlerini ve bulanık resim metin modülünü gerektiği gibi değiştirebilirsiniz.

İşte iki sütunlu düzenin bir örneği.

Son sonuç

İşte tüm örneklerin nihai sonucu.

Son düşünceler

Bu öğreticide, Divi'de buzlu arka plan tasarımları oluşturmanın üç yöntemini gösterdik. Bazılarınız, önce bu tür şeyler için photoshop'ta görüntüleri özelleştirmeyi daha kolay bulabilir. Ancak Divi ile bu gerekli değildir. İlk yöntem, arka plan filtresi CSS özelliğinden yararlanır ve açık ara farkla en kolay ve en güçlü çözümdür. Ancak bu özellik tüm tarayıcılar tarafından benimsenene kadar, bu öğreticide Divi oluşturucuyu kullanan diğer iki yöntemi kullanabilirsiniz. Sonuç olarak, buzlu arka plan efekti gerçekten harika görünebilir.

Yorumlarda sizden haber bekliyorum.

Şerefe!