WordPress'te Etkileşimli Görseller Nasıl Oluşturulur

WordPress gönderiniz için mükemmel bir görsel bulmak harika bir başlangıçtır, ancak standart resimler genellikle sınırlıdır. Ziyaretçileriniz görseli görür, ancak vurgulamak istediğiniz ana ayrıntıları kaçırabilirler.

Belirli özellikleri sergilemeye veya kullanıcıları bir süreç boyunca yönlendirmeye çalışırken bu sinir bozucu olabilir. İnteraktif görseller, tıklanabilir sıcak noktalar ve araç ipuçları eklemenize izin vererek bu sorunu çözer.

Birkaç eklentiyi test ettikten sonra, herkesin kod kullanmadan bu özellikleri eklemesine olanak tanıyan bir yöntem bulduk. Bu kılavuzda, WordPress'te kolayca interaktif görseller oluşturmayı göstereceğiz.

Bu kılavuzda, tüm süreç boyunca size rehberlik edeceğiz. Öğreneceklerinizin hızlı bir özeti aşağıdadır.

Etkileşimli Resim Nedir?

Etkileşimli bir resimde etkileşim noktası alanları, vurgular, bağlantılar, tıklanabilir düğmeler, renkler, görsel-işitsel içerik ve daha fazlası olabilir.

Bu, basit, WordPress web sitenize yüklediğiniz standart bir resimden çok daha ilgi çekicidir.

Etkileşimli görseller, ziyaretçinin dikkatini belirli özelliklere ve içeriğe çekebilir ve ardından ek bilgiler gösterebilir.

Örneğin, ziyaretçi bir grafikteki belirli bir çubuğun üzerine geldiğinde bir açılır pencere gösterebilirsiniz.

Bu etkileşim, ziyaretçileri resimlerinizi daha ayrıntılı incelemeye teşvik edebilir, bu da onların sayfada daha uzun süre kalmasını sağlar. Ayrıca daha etkileşimli ve ilginç bir deneyim yaratabilir, bu da WordPress'te sayfa görüntülemelerinizi artırabilir ve hemen çıkma oranını düşürebilir.

Etkileşimli görseller ayrıca ziyaretçilere bir sonraki adımları göstermelerini sağlayabilir. Örneğin, sitenizin diğer bölümlerine bağlantılar ekleyebilir veya bir harekete geçirici mesaj düğmesi gösterebilirsiniz.

WordPress siteniz için interaktif görselleri nasıl oluşturabileceğinizi görelim.

WordPress İçeriğinize Etkileşimli Resimler Nasıl Eklenir

Tıklanabilir alanlar veya etkileşimli noktalar eklemenin en kolay, en başlangıç dostu yolu, Draw Attention eklentisini kullanmaktır. Bu eklenti, kullanıcı bir resimle etkileşime girdiğinde 'daha fazla bilgi' açılır penceresi göstermenize veya yeni bir URL açmanıza olanak tanır.

Yapmanız gereken ilk şey Draw Attention eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinde Dikkat Çek » Resmi Düzenle bölümüne gidin. Bu sizi farklı etkileşimler oluşturabileceğiniz ve ardından bunları bir resme tıklanabilir alanlar olarak ekleyebileceğiniz bir ekrana götürecektir.

Başlamak için etkileşimli görsel için bir başlık girin.

Bu, WordPress web sitenizde resmin yanında görünecektir. Örneğin, aşağıdaki resimde ‘OptinMonster Özellikleri’ başlığını kullanıyoruz.

Bir başlık yazdıktan sonra, 'Resim' bölümüne kaydırın ve kullanmak istediğiniz resmi seçin.

Medya kitaplığınızdan bir resim seçebilir veya yeni bir resim yükleyebilirsiniz.

Bir resim seçtikten sonra, ‘Etkileşimli Alanlar’ bölümüne aşağı kaydırarak renkler ve bağlantılar ekleyebilir, tıklanabilir alanlar oluşturabilir ve daha fazlasını yapabilirsiniz.

Eklenti varsayılan olarak Tıklanabilir Alan 1 oluşturur, bu nedenle bu bölümü genişletmek için tıklayın.

Başlamak için, etkileşimli hale getirmek istediğiniz alanı vurgulamanız gerekecektir.

Dikkat Çek'te vurgu için kullanabileceğiniz birkaç farklı şekil vardır, bu nedenle kullanmak istediğiniz şekle tıklamanız yeterlidir. Aşağıdaki resimde bir dikdörtgen seçtik.

Şimdi, resim etkin noktası olarak kullanmak istediğiniz alanı vurgulamak için tıklayıp sürüklemeniz yeterlidir.

Dikkat Çek şimdi bu tıklanabilir alan için bazı yeni ayarlar gösterecektir. Başlamak için 'Başlık' alanına bir ad yazın.

Bu, ziyaretçi farenin imlecini etkin nokta üzerine getirdiğinde bir araç ipucu olarak görünecektir, bu nedenle açıklayıcı bir şey kullanmak iyi bir fikirdir.

Aşağıdaki resimde, geri sayım alanını bir hotspot'a dönüştürdük ve resim başlığını 'Geri Sayım Zamanlayıcısı' olarak ekledik.

Bunu yaptıktan sonra, 'Eylem' açılır menüsünü açın ve ziyaretçi bu alana tıkladığında ne olacağını seçin. Dikkat Çek, bir bağlantı açabilir veya bir 'daha fazla bilgi' kutusu gösterebilir.

Seçtiğiniz seçeneklere bağlı olarak farklı ayarlar göreceksiniz. Örneğin, 'URL'ye Git' seçeneğini seçerseniz, bir bağlantı eklemeniz ve yeni bir sekmede açılıp açılmayacağını belirtmeniz gerekir.

'Daha Fazla Bilgi Göster'i seçerseniz, ziyaretçi etkin noktaya tıkladığında görünecek bilgileri yazmanız gerekir.

Ayrıca, bilgi kutusunda yer alacak isteğe bağlı bir ayrıntı resmi veya URL'si de ekleyebilirsiniz.

Aşağıdaki görselde, daha fazla bilgi kutusuna bazı metinler ekledik.

Ayrıca, ayrıntı resmi olarak OptinMonster logosunu da ekledik.

İşaretçinin görünümünden memnun kaldığınızda, 'Başka Alan Ekle' düğmesine tıklayın.

Tıklanabilir alanı yukarıda açıklanan aynı işlemi izleyerek yapılandırabilirsiniz.

Resme tıklanabilir tüm alanları eklemek için bu adımları tekrarlamanız yeterlidir.

Bu yapıldıktan sonra, vurguların ve daha fazla bilgi kutusunun nasıl görüneceğini özelleştirmek isteyebilirsiniz. Örneğin, Dikkat Çekme eklentisinin ziyaretçiler tıklanabilir bir alana geldiğinde gösterdiği rengi 'Vurgu Rengi' ayarlarını kullanarak değiştirebilirsiniz.

Ayrıca 'Vurgu stil ayarları' bölümündeki ayarları kullanarak vurgu opaklığını ve kenarlık genişliğini değiştirebilir, kenarlık ekleyebilir ve daha fazlasını yapabilirsiniz.

Bundan sonra, 'Daha Fazla Bilgi Kutusu Stili'ne kaydırabilir ve kutunun nasıl görüneceğini ince ayarlayabilirsiniz. Örneğin, arka plan rengini, metin rengini ve daha fazlasını değiştirebilirsiniz.

Draw Attention, etkileşimli resminize uygulayabileceğiniz farklı temalarla birlikte gelir.

Bu temalara göz atmak için, ‘Renk Şemasını Uygula’ kutusuna gidin ve açılır menüyü açın. Açık, Koyu ve Dikkat Çekici seçenekleri arasından seçim yapabilirsiniz.

Tüm bu seçenekler oldukça basittir, bu nedenle web sitenizde en iyi görüneni görmek için farklı ayarları denemeye değer.

Çeşitli seçenekleri denerken, 'Değişiklikleri Önizle'ye tıklayarak WordPress web sitenizde nasıl görüneceklerini önizleyebilirsiniz.

Etkileşimli resmin görünümünden ve davranışından memnun kaldığınızda, değişikliklerinizi kaydetmek için 'Güncelle'ye tıkladığınızdan emin olun.

Artık interaktif görseli herhangi bir sayfaya veya gönderiye ekleyebilirsiniz. Bunu, WordPress içerik düzenleyicisindeki 'İnteraktif Görsel' bloğunu kullanarak veya 'Kısa Kod Kopyala' bloğundaki kısa kodu kullanarak yapabilirsiniz.

Kısa kodu nasıl yerleştireceğiniz hakkında daha fazla bilgi için lütfen WordPress'te kısa kod ekleme kılavuzumuza bakın.

Etkileşimli Resimleri Diğer WordPress Sitelerine İçe/Dışa Aktarma

Bazen aynı etkileşimli resmi birden fazla web sitesinde yeniden kullanmak isteyebilirsiniz.

Örneğin, bir satış ortağı pazarlamacısıysanız, ürünlerinizden birini tanıtan etkileşimli bir görsel oluşturabilirsiniz. Ardından, bu etkileşimli görseli tüm Amazon satış ortağı mağazalarınızda ve diğer satış ortağı pazarlama web sitelerinde kullanabilirsiniz.

Aynı resmi yüklemek ve ardından tüm etkileşimleri manuel olarak yeniden oluşturmak çok zaman ve çaba gerektirebilir.

Bunun yerine, etkileşimli görüntüyü bir kez oluşturup ardından Dikkat Çek özelliğinin içe/dışa aktarma özelliğini kullanmanızı öneririz. Bu, aynı görüntüyü birden çok web sitesinde veya çevrimiçi mağazada yeniden kullanmanıza olanak tanır.

Bunu yapmak için, etkileşimli görüntüye sahip orijinal sitede ve o görüntüyü kullanmak istediğiniz diğer tüm web sitelerinde Dikkat Çekme eklentisini yüklemeniz gerekecektir.

Orijinal sitenizde, Dikkat Çek » İçe Aktar / Dışa Aktar bölümüne gidin ve dışa aktarmak istediğiniz her resmin yanındaki kutuyu işaretleyin.

Ardından, 'Dışa Aktarma Kodunu Oluştur' düğmesine tıklayın. Birkaç dakika sonra, Draw Attention bazı kodlar oluşturacaktır.

Farklı bir sekmede, diğer WordPress blogunuza veya web sitenize giriş yapın ve Dikkat Çek » İçe Aktar / Dışa Aktar bölümüne gidin.

Buraya, dışa aktarma kodunu 'İçe Aktar' kutusuna kopyalayın ve 'İçe Aktar' düğmesine tıklayın.

Dikkat Çek şimdi resmi ve tüm etkileşimlerini içe aktaracak, kullanıma hazır hale getirecektir.

Etkileşimli görseli kullanmak istediğiniz tüm web sitelerinde bu adımları tekrarlamanız yeterlidir.

Etkileşimli Görüntüler Hakkında Sıkça Sorulan Sorular

WordPress'te etkileşimli resimler ekleme hakkında en sık aldığımız sorulardan bazılarına burada yanıtlar bulunmaktadır.

WordPress'te etkileşimli resimler oluşturmak için en iyi eklenti hangisidir?

Yeni başlayanlar için, kullanımı kolay ve basit bir arayüze sahip olduğu için Dikkat Çek eklentisini öneririz. Ücretsiz sürüm ihtiyacınız olan tüm temel özellikleri sunarken, profesyonel sürüm birden fazla resim haritası ve araç ipuçları için ek stil gibi daha gelişmiş seçeneklerin kilidini açar.

Etkileşimli görseller mobil uyumlu mu?

Evet, Dikkat Çekme eklentisi tamamen duyarlıdır. Bu, etkileşimli sıcak noktalarınızın ve bilgi kutularınızın herhangi bir ekran boyutuna uyacak şekilde otomatik olarak ayarlanacağı ve mobil cihazlarda harika bir kullanıcı deneyimi sağlayacağı anlamına gelir.

Etkileşimli sıcak noktalara video veya animasyon ekleyebilir miyim?

Bir etkileşim noktasını YouTube gibi bir platformdaki bir videoya veya Vimeo'ya bağlamak için 'URL'ye Git' eylemini kullanabilirsiniz. Doğrudan video yerleştirme açılır pencerede pro sürümünü gerektirebilirken, bağlantı basit bir geçici çözümdür. Animasyonlu resimler için, WordPress'e animasyonlu GIF ekleme kılavuzumuzu takip etmenizi öneririz.

Etkileşimli görseller eklemek web sitemi yavaşlatır mı?

Diğer tüm medya öğeleri gibi, etkileşimli görüntüler de sayfanızın ağırlığına katkıda bulunur. Ancak, Dikkat Çek eklentisi hafiftir ve iyi kodlanmıştır. En büyük faktör orijinal resim dosya boyutudur, bu nedenle yüklemeden önce görüntülerinizi web için optimize etmenizi her zaman öneririz.

Ek Kaynaklar

Umarım bu makale, WordPress'te etkileşimli görüntüler oluşturmayı öğrenmenize yardımcı olmuştur. Ayrıca bu ek kaynakları da görmek isteyebilirsiniz:

• WordPress'te Görüntü Etiketleri Nasıl Eklenir (Kolay Yol)
• Kaliteyi Kaybetmeden Web Performansı İçin Resimleri Nasıl Optimize Edersiniz
• WordPress'te Flipbox Kaplamaları ve Fareyle Üzerine Gelme Efektleri Nasıl Oluşturulur
• WordPress'e Animasyonlı GIF'ler Nasıl Eklenir (DOĞRU Yol)
• En İyi WordPress Kaydırıcı Eklentileri – Performans + Kalite (Karşılaştırıldı)

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.