WordPress görsellerinizi daha etkileşimli ve ilgi çekici hale mi getirmek istiyorsunuz? Görüntü etiketleri, ek bilgileri ortaya çıkaran tıklanabilir alanlar ekleyerek statik resimleri dinamik içeriğe dönüştürür.
Bir harita üzerindeki noktaları göstermek, bir fotoğraftaki ekip üyelerini etiketlemek ve ürün özelliklerini vurgulamak için kendimiz denedik. Araştırmalarımızdan, WordPress'e görüntü etiketi eklemenin 2 kolay yolunu bulduk.
Web sitenizin görsel deneyimini geliştirmeye hazır mısınız? Başlayalım.
WordPress'te Görsellerinize Ne Zaman Etiket Eklemelisiniz
Görüntü etiketleri, ziyaretçilerin keşfedebileceği basit resimleri etkileşimli içeriğe dönüştürebilen tıklanabilir noktalardır. Peki, görsellerinize etiket eklemeyi ne zaman düşünmelisiniz?
Etiketleri kullanmak için iyi bir zaman, bir ürün görüntüsünün farklı bölümlerini sergilemek istediğiniz zamandır.
Yeni bir telefon sattığınızı varsayalım. Kamerası, ekranı ve diğer özelliklerini belirtmek için etiketler ekleyebilirsiniz. Bu, müşterilerin uzun açıklamalar okumadan ürün hakkında bilgi edinmesine yardımcı olur.
Birçok ev eşyası web sitesi de sahnelenmiş fotoğraflarda gösterilen ürünlerin ayrıntılarını vurgulamak için görüntü açıklamalarını kullanır.
Etiket noktaları, bilgi grafiklerini ve veri görselleştirmeyi daha ilgi çekici hale getirmek için de harikadır. Tüm bilgileri tek bir resme sıkıştırmak yerine, etiket noktalarının arkasına ek ayrıntılar gizleyebilirsiniz. İnsanlar bilgi grafiğinin farklı bölümlerine tıkladıklarında, daha fazla gerçek ve rakam görebilirler.
Bir eğitim web sitesi işletiyorsanız, etiket noktaları kullanıcı deneyimini iyileştirebilir ve derslerinizi daha etkileşimli hale getirebilir. Örneğin, bir haritaya etiket noktaları ekleyerek öğrencilerin farklı ülkeler veya yerler hakkında bilgi edinmek için tıklamalarını sağlayabilirsiniz.
Bunu akılda tutarak, WordPress web sitenize kolayca resim etiket noktaları eklemenin yollarına bakalım. 2 yöntem geliştirdik ve makalede gezinmek için aşağıdaki hızlı bağlantıları kullanabilirsiniz:
- Yöntem 1: SeedProd ile Resim Etiket Noktaları Ekleme (Açılış Sayfaları/Özel Temalar İçin)
- Yöntem 2: Image Hotspot Eklentisi ile Resim Etiket Noktaları Ekleme (Ücretsiz Ama Sınırlı)
- Bilmeniz Gereken Diğer WordPress Tasarım İpuçları
Yöntem 1: SeedProd ile Resim Etiket Noktaları Ekleme (Açılış Sayfaları/Özel Temalar İçin)
Bu ilk yöntem, WordPress web sitenize resim etkin noktaları eklemek için sürükle-bırak sayfa oluşturucu olan SeedProd'u kullanır. Özel bir açılış sayfası veya özel bir WordPress teması oluşturuyorsanız ve bir resim etkin nokta bloğu olan bir platform kullanmak istiyorsanız bu yöntemi öneririz.
Geçmişte Divi ve WPBakery gibi başka sayfa oluşturucuları da test ettik, ancak SeedProd her zaman öne çıkıyor.
SeedProd hakkında sevdiğimiz şey, çevrimiçi butiklerden temizlik hizmetlerine ve SaaS şirketlerine kadar farklı sektör kategorileri için 350'den fazla açılış sayfası şablonu ve tema kiti sunmasıdır. Yani her tür site için bir seçenek var.
Dikkat etmeniz gereken bir şey var ki, eğer sadece resim etkin noktaları oluşturmak için ücretsiz bir çözüm istiyorsanız, bu yöntem sizin için uygun olmayabilir. Bunun nedeni, SeedProd'un etkin nokta bloğunun yalnızca ücretli SeedProd sürümlerinde bulunmasıdır. Bu durumda, 2. yöntemi izlemenizi öneririz.
Eklentinin özellikleri ve fiyatlandırması 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ızdan indirebilir ve kurabilirsiniz. Ardından, SeedProd » Ayarlar bölümüne gidin ve lisans anahtarınızı girin. Bu bilgiyi SeedProd hesap sayfanızda bulabilirsiniz.
İşiniz bittiğinde, ‘Anahtarı Doğrula’ya tıklayın.
Ardından, 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 bekleme listesi açılış sayfası, Google reklam açılış sayfası, yakında gelecek sayfası ve daha fazlası için seçenekler mevcut.
Seçenekleri gözden geçirdiğinizden ve ihtiyaçlarınıza en uygun olanı seçebilmek için tek tek önizlediğinizden emin olun.
Bir şablon seçtikten sonra, üzerine gelin.
Ardından, turuncu onay işareti düğmesine tıklayın.
Şimdi, sayfayı adlandırmanızı ve URL takma adı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ü etkin noktaları oluşturmak için, sol kenar çubuğunda ‘Etkin Nokta’ bloğunu bulabilirsiniz.
Ardından, bunu doğrudan sayfanıza sürükleyip bırakın.
Sonra, etkin noktalar eklemek istediğiniz WordPress görüntüsünü yüklemeniz gerekir.
Bunu, ‘Etkin Nokta’ bloğuna tıklayıp bir görüntü seçmek için ‘Kendi Görüntünüzü Kullanın’ veya ‘Stok Görüntü Kullanın’ seçeneklerinden birini seçerek yapabilirsiniz.
İlk seçenek, mevcut bir görüntüyü seçebileceğiniz veya yenisini yükleyebileceğiniz medya kütüphanesini açacaktır. Boyut oldukça büyükse, WordPress'te büyük görüntülerin nasıl yükleneceğine dair rehberimize göz atabilirsiniz.
Bir görüntü yükledikten sonra, görüntüyü arama motorları ve ekran okuyucu araçlar için açıklamak üzere bazı alt metin 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 görüntünüzde turuncu bir nokta görünecektir. Yatay ve dikey yönlendirme çubuklarını sürükleyerek konumunu ayarlayabilirsiniz.
Ek olarak, bir kullanıcının imleci etkin noktanın üzerine geldiğinde görünmesi gereken metni ekleyebilirsiniz.
Aşağı doğru ilerleyerek, 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.
Kullanıcıların istediğiniz sayfaya yönlendirilmesi için hotspot'unuzun araç ipucu metnine bir bağlantı ekleyebilirsiniz.
Bunun yanı sıra, varsayılan daire şeklinin yerine ö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 olursa Font Awesome'dan da simge seçebilirsiniz.
Bir simge kullanmak için üzerine tıklamanız yeterlidir.
Bir simge seçtikten sonra, tercihlerinize bağlı olarak şekli küçültmek veya büyütmek için 'Simge Boyutu' çubuğunu sürükleyebilirsiniz.
Ardından, daha fazla etkileşimli resim etkin noktası oluşturmak için adımları tekrarlayabilirsiniz.
Aşağıda, resim etkin noktalarınıza animasyonlu bir efekt ekleyebilirsiniz. 2 seçenek vardır: 'Yumuşak Vuruş' ve 'Genişlet'.
Şimdi, 'Araç İpucu' bölümüne inelim.
Burada, araç ipucunun konumunu (etkin noktanın sağına, soluna, üstüne veya altına) ve tetikleyiciyi değiştirebilirsiniz.
'Tıkla'yı seçerseniz, araç ipucu kullanıcının etkin noktaya tıkladığında görünecektir. Diğer yandan, 'Üzerine Gelme' araç ipucunun imleç üzerine geldiğinde görüneceği anlamına gelir.
Ardından, araç ipucunun süresini değiştirebilirsiniz.
Bu, kullanıcının etkin noktanın üzerine gelmesi veya tıklamasından sonra araç ipucunun görünmesi için ne kadar süreceğini ifade eder. Metnin anında görünmesini istiyorsanız, 0 olarak ayarlayın.
Tercihlerinize bağlı olarak araç ipucunun okunu da devre dışı bırakabilirsiniz.
Şimdi, 'Gelişmiş' sekmesine geçerseniz, resmin 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ıklamanız yeterlidir.
Ardından, sayfayı yayına almak için 'Yayınla'ya tıklayın.
Ve işte bu kadar! Tüm cihazlarda iyi göründüğünden emin olmak için sayfayı mobil, masaüstü ve tablet üzerinde görüntülediğinizden emin olun.
Etkileşimli resim etkin noktamız şöyle görünüyor:
Yöntem 2: Image Hotspot Eklentisi ile Resim Etiket Noktaları Ekleme (Ücretsiz Ama Sınırlı)
Bir sayfa oluşturucu kullanıyorsanız ve temanızı değiştirmek size çok fazla geliyorsa, bunun yerine ücretsiz WordPress Image Hotspot eklentisini kullanabilirsiniz. Deneyebildiğimiz en iyi resim hotspot eklentilerinden biridir ve 1. yönteme harika bir alternatiftir.
Ancak, ücretsiz sürümün tek bir resme yalnızca 6 adede kadar hotspot eklemeye izin verdiğini unutmayın.
Image Hotspot'u kullanmak için, WordPress eklentisini yönetici alanınıza kurup etkinleştirebilirsiniz. Ardından, Image Map Hotspot » All Image Map Hotspot 'a gidin ve 'Add New' düğmesine tıklayın.
Şimdi, yeni resim haritası hotspot'unuza bir ad verin. Ardından, araç ipucu görüntüleme türlerinden birini seçin. Etkileşimli hotspot'un araç ipuçlarının fareyle üzerine gelindiğinde veya tıklandığında görünmesini sağlayabilirsiniz.
Bittiğinde, ‘Kaydet’e tıklayın.
Bu bittikten sonra, resminizi ekleyelim.
Bunu yapmak için 'Upload Image' düğmesine tıklamanız yeterlidir.
Bu, yeni bir resim yükleyebileceğiniz veya mevcut bir resmi seçebileceğiniz medya kütüphanesini açacaktır.
Ardından, resim haritanıza hotspot'lar ekleyebilirsiniz. Bunu yapmak için 'Add Point' düğmesine tıklamanız yeterlidir.
Etkileşimli resim hotspot'unuzu yapılandırmanız için şimdi bir açılır pencere görünecektir.
İlk olarak, 'Marker' sekmesine gidin. Burası hotspot resminin nasıl görüneceğini özelleştirebileceğiniz yerdir. Simgeleri değiştirmek için 'Icons' ve/veya 'Hover Icons' alanlarının yanındaki '+' işaretine tıklayabilirsiniz.
'Icons', üzerine tıklanmadığında veya üzerine gelmediğinde varsayılan hotspot sembolünü ifade eder. Bu arada, 'Hover Icons', kullanıcının hotspot'a tıkladığında veya üzerine geldiğinde görünen semboldür.
Şimdi, mevcut varsayılan seçeneği değiştirmek için bir simge seçin. Eklentide seçebileceğiniz çok sayıda seçenek bulunmaktadır.
Seçiminizi yaptıktan sonra üzerine tıklayın ve 'Kapat' düğmesine basın.
Köşeli parantezli resimleriniz ayarlandıktan sonra, simgelerin renklerini değiştirebilirsiniz.
Eklenti, varsayılan işaret noktası simge rengini simge üzerine gelme renginden farklı yapmanıza olanak tanır. Bu sayede kullanıcılar, bir işaret noktasına tıkladıklarında veya üzerine geldiklerinde aktif olup olmadığını kolayca anlayabilirler.
Rengi değiştirmek için kare renk seçme düğmesine tıklamanız ve kullanmak istediğiniz rengi seçmeniz yeterlidir.
Ardından, başka bir ayara geçmek için sayfanın herhangi bir yerine tıklayabilirsiniz.
Masaüstünde işaret noktasının simge boyutunu da özelleştirebilirsiniz. Sayı ne kadar yüksek olursa, simge o kadar büyük olur.
Simgenin görünümünden memnun kaldığınızda, 'Kaydet'e tıklamanız yeterlidir.
Şimdi, yukarı kaydırın ve 'İçerik' sekmesine geçin. Araç ipucunun metnini ve görünümünü buradan özelleştirebilirsiniz.
Eklenti, web sitenizin tasarımına en uygun olanı seçebilmeniz için 4 şablon sunar.
Bunun dışında, varsayılan başlık içeriğini kendi metninizle değiştirdiğinizden emin olun.
Ve web sitenizin tasarımına bağlı olarak, okunabilirliği 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 metnini köprüleyerek, kullanıcıların farklı bir sayfaya yönlendirilmesini sağlayabilirsiniz.
Bunu yapmak istiyorsanız, 'Başlık Bağlantısı Var mı?' ayarında 'Evet'i seçin.
Ardından, 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, görüntünüzde yeni bir işaret noktası görünmelidir; bunu istediğiniz konuma sürükleyebilirsiniz.
Daha fazla resim işaret noktası oluşturmak için önceki adımları tekrarlayabilirsiniz.
Resim haritanızı yapılandırdıktan sonra, tekrar 'Kaydet' düğmesine tıklayabilirsiniz.
Görüntü etkin noktasını sayfalarınıza, gönderilerinize ve/veya widget'larınıza eklemek için yukarıdaki kısa kodu kopyalayabilirsiniz.
Bundan sonra, kısa kodu blok düzenleyicideki widget'ınıza, sayfanıza veya gönderinize bir kısa kod bloğuna yapıştırmanız yeterlidir. Bunu nasıl yapacağınız hakkında daha fazla bilgiyi WordPress'te kısa kod ekleme ve kullanma hakkındaki adım adım kılavuzumuzda bulabilirsiniz.
Etkileşimli görüntü etkin noktamız şöyle görünür:
Bilmeniz Gereken Diğer WordPress Tasarım İpuçları
Etkileşimli görüntü etkin noktaları oluşturmanın yanı sıra, web sitesi tasarımınızı ilgi çekici hale getirmenin daha birçok yolu vardır. İşte size yardımcı olacak bazı kılavuzlar:
- Etkili Bir WordPress Web Sitesi İçin Temel Tasarım Öğeleri
- WordPress Sitenize Sonsuz Kaydırma Nasıl Eklenir (Adım Adım)
- WordPress Sitenize Sonsuz Kaydırma Nasıl Eklenir (Adım Adım)
- WordPress'te Görsel Bir Site Haritası Oluşturma (Adım Adım)
- WordPress'te Yapışkan Kayar Alt Bilgi Çubuğu Oluşturma
- WordPress'e Erişilebilirlik İçin Bir Yazı Tipi Boyutlandırıcısı Nasıl Eklenir
- WordPress'e Tıklanabilir Arama Düğmesi Nasıl Eklenir (Adım Adım)
- WordPress'te Özel Kaydırma Çubuğu Nasıl Eklenir
- WordPress Gönderilerinize Bir İlerleme Çubuğu Nasıl Eklenir
- WordPress'te Özel Şekil Ayırıcı Nasıl Oluşturulur
- WordPress'e Kaydırılan Bir Haber Bandı Nasıl Eklenir
Umarım bu makale, WordPress'te kolayca görüntü etkin noktalarının nasıl ekleneceğini öğrenmenize yardımcı olmuştur. Ayrıca, maksimum sonuçlar elde etmek için WordPress kenar çubuğu hileleri hakkındaki nihai kılavuzumuzu ve en iyi WordPress tema oluşturucuları hakkındaki uzman seçimlerimizi de incelemek isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Bir sorunuz veya öneriniz mi var? Tartışmayı başlatmak için lütfen bir yorum bırakın.