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ı:
1. Yeni Bir Bölüm (Section) Oluşturun
Öncelikle Elementor editörüne girin ve sayfanıza yeni bir section ekleyin.
Bu bölümün ayarlarına girerek “Stil (Style)” → “Arka Plan (Background)” sekmesine gelin.
Varsayılan renk ayarını temizleyin ve arka planınıza bir görsel ekleyin.
Görsel boyutunu Cover, konumunu ise Center Center olarak ayarlayın.
2. Custom CSS ile Blur Efektini Ekleyin
Arka planı bulanık hale getirmek için “Gelişmiş (Advanced)” sekmesine geçin.
Burada yer alan “Custom CSS (Özel CSS)” alanına aşağıdaki kodu ekleyin:
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;
}
Bu kod, arka planı kopyalayıp onun üzerine bir bulanıklık efekti uygular.
filter: blur(50px) değerini değiştirerek bulanıklık seviyesini dilediğiniz gibi ayarlayabilirsiniz.
3. Video Arka Planlarda Blur Efekti Kullanma
Bu efekti sadece görsellerde değil, video arka planlarda da kullanabilirsiniz.
Bunun için “Arka Plan Türü (Background Type)” kısmından “Video” seçeneğini işaretleyin.
YouTube veya kendi barındırdığınız bir video bağlantısını ekleyin.
Aynı CSS kodu ile video da bulanık hale gelecektir.
Elementor ile arka plan bulanıklaştırma, sade bir dokunuşla web sitenize profesyonel bir görünüm kazandırmanın harika bir yoludur.
Bu yöntem sayesinde metinlerin okunabilirliği artarken, arka plan daha yumuşak ve estetik görünür.
Daha fazla Elementor eğitimi, WordPress ipuçları ve web tasarım tüyoları için bizi takip etmeyi unutmayın!
