WordPress sayesinde Hotspots ile etkileşimli bir görüntünün nasıl oluşturulacağını öğrenmek ister misiniz? Elementor ve Temel Eklentiler?

Görüntü, bilgi aktarımı için mükemmel bir araçtır. Görüntü ve bir bütün olarak görsel form yoluyla iletilen bilgilerin anlaşılmasının ve hatırlanmasının daha kolay olduğunu herkes bilir.

Web bağlamında, birçok görüntü formatını kullanabilirsiniz. Bir infografikten, bir fotoğraftan, bir çizgi romandan, bir illüstrasyondan vb.

Bir şeyin anatomisi, şehir simgeleri, haritalar veya yönler gibi web içeriği oluşturmak istiyorsanız, Hotspot'larla görüntü oluşturma harika bir fikir olabilir.

Bu tür içeriğin amacı, okuyucularınızın ilettiğiniz bilgileri anlamasını kolaylaştıran etkileşimli bir görüntü sağlamaktır. Her bir Hotspot hakkında bir araç ipucu içeren bir görüntüye Hotspot ekleyebilirsiniz. İşte bir örnek.

Si vous avez un web sitesi WordPress'e dayalı olarak, etkin noktalara sahip bir görüntü oluşturmak çok da zor değil. Modülü kullanarak bir tane oluşturabilirsiniz. Temel Eklentiler .

Essential Addons modülü nedir?

Temel Eklentiler bir EklentidirElementor. Bu, 2 milyondan fazla indirmeyle en popüler modlardan biridir. Bu eklenti, cihazınıza yaklaşık 60 ek widget ekler. Elementor.

Essential Addons tarafından sunulan widget'lardan biri EA Görüntü Noktaları etkileşimli bir görüntü oluşturmak için kullanabileceğiniz. Essential Addons'ın kendisi ücretsiz bir eklentidir, ancak EA Image Hotspots widget'ı yalnızca bu sürümde mevcut olduğundan, Hotspots ile görüntüler oluşturmak için pro sürümünü kullanmanız gerekir.

Hotspots ile görüntüler oluşturmak için Essential Addons modülü nasıl kullanılır?

Öncelikle, WordPress'inize Elementor ve Essential Addons modüllerini yüklemeniz gerekir. Essential Addons'ın pro sürümünü şu adresten edinebilirsiniz: web sitesi resmi. Elementor için ise ücretsiz sürümü kullanabilirsiniz.

Ayrıca bakınız: Elementor'da Global Widget Nasıl Kullanılır?

Elementor'un ücretsiz sürümü, dizininde mevcuttur. WordPress Plugin böylece eklenti yükleyici arama kutusuna "elementor" yazarak yükleyebilirsiniz (Eklentiler – > Ekle).

Elementor ile WordPress'te Hotspots ile etkileşimli bir görüntü oluşturun

Elementor ve Essential Eklentileri yüklendikten sonra yeni bir sayfa oluşturun (Sayfalar – > Ekle) veya yeni bir makale (Öğeler – > Ekle) ve Elementor ile düzenleyin. Düğmeye tıkladıktan sonra Elementor düzenleyicisine yönlendirileceksiniz. Elementor ile düzenle.

Görüntüleri sıcak noktalarla oluşturmadan önce düzeni ayarlayabilirsiniz. Bunu yapmak için sol panelin sol alt köşesindeki dişli simgesine tıklayarak sayfa ayarları panelini açın.

Ayrıca Oku: Elementor'un Gönderi Widget'ı Nasıl Kullanılır?

Açılır menüde düzeni ayarlayın düzen

Düzenleme kutusundaki artı simgesine tıklayarak yeni bir bölüm ekleyin ve sol panelden EA Image Hotspots widget'ını ekleyin.

Sol paneldeki resim seçiciye tıklayarak resminizi ekleyin.

Elementor ile WordPress'te Hotspots ile etkileşimli bir görüntü oluşturun

açık seçenek hotspot'lar erişim noktalarını eklemek için sol paneldeki EA Image Hotspots widget'ı varsayılan olarak bir hotspot içerir. İçeriğini düzenlemek için varsayılan erişim noktasına tıklayabilirsiniz.

Erişim noktası türü varsayılan olarak şu şekilde ayarlanmıştır: ikon. olarak değiştirebilirsiniz Metinleri ya da git Bakınız eğer istersen.

Elementor ile WordPress'te Hotspots ile etkileşimli bir görüntü oluşturun

sekmeye tıklayın POZİSYON erişim noktasının konumunu ayarlamak için. Kaydırıcıları sürükleyerek X ve Y konumlarını ayarlayın.

sekmeye tıklayın İPUCU araç ipucu içeriğini eklemek için. Araç ipucunu etkinleştirin ve içeriğinizi düzenleyicide ekleyin. Araç ipucunun konumunu üst, alt, sol veya sağ olarak da ayarlayabilirsiniz.

Daha fazla Hotspot eklemek için düğmeye tıklamanız yeterli BİR ÖĞE EKLE bölümünde hotspot'lar ve sıcak nokta konumunu, araç ipucu içeriğini ve araç ipucu konumunu ayarlamak için yukarıdaki adımları tekrarlayın.

Bölümü aç Araç İpucu Ayarları araç ipuçlarının boyutunu ve animasyon efektini ayarlamak için.

Elementor ile WordPress'te Hotspots ile etkileşimli bir görüntü oluşturun

Şimdi sekmeye git stil etkin noktalarınıza ve araç ipuçlarınıza stil vermek için. İlk olarak, seçeneği açın Resim Görüntü boyutunu ayarlamak için.

Elementor ile WordPress'te Hotspots ile etkileşimli bir görüntü oluşturun

Bölümü Aç hotspot Hotpot'ları özelleştirmek için. Boyutu, simge rengini (veya seçtiğiniz etkin nokta türüne bağlı olarak metni), arka plan rengini, kenarlık yarıçapını vb. ayarlayabilirsiniz.

Ayrıca keşfedin: Elementor'da İlgili Öğeler Nasıl Eklenir?

Bölümü aç Tooltip Araç ipuçlarını özelleştirmek için. Arka plan rengini, metin rengini, tipografiyi (yazı tipi boyutu, yazı tipi ailesi, yazı tipi stili) ve genişliği ayarlayabilirsiniz.

Şimdiye kadar etkin noktalara sahip görüntüleri başarıyla oluşturdunuz. Sonuçtan memnun kalana kadar resimlerinizi sıcak noktalarla özelleştirmek için sol panelle oynayabilirsiniz. İşiniz bittiğinde, düğmeyi tıklayabilirsiniz YAYINLA sayfanızı yayınlamak için

Gutenberg'e sıcak noktalar içeren resimler ekleyin

Üzerinde çalıştığınız makale için destek malzemesi olarak sıcak noktalara sahip görseller eklemek istiyorsanız, eklentiyi kullanarak Gutenberg (varsayılan WordPress editörü) ile entegre edebilirsiniz. Gutenberg için Elementor Blokları. Bu eklenti, Elementor şablonunu Gutenberg bloğu olarak kullanmanıza izin verir.

Yukarıdaki sıcak noktalara sahip görüntüleri bir Elementor bölüm şablonu olarak kaydetmek için bölüm tutamacına sağ tıklayın ve öğesini seçin. Şablon olarak kaydet.

Modelinize bir isim verin ve butona tıklayın KAYIT YAPTIRICI.

Elementor ile WordPress'te Hotspots ile etkileşimli bir görüntü oluşturun

Sıcak noktalar içeren resimler eklemek istediğiniz makaleyi açın. Yeni bir blok ekleyin, seçin Elementor kitaplığı ve az önce oluşturduğunuz etkin noktalara sahip görüntü şablonunu seçin.

Şimdi Elementor Pro'yu Alın !!!

Sonuç

Buraya ! Size nasıl olduğunu gösteren bu makale için bu kadar Elementor ve Essential Addons sayesinde WordPress'te Hotspots ile etkileşimli bir görüntü oluşturun. Oraya nasıl ulaşacağınızla ilgili endişeleriniz varsa, onlara Yorumlar.

Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...