Situs Wix dari Scratch - Grid Gallery

• Mungkin 2, 2024

Dalam tutorial ini, kami akan menambahkan galeri ke situs web Wix kami, yang telah kami buat dari templat kosong. Mulai dari awal adalah cara yang bagus untuk mempelajari dasar-dasarnya.

Berbeda dengan templat Wix yang tidak dapat dipertukarkan, Anda dapat mengganti tipe galeri untuk tampilan baru kapan saja. Ada banyak jenis galeri, dari grid Masonry ke Honeycomb. Setiap galeri memiliki fitur-fiturnya sendiri. Mari kita lihat galeri Grid (potret) dasar.

1. Klik ikon Plus di menu sebelah kiri dan pilih Galeri dari daftar.
   
   
2. Arahkan kursor ke setiap thumbnail galeri untuk melihat pratinjau dan deskripsi.
   
   
3. Sekarang, seret galeri Kotak ke halaman.
   
   
4. Gunakan Resize Handles untuk mengubah ukuran grid sesuai keinginan. Saya mengubah ukuran grid menjadi lebar 980 halaman.
   
   Pada titik ini galeri memiliki beberapa gambar placeholder. Mari kita simpan mereka untuk saat ini dan bekerja pada menyesuaikan pengaturan galeri untuk kebutuhan kita.
   
   Pengaturan Galeri Grid
   
   Penskalaan Gambar - Anda memiliki pilihan untuk memotong atau menskalakan gambar agar sesuai dengan bingkai. Pengaturan Autocrop secara otomatis akan memotong gambar agar sesuai dengan bingkai dan opsi Fit akan mengubah ukuran gambar agar sesuai dengan bingkai.
   
   When Clicked - Anda memiliki tiga opsi untuk apa yang terjadi ketika gambar galeri diklik. Satu pilihan untuk tidak terjadi apa-apa. Yang kedua adalah memiliki gambar terbuka sebagai pop up. Yang ketiga adalah membuka tautan. Sebagian besar waktu, pop up adalah pilihan yang baik karena gambar ditampilkan pada ukuran yang lebih besar. Tetapi jika Anda ingin mengirim pengunjung ke halaman lain, gunakan opsi Buka Tautan.
   
   
5. Pilih Galeri dan klik ikon Pengaturan di menu sembulan.
   
   
6. Di jendela Pengaturan Grid, temukan bagian Bagaimana Melakukan Gambar. Pilih Autocrop atau Fit.
   
   
7. Di bagian Saat diklik, atur salah satu dari tiga opsi.
   
   Desain Galeri
   
   Seperti disebutkan di atas, Anda dapat beralih desain galeri kapan saja. Tapi mari kita lanjutkan dengan menyesuaikan desain kisi kami. Untuk desain kisi, kita dapat menyesuaikan perbatasan, sudut, bayangan, dan teks.
   
   
8. Dengan galeri masih dipilih, klik ikon Desain (kuas cat).
   
   
9. Untuk pengaturan Border, kita dapat mengubah warna, opacity dan lebar perbatasan. Mari kita menjaga pengaturan default lebar diatur ke 0 dan karenanya tidak ada batas.
   
   
10. Radius Corner - Klik ikon untuk Radius Corner dan atur radius sudut kiri atas sesuka Anda. Karena ikon tautan menunjukkan tiga sudut lainnya akan diperbarui agar sesuai.
    
    
11. Shadow - Pilih ikon Shadow. Untuk menambahkan drop shadow, klik sakelar Aktifkan Shadow dan atur Angle, Distance, Size, Blur dan Color / Opacity untuk shadow.
    
    
12. Teks - Klik ikon T untuk mengatur opsi untuk pengaturan Judul, Deskripsi dan Lainnya. Mari kita ubah teks dari default ke tema teks Paragraf 1 kami. Ulangi untuk teks Keterangan.
    
    pengaturan tampilan
    
    Untuk desain Galeri Grid, kita dapat mengontrol jumlah kolom dan baris untuk thumbnail. Kami juga dapat mengontrol jarak antara gambar mini dan bagaimana teks ditampilkan di atas gambar.
    
    
13. Dengan galeri masih dipilih, klik ikon Layout dari menu pop up.
    
    
14. Gunakan bilah geser untuk mengatur jumlah kolom dan baris. Menambahkan lebih banyak kolom dan baris akan menghasilkan gambar kecil di grid.
    
    
15. Anda dapat menggunakan slider Spacing untuk menambah jumlah piksel di antara gambar kecil. Menambahkan lebih banyak ruang akan mengurangi ukuran thumbnail.
    
    
16. Di bawah slider adalah bagian pelurusan teks. Anda memiliki opsi untuk teks ditampilkan di kiri, kanan atau tengah.
    
    

Tangkapan layar yang digunakan atas izin Wix.com, Inc.

Petunjuk Video: Managing and Editing Databases in Wix - Wix Code Tutorial 2018 (Mungkin 2024).