Loncat ke Konten Utama

Cara mengungkapkan galeri gambar Anda dengan efek gulir pada Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Galeri gambar adalah tujuan pilihan di sebagian besar situs web. Dan, dalam banyak kasus, mungkin lebih baik untuk menjaga galeri gambar ini 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 kepada Anda bagaimana membangun tata letak sederhana yang mengungkapkan galeri gambar dengan efek geser puzzle geser pada Divi.

Kuncinya adalah untuk memahami bagaimana ukuran gambar terkait dengan nilai offset vertikal dan horizontal dari setiap efek gulir untuk memindahkan gambar tepat satu titik. Tapi begitu selesai, efek gerakan yang dihasilkan tajam dan tepat karena secara bertahap merakit dan mengungkapkan galeri gambar dengan cara yang unik.

Kemungkinan Hasil

Berikut ini adalah ikhtisar tata letak galeri gambar dengan efek gulir puzzle geser yang akan kita buat dalam tutorial ini.

Pembuatan bagian header

Untuk memulai, mari buat bagian tajuk cepat yang akan memberi tahu pengguna untuk menggulir ke bawah untuk melihat galeri dan dengan efek gulir yang mengagumkan.

Tambahkan satu baris

Tambahkan baris dari 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> Galeri Gambar </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: 50 px (desktop), 40 px (tablet dan telepon)
  • Spasi surat judul: 4px

Tambahkan ikon modul Blurb

Setelah teks di tempat, tambahkan modul teks presentasi baru di bawah modul teks.

Kemudian hapus seluruh 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: bawah
  • 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 peramban sehingga jarak menyesuaikan secara konsisten di semua ukuran peramban.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Pembuatan galeri gambar dengan efek gulir

Sekarang setelah bagian tajuk kami selesai, kami siap untuk membangun galeri gambar yang sebenarnya dengan efek gulir puzzle geser. Seluruh galeri akan terdiri dari tiga baris 4 gambar / kolom di setiap baris untuk membuat total 12 gambar. Namun, Anda dapat dengan mudah menambahkan lebih banyak garis dan gambar ke tata letak saat 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 Garis Lebar Menentukan Ukuran Gambar

Lebar garis sangat penting untuk desain ini karena akan menentukan lebar masing-masing dari empat kolom. Setelah kami mengatur lebar selokan 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 bujur sangkar, kita tahu bahwa ketinggian setiap gambar juga akan 300 piksel. Kita tidak harus tetap seperti itu jika kita tidak mau.

Sebagai contoh, kita juga dapat memilih untuk memiliki tata letak tiga kolom dengan gambar 400 x 400 piksel. Mengetahui lebar gambar (300 px) dan ketinggian (juga 300 px) akan menjadi kunci untuk membuat efek gulir nanti.

Menambahkan gambar

Tambahkan gambar 1

Gambar 1 Efek gulir

Tautan antara ukuran gambar dan gulir offset efek

Saat menggunakan efek gulir vertikal dan horizontal, penting untuk memahami apa yang mewakili nilai numerik yang dimasukkan. Dalam contoh ini, kami memiliki offset gerak awal vertikal -3. -3 Ini sebenarnya -300px (atau 300px bawah) yang merupakan lebar gambar.

Offset kemudian mencapai 0 (posisi awal) saat pengguna menggulir. Inilah yang menciptakan efek gulir yang memindahkan gambar tepat satu blok / gambar. Pergerakan horizontal dimulai pada 3 (300 piksel dari kanan) dan berhenti pada posisi default. Dua efek ini bergabung untuk membuat efek pengguliran dua bagian yang unik.

Tambahkan gambar 2

Setelah efek gulir telah ditambahkan ke gambar 1. Tambahkan gambar baru ke kolom 2.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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 Horisontal ...

  • Aktifkan gerakan horisontal: YES
  • Mulai offset: -3 (pada 0% dari jendela)
  • Offset rata-rata: 0 (pada 15% dari jendela tampilan)
  • Offset akhir: 0 (100% dari jendela tampilan)

Tambahkan gambar 4

Untuk membuat gambar terakhir, salin gambar 1 dan tempel 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)
  • Offset rata-rata: 0 (pada 15% -28% dari jendela tampilan)
  • Offset akhir: 0 (40% dari jendela tampilan)

Di bawah tab gerakan Horisontal ...

  • Aktifkan gerakan horisontal: YES
  • Mulai offset: 3 (pada 0% dari jendela)
  • Offset rata-rata: 3 (pada 28% dari jendela tampilan)
  • Offset akhir: 0 (40% dari jendela tampilan)

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 gulirnya yang sesuai. Untuk contoh ini, mari kita duplikat baris dua kali untuk membuat total tiga baris.

Ganti dan atur ulang gambar sesuai kebutuhan

Kemudian kita dapat memindahkan gambar menggunakan seret dan lepas di tempat yang kita inginkan. Di sinilah Anda bisa menjadi kreatif dan melihat bagaimana gambar bergerak. Dan begitu gambar sudah terpasang, Anda dapat mengganti konten modul gambar dengan gambar baru yang memenuhi kebutuhan situs web.

Sentuhan akhir

Visibilitas bagian

Karena gambar kita kemungkinan akan meluas di luar bagian / jendela, mari tutupi overflow 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 overflow tersembunyi. Jadi mari kita tambahkan padding atas dan bawah sama dengan ketinggian gambar (300 piksel).

Hasilnya sejauh ini

Saat ini kita dapat berhenti di sini jika Anda ingin menjaga desain galeri tanpa jarak antar gambar. Begini hasilnya sejauh ini. Perhatikan bagaimana tepatnya gambar bergerak secara vertikal dan horizontal dengan tepat satu blok / gambar.

Menambahkan ruang di antara gambar

Karena kami telah menetapkan lebar selokan ke 1, kami tidak lagi memiliki margin antara kolom atau gambar kami. Untuk membuat ulang spasi yang sama, kita dapat menambahkan bantalan ke setiap gambar.

Ini akan memungkinkan kita untuk membuat jarak yang kita butuhkan tanpa mengurangi fungsionalitas efek gulir. Ini dimungkinkan karena menambahkan bantalan pada gambar tidak akan menambah lebar atau tinggi wadah gambar. Anda juga dapat memiliki efek yang serupa dengan menggunakan batas juga.

Gambar 1 Padding

Buka pengaturan pada gambar 1 dan perbarui yang berikut:

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

  • 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 "Perpanjang Padding". Di jendela pop-up Expand Styles, klik tombol Extend untuk memperluas isi ini ke semua gambar di halaman.

Hasil akhir

Ini adalah hasil dari semua pekerjaan yang telah kami lakukan sejauh ini.

final pikiran

Efek menggulir puzzle geser yang disajikan dalam artikel ini tidak lebih dari memberi kita desain yang unik untuk galeri gambar. Dia juga menunjukkan bahwa offset gerakan horizontal dan vertikal dapat digunakan untuk efek gulir yang lebih tepat.

Jangan ragu untuk menjelajahi berbagai variasi tata letak ini dengan mengubah offset dan mencampur lokasi gambar.

Anda juga dapat mengubah jumlah kolom selama Anda memahami bagaimana ukuran kolom / gambar akan berubah, lalu cara memperbarui offset efek gulir dengan nilai yang sesuai.

Beberapa Sumber Daya yang Disarankan

Anda mungkin akan menemukan sumber daya ini menarik karena mereka juga akan memungkinkan Anda untuk membuat galeri foto di blog WordPress Anda.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
1 saham
saham1
menciak
Register