Divi'de Yapışkan Başlığa CSS Arka Plan Filtresi Efektleri nasıl eklenir

CSS arka plan filtresi efektleri eklemek, yapışkan bir başlık menüsünün tasarımını geliştirmenin eğlenceli ve benzersiz bir yoludur. Arka plan filtresi CSS özelliğini bu kadar benzersiz yapan şey, bir öğenin arkasındaki alana filtre efektleri uygulamanıza izin vermesidir. Bu, yapışkan başlıklar için mükemmel bir seçenektir çünkü sayfanızın tasarımı, sayfayı aşağı kaydırırken başlığın arkasında sihirli bir şekilde değiştirilebilir. Bu efektin apple.com gibi popüler sitelerde kullanıldığını görmüş olabilirsiniz.

Bu öğreticide, Divi'de yapışkan bir başlığa nasıl CSS arka plan filtresi efektleri ekleyeceğinizi göstereceğiz. İlk olarak, 3 kolay adımı içeren mevcut bir başlığa arka plan filtresi efektleri eklemenin basit sürecini açıklayacağız. Bundan sonra, tüm başlığın sıfırdan nasıl oluşturulacağını çözeceğiz.

Başlayalım!

Gizlice Bakış

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

Kaydırırken başlığın arkasındaki öğelere uygulanan bulanıklık ve doygunluk filtresi efektlerine dikkat edin.

Bir başlığa eklenen bu fon filtresi efektinin basit bir canlı demosu için bu kod kalemine göz atın.

Global Başlık Şablonunu ÜCRETSİZ olarak indirin

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

Şablon Nasıl Yüklenir

Divi Theme Builder'a gidin

Şablonu yüklemek için WordPress web sitenizin arka ucundaki Divi Tema Oluşturucu'ya gidin.

Global Varsayılan Web Sitesi Şablonunu Yükleyin

Ardından, sağ üst köşede iki oklu bir simge göreceksiniz. simgesine tıklayın.

İçe aktarma sekmesine gidin, bu gönderide indirebildiğiniz JSON dosyasını yükleyin ve 'Divi Tema Oluşturucu Şablonlarını İçe Aktar'a tıklayın.

Divi Tema Oluşturucu Değişikliklerini Kaydet

Dosyayı yükledikten sonra, varsayılan web sitesi şablonunuzda yeni bir genel üstbilgi ve altbilgi göreceksiniz. Şablonun etkinleştirilmesini istediğiniz anda Divi Tema Oluşturucu değişikliklerini kaydedin.

Hadi öğreticiye geçelim, olur mu?

Mevcut Bir Başlığa CSS Arka Plan Filtresi Efektleri Ekleme

Süreci göstermenin en basit yolu, Divi'deki mevcut bir başlığa CSS arka plan filtresi efektleri eklemektir. Gerçekten, bu üç kolay adıma kadar kaynar:

1. Başlık Bölümüne Yarı Saydam Arka Plan Rengi Ekleme
2. Arka plan filtresi Özel CSS'sini Başlık Bölümüne ekleyin
3. Başlık Bölümüne Yapışkan Konum Ekleme

Divi'de bunu nasıl yapacağınız aşağıda açıklanmıştır.

Tema Oluşturucu'da Başlığı Düzenle

Tema Oluşturucu'ya gidin ve mevcut Başlık şablonunu düzenlemek için tıklayın.

Bölüme Yarı Saydam Arka Plan Rengi Ekle

Başlık menüsü öğelerini içeren bölümün ayarlarını açın. Ardından bölüme yarı saydam bir arka plan rengi ekleyin. Bu örnekte, bölüme aşağıdaki arka plan rengini veriyoruz:

• Arka Plan Rengi: rgba(0,0,0,0.8)

Arka Plan Filtresi Özel CSS Ekle

Ardından, Bölümün Ana Öğesine özel bir CSS snippet'i ile arka plan filtresi efektlerini (backdrop-filter CSS özelliğini kullanarak) ekleyebiliriz. Gelişmiş sekmesinin altında, aşağıdaki CSS'yi Ana Öğeye yapıştırın:

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Bu filtre efektleri, tüm Divi öğelerinde yerleşik olarak bulunan filtre efektlerine benzer. Temel fark, arka plan filtresinin efekti arkasındaki öğelere eklemesi, Divi'nin yerleşik filtre efektlerinin ise efekti öğenin kendisine eklemesidir.

Burada, filtre efektini bölümün arkasındaki herhangi bir tasarım öğesine uygulayacak 2 filtre efekti (doygunluk ve bulanıklık) kullanıyoruz.

Kendi benzersiz tasarımınızı oluşturmak için başka filtre işlevi değerleri (veya bunların bir kombinasyonunu) eklemeyi keşfetmekten çekinmeyin. Bunlardan en kullanışlı olanları şunlardır:

• bulanıklık()
• parlaklık()
• zıtlık()
• gri tonlamalı()
• ton döndür()
• ters çevir()
• sepya()
• doygun()

Başlığa Yapışkan Konum Ekle

Son olarak, başlık bölümüne yapışkan bir konum verdiğinizden emin olun.

Son sonuç

İşte canlı bir sayfada nihai sonuca bir bakış. Kaydırırken başlığın arkasındaki öğelere uygulanan bulanıklık ve doygunluk filtresi efektlerine dikkat edin.

Sıfırdan CSS Arka Plan Filtresi Efektleri ile Başlık Oluşturma

Başlığın tamamını CSS arka plan filtresi efektleriyle sıfırdan oluşturmak istiyorsanız, bunu nasıl yapacağınız aşağıda açıklanmıştır.

Theme Builder'da Global Başlık Oluşturun

Tema Oluşturucu'ya gidin ve yeni bir Genel Başlık Oluşturmak için tıklayın.

CSS Arka Plan Filtre Efektleri ile Yapışkan Bölüm Oluşturma

Bu öğreticinin ilk bölümünde yaptığımız gibi CSS arka plan filtre efektleriyle yapışkan bir bölüm oluşturarak başlayalım.

Genel Başlık Düzeni Düzenleyicisi'nde bölüme tek sütunlu bir satır ekleyin.

Bölümün ayarlarını açın. Ardından bölüme aşağıdaki yarı saydam arka plan rengini ekleyin:

• Arka Plan Rengi: rgba(0,0,0,0.8)

Dolguyu aşağıdaki gibi güncelleyin:

• Dolgu: 0 piksel üst, 0 piksel alt

Ardından, Bölümün Ana Öğesine özel bir CSS snippet'i ile arka plan filtresi efektlerini (backdrop-filter CSS özelliğini kullanarak) ekleyebiliriz. Gelişmiş sekmesinin altında, aşağıdaki CSS'yi Ana Öğeye yapıştırın:

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Son olarak, başlık bölümüne yapışkan bir konum verdiğinizden emin olun.

• Yapışkan Konum: En Üstte Yapış

Satır Ayarlarını Düzenle

Artık bölüm bittiğinde, satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %95
• Dolgu: 20 piksel üst, 20 piksel alt

Logo Resmi Ekle

Satır ayarları güncellendikten sonra, logoyu oluşturmak için satıra/sütuna bir görüntü modülü ekleyin.

Logo görüntüsünü görüntü modülüne yükleyin.

Görüntü tasarımı ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: 50 piksel
• Kenar boşluğu: 0 piksel sağ

Menü Oluştur

Ardından, görüntü modülünün altına bir menü modülü ekleyin.

İçerik sekmesi altında bir menü seçin ve menüye şeffaf bir arka plan rengi verin.

• Arka Plan Rengi: rgba(0,0,0,0)

Tasarım sekmesi altında menü tasarımı ayarlarını aşağıdaki gibi güncelleyin:

• Stil: Sola Hizalanmış
• Aktif Bağlantı Rengi: #fff
• Menü Yazı Tipi: Montserrat
• Menü Yazı Tipi Ağırlığı: Yarı Kalın
• Menü Metin Rengi: #fff
• Metin Hizalama: Merkez
• Açılır Menü Arka Plan Rengi: #333
• Açılır Menü Satır Rengi: #fff
• Açılır Menü Metin Rengi: #fff
• Açılır Menü Aktif Bağlantı: #fff
• Mobil Menü Arka Planı: #333
• Mobil Menü Metin Rengi: #fff
• Alışveriş Sepeti Simge Rengi: #fff
• Arama Simgesi Rengi: #fff
• Hamburger Menü Simge Rengi: #fff
• Genişlik: %80 (masaüstü ve tablet)

Metin Modülü ile Düğme Oluştur

Başlık için küçük düğme oluşturmak için bir metin modülü kullanacağız. Menünün altına bir metin modülü ekleyin.

Gövde içeriğini “Mağaza” çalışmasıyla güncelleyin. Ardından metin modülüne beyaz bir arka plan rengi verin.

• Gövde Metni: “Dükkan”
• Arka Plan Rengi: #fff

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Yarı Kalın
• Metin Metin Rengi: #333
• Metin Satır Yüksekliği: 2em
• Metin Hizalama: Merkez
• Genişlik: 50 piksel
• Yuvarlatılmış Köşeler: 5px

Burada metin modülü, logo görüntüsüyle aynı genişliğe sahiptir. Bu, sütundaki flex özelliğini özel CSS ile kullandığımızda öğeleri mükemmel şekilde hizalamaya yardımcı olacaktır.

Sütundaki Modülleri CSS Flex Özelliği ile Hizala

Sütuna logo, menü ve metin modülü eklendikten sonra, sütun ayarlarını açın ve aşağıdaki özel CSS'yi ana öğeye yapıştırın:

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

Başlık Düzenini ve Şablonu Kaydet

Bittiğinde, düzeni ve şablonu kaydettiğinizden emin olun.

Son sonuç

İşte nihai tasarıma başka bir bakış. Kaydırırken başlığın arkasındaki öğelere uygulanan bulanıklık ve doygunluk filtresi efektlerine dikkat edin.

Tarayıcı Desteği

Ne yazık ki, arka plan filtresi CSS özelliği şu anda IE ve Firefox'ta iyi çalışmıyor. Bununla birlikte, geri dönüş, bölüme verilen yarı saydam arka plan rengi olacaktır ve bu, hala çalışır ve harika görünür.

Son düşünceler

Umarım bir sonraki projeniz güzel bir arka plan filtresi efektine sahip bir başlıktan faydalanır. Divi'deki herhangi bir başlığa eklemek gerçekten çok kolay ve mevcut tüm farklı filtre işlevi değerlerini keşfetmek eğlenceli.

Yorumlarda sizden haber bekliyorum.

Şerefe!