Lightbox - Bantuan Webflow
Gunakan elemen lightbox untuk menampilkan gambar atau video dalam jendela modal layar penuh.
Cara membuat lightbox
Lightbox adalah thumbnail yang dapat diklik yang ditempatkan dalam blok tautan. Ketika pengunjung situs mengklik di dalam batas tautan di situs langsung, lightbox terbuka untuk menampilkan media yang terhubung dengannya. Anda dapat menambahkan lightbox dari Panel Tambah > Lanjutan.
Cara kerja gambar thumbnail placeholder lightbox
Lightbox berisi elemen gambar yang berperilaku seperti elemen gambar lainnya. Anda dapat mengubah ukurannya, klik dua kali untuk mengganti gambar thumbnail placeholder, dan menambahkan teks alt. Pelajari lebih lanjut tentang elemen gambar.
Anda dapat menggunakan gambar yang sama untuk thumbnail lightbox dan jendela modal lightbox yang lebih besar. Webflow secara otomatis membuat varian responsif untuk semua gambar inline. Pelajari lebih lanjut tentang gambar responsif.
Cara mengganti thumbnail lightbox dengan konten lain
Anda mengganti elemen gambar placeholder dan menyeret serta menjatuhkan konten lain (misalnya, judul, atau elemen non-tautan lainnya) di dalam tautan lightbox.
Anda juga dapat menggunakan blok div dan menerapkan gambar latar belakang untuk membuat thumbnail gambar berukuran sama.
Cara menata lightbox
Anda dapat menata tautan lightbox dan kontennya. Misalnya, jika Anda menyematkan elemen teks dalam tautan lightbox Anda, Anda dapat menata tipografi elemen tautan lightbox.
Cara menambahkan media lightbox
Untuk menambahkan gambar dan keterangan ke jendela modal lightbox:
- Pilih tautan lightbox di kanvas
- Buka Panel pengaturan elemen > Pengaturan tautan lightbox > Media
- Klik ikon “Tambahkan item daftar”
- Pilih "Gambar" sebagai Jenis
- Klik Ganti gambar
- Pilih gambar dari Panel aset
- Tambahkan Keterangan jika diperlukan
Anda dapat menambahkan sebanyak mungkin gambar ke tautan lightbox sesuai keinginan. Gambar-gambar ini akan ditampilkan sebagai slideshow di dalam jendela modal lightbox.
Untuk menambahkan video ke jendela modal lightbox:
- Pilih tautan lightbox di kanvas
- Buka Panel pengaturan elemen > Pengaturan tautan lightbox > Media
- Klik ikon “Tambahkan item daftar”
- Pilih "Video" sebagai Jenis
- Tambahkan URL video ke kolom URL
- Tambahkan Judul jika diperlukan
Lightbox untuk gambar dan video - Tutorial desain web
Cara membuat lightbox dinamis dari media bidang Koleksi
Anda dapat membuat lightbox dinamis dengan menarik gambar thumbnail dan/atau media lightbox dari bidang Koleksi media (misalnya, bidang gambar, bidang multi-gambar, atau bidang video) di CMS atau Koleksi Ecommerce Anda.
Untuk menghubungkan bidang Koleksi dinamis ke thumbnail lightbox:
- Tambahkan lightbox ke daftar Koleksi yang terhubung secara dinamis atau halaman Koleksi CMS
- Pilih gambar thumbnail placeholder
- Buka Pengaturan elemen > Pengaturan gambar
- Klik ikon "titik ungu" di kolom Gambar
- Pilih bidang Koleksi gambar
Kemudian, Anda dapat menghubungkan lightbox ke bidang Koleksi, sehingga gambar Koleksi dinamis Anda tersedia di lightbox. Untuk menghubungkan bidang Koleksi dinamis ke media lightbox:
- Pilih tautan lightbox
- Pergi ke Pengaturan Elemen > Pengaturan tautan Lightbox
- Klik ikon "titik ungu" di bidang Media
- Pilih bidang Koleksi media
Untuk menghubungkan lightbox ke bidang multi-gambar:
- Tambahkan daftar Koleksi ke halaman Koleksi
- Hubungkan daftar Koleksi ke bidang multi-gambar dengan mengklik dropdown Sumber dan memilih bidang multi-gambar
- Tambahkan lightbox ke daftar Koleksi
- Pilih elemen gambar di lightbox
- Pergi ke Pengaturan Elemen > Pengaturan Gambar
- Klik ikon "titik ungu" di bidang Gambar
- Pilih bidang multi-gambar
- Pilih tautan lightbox di kanvas
- Pergi ke Pengaturan Elemen > Pengaturan tautan Lightbox
- Klik ikon "titik ungu" di bidang Media
- Pilih bidang multi-gambar
Anda juga dapat menghubungkan lightbox ke bidang multi-gambar ketika lightbox ditambahkan ke daftar Koleksi atau halaman Koleksi.
Cara menghubungkan lightbox menggunakan grup lightbox
Anda dapat menghubungkan beberapa lightbox bersama untuk membuat galeri slideshow. Ketika pengunjung situs mengklik lightbox yang terhubung, lightbox akan membuka semua media yang terkait dengan grup yang terhubung.
Cara membuat grup lightbox
- Pilih elemen apa saja di lightbox
- Pergi ke Pengaturan Elemen > Pengaturan Lightbox
- Masukkan nama grup di bidang Cocokkan atau buat nama grup
Lightbox yang menggunakan nama grup yang sama terhubung dalam satu grup.
Untuk lightbox dalam daftar Koleksi, membuat dan menghubungkan satu lightbox dalam item Koleksi secara otomatis menghubungkan semua lightbox dalam daftar Koleksi.
Buat beberapa grup lightbox di halaman
Jika ada beberapa lightbox pada halaman yang sama, Anda dapat memisahkannya dengan memberikan setiap grup lightbox nama Grup yang berbeda.