Web sitelerinde kullanıcı etkileşimini artırmanın en etkili yollarından biri görseller üzerinde erişim noktaları (hotspot) oluşturmaktır. Hotspot’lar, ziyaretçilerin belirli bir alanı tıklayarak daha fazla bilgiye ulaşmasını sağlar. Özellikle ürün tanıtımı, harita kullanımı veya interaktif içerikler için oldukça işlevseldir. Bu yazıda, Elementor Pro’nun Flip Box öğesini ve özel CSS kodlarını kullanarak nasıl kolayca hotspot oluşturabileceğinizi adım adım anlatacağım.

Hotspot Nedir ve Neden Kullanılır?

Hotspot, bir görselin üzerine yerleştirilen ikon ya da işaretleyicidir. Kullanıcılar bu ikona tıkladığında veya üzerine geldiğinde ek bilgiler görüntülenir.

• 🛍️ E-ticaret siteleri: Ürün görsellerine detay eklemek için.
• 🗺️ Haritalar: Belirli bölgeleri işaretlemek için.
• 📸 Portfolyolar: Fotoğraflara açıklama eklemek için.

Kısacası, ziyaretçilerin ilgisini çekmek ve deneyimi daha interaktif hale getirmek için hotspot kullanılır.

Elementor Pro ile Hotspot Nasıl Yapılır?

1. Flip Box Widget’ını Ekleyin

Elementor sayfanızda bir alan seçin ve Flip Box öğesini ekleyin. Bu öğe sayesinde ön yüz ve arka yüz olmak üzere iki alanı yönetebilirsiniz.

2. Ön Yüzde İkon Belirleyin

Flip Box’ın ön yüzünde bir ikon seçin. Bu ikon, erişim noktanızı temsil edecek. Örneğin, “info” ikonu kullanabilirsiniz.

3. Arka Yüzde İçerik Ekleyin

Arka yüz kısmına, ziyaretçilere göstermek istediğiniz bilgileri ekleyin. Bu, ürün açıklaması, fiyat bilgisi ya da kısa bir tanıtım olabilir.

4. CSS Kodlarını Ekleyin

Hotspot efektini oluşturmak için aşağıdaki CSS kodlarını Özel CSS alanına ekleyin:

.elementor-flip-box .elementor-icon {
    --hotspot-color: #FD4766;
    --hotspot-size: 10px; /* svg ikonun boyutuna göre ayarla */
    
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--hotspot-size);
    width: var(--hotspot-size);
    z-index: 1;
}

.elementor-flip-box .elementor-icon::before,
.elementor-flip-box .elementor-icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--hotspot-color);
    border-radius: 50%;
    opacity: 0.2;
    animation: zoom 2s infinite;
    z-index: 0;
}

.elementor-flip-box .elementor-icon::before {
    animation-timing-function: ease-in;
}
.elementor-flip-box .elementor-icon::after {
    animation-timing-function: ease-out;
}

@keyframes zoom {
    0% { transform: scale(1); }
    100% { transform: scale(2); }
}


.elementor-flip-box__back {
    z-index: 1;
}
Code language: CSS (css)

Orta noktayı hizalamak için aşağıdaki CSS kodlarını Özel CSS alanına Ekleyin:

.elementor-flip-box .elementor-icon {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}Code language: CSS (css)

Bu CSS sayesinde ikonunuzun etrafında dalga dalga büyüyen bir animasyon oluşacak. Böylece kullanıcıların dikkatini çekecek bir hotspot elde etmiş olursunuz.

Elementor Pro ve basit birkaç satır CSS ile görselleriniz üzerine etkileyici hotspot noktaları ekleyebilirsiniz. Bu yöntem, ziyaretçilerinizin ilgisini artırır, sayfanızdaki etkileşimi güçlendirir ve bilgileri daha görsel bir şekilde sunmanızı sağlar.

👉 Siz de hemen kendi sayfanızda deneyin ve kullanıcı deneyimini bir üst seviyeye taşıyın!
👉 Daha fazla Elementor eğitimi için youtube kanalımı ve blogumu takip etmeyi unutmayın.