Apakah Anda ingin mengetahui cara membuat gambar interaktif dengan Hotspot di WordPress berkat Elementor dan Tambahan Esensial?
Gambar adalah alat yang sangat baik untuk mengirimkan informasi. Semua orang tahu bahwa informasi yang disampaikan melalui gambar — dan bentuk visual secara keseluruhan — lebih mudah dipahami dan diingat.
Dalam konteks web, Anda dapat menggunakan banyak format gambar. Dari infografik, foto, komik strip, ilustrasi, dll….
Jika Anda ingin membuat konten web seperti anatomi sesuatu, landmark kota, peta, atau petunjuk arah, membangun gambar dengan Hotspot bisa menjadi ide bagus.
Ide dari jenis konten ini adalah untuk memberikan gambar interaktif yang memudahkan pembaca Anda untuk memahami informasi yang Anda sampaikan. Anda dapat menambahkan Hotspot pada gambar yang berisi tooltip pada setiap Hotspot. Ini sebuah contoh.
Jika Anda memiliki situs web berdasarkan WordPress, membuat gambar dengan hotspot tidak terlalu sulit dilakukan. Anda dapat membuatnya menggunakan modul Addon Penting .
Apa itu modul Essential Addons?
Addons Esensial adalah Add-on untukElementor. Ini adalah salah satu mod paling populer dengan lebih dari 2 juta unduhan. Add-on ini menambahkan sekitar 60 widget tambahan ke Elementor.
Salah satu widget yang ditawarkan oleh Essential Addons adalah Hotspot Gambar EA yang dapat Anda gunakan untuk membuat gambar interaktif. Essential Addons sendiri adalah addon freemium, tetapi Anda harus menggunakan versi pro untuk membuat gambar dengan Hotspot karena widget EA Image Hotspots hanya tersedia pada versi ini.
Cara menggunakan modul Essential Addons untuk membuat gambar dengan Hotspot
Pertama, Anda perlu menginstal modul Elementor dan Essential Addons di WordPress Anda. Anda bisa mendapatkan versi pro dari Essential Addons di dalamnya situs web resmi. Sedangkan untuk Elementor, Anda bisa menggunakan versi gratisnya.
Lihat juga: Cara Menggunakan Widget Global di Elementor
Versi gratis Elementor tersedia di direktori WordPress Plugin sehingga Anda dapat menginstalnya dengan mengetikkan "elementor" pada kotak pencarian penginstal plugin (Plugin – > Tambah).
Setelah Elementor dan Essential Addons diinstal, buat halaman baru (Halaman – > Tambah) atau barang baru (Item – > Tambah) dan edit dengan Elementor. Anda akan diarahkan ke editor Elementor setelah mengklik tombol Edit dengan Elementor.
Sebelum membuat gambar dengan hotspot, Anda dapat mengatur tata letaknya terlebih dahulu. Untuk melakukannya, buka panel pengaturan halaman dengan mengklik ikon roda gigi di pojok kiri bawah panel kiri.
Baca juga: Cara Menggunakan Widget Posting Elementor
Atur tata letak pada menu drop-down Layout
Tambahkan bagian baru dengan mengklik ikon plus di kotak edit dan tambahkan widget EA Image Hotspots dari panel kiri.
Tambahkan gambar Anda dengan mengeklik pemilih gambar di panel kiri.
opsi terbuka Hotspot di panel kiri untuk menambahkan titik akses. Secara default, widget EA Image Hotspots berisi hotspot. Anda dapat mengklik titik akses default untuk mengedit isinya.
Secara default, tipe titik akses diatur ke icon. Anda dapat mengubahnya menjadi teks atau pergi Lihatlah jika Anda menginginkannya.
Klik pada tab POSISI untuk mengatur posisi titik akses. Atur posisi X dan Y dengan menyeret penggeser.
Klik pada tab KETERANGAN ALAT untuk menambahkan konten tooltip. Aktifkan tooltip dan tambahkan konten Anda di editor. Anda juga dapat mengatur posisi tooltip, baik atas, bawah, kiri atau kanan.
Untuk menambahkan lebih banyak Hotspot, cukup klik tombol TAMBAHKAN ELEMEN di bagian Hotspot dan ulangi langkah di atas untuk mengatur posisi hotspot, konten tooltip, dan posisi tooltip.
Buka bagian Pengaturan keterangan alat untuk mengatur ukuran tooltips dan efek animasi.
Sekarang buka tab Gaya untuk menata hotspot Anda serta tooltips. Pertama, buka opsi Gambar untuk mengatur ukuran gambar.
Buka Bagian hotspot untuk menyesuaikan hotpot. Anda dapat mengatur ukuran, warna ikon (atau teks tergantung pada jenis hotspot yang Anda pilih), warna latar belakang, radius batas, dll…
Temukan juga: Cara Menambahkan Item Terkait di Elementor
Buka bagian Tooltip untuk menyesuaikan tooltips. Anda dapat mengatur warna latar belakang, warna teks, tipografi (ukuran font, jenis font, gaya font) dan lebar.
Sejauh ini Anda telah berhasil membuat gambar dengan hotspot. Anda dapat bermain-main dengan panel kiri untuk menyesuaikan gambar Anda dengan hotspot sampai Anda puas dengan hasilnya. Setelah selesai, Anda dapat mengklik tombol MENERBITKAN untuk menerbitkan halaman Anda.
Tambahkan gambar dengan hotspot ke Gutenberg
Jika Anda ingin menambahkan gambar dengan hotspot sebagai bahan pendukung artikel yang sedang Anda kerjakan, Anda dapat mengintegrasikannya dengan Gutenberg (editor default WordPress) menggunakan plugin Blok Elementor untuk Gutenberg. Plugin ini memungkinkan Anda untuk menggunakan template Elementor sebagai blok Gutenberg.
Untuk menyimpan gambar dengan hotspot di atas sebagai templat bagian Elementor, klik kanan pada pegangan bagian dan pilih Simpan sebagai Templat.
Beri nama model Anda dan klik tombolnya PENDAFTARAN.
Buka artikel tempat Anda ingin menambahkan gambar dengan hotspot. Tambahkan blok baru, pilih Perpustakaan elemen dan pilih template gambar dengan hotspot yang baru saja Anda buat.
Dapatkan Elementor Pro Sekarang!!!
Kesimpulan
Di Sini ! Itu saja untuk artikel ini yang menunjukkan caranya buat gambar interaktif dengan Hotspot di WordPress berkat Elementor dan Essential Addons. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana, beri tahu mereka di komentar.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
