Elementor’da Hotspot Oluşturma | Flip Box + CSS Anlatım

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.

.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;
}