WordPress Elementor ile Arka Plan Bulanıklaştırma Nasıl Yapılır?

WordPress Elementor ile Arka Plan Bulanıklaştırma Nasıl Yapılır?

Web tasarımlarında görselliği ön plana çıkarmanın etkili yollarından biri arka plan bulanıklaştırma (blur effect) kullanmaktır.
Bu yöntem sayesinde sayfadaki metin ve öğeler daha belirgin hale gelir, tasarımınız modern bir görünüm kazanır.
Peki Elementor kullanarak bu efekti nasıl uygulayabilirsiniz? İşte adım adım anlatımı:


https://www.youtube.com/watch?v=b19Qhj1rZ4I

selector:before{    content: "";    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    -webkit-backdrop-filter: blur(50px);    backdrop-filter: blur(50px);    z-index: 1; }
selector .elementor-container{    z-index: 1; }

Elinize sağlık hocam. Ufak bir bilgilendirme yapmak isterim css kodu ile eklemek yerine (Elementor Pro sahibi olmayan arkadaşlar olabilir.) Arka plan ayarlarından bu ayarlamaları istediği gibi yapabiliyor ve daha detaylı bir panel ile farklı tasarımlar hazırlayabiliyor.

Bilgi için teşekkürler hocam.
bahsettiğiniz yer arka plan kaplaması hocam evet oradan yapılır yapılır ama şöyle olur size öğreteyim. arka plan kaplamasına aynı arkaplan görselini koyarsınız( bu da sayfaya x2 arkaplan boyutu katar kb olarak dolayısı ile performans düşer) ve oradaki css seçeneklerinden yaptığınız 10 birim buğula efekti yaklaşık 0.5 piksellik bir buğulanma ortaya çıkarır opaklığı arttırırsanızda 10 piksellik bir buğulama çıkarır. elementor pro kullanmayanlar dışında daha önceki videolarımdan birinde de belirttiğim gibi, özel css sınıfı atayarak wordpress özelleştir kısmında bulunan ek css alanına özel sınıf atanmış css kodunu yazarak aynı sonucu elde edebilirler.