Web sitenizdeki başlıkların sıradan görünümünden sıkıldıysanız, “Image in Text” efekti tam size göre!
Bu efekt sayesinde yazının içinden bir görsel geçiyormuş gibi bir görünüm oluşturabilir, Elementor’un gücünü CSS ile birleştirerek profesyonel bir etki yaratabilirsiniz.
Bu yazıda, Elementor kullanarak bu efekti nasıl yapabileceğinizi adım adım anlatıyoruz.
1. Yeni Bir Section Oluşturun
İlk adım olarak Elementor sayfanızda yeni bir section oluşturun.
Tek kolonlu bir yapı seçin ve içerisine bir Heading (Başlık) widget’ı ekleyin.
Yazınızı (örneğin “CREATIVE”) yazdıktan sonra hizalamayı ortalayın.
Daha sonra section yüksekliğini 100 VH yaparak tam ekran görünüm kazandırın.
2. Arka Plan Görseli Ekleyin
Efektin arka planla uyumlu olması için section’a bir görsel ekleyin.
Bunu yapmak için:
Style → Background → Image → Upload Image
Ardından Position: Center Center ve Size: Cover olarak ayarlayın.
Bu, görselin tüm section’ı düzgün şekilde kaplamasını sağlar.
Yazının İçine Görsel Yerleştirin
Şimdi başlık widget’ını seçin ve Advanced → Background sekmesine gidin.
Buradan yeni bir görsel ekleyin — bu görsel yazının içinden görünecek olan görseldir.
Konum ayarlarını Center Center, boyutu ise Cover olarak belirleyin.
Sonrasında yazının rengini tamamen şeffaf hale getirin:
Style → Text Color → rgba(0,0,0,0)
Bu işlem, yazı alanını görselin görünür olacağı hale getirir.
4. CSS ile Görseli Yazıya Uygulayın
Bu adımda Custom CSS özelliğini kullanacağız (Elementor Pro gerektirir).
Başlığın Advanced → Custom CSS sekmesine aşağıdaki kodu ekleyin:
.yazi {
background: linear-gradient(90deg, #00c6ff, #0072ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Bu CSS kodu, arka plandaki görseli sadece yazı alanı içinde gösterir.
Sonuçta yazının içinden görsel geçiyormuş gibi etkileyici bir efekt elde edilir.
5. Alternatif Yöntem: Arka Plan Görseliyle Efekt
Farklı bir varyasyon olarak, yazının altındaki section’a arka plan görseli ekleyebilir ve kolonu beyaz renkle kaplayabilirsiniz.
Daha sonra aşağıdaki CSS kodunu kullanarak benzer bir etki oluşturabilirsiniz:
selector {
mix-blend-mode: screen;
}
6. Okunabilirlik İçin Arka Plan Overlay Ekleyin
Eğer kullandığınız arka plan görseli çok parlaksa, yazı okunmayabilir.
Bu durumda section’a siyah bir Background Overlay ekleyerek kontrastı artırabilirsiniz.
Style → Background Overlay → Classic → Black → Opacity: 0.6
Artık Elementor kullanarak yazının içine görsel yerleştirmeyi biliyorsunuz!
Bu basit ama etkili teknikle, web sitenizde dikkat çekici başlıklar oluşturabilir ve ziyaretçilerin ilgisini artırabilirsiniz.
Unutmayın, bu efektin düzgün çalışması için Elementor Pro sürümüne sahip olmanız gerekir.
