WordPress’te Görüntü Sıcak Noktaları Nasıl Eklenir (Kolay Yol)

Bazen resim ve görsel eklemek ziyaretçilerin dikkatini çekmek için tek başına yeterli olmayabilir.

İşte bu noktada görsel sıcak noktaları imdadınıza yetişebilir. Bu tıklanabilir alanlar, basit bir resmi ziyaretçileriniz için ilgi çekici ve bilgilendirici bir deneyime dönüştürebilir. Bir haritadaki noktaları göstermek, bir fotoğraftaki ekip üyelerini etiketlemek ve ürün özelliklerini vurgulamak için bunları kendimiz denedik.

Aynı şeyi nasıl yapacağınızı merak ediyorsanız, doğru yerdesiniz. Bu kılavuz, WordPress web siteniz için herhangi bir kod kullanmadan bir resim etkin noktası oluşturmanın 2 basit yöntemini gösterecektir.

WordPress’te Görsellerinize Ne Zaman Sıcak Noktalar Eklemelisiniz?

Resim sıcak noktaları, basit resimleri ziyaretçilerin keşfedebileceği etkileşimli içeriklere dönüştürebilen tıklanabilir noktalardır. Peki görsellerinize sıcak noktalar eklemeyi ne zaman düşünmelisiniz?

Sıcak noktaları kullanmak için iyi bir zaman, bir ürün görselinin farklı bölümlerini göstermek istediğiniz zamandır.

Diyelim ki yeni bir telefon satıyorsunuz. Kamerasına, ekranına ve diğer özelliklerine dikkat çekmek için sıcak noktalar ekleyebilirsiniz. Bu, müşterilerin uzun açıklamaları okumadan ürün hakkında bilgi edinmesine yardımcı olur.

Pek çok ev eşyası web sitesi, sahnelenmiş fotoğraflarda sergilenen ürünlerin ürün ayrıntılarını vurgulamak için görüntü sıcak noktalarını da kullanır.

Sıcak noktalar, infografikleri ve veri görselleştirmeyi daha ilgi çekici hale getirmek için de harikadır. Tüm bilgileri tek bir görsele sığdırmak yerine, sıcak noktaların arkasına ekstra ayrıntılar gizleyebilirsiniz. İnsanlar infografiğin farklı bölümlerine tıkladıklarında daha fazla bilgi ve rakam görebilirler.

Bir e-Öğrenim web sitesi işletiyorsanız, etkin noktalar kullanıcı deneyimini iyileştirebilir ve derslerinizi daha etkileşimli hale getirebilir. Örneğin, bir haritaya sıcak noktalar ekleyerek öğrencilerin farklı ülkeler veya önemli noktalar hakkında bilgi edinmek için tıklamasına izin verebilirsiniz.

Bunu akılda tutarak, WordPress web sitenize kolayca nasıl resim hotspotları ekleyebileceğinize bakalım. Biz 2 yöntem bulduk ve makalede gezinmek için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

Yöntem 1: SeedProd ile Görüntü Sıcak Noktaları Ekleme (Açılış Sayfaları/Özel Temalar İçin)

Bu ilk yöntem, WordPress web sitenize resim etkin noktaları eklemek için sürükle ve bırak sayfa oluşturucu olan SeedProd‘u kullanır. Özel bir açılış sayfası veya özel bir WordPress teması oluşturuyorsanız ve görsel etkin nokta bloğu olan bir platform kullanmak istiyorsanız bu yöntemi öneriyoruz.

SeedProd’un en sevdiğimiz yanı, online butiklerden temizlik hizmetlerine ve SaaS şirketlerine kadar farklı sektör kategorileri için 350’den fazla açılış sayfası şablonu ve tema kiti sunması. Yani her tür site için bir seçenek var.

Göz önünde bulundurmanız gereken bir şey, görüntü etkin noktaları oluşturmak için yalnızca ücretsiz bir çözüm istiyorsanız, bu yöntem sizin için olmayabilir. Bunun nedeni, SeedProd’un etkin nokta bloğunun yalnızca ücretli SeedProd sürümlerinde mevcut olmasıdır. Bu durumda, yöntem 2 ile devam etmenizi öneririz.

Eklentinin özellikleri ve fiyatı hakkında daha fazla bilgi için SeedProd incelememize göz atın.

Bir SeedProd planı satın aldıktan sonra, WordPress eklentisini yönetici alanınıza indirebilir ve yükleyebilirsiniz. Bundan sonra, SeedProd “ Ayarlar bölümüne gidin ve lisans anahtarınızı girin. Bu bilgiyi SeedProd hesap sayfanızda bulabilirsiniz.

Tamamlandığında, ‘Anahtarı Doğrula’ya tıklayın.

Bundan sonra, SeedProd ” Açılış Sayfaları bölümüne gidin.

Ardından, ‘Yeni Açılış Sayfası Ekle’ye tıklayın.

Şimdi SeedProd’un sunduğu tüm şablonları göreceksiniz. Viral bir bekleme listesi açılış sayfası, bir Google reklam açılış sayfası, bir yakında sayfası ve daha fazlası için seçenekler var.

İhtiyaçlarınıza en uygun olanı seçebilmek için seçenekler arasında gezindiğinizden ve bunları tek tek önizlediğinizden emin olun.

Bir şablona karar verdikten sonra, seçiminizin üzerine gelmeniz yeterlidir.

Ardından, turuncu onay işareti düğmesine tıklayın.

Şimdi, sayfayı adlandırmanızı ve URL slug’ını girmenizi isteyen yeni bir açılır pencere görünecektir.

Bunu yaptıktan sonra ‘Kaydet ve Sayfayı Düzenlemeye Başla’ya tıklayın.

Bu, SeedProd sürükle ve bırak düzenleyicisini açacaktır.

Blokları sayfaya sürükleyip bırakabileceğiniz ve istediğiniz gibi özelleştirmek için üzerlerine tıklayabileceğiniz WordPress blok düzenleyicisine benzer şekilde çalışır.

Görüntü sıcak noktaları oluşturmak için sol kenar çubuğunda ‘Sıcak Nokta’ bloğunu bulabilirsiniz.

Ardından, doğrudan sayfanıza sürükleyip bırakın.

Ardından, sıcak noktaları eklemek istediğiniz WordPress resmini yüklemeniz gerekir.

Bunu, ‘Hotspot’ bloğuna tıklayarak ve bir görsel seçmek için ‘Kendi Görselinizi Kullanın’ veya ‘Stok Görsel Kullanın’ seçeneklerinden birini seçerek yapabilirsiniz.

İlk seçenek, mevcut bir görseli seçebileceğiniz veya yeni bir tane yükleyebileceğiniz medya kitaplığını açacaktır. Boyut oldukça büyükse, WordPress’te büyük görsellerin nasıl yükleneceğine ilişkin kılavuzumuza göz atabilirsiniz.

Bir görüntü yükledikten sonra, arama motorları ve ekran okuma araçları için görüntüyü tanımlamak üzere bazı alt metinler girebilirsiniz.

Görüntü boyutunu ve hizalamasını da özelleştirebilirsiniz.

Bundan sonra, etkin noktalarınızı eklemeye başlamak için aşağı kaydırabilirsiniz.

Bunu ‘+ Etkin Nokta Ekle’ düğmesine tıklayarak yapabilirsiniz.

Şimdi resminizin üzerinde turuncu bir nokta belirecektir. Yatay ve dikey yönlendirme çubuklarını sürükleyerek konumunu ayarlayabilirsiniz.

Ayrıca, kullanıcının imleci etkin noktanın üzerine geldiğinde görünmesi gereken metni de ekleyebilirsiniz.

Aşağı doğru hareket ederek etkin noktanın rengini değiştirebilirsiniz.

Markanıza ve web sitesi tasarımınıza uygun bir renk seçmek için ‘Renk’ ayarlarına tıklamanız yeterlidir.

Aşağı kaydırmaya devam ederseniz, ‘Gelişmiş Ayarlar’ geçişini etkinleştirebilirsiniz.

Burası, kullanıcıların istediğiniz sayfaya yönlendirilebilmesi için etkin noktanızın ipucu metnine bir bağlantı ekleyebileceğiniz yerdir.

Bunun yanı sıra, varsayılan daire şeklini değiştirmek için özel bir simge seçebilirsiniz.

Bunu yapmak için ‘Simge Seç’ düğmesine tıklamanız yeterlidir.

SeedProd’un kütüphanesinden çeşitli simgeler seçebileceğiniz bir açılır pencere görünecektir. Daha fazla seçeneğe ihtiyacınız varsa Font Awesome’dan da simgeler seç ebilirsiniz.

Bir simgeyi kullanmak için üzerine tıklamanız yeterlidir.

Bir simge seçtikten sonra, tercihlerinize bağlı olarak şekli daha küçük veya daha büyük yapmak için ‘Simge Boyutu’ çubuğunu sürükleyebilirsiniz.

Daha sonra daha fazla etkileşimli görüntü sıcak noktası oluşturmak için adımları tekrarlayabilirsiniz.

Aşağıda, görüntü sıcak noktalarınıza animasyonlu bir efekt ekleyebilirsiniz. 2 seçenek bulunmaktadır: ‘Yumuşak Vuruş’ ve ‘Genişlet’.

Şimdi, ‘Araç İpucu’ bölümüne geçelim.

Burada, araç ipucunun konumunu değiştirebilir (sağ, sol, sıcak noktanın üstünde veya altında) ve tetikleyiciyi değiştirebilirsiniz.

‘Tıkla’yı seçerseniz bu, kullanıcı etkin noktaya tıkladığında araç ipucunun gösterileceği anlamına gelir. Öte yandan, ‘Hover’ imleç üzerine geldiğinde araç ipucunun görüneceği anlamına gelir.

Ardından, araç ipucunun süresini değiştirebilirsiniz.

Bu, kullanıcı etkin noktanın üzerine geldikten veya tıkladıktan sonra araç ipucunun görünmesinin ne kadar süreceğini belirtir. Metnin anında görünmesini istiyorsanız, 0 olarak ayarlamanız yeterlidir.

Tercihlerinize bağlı olarak araç ipucunun okunu da devre dışı bırakabilirsiniz.

Şimdi, ‘Gelişmiş’ sekmesine geçerseniz, görüntünün görünümünü daha da özelleştirebilirsiniz.

Örneğin, bir kutu gölgesi ekleyebilir veya dolgu ve kenar boşluğunu ayarlayabilirsiniz.

İşiniz bittiğinde, sağ üst köşedeki ‘Kaydet’ düğmesine tıklayın.

Ardından, sayfayı canlı hale getirmek için ‘Yayınla’ya tıklayın.

Ve işte bu kadar! Tüm cihazlarda iyi görünüp görünmediğini görmek için sayfayı mobil, masaüstü ve tablette görüntülediğinizden emin olun.

İşte interaktif görüntü etkin noktamızın nasıl göründüğü:

Yöntem 2: Görüntü Sıcak Nokta Eklentisi ile Görüntü Sıcak Noktaları Ekleme (Ücretsiz Ancak Sınırlı)

Bir sayfa oluşturucu kullanmak ve temanızı değiştirmek kulağa biraz fazla geliyorsa, bunun yerine ücretsiz WordPress Image Hotspot eklentisini kullanabilirsiniz. Bu eklenti 1. yönteme harika bir alternatiftir, ancak ücretsiz sürümün tek bir resme yalnızca 6 etkin nokta eklenmesine izin verdiğini unutmayın.

Image Hotspot’u kullanmak için, WordPress eklentisini yönetici alanınıza yükleyebilir ve etkinleştirebilirsiniz. Daha sonra Image Map Hotspot ” All Image Map Hotspot bölümüne gidin ve ‘Add New’ butonuna tıklayın.

Şimdi, devam edin ve yeni görüntü haritası etkin noktanıza bir ad verin. Ardından, araç ipucu görüntüleme türlerinden birini seçin. Hotspot’un araç ipuçlarının üzerine gelindiğinde veya tıklandığında görünmesini sağlayabilirsiniz.

Tamamlandığında, ‘Kaydet’e tıklayın.

Bu işlem tamamlandıktan sonra, resminizi ekleyelim.

Bunu yapmak için ‘Resim Yükle’ düğmesine tıklamanız yeterlidir.

Bu, yeni bir resim yükleyebileceğiniz veya mevcut bir resmi seçebileceğiniz medya kitaplığını açacaktır.

Ardından, görüntü haritanıza sıcak noktalar ekleyebilirsiniz. Bunu yapmak için ‘Nokta Ekle’ düğmesine tıklamanız yeterlidir.

Şimdi interaktif görüntü etkin noktanızı yapılandırmanız için bir açılır pencere görünecektir.

İlk olarak, ‘İşaretleyici’ sekmesine gidin. Sıcak nokta görüntüsünün nasıl görüneceğini buradan özelleştirebilirsiniz. Simgeleri değiştirmek için ‘Simgeler’ ve/veya ‘Vurgu Simgeleri’ alanlarının yanındaki ‘+’ işaretine tıklayabilirsiniz.

‘Simgeler’ tıklanmadığında veya üzerine gelinmediğinde varsayılan etkin nokta sembolünü ifade eder. Bu arada, ‘Vurgulu Simgeler’ kullanıcı sıcak noktaya tıkladığında veya üzerine geldiğinde görünen simgedir.

Şimdi, devam edin ve mevcut varsayılan seçeneği değiştirmek için bir simge seçin. Eklentide seçim yapabileceğiniz çok sayıda seçenek var.

Seçiminizi yaptıktan sonra, sadece üzerine tıklayın ve ‘Kapat’ düğmesine basın.

Etkin nokta resimleriniz ayarlandığında, simgelerin renklerini değiştirebilirsiniz.

Eklenti, varsayılan etkin nokta simgesi rengini simge üzerine gelme renginden farklı yapmanıza olanak tanır. Bu şekilde, kullanıcılar tıkladıklarında veya üzerine geldiklerinde bir etkin noktanın aktif olup olmadığını kolayca anlayabilirler.

Rengi değiştirmek için kare renk seçim düğmesine tıklayın ve kullanmak istediğiniz rengi seçin.

Daha sonra başka bir ayara geçmek için sayfada herhangi bir yere tıklayabilirsiniz.

Hotspot’un masaüstündeki simge boyutunu da özelleştirebilirsiniz. Sayı ne kadar yüksek olursa, simge o kadar büyük olacaktır.

Simgenin görünümünden memnun olduğunuzda ‘Kaydet’e tıklayın.

Şimdi, yukarı kaydırın ve ‘İçerik’ sekmesine geçin. Burası araç ipucunun metnini ve görünümünü özelleştirebileceğiniz yerdir.

Eklenti size aralarından seçim yapabileceğiniz 4 şablon sunar, böylece web sitenizin tasarımına en uygun olanı seçebilirsiniz.

Bunun dışında, varsayılan başlık içeriğini kendi metninizle değiştirdiğinizden emin olun.

Web sitenizin tasarımına bağlı olarak, okunabilirliğini artırmak için yazı tipi boyutunu büyütmek ve metin rengini değiştirmek isteyebilirsiniz.

Ayarlardan memnun kaldığınızda ‘Kaydet’e tıklamanız yeterlidir.

Son sekme ‘bağlantı’dır. Burada, araç ipucu metninizi köprülü hale getirme seçeneğiniz vardır, böylece kullanıcılar farklı bir sayfaya yönlendirilebilir.

Bunu yapmak istiyorsanız, “Başlığı Bağlıyor musunuz?” ayarında “Evet “i seçin.

Bundan sonra, başlık bağlantı URL’nizi uygun alana girin ve bağlantının yeni bir sekmede açılmasını isteyip istemediğinizi seçin.

Son olarak, ‘Kaydet’e tıklayın.

Şimdi, resminizde istediğiniz konuma sürükleyebileceğiniz yeni bir sıcak nokta görünmelidir.

Daha fazla görüntü sıcak noktası oluşturmak için de aynı adımları tekrarlayabilirsiniz.

Görüntü haritanızı yapılandırdıktan sonra, ‘Kaydet’ düğmesine tekrar tıklayabilirsiniz.

Görsel etkin noktasını herhangi bir sayfanıza, gönderinize ve/veya widget‘ınıza eklemek için görselin üzerindeki kısa kodu kopyalayabilirsiniz.

Bundan sonra, kısa kodu blok düzenleyicide widget’ınızdaki, sayfanızdaki veya yazınızdaki bir kısa kod bloğuna yapıştırmanız yeterlidir. WordPress’te kısa kod ekleme ve kullanma hakkındaki adım adım kılavuzumuzda bunu yapma hakkında daha fazla bilgi edinebilirsiniz.

İşte interaktif görüntü etkin noktamızın nasıl göründüğü:

WordPress Web Siteniz İçin Daha Heyecan Verici Tasarım Özelliklerini Keşfedin

Etkileşimli görüntü noktaları oluşturmanın yanı sıra, web sitenizin tasarımını ilgi çekici hale getirmenin daha birçok yolu vardır. İşte size yardımcı olacak bazı kılavuzlar:

• WordPress Sitenize Sonsuz Kaydırma Nasıl Eklenir (Adım Adım)
• WordPress’te Görsel Site Haritası Nasıl Oluşturulur (Adım Adım)
• WordPress’te Yapışkan Yüzen Altbilgi Çubuğu Nasıl Oluşturulur
• Erişilebilirlik için WordPress’te Yazı Tipi Yeniden Boyutlandırma Nasıl Eklenir
• WordPress’te Aramak İçin Tıkla Düğmesi Nasıl Eklenir (Adım Adım)
• WordPress’te Özel Kaydırma Çubuğu Ekleme
• WordPress Yazılarınıza İlerleme Çubuğu Ekleme
• WordPress’te Özel Şekil Bölücü Nasıl Oluşturulur
• WordPress’te Kayan Haber Ticker’ı Nasıl Eklenir

Umarız bu makale WordPress’te kolayca nasıl resim hotspot’u ekleyebileceğinizi öğrenmenize yardımcı olmuştur. Ayrıca, maksimum sonuç almak için WordPress kenar çubuğu hileleri hakkındaki nihai kılavuzumuza ve en iyi WordPress tema oluşturucuları hakkındaki uzman seçimlerimize göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.