Web sitenize hareket ve dikkat çekicilik katmak istiyorsanız, dönen yazı efekti harika bir seçenektir. Özellikle Elementor kullanıyorsanız, bu işlemi sadece birkaç adımda kolayca yapabilirsiniz. Bu yazıda, Elementor Text Path widget’ı ile nasıl dönen bir yazı oluşturabileceğinizi ve ortasına görsel ekleyerek etkileyici bir görünüm elde edebileceğinizi anlatacağız.

Dönen Yazı Efekti Nedir?

Dönen yazı efekti, bir yazının dairesel bir yol (path) üzerinde dönmesini sağlayan animasyondur. Genellikle logolarda, bannerlarda veya dikkat çekmek istediğiniz alanlarda kullanılır.
Elementor’un Text Path widget’ı, bu efekti oluşturmanın en kolay yollarından biridir.

1. Text Path Widget Ekleme

İlk olarak, Elementor editörünüzde sayfanıza bir Text Path widget’ı ekleyin.
Varsayılan olarak dalgalı bir metin çıkar, bunu “Circle” seçeneğine getirerek dairesel bir yazı haline getirebilirsiniz.
Metni istediğiniz gibi değiştirin ve hizalamayı “Orta (Center)” yapın.

2. Yazıyı Tam Daireye Dönüştürme

Yazınız tam bir çember oluşturmadıysa, bunu düzeltmenin iki yolu vardır:

• Font boyutunu artırmak
• Veya Letter Spacing (harf aralığı) değerini artırmak

Font büyüklüğünü çok artırmak istemiyorsanız, harf aralığını örneğin 7.8px olarak ayarlayabilirsiniz. Böylece tam bir daire elde edersiniz.

3. Dairenin Ortasına Görsel Ekleme

Şimdi yazının ortasına bir görsel ekleyelim. Bunun için Image widget kullanıyoruz.
Dairenin boyutu 250px ise, görselin genişliğini 220px, yüksekliğini 220px olarak ayarlayın.
Ayarlar kısmından:

• Object Fit: Cover
• Border Radius: %100 (görseli yuvarlak yapar)
  değerlerini seçin.

Görseli Ortalamak

Görselin yazı dairesinin tam ortasında görünmesi için üstten negatif margin uygulayın.
Örneğin, -267px margin değeri bu işi gayet iyi yapacaktır.

5. CSS ile Döndürme Efekti Eklemek

Son adımda yazıyı döndüreceğiz. Bunun için Elementor Pro sürümünde bulunan Custom CSS alanına aşağıdaki kodu ekleyin:

selector svg{
    animation: rotate 20s linear infinite;
}

@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
Code language: CSS (css)

Bu kod, yazının sürekli 360 derece dönmesini sağlar.
Dönme hızını değiştirmek için 22s değerini düşürebilir (örneğin 10s) veya artırabilirsiniz (30s gibi).

Artık Elementor kullanarak kendi sitenizde dikkat çekici bir dönen yazı animasyonu oluşturabilirsiniz.
Bu efekt, özellikle logolar, başlık alanları veya açılış sayfalarında markanıza modern ve hareketli bir hava katacaktır.

Eğer Elementor Pro kullanıyorsanız, bu tür görsel efektlerle tasarımınıza fark katmanız çok kolay!