Elementor Pro’nun Hotspot widget’ıyla, bir ürün görselinin üzerine tıklanabilir, detay açıklaması gösteren interaktif işaret noktaları ekleyerek düz bir fotoğrafı çok daha profesyonel ve bilgilendirici bir ürün sunumuna dönüştürebilirsiniz. Bu teknik özellikle e-ticaret sitelerinde, bir ürünün farklı özelliklerini (malzeme, tasarım detayı, boyut gibi) tek bir görsel üzerinde işaretleyip anlatmak için kullanılıyor. Bu rehberde hotspot eklemeyi, tooltip özelleştirmeyi ve dikkat çekici bir “patlama” efekti eklemeyi video anlatımıyla gösteriyoruz.
Hotspot Widget’ı Ne İşe Yarar?
Hotspot, bir görselin üzerine yerleştirilen, tıklanabilir veya üzerine gelindiğinde açılan küçük bir işaret noktasıdır — genellikle bir nokta veya ikon şeklinde görünür ve tıklandığında ürünün o bölgesiyle ilgili kısa bir açıklama (tooltip) gösterir. Bu, bir ürün görselini pasif bir fotoğraftan, ziyaretçinin keşfedebileceği interaktif bir deneyime dönüştürüyor. E-ticaret sitelerinde özellikle malzeme kalitesi, işçilik detayı veya teknik özellik gibi bilgileri metinle uzun uzun anlatmak yerine, doğrudan görselin ilgili noktasında göstermek çok daha etkili bir sunum sağlıyor.
Ürün Görseline Hotspot Nasıl Eklenir?
- Ürün görselinin bulunduğu bölümü Elementor’la düzenlemeye açın.
- Görselin üzerine Hotspot widget’ını ekleyin ve aynı ürün görselini widget’a atayın.
- Hotspot’un konumunu (offset — yatay/dikey ofset) ürünün vurgulamak istediğiniz noktasına göre ayarlayın.
- İşaretleyici ikonu (nokta, artı, özel SVG gibi) kütüphaneden seçin veya kendi ikonunuzu yükleyin.
Tooltip (Açıklama Kutusu) Nasıl Özelleştirilir?
Hotspot’a tıklandığında (veya üzerine gelindiğinde) açılan açıklama kutusunda birkaç ayar önemli:
- Tetikleyici (Trigger): Tıklama veya üzerine gelme (hover) — mobil kullanıcılar için genellikle tıklama daha güvenilir çalışıyor.
- Pozisyon: Açıklamanın hotspot’un üstünde, altında, solunda veya sağında açılması.
- Animasyon: Fade in/out, fade grow, yön bazlı slide gibi seçenekler — yumuşak bir “fade” genellikle en profesyonel görünen sonucu veriyor.
- Renk ve Tipografi: Açıklama kutusunun arka plan rengini markanızın ana rengine, metin rengini ise kontrastı yüksek bir tona ayarlamak okunabilirliği artırıyor.
Birden Fazla Hotspot Nasıl Eklenir?
Tek bir ürün görselinde birden fazla detay noktası vurgulamak isterseniz, oluşturduğunuz hotspot öğesini kopyalayıp pozisyonunu değiştirmeniz yeterli. Örneğin bir masa/sandalye ürününde bir hotspot malzeme kalitesini, bir diğeri ayakların dayanıklılığını, bir üçüncüsü de yüzey işlemesini vurgulayabilir. Her hotspot’un kendi bağımsız açıklama metni ve konumu olduğu için, bir ürünün tüm önemli özelliklerini tek bir görselde, adım adım keşfedilebilir şekilde sunabiliyorsunuz. Bu yaklaşım, aynı bilgiyi ürün açıklaması altında uzun bir madde listesi olarak yazmaya kıyasla daha etkileşimli — ziyaretçi pasif bir okuyucu olmak yerine, ilgisini çeken noktaları kendisi keşfediyor, bu da sayfada geçirilen süreyi ve etkileşim oranını artırabiliyor.
Dikkat Çekici Patlama (Pulse) Efekti Nasıl Eklenir?
Hotspot’un varsayılan görünümü bazen yeterince dikkat çekmeyebiliyor. Bunu güçlendirmek için, widget’ın Gelişmiş > Özel CSS alanına, hotspot’un etrafında yayılan, nabız gibi atan bir “patlama” (pulse) animasyonu ekleyen bir CSS kodu yazılabiliyor. Bu kod bir yapay zeka sohbet aracından (ChatGPT, Gemini gibi) da hızlıca üretilebiliyor — kodun rengini markanızın ana rengine göre (RGB kodunu değiştirerek) ve opaklığını (0.1 ile 1 arasında) ihtiyacınıza göre ayarlayabilirsiniz. Bu efekt, hotspot’u ilk bakışta fark edilir hale getirip ziyaretçiyi tıklamaya davet ediyor. Bu özelliğin kullanılabilmesi için Elementor Pro’nun aktif olması gerekiyor. Efektin opaklığını ayarlarken dikkatli olmak gerekiyor — çok belirgin (opaklık 1) bir patlama efekti bazı tasarımlarda göze batabilirken, çok soft (opaklık 0.1 gibi) bir efekt neredeyse görünmez kalabiliyor; 0.6-0.8 aralığı çoğu tasarımda dengeli bir orta nokta sunuyor.
Hotspot Rengi ve Konumu Marka Kimliğine Nasıl Uydurulur?
Hotspot’un kendi rengi, sitenizin ana marka rengiyle eşleştiğinde çok daha tutarlı bir görünüm elde ediliyor — örneğin markanız yeşil ağırlıklıysa hotspot’u da yeşil tonlarda tutmak, işaretin “sitenin bir parçası” gibi hissettirmesini sağlıyor. Konum seçiminde ise en önemli kural, hotspot’u görselin dikkat dağıtıcı, karmaşık bir bölgesine değil, arka plandan net bir şekilde ayrışan, boş veya sade bir alana yerleştirmek. Bir ürünün üzerinde arka planla aynı renkte bir bölgeye yerleştirilen hotspot, ziyaretçi tarafından kolayca gözden kaçabiliyor.
Gerçek Bir Senaryo
Videodaki örnekte, masa/sandalye satan bir e-ticaret sitesindeki düz bir ürün fotoğrafı ele alındı. Önce görsel sağa alınıp yanına açıklama alanı için boşluk bırakıldı, ardından ürünün üzerine ilk hotspot eklendi ve “el emeği” gibi kısa bir açıklama yazıldı. Pozisyon, renk ve tooltip animasyonu (yukarıdan aşağı yumuşak bir giriş) ayarlandıktan sonra ikinci bir hotspot kopyalanıp ürünün ayaklarına (“dayanıklı ayaklar” açıklamasıyla) yerleştirildi. Son olarak markanın rengine uygun bir patlama efekti custom CSS ile eklenip mobil/tablet görünümleri tek tek kontrol edildi. Sonuç, aynı fotoğrafın çok daha zengin ve bilgilendirici bir sunuma dönüşmesiydi — hiçbir yeni fotoğraf çekimi gerekmeden.
Bu Teknik Hangi Sektörlerde İşe Yarar?
Hotspot tekniği en çok e-ticaret ürün sayfalarında kullanılsa da, mobilya, moda, elektronik gibi görsel detayın önemli olduğu her sektörde faydalı. Ayrıca bir kurumsal site için de, örneğin bir hizmet sürecini gösteren bir infografik veya ofis/tesis fotoğrafı üzerinde farklı bölümleri açıklamak amacıyla benzer bir mantıkla kullanılabilir — teknik olarak aynı widget, farklı bir bağlamda uygulanmış olur. Bir başka kullanım alanı, “önce/sonra” karşılaştırma görsellerinde her aşamaya ayrı bir hotspot yerleştirip süreci adım adım açıklamak — örneğin bir tadilat veya dekorasyon projesinde, tamamlanan işin farklı bölümlerini tek bir görsel üzerinde işaretleyerek anlatmak, ayrı ayrı metin paragrafları yazmaktan çok daha görsel ve akılda kalıcı bir sunum sağlıyor.
Sık Sorulan Sorular
Hotspot widget’ı için Elementor Pro şart mı?
Evet, hem Hotspot widget’ı hem de özel CSS ile patlama efekti eklemek Elementor Pro’ya özel özellikler.
Kaç hotspot eklemek idealdir?
Ürünün gerçekten öne çıkan 2-4 özelliğiyle sınırlı tutmak öneriliyor — çok fazla hotspot, görseli karmaşık ve dağınık gösterebilir.
Mobilde hotspot pozisyonları bozuluyor mu?
Bazen küçük kaymalar olabiliyor; bu yüzden her hotspot’un pozisyonunu mobil görünümde ayrıca kontrol edip gerektiğinde düzeltmek gerekiyor.
Hotspot’a link eklenebilir mi?
Evet, her hotspot’a isteğe bağlı olarak bir link (örneğin ilgili ürün detay sayfası) eklenebiliyor.
Patlama efekti olmadan da hotspot kullanılabilir mi?
Evet, patlama efekti isteğe bağlı bir görsel zenginleştirme — widget’ın kendi hover/tıklama animasyonları da tek başına yeterli olabilir.
Ürünlerinizi Daha Etkileyici Sunmak İster misiniz?
E-ticaret sitenizde hotspot gibi interaktif detaylarla ürünlerinizi öne çıkarmak için web tasarımı hizmetlerime göz atabilir ya da doğrudan WhatsApp’tan ulaşabilirsiniz.
