Galeri gambar adalah tujuan favorit di sebagian besar situs web. Dan, dalam banyak kasus, mungkin yang terbaik adalah menjaga galeri gambar tetap bahagia dan statis, membiarkan gambar bekerja dengan ajaib.
Tapi, tambahkan efek geser puzzle geser ke sebuah galeri gambar (seperti yang akan kita lakukan dalam tutorial ini), dapat memberikan sentuhan yang menyegarkan untuk klasik abadi.
Dalam tutorial ini, kami akan menunjukkan cara membuat tata letak sederhana yang menampilkan galeri gambar dengan efek scrolling puzzle geser di Divi.
Kuncinya adalah memahami bagaimana hubungan ukuran gambar dengan nilai ofset vertikal dan horizontal dari setiap efek gulir untuk memindahkan gambar tepat satu titik. Namun setelah selesai, efek gerakan yang dihasilkan terlihat tajam dan tepat karena secara bertahap mengumpulkan dan menampilkan galeri gambar dengan cara yang unik.
Kemungkinan Hasil
Berikut adalah gambaran umum layout galeri gambar dengan efek scrolling puzzle geser yang akan kita buat dalam tutorial ini.
Membuat bagian tajuk
Untuk memulai, mari buat bagian tajuk cepat yang akan memberi tahu pengguna untuk menggulir halaman untuk melihat galeri dan dengan efek pengguliran yang mengagumkan.
Tambahkan satu baris
Tambahkan satu baris dari satu kolom ke bagian default.
Tambahkan modul teks
Di dalam kolom / baris tambahkan modul teks baru.
Dalam pengaturan teks, perbarui konten isi dengan yang berikut ini:
<h1>Image Gallery</h1>
Pengaturan modul teks
Pada tab Desain, perbarui desain teks sebagai berikut:
- Font judul: Roboto
- Berat font judul: tebal
- Gaya font judul: TT
- Perataan Teks Tajuk: Tengah
- Ukuran teks header: 50px (desktop), 40px (tablet dan ponsel)
- Spasi surat judul: 4px
Tambahkan ikon modul Blurb
Setelah teks di tempat, tambahkan modul teks presentasi baru di bawah modul teks.
Kemudian hapus semua judul dan isi dari konten default dan pilih untuk menggunakan ikon panah bawah.
Pengaturan teks presentasi
Kemudian perbarui pengaturan teks presentasi dengan warna baru dan animasi slide berulang.
- Warna Ikon: # ffb500
- Gaya Animasi: Slide
- Arah animasi: turun
- Intensitas animasi: 20%
- Animasi ulangi: loop
Bagian padding
Untuk memberikan ruang bagian untuk menggulir, perbarui padding sebagai berikut:
- Padding: 20vh di atas, 50vh di bawah
Di sini kita menggunakan satuan panjang vh yang relatif terhadap tinggi jendela browser sehingga jaraknya cocok secara konsisten di semua ukuran browser.
Pembuatan galeri gambar dengan efek bergulir
Sekarang setelah bagian tajuk kita selesai, kita siap untuk membangun galeri gambar sebenarnya dengan efek gulir puzzle geser. Seluruh galeri akan terdiri dari tiga baris 4 gambar / kolom di setiap baris sehingga total menjadi 12 gambar. Namun, Anda dapat dengan mudah menambahkan lebih banyak garis dan gambar ke tata letak setelah selesai.
Membuat bagian dan garis
Tambahkan bagian baru
Mari kita mulai dengan menambahkan bagian reguler baru di bawah bagian judul.
Tambahkan satu baris
Kemudian tambahkan baris dengan empat kolom ke bagian.
Pengaturan saluran
Di bawah pengaturan garis, perbarui yang berikut:
- Lebar selokan: 1
- Lebar: 100%
- Lebar maksimum: 1200 px (desktop), 600 px (tablet), 300 px (telepon)
Bagaimana lebar garis menentukan ukuran gambar
Lebar baris sangat penting untuk desain ini karena akan menentukan lebar masing-masing dari empat kolom. Setelah kami menyetel lebar talang ke 1, tidak akan ada lagi margin di antara gambar.
Dan ketika kita mengatur lebar maksimum ke 1200px, tata letak empat kolom akan membuat masing-masing kolom / gambar persis 300px lebar (1200px / 4 = 300px).
Selain itu, karena setiap gambar berbentuk persegi, kita tahu bahwa tinggi setiap gambar juga akan menjadi 300 piksel. Kita tidak harus tetap seperti itu jika kita tidak mau.
Misalnya, kami juga dapat memilih untuk memiliki tata letak tiga kolom dengan gambar 400 x 400 piksel. Mengetahui lebar gambar (300px) dan tinggi (juga 300px) akan menjadi kunci untuk menciptakan efek scroll nantinya.
Menambahkan gambar
Tambahkan gambar 1
Gambar 1 Efek gulir
Hubungan antara ukuran gambar dan offset efek gulir
Saat menggunakan efek pengguliran vertikal dan horizontal, penting untuk memahami apa yang diwakili oleh nilai numerik yang dimasukkan. Dalam contoh ini, kami memiliki offset awal pergerakan vertikal -3. Ini -3 sebenarnya -300px (atau 300px ke bawah) yang merupakan lebar gambar.
Offset kemudian mencapai 0 (posisi awal) saat pengguna menggulir. Inilah yang menciptakan efek gulir yang memindahkan gambar ke satu blok / bingkai. Gerakan horizontal dimulai pada 3 (300 piksel dari kanan) dan berhenti di posisi defaultnya. Kedua efek ini digabungkan untuk membuat efek pengguliran dua bagian yang unik.
Tambahkan gambar 2
Setelah efek gulir ditambahkan ke gambar 1. Tambahkan gambar baru ke kolom 2.
Kami akan meninggalkan gambar statis ini tanpa efek gulir.
Tambahkan gambar 3
Kemudian tambahkan modul gambar lain ke kolom 3 dan perbarui modul dengan gambar baru.
Gambar 3 Efek gulir
Di bawah Pengaturan Gambar, perbarui efek gulir berikut:
Di bawah tab gerakan Horizontal ...
- Aktifkan gerakan horisontal: YES
- Mulai offset: -3 (pada 0% dari jendela)
- Offset rata-rata: 0 (pada 15% viewport)
- Offset akhir: 0 (pada 100% viewport)
Tambahkan gambar 4
Untuk membuat gambar terakhir, copy gambar 1 dan paste di kolom 4.
Unggah gambar baru di pengaturan gambar.
Gambar 4 Efek gulir
Kemudian perbarui efek gulir berikut:
Di bawah tab gerakan Vertikal ...
- Aktifkan gerakan vertikal: YES
- Mulai offset: 3 (pada 0% dari jendela)
- Rata-rata offset: 0 (pada 15% -28% dari viewport)
- Offset akhir: 0 (pada 40% viewport)
Di bawah tab gerakan Horizontal ...
- Aktifkan gerakan horisontal: YES
- Mulai offset: 3 (pada 0% dari jendela)
- Offset rata-rata: 3 (pada 28% viewport)
- Offset akhir: 0 (pada 40% viewport)
Baris duplikat
Sekarang setelah efek pengguliran gambar selesai untuk baris pertama, yang perlu kita lakukan adalah menduplikasi baris untuk membuat lebih banyak gambar dan efek penggulirannya yang sesuai. Untuk contoh ini, mari duplikasi baris dua kali untuk membuat total tiga baris.
Ganti dan atur ulang gambar sesuai kebutuhan
Kemudian kita dapat memindahkan gambar menggunakan fungsi drag and drop kemanapun kita mau. Di sinilah Anda bisa berkreasi dan melihat bagaimana gambar bergerak akan bergulir. Dan setelah gambar terpasang, Anda dapat mengganti konten modul gambar dengan gambar baru yang memenuhi kebutuhan situs jaringan.
Sentuhan akhir
Visibilitas bagian
Karena gambar kita mungkin akan meluas ke luar bagian / jendela, mari kita sembunyikan luapan untuk membersihkannya sedikit. Buka pengaturan bagian dan perbarui yang berikut:
- Overflow horisontal: disembunyikan
- Overflow vertikal: disembunyikan
Bagian padding
Kami ingin efek pengguliran vertikal dari gambar atas (yang meluas di atas bagian) terlihat meskipun ada luapan tersembunyi. Jadi mari tambahkan padding atas dan bawah yang sama dengan tinggi gambar (300 piksel).
Hasil sejauh ini
Sekarang kita bisa berhenti di sini jika ingin mempertahankan desain galeri tanpa ada spasi antar gambar. Seperti inilah hasilnya sejauh ini. Perhatikan bagaimana gambar bergerak secara vertikal dan horizontal tepat satu blok / bingkai.
Menambahkan spasi antar gambar
Karena kami menyetel lebar talang ke 1, kami tidak lagi memiliki margin antara kolom atau gambar kami. Untuk membuat ulang jarak yang serupa, kita dapat menambahkan isian ke setiap frame.
Ini akan memungkinkan kita membuat jarak yang kita butuhkan tanpa mengorbankan fungsionalitas efek gulir. Hal ini dimungkinkan karena menambahkan bantalan ke gambar tidak akan menambah lebar atau tinggi penampung gambar. Anda juga bisa mendapatkan efek serupa dengan menggunakan batas juga.
Gambar 1 Padding
Buka pengaturan untuk gambar 1 dan perbarui yang berikut ini:
- Padding: 10 piksel di bagian atas, 10 piksel di bagian bawah, 10 piksel di sebelah kiri, 10 piksel di sebelah kanan
Perpanjang isian ke semua gambar
Sebelum menyimpan, klik kanan pada opsi padding dan pilih "Extend padding". Di jendela pop-up Perluas Gaya, klik tombol Perluas untuk memperluas isian ini ke semua gambar di halaman.
Hasil akhir
Ini adalah hasil dari semua pekerjaan yang telah kami lakukan sejauh ini.
final pikiran
Efek geser puzzle geser yang ditampilkan dalam artikel ini tidak lebih dari sekadar memberi kami desain unik untuk galeri gambar. Ini juga menunjukkan bahwa offset gerakan horizontal dan vertikal dapat digunakan untuk efek scrolling yang lebih presisi.
Jangan ragu untuk menjelajahi berbagai variasi tata letak ini dengan mengubah offset dan mencampurkan lokasi gambar.
Anda juga dapat mengubah jumlah kolom selama Anda memahami bagaimana ukuran kolom / gambar akan berubah dan kemudian bagaimana cara memperbarui offset efek gulir dengan nilai yang sesuai.
Beberapa Sumber Daya yang Disarankan
Anda mungkin akan menemukan ini ressources menarik karena mereka juga memungkinkan Anda membuat galeri foto di blog WordPress.
- 10 plugin untuk membuat galeri foto di WordPress
- Cara membuat galeri foto dengan plugin Envira
- Plugin 5 WordPress untuk membuat galeri foto
- Cara menggunakan modul galeri gambar di Divi
