Web sitenize modern ve dikkat çekici bir görünüm kazandırmak için yansıma efekti (reflection effect) harika bir yöntemdir. Özellikle başlıklar, görseller ve kart tasarımlarında kullanılan bu efekt, sitenizin daha profesyonel ve dinamik görünmesini sağlar. Peki, Elementor ile yansıma efekti nasıl yapılır? Gelin adım adım inceleyelim.

1. Yeni Bir Bölüm Oluşturma

Öncelikle Elementor editöründe yeni bir bölüm açın. Bölümün yüksekliğini Fit to Screen olarak ayarlayın. Daha sonra arka plana hoş bir görünüm katmak için radial gradient seçebilir, koyu renk tonlarıyla modern bir zemin hazırlayabilirsiniz.

2. Başlığa Yansıma Efekti Ekleme

Bir Heading (Başlık) widget’ı ekleyin ve ortalayın. Yazı rengini beyaz yapabilir, tipografi ayarlarından yazı tipini ve kalınlığını düzenleyebilirsiniz. Burada piksel yerine VW birimi kullanmak önemlidir; böylece yazınız her cihazda ekran boyutuna göre otomatik ölçeklenecektir.

Ardından gelişmiş sekmesindeki Custom CSS alanına basit bir CSS kodu ekleyerek başlığın altında ters bir yansıma oluşturabilirsiniz. Bu kod sayesinde:

• Yansımanın yönünü (alt, üst, sağ, sol) değiştirebilir,
• Yansıma ile ana metin arasındaki boşluğu ayarlayabilir,
• Opaklığı düzenleyebilirsiniz.

selector{
    -webkit-box-reflect: below 5px linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.1) 100%);
}
Code language: CSS (css)

3. Görsellere Reflection Efekti Uygulama

Yansıma efekti yalnızca metinlerle sınırlı değildir. Elementor’da bir Image (Görsel) widget’ı ekleyip köşelerini yuvarladıktan sonra aynı CSS kodunu kullanarak görsellerinize de yansıma ekleyebilirsiniz.

Opaklık ve gradient ayarlarını değiştirerek yansımanın daha doğal görünmesini sağlayabilirsiniz. Özellikle ürün tanıtımlarında veya portföy sitelerinde oldukça etkileyici bir sonuç verir.

4. Kart Tasarımlarında Yansıma

Elementor ile oluşturduğunuz kart veya kutu tasarımlarına da aynı yöntemi uygulayabilirsiniz. Böylece kart içindeki başlık, görsel ve arka planın tamamı alt kısımda yansıtılarak güçlü bir görsel etki elde edilir.

Elementor ile web sitenize yansıma efekti eklemek oldukça kolaydır. Sadece birkaç satır CSS koduyla metinlerinizi, görsellerinizi ve tasarımlarınızı çok daha etkileyici hale getirebilirsiniz.

Eğer sitenizde fark yaratmak ve ziyaretçilerin dikkatini çekmek istiyorsanız, bu basit ama güçlü efekti mutlaka deneyin.