Apakah Anda ingin membuat peta dengan beberapa lokasi di WordPress dengan Elementor dan Tambahan Esensial?
Misalkan Anda memiliki bisnis yang sudah memiliki beberapa cabang di kota, dan Anda ingin membuat peta digital yang menunjukkan lokasi cabang tersebut. Jika Anda memiliki situs web berbasis WordPress, Anda dapat membuat peta seperti itu dengan mudah. Ada plugin hebat yang dapat Anda gunakan untuk membuat peta multi-lokasi: Addon Penting.
Addon Penting adalah tambahan Elementor premium jadi Anda juga perlu menginstal Elementor sebelum Anda dapat menggunakannya. Anda dapat menggunakan Elementor versi gratis untuk membuat kartu dengan modul Essential Addons.
La versi gratis dari Essential Addons juga tersedia. Namun, widget untuk membuat peta hanya tersedia pada versi berbayar. Anda dapat mengunduh Essential Addons versi berbayar di dalamnya situs web resmi.
Kami akan menggunakan platform Google Maps untuk membuat peta di WordPress Anda menggunakan Essential Addons. Sebelum Anda mulai, pastikan untuk menginstal Elementor dan Essential Addons.
Integrasikan Google Maps dengan modul Essential Addons
Sebelum Anda dapat menambahkan peta Google Maps dengan Essential Addons, Anda harus mengintegrasikannya terlebih dahulu. Anda memerlukan kunci API untuk mengintegrasikan Google Maps dengan modul Essential Addons.
Pertama, kunjungi Konsol API Google dan masuk dengan akun Google Anda. Buat proyek baru dengan mengklik menu drop-down di bagian atas dan klik PROYEK BARU.
Beri nama proyek baru Anda dan klik tombolnya MENCIPTAKAN .
Setelah proyek baru Anda dibuat, pilih dari menu drop-down dan klik Perpustakaan di panel kiri.
Google membagi Google Maps Platform API menjadi 17 jenis. Anda dapat melihatnya dengan mengklik tautan TAMPILKAN SEMUA di bagian tersebut Peta. Anda perlu mengaktifkan API tergantung pada apa yang ingin Anda capai.
Temukan juga: Cara Membuat Templat Produk Tunggal Khusus di WooCommerce dengan Elementor
Dalam kasus kami, Anda perlu mengaktifkan API berikut untuk menambahkan peta dari Google Maps menggunakan Essential Addons.
- Petunjuk API
- API Geocoding
- Peta JavaScript API
- Tempat API
Untuk mengaktifkan API, pilih API yang ingin Anda aktifkan (dengan mengkliknya) dan klik tombolnya MENGAKTIFKAN.
Setelah Anda selesai mengaktifkan API yang diperlukan, kembali ke dasbor utama Konsol Google API dan klik identifier di panel kiri. Klik tombolnya Buat kredensial dan pilih Kunci API. Salin kunci API pada popup yang muncul.
Masuk ke dasbor WordPress Anda dan klik Addon Penting di panel kiri. Klik pada tab Elemen dan gulir ke bawah di bagian tersebut Peta Google tingkat lanjut. Klik di Settings dan rekatkan kunci API yang baru saja Anda salin.
Klik pada tombol SIMPAN PENGATURAN untuk menerapkan perubahan baru.
Mulailah membuat peta
Setelah Google Maps dan Essential Addons terintegrasi, Anda dapat mulai membuat peta. Untuk melakukannya, buat halaman baru (Halaman – > Tambah ) atau barang baru (Item – > Tambah) dan edit dengan Elementor.
Sebelum membuat halaman, atur tata letak dengan mengklik ikon roda gigi di pojok kiri bawah untuk membuka panel Pengaturan. Atur tata letak dari menu drop-down.
Buat bagian baru dengan mengklik tombol tambah di kotak edit. Untuk memiliki area peta yang lebih luas, Anda dapat memilih struktur kolom tunggal. Seret widgetnya EA Google Maps dari panel kiri ke area pengeditan.
Pergi ke panel kiri dan setel jenis kartu ke multiple-marker.
Buka bagian Pengaturan Penanda Peta dan klik penanda peta yang ada untuk mengeditnya. Rekatkan lintang dan bujur dari lokasi pertama yang ingin Anda tambahkan ke peta. Atur juga judul serta deskripsinya.
Untuk mendapatkan lintang dan bujur suatu lokasi, buka Google Maps dan cari lokasi (tempat) lintang dan bujur yang ingin Anda dapatkan. Setelah ditemukan, klik dengan klik kanan mouse dan klik kiri pada nomor yang muncul di menu kontekstual.
Oleh karena itu tindakan ini memungkinkan Anda untuk menyalin garis lintang (nilai pertama) dan garis bujur (nilai kedua).
Setelah selesai menambahkan lintang dan bujur dari lokasi pertama, klik tombol tersebut TAMBAHKAN ELEMEN untuk menambahkan lokasi lain ke peta Anda.
Buka Google Maps lagi dan temukan lokasi baru yang ingin Anda tambahkan ke peta dan salin bujur serta bujur dan rekatkan ke bidang masing-masing seperti di atas. Ulangi langkah di atas untuk menambahkan lebih banyak lokasi ke peta.
Baca juga: Cara Menggunakan Widget Posting Elementor
Setelah selesai menambahkan lokasi, buka blok Kontrol Peta untuk mengaktifkan/menonaktifkan perintah yang ingin Anda berikan pada kartu Anda. Anda juga dapat mengatur tingkat zoom di sini.
Anda juga dapat membuka blok Tema Peta untuk memilih tema Google Maps yang ingin Anda gunakan.
Sejauh ini Anda telah berhasil membuat peta dengan banyak lokasi. Anda dapat membuka tab Gaya untuk menentukan tinggi serta lebar peta.
Jika Anda ingin memiliki peta dengan lebar penuh, setel bagian yang memuat peta ke lebar penuh. Untuk melakukan ini, klik pegangan bagian tersebut.
Di tab dan blokir Layout atur Lebar konten ke lebar penuhr dan celah Kolom aktif Tidak ada penyimpangan
Klik tombol DITERBITKANER di bagian bawah panel kiri untuk menerbitkan halaman Anda.
Sematkan peta di halaman atau postingan
Jika karena alasan tertentu Anda lebih suka menyematkan peta Anda di halaman/posting (halaman/posting yang dibuat dengan editor default WordPress — Gutenberg), Anda dapat menggunakan WordPress Plugin Blok Elementor untuk Gutenberg. Plugin ini akan mengubah template Elementor menjadi blok Gutenberg.
Untuk menyimpan peta yang baru saja Anda buat sebagai template Elementor, klik ikon panah di sebelah tombol PUBLIKASIKAN / PERBARUI dan pilih Simpan sebagai Templat.
Beri nama model Anda dan klik tombolnya PENDAFTARAN.
Selanjutnya, buat halaman atau posting baru (pastikan Anda telah menginstal Plugin Elementor Blok untuk Gutenberg). Tambahkan blok baru dan pilih Perpustakaan elemen dan pilih template yang baru saja Anda buat.
Catatan: Jika Anda melihat pesan 'Hanya untuk tujuan pengembangan' saat menambahkan kartu, pastikan untuk mengaktifkan penagihan Google Cloud Anda. Kebijakan Google yang baru mengharuskan pengembang untuk mengaktifkan akun penagihan (Anda tetap dapat menggunakan Google Maps API secara gratis).
Dapatkan Elementor Pro Sekarang!!!
Kesimpulan
Jadi ! Itu saja untuk artikel ini yang menunjukkan cara membuat peta dengan banyak lokasi dengan Elementor. 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.
...
