3 menit
Dalam artikel ini, kita akan belajar cara membuat image Lightbox di Elementor tanpa harus menggunakan plugin tambahan atau plugin pendukung lain.
Ketika menambahkan gambar dalam website, mungkin kamu perlu memberikan fitur dimana gambar bisa diperbesar, namun tanpa harus membuka URL lengkap pada gambar tersebut, atau biasanya disebut dengan Lightbox.
Apabila kamu masih penasaran maksudnya Lightbox itu bagaimana, maka kamu bisa klik pada gambar dibawah ini untuk melihat contoh image lightbox.
Bagaimana, sekarang sudah paham maksudnya Image lightbox itu yang seperti apa? Apabila sudah, mari kita lanjutkan ke cara membuat Lightbox di Elementor.
Cara Membuat Image Lightbox di Elementor
Sebelum melanjutkan, berikut ini merupakan informasi versi, spesifikasi, atau tools yang digunakan:
- WordPress v6.5.2 (self-hosted)
- Elementor v3.21.4 (versi gratis)
- Tanpa plugin add-on lain
Apabila kamu menggunakan versi yang berbeda, mungkin terdapat beberapa tampilan yang berbeda, namun biasanya tidak terlalu jauh berbeda.
Langsung saja, berikut adalah langkah-langkah untuk membuat image lightbox di Elementor.
1. Buat atau Edit Halaman
Hal pertama yang perlu kamu lakukan adalah membuat atau mengedit halaman yang akan kamu tambahkan Lightbox didalamnya.
Untuk membuat halaman, maka kamu bisa membuka menu Pages > Add new page. Atau apabila kamu ingin menambahkan post, maka kamu bisa membuka menu Posts > Add new post dari halaman dashboard WordPressmu.
2. Gunakan Elementor Editor
Setelah berada dihalaman yang akan kamu tambahkan atau edit, maka kamu bisa mengubah editor dari default WordPress menjadi Elementor Editor menggunakan tombol Edit with Elementor.
3. Tambahkan Widget Gambar
Ketika sudah berada dihalaman Elementor, maka kamu bisa menarik widget gambar untuk ditambahkan kedalam artikel atau halaman yang kamu edit tersebut, dan juga pada posisi yang diinginkan.
Untuk menambahkan widget, maka kamu bisa langsung menarik widget dari panel sebelah kiri.
4. Tambahkan Gambar
Setelah menambahkan Widget, maka kamu bisa menambahkan gambar dengan memilih dari yang ada di media library, atau upload gambar baru yang akan kamu tambahkan.
5. Tambahkan Efek Lightbox
Selanjutnya, untuk menambahkan Lightbox, maka kamu perlu mengubah konfigurasi Link pada gambar menjadi Media File, kemudian ubah opsi Lightbox menjadi Yes, sehingga hasilnya menjadi seperti ini
6. Preview Lightbox dan Publish
Sekarang kamu bisa memeriksa apakah lightbox sudah berhasil dibuat atau tidak dengan cara menyembunyikan panel yang ada di sebelah kanan, kemudian klik pada gambar.
Apabila berhasil, maka ketika gambar di klik akan otomatis diperbesar dan konten lain akan ditutup oleh background sehingga kamu bisa fokus pada gambar.
Apabila semuanya sudah sesuai, maka kamu bisa menyimpan atau publish halaman yang sudah kamu buat tersebut.
Itulah cara mudah untuk membuat lightbox di Elementor tanpa harus menggunakan versi berbayar ataupun plugin add-on lain.
Terima kasih telah berkunjung ke WPGan.com. Dapatkan saldo $100 di Vultr gratis dan deploy servermu sendiri melalui [Halaman Ini]