Kullanıcılar tarafından göz açıp kapayıncaya kadar zihinsel olarak terk edilmeyecek çekici web siteleri oluşturmak için dikkatli planlama ve yüksek kaliteli görsel içerik kullanımı gerekir. Çoğu durumda, tek başına kelimeler ziyaretçileri bir sayfada tutmak için yeterli değildir, çünkü:
-
bazı insanlar bir sayfadaki çok fazla metinden bunalıp kaçabilirler;
-
çoğu kullanıcı içeriği kelime kelime bile okumaz, bunun yerine göz gezdirir ve bu nedenle sitenizden ayrılma olasılığı daha yüksektir;
-
metin, grafikler kadar ilgi çekici ve çekici değildir.
Hikayeleri statik grafiklerden daha canlı bir şekilde anlatma gücü nedeniyle, hedef kitlenizle etkileşim kurmanın özellikle iyi bir yolu etkileşimli görsel içerik kullanmaktır.
Bu yazıda şunları tartışacağız:
-
Etkileşimli Görseller Neden Önemlidir?
-
Elementor için WordPress Eklentilerini Kullanarak Etkileşimli Görüntüler Nasıl Eklenir?
-
Gutenberg için WordPress Bloklarını Kullanarak Etkileşimli Görüntüler Nasıl Eklenir?
-
Eklentileri Kullanarak Etkileşimli Görüntüler Nasıl Eklenir?
Etkileşimli Görseller Neden Önemlidir?
Etkileşimli resimler, kullanıcı etkileşimi söz konusu olduğunda işleri bir adım öteye taşımanıza olanak tanır. Örneğin bir vahşi yaşam resmi yükleyebilir ve ardından kullanıcıların her bir hayvana dokunarak hayvan hakkında daha fazla bilgi edinmesini sağlayabilirsiniz. Veya bir online mağaza işletiyorsanız, insanlar her bir ürüne tıklayarak kullanıcı yorumlarını okuyabilir ve daha fazla resim görebilir.
Mesele şu ki, resimlere sıcak noktalar yerleştirerek ve ardından bunları metin, ses, video veya başka herhangi bir içeriğe bağlayarak sayfalara hayat verebilir ve web sitenizi daha akılda kalıcı hale getirebilirsiniz. Hatta kullanıcıları harekete geçmeye ve markanızla ilgilenmeye davet etmek için vurgulamalar, ek bilgiler, açıklamalar, diğer web sayfalarına bağlantılar ile güçlendirebilir ve renklerle oynayabilirsiniz.
Elementor için WordPress Eklentilerini Kullanarak Etkileşimli Görüntüler Nasıl Eklenir?
Elementor kullanıcılarının işi kolaydır – resimlerine bazı etkileşimli özellikler eklemek için tek yapmaları gereken, Elementor için WordPress Eklentilerini indirmektir. Eklenti, resimlerinize etkileşimli öğeler eklemek de dahil olmak üzere web sitenizde harika efektler oluşturmak için harika Elementor widget’larıyla doludur.
Örneğin Görüntü Sıcak Noktaları widget’ı ile resimlerinize kolayca etkileşimli etkin noktalar ekleyebilirsiniz. Widget, eklentinin premium sürümüne dahildir ve resimlerinize biraz etkileşim eklemek için onu nasıl kullanacağınızı göstereceğiz. Eklentiyi kurup etkinleştirdikten ve Elementor’un kurulu olduğundan emin olduktan sonra devam edin ve yeni bir gönderi veya sayfa açın.
Görüntü Hotspots Widget’ına İçerik Ekleme
Öncelikle öğeler menüsü widget’ını aramalı ve onu çalışma alanlarına sürüklemelisiniz. Sütun seçeneklerine girip Merkez’i yatay hizalama için ayarlayarak çalışma alanımızı önceden hazırladık.
Buna rağmen, imajımızı doğru ve ortalanmış hale getirmek için biraz ince ayar yapmaya ihtiyacımız vardı. Bu yüzden Content > General altına görseli ekledikten sonra widget seçeneklerinde Advanced > Positioning > With seçeneğine dönüp Inline’ı seçtik. Bu bize yardımcı oldu. Fakat temanıza ve ayarlarına bağlı olarak bu adımlardan geçmeniz gerekmeyebileceğini unutmayın.
Widget varsayılan olarak üç nokta oluşturur. Yenilerini ekleyebilir veya mevcut olanları kaldırabilir ve onlar için çeşitli seçenekler ayarlayabilirsiniz. Örneğin başlıklarını ve altyazılarını değiştirebilir, raptiye resimleri ekleyebilir, raptiye konumlarını ayarlayabilir ve fareyle üzerine geldiğinizde bilgi kutusunun nerede görüneceğini seçebilirsiniz.
İlk pinimiz için Yatay Pozisyonunu Orta, Dikey Pozisyonunu Üst olarak ayarladık. Daha sonra Vertical Offset’i 130’a ve Horizontal Offset’i -181’e ayarladık. Son olarak kendi başlığımızı koyduk, varsayılan alt başlığı sildik ve pini değiştirdik. Kalan öğeleri de sildik. Fakat şimdilik – onları daha sonra ekleyeceğiz.
Görüntü Sıcak Noktaları Widget’ını Şekillendirme
Style sekmesine geçtikten sonra karşınıza ilk olarak Pin Style seçenekleri çıkacaktır. Varsayılan iğneyi, rengini ve boyutunu değiştirebileceğiniz ve iğne tutucuyu iğnenin etrafına yerleştirebileceğiniz yer burasıdır.
Pin Rengini #d79b76 olarak değiştirdik ve Pin Boyutunu 18px olarak ayarladık. İğnelik Arka Plan Rengi için #ffffff seçtik. Hatta dört kenarda İğne Tutucu Boyutunu 46 piksele ve İğne Kenarlığı Yarıçapını 30 piksele ayarladık.
Bilgi Stili seçenekleri, bir görüntü etkin noktasının üzerine geldiğinizde görünen bilgi kutusunun görünümünü ve davranışını ayarlamanıza olanak tanır. Seçebileceğiniz bilgileri görüntülemek için uygun seçeneklerle iki farklı animasyon vardır. Örneğin Fade In animasyonunu seçerseniz, kutunun iğneye göre konumunu, kutuda ok olup olmadığını ve kutunun iğneden ne kadar uzakta olduğunu ayarlayabilirsiniz.
Diğer görüntüleme türü olan animasyonu ve Reveal’i seçtiğimiz için bu seçeneklerin hiçbirine sahip değildik. Fakat her tarafta Bilgi Arka Plan Rengini #4c652f olarak Bilgi Dolgusu değerlerini sırasıyla 11px, 30px, 12px ve 62px olarak ve Bilgi Kenarlık Yarıçapını 30px olarak değiştirdik.
Bilgi Başlığı Stili seçenekleri, başlık etiketini, rengi, tipografi seçeneklerini ve alt kenar boşluğunu seçmenize olanak tanır.
Başlık Rengini #ffffff olarak değiştirdik. Ardından Title Typography altında boyutu 17px olarak ayarladık.
Bilgi Altyazı Stili seçenekleri, altyazı rengi ve tipografi seçeneklerini seçmemizi sağlar. Altyazımız yoktu, bu yüzden burada yapacak bir şeyimiz yoktu. Bunun yerine, İçerik > Genel’e geri dönüp oluşturduğumuz öğeyi altı kez kopyalamaktı. Başlığı ve raptiyeyi ve konumlarını her seferinde değiştirdik.
Taş raptiye için, orijinalin yatay ve dikey konumlarını koruyarak Dikey Ofseti 113 piksele ve Yatay Ofseti 180 piksele ayarladık. Plastik pim için Yatay Konum’u Sağ’a ve Dikey Konum’u Orta’ya çevirdik. Dikey Ofseti -61px ve Yatay Ofseti 188px olarak değiştirdik. Ceramics’i 241px ve 176px Ofset değerleri ile Orta ve Alt olarak ayarladık. Çelik pim için, Ofset değerleri için 109px ve 180px ile Sağ ve Alt olarak değiştirdik. Ahşap raptiye, Ofset değerleri 106 piksel ve -76 piksel olacak şekilde Orta ve Alt olarak ayarlandı. Son olarak Reed pini için Offset değerleri 26px ve 235px olacak şekilde Sol ve Alt pozisyonunu değiştirdik.
Ve o kadardı! Elbette, fotoğraflarınıza en uygun görüntü sıcak noktalarını elde etmek için deneme yapmaktan çekinmeyin. İlhama ihtiyacınız varsa veya burada oluşturduğumuz örneğin bir web sitesinde nasıl göründüğünü görmek istiyorsanız, widget’ın açılış sayfasını her zaman ziyaret edebilirsiniz.
Gutenberg için WordPress Bloklarını Kullanarak Etkileşimli Görüntüler Nasıl Eklenir?
Etkileşimlerini artırmak için resimlerinize sıcak noktalar eklemeyi seviyorsanız. Fakat Elementor, tercih ettiğiniz sayfa oluşturucunuz değilse, endişelenmeyin. Kendi WordPress Blocks for Gutenberg eklentimiz ayrıca bir Image Hotspots bloğuna sahiptir. Bu premium bir bloktur, dolayısıyla kullanmak için eklentinin premium sürümünü edinmeniz gerekir.
Eklenti yüklenip etkinleştirildiğinde, bir görüntüye etkin noktalar eklemek çok kolaydır. Bloğun açılış sayfasındaki örneklerden biri için bunu nasıl yaptığımızı size göstereceğiz.
Bloğu bir sayfaya ekledikten sonra, varsayılan olarak orada bulunan bir yer tutucu resim ve üç raptiye göreceksiniz. Daha sonra sağ taraftaki menüye gittiğinizde, görüntüyü değiştirebileceğiniz, raptiye ekleyip kaldırabileceğiniz ve içeriklerini değiştirebileceğiniz İçerik sekmesinde açık olduğunu fark edeceksiniz.
Resmi değiştirerek başladık. Biri dışında tüm varsayılan öğeleri kaldırdık, ardından Başlığını değiştirdik, Altyazıyı kaldırdık ve Dikey Kaydırmasını %27 ve Yatay Kaydırmasını %24 olarak ayarladık. Daha sonra Başlığı ve Dikey Konumu Orta olarak değiştirdiğimiz bir sonraki öğeyi oluşturmak için bu öğeyi çoğalttık. Daha sonra Dikey Ofseti %3,5 ve Yatay Ofseti %5,5 olarak ayarladık. Bir sonraki pimin Yatay Konumu Sağ, Dikey Konum Üstü, Dikey Ofset %20 ve Yatay Ofset %22,7 idi. Son pin için değerler Sağ, Alt, %10,5 ve -%14,5 olarak ayarlandı.
Görüntü Hotspot Bloğunun Şekillendirilmesi
Daha sonra pimleri ilk kez biçimlendirmek için yola çıktığımız Stil seçeneklerine geçtik. Burada bulunan seçenekler arasında raptiye simgesinin, boyutunun ve renginin ve raptiye tutucu renginin, boyutunun ve kenarlık yarıçapının değiştirilmesi yer alır.
Pin simgesini değiştirdik ve Pin Boyutunu 15px olarak ayarladık. Daha sonra Pin Rengini #ffffff ve Pin Tutucu Arka Plan Rengini #e74242 olarak ayarlıyoruz. Son olarak Pin Tutucu Boyutu için, her tarafta 47px ve 30px Pin Tutucu Kenar Yarıçapı seçtik.
Bilgi Stili seçenekleri, bilgi kutusuna stil vermenizi sağlar. Örneğin dolgu ve kenarlık yarıçapı değerlerinin yanı sıra görüntüleme kutusunun nasıl, nerede ve ne renk görüntüleneceğini seçebilirsiniz.
Seçtiğimiz Bilgi Ekranı Fade In idi. Top Info Position’ı seçtik, oka sahip olmayı seçtik ve Info Offset’i Pin’den 11px’e ayarladık. Girdiğimiz Info Padding değerleri 13px, 25px, 13px ve 25px idi.
Bilgi Başlık Stili seçeneklerinde başlığın rengini, tipografisini, etiketini ve alt kenar boşluğunu seçebilirsiniz. Başlık Rengini #1e1e1e olarak değiştirdik. Tipografi altında Yazı Tipi Ailesini DM Sans, Yazı Tipi Boyutunu 17 piksel ve Ağırlığı Orta olarak değiştirdik.
Biçimlendirecek altyazımız olmadığı için bir gün diyebilirdik – örneğimiz tamamlandı.
Eklentileri Kullanarak Etkileşimli Görüntüler Nasıl Eklenir?
WordPress için Image Map Pro, Adverty ve WooMapper dahil olmak üzere piyasadaki diğer bazı premium eklentiler işinizi yapmanıza yardımcı olabilir. Draw Attention eklenti paketinin sunduğu özellikleri gerçekten beğendik. Eklenti, resmi WordPress eklenti deposundan ücretsiz olarak indirilebildiğinden, herhangi bir para harcamak zorunda kalmadan çok fazla değer elde edersiniz.
İlk adım, eklentiyi yüklemek ve web sitenizde etkinleştirmektir. Etkileşimli bir görüntü oluşturmaya başlamak için menünüzde Dikkat Çekin seçeneğini bulun ve Görüntüyü Düzenle’ye tıklayın.
İlk olarak resim görüntülendiğinde görünecek olan resim başlığını ekleyebilirsiniz.
Daha sonra ekranın sağ tarafında düzenlemek istediğiniz yeni resmi ekleyin veya medya kitaplığından bir resim seçin.
Resim yüklendikten sonra, çok sayıda stil seçeneğini ayarlayabilir ve renkleri değiştirebilir, varsayılan Daha Fazla Bilgi metnini vb. girebilirsiniz.
Sayfayı biraz aşağı kaydırırsanız, Hotspot Alanları bölümüne ulaşırsınız. Resminize sıcak nokta alanları eklemeye buradan başlayabilirsiniz.
Yeni başlayanlar için Tıklanabilir Alan #1’e tıklayın. Resminiz şimdi Koordinatlar altında görünecektir.
Şimdi görüntünün ilk noktayı eklemek istediğiniz bölümünü tıklamanız yeterlidir. Daha sonra bir sıcak nokta alanı oluşturacak daha fazla nokta ekleyerek çeşitli sıcak nokta şekilleri çizebilirsiniz.
Resmin altında, etkin nokta alanınız için bir başlık eklemenize, kullanıcı bir etkin noktaya tıkladığında ne olacağını seçmenize (daha fazla bilgi ekleyebilir veya bir bağlantı ekleyebilirsiniz) izin veren bir dizi ek seçenek bulacaksınız. onları başka bir web sayfasına), bir açıklama girin ve kullanıcı etkin noktaya tıkladığında görüntülenecek bir resim yükleyin.
Nihai sonuçtan memnun olduğunuzda Güncelle düğmesine basın.
Şimdi, etkileşimli görselinizi bir sayfaya veya gönderiye eklemek için ekranın sağ tarafında görüntülenen kısa kodu kopyalayın.
Daha sonra etkileşimli görüntüyü görüntülemek istediğiniz sayfaya gidin. Hâlâ Klasik Düzenleyici kullanıyorsanız, kodu Metin Düzenleyici’ye yapıştırın. Gutenberg’de önce Kısa Kod bloğunu ekleyin ve kodunuzu ekleyin. Elementor, tercih ettiğiniz sayfa oluşturucuysa, kodu Kısa Kod widget’ına ekleyin; etkileşimli görüntü sayfanızda görünecektir.
Etkileşimli Resimleri İçe / Dışa Aktarın
Draw Attention eklentisi, birden çok sitede çalışıyorsanız ve bir siteden diğerine etkileşimli görüntüleri içe ve dışa aktarmak istediğinizde kullanışlı olan başka bir pratik seçeneği bir araya getirir.
Bu durumda, önce eklentiyi her iki web sitesine de yüklemelisiniz. Görüntüyü dışa aktarmak istediğiniz web sitesinde Dikkat Çekin > İçe / Dışa Aktar’a gidin, söz konusu görüntüleri seçin ve Dışa Aktarma Kodu Oluştur düğmesine basın.
Şimdi, tüm kodu kopyalayın.
Daha sonra görüntüyü içe aktarmak istediğiniz diğer web sitesine gidin ve tekrar Dikkat Çekin > İçe Aktar / Dışa Aktar’a tıklayın, kodunuzu İçe Aktar alanına yapıştırın ve İçe Aktar düğmesine basın.
Bu eklentinin ücretsiz sürümünü kullanmanın dezavantajı, web sitenize yalnızca bir etkileşimli resim eklemenize izin vermesidir. Yine de premium planlarından birine yükseltmeyi seçerseniz, ihtiyacınız olduğu kadar etkileşimli resim ekleme ve sınırsız sayıda erişim noktası ayarlama seçeneğine sahip olacaksınız, bir…