Web sitenizi daha modern ve etkileyici hâle getirmek istiyorsanız görsel efektler büyük bir fark yaratır. Bu yazıda size Elementor ile 3D katmanlı hover efekti oluşturmayı adım adım anlatacağım ve uygulamalı olarak göstereceğim.

1. Sayfa Hazırlığı

İlk olarak WordPress panelinden yeni bir sayfa oluşturacağım ve Elementor ile Düzenle seçeneğine tıklayacağım. Bu sayfa, efektimizi test edeceğimiz alan olacak.

2. İki Sütunlu Düzen Oluşturma

Yeni bir bölüm ekleyeceğim ve “İki sütunlu düzen” seçeceğim. Sağ sütuna bir başlık ve açıklama ekleyeceğim. Sol sütun, yansıma efekti uygulayacağımız görsel için boş olacak.

3. İç Bölüm Ekleme

Sol sütuna bir container widget’ı ekleyeceğim ve ikinci sütunu sileceğim. Bu alan, efektin uygulanacağı ana container olacak.

4. İlk Görseli Eklemek

• Görsel widget’ını sürükleyeceğim ve örnek bir görsel yükleyeceğim.
• Genişlik: 300 px
• Border Radius: 30 px

Bu görsel, efektin temel katmanı olacak. Köşeleri yumuşatmak görselin daha modern görünmesini sağlayacak.

5. Görselleri Çoğaltarak Katman Oluşturma

3 katmanlı bir hover efekti oluşturmak için:

1. Görseli sağ tıklayıp Çoğalt yapacağım.
2. Çoğaltılan görsellerin Gelişmiş → Konumlandırma → Absolute(Kesin) ayarını yapacağım.
3. Üç görseli üst üste hizalayacağım.

Artık üç katmanlı bir görsel yapısı hazır.

6. CSS ile Hover Efekti Eklemek

Elementor Pro kullanıyorsanız, iç container seçili iken Gelişmiş → Özel CSS sekmesine aşağıdaki kodu ekleyeceğim:

selector{
    --distance: 30px;
}
selector{
    transition: 0.5s;
}
selector:hover{
    transform: rotate(3deg) skew(-3deg);
}
selector .main-image{
    padding-left: 0 !important;
    padding-right: 0 !important;
    transition: 0.5s;
}
selector:hover .main-image{
    transform: translate(calc(-1*var(--distance)), calc(-1*var(--distance)));
}
selector .layer-1{
    opacity: 0.8;
    z-index: -1;
}
selector:hover .layer-1{
    transform: translate(0, 0);
}
selector .layer-2{
    opacity: 0.4;
    z-index: -2;
}
selector:hover .layer-2{
    transform: translate(calc(var(--distance) / 2), calc(var(--distance) / 2));
}
Code language: CSS (css)

Bu kod, fare görselin üzerine geldiğinde katmanların farklı derinliklerde hareket etmesini sağlayacak.

7. Efekti Önizlemek

Sayfayı güncelleyeceğim ve Önizle moduna geçeceğim. Fareyi görselin üzerine getirdiğinizde, katmanlı 3D hover efektinin nasıl çalıştığını göreceksiniz.

Elementor ile 3D katmanlı hover efektleri ekleyerek web sitenize modern ve profesyonel bir görünüm kazandıracağım. Bu efekt özellikle portföy, galeri veya ürün sayfalarında dikkat çekici sonuçlar veriyor.