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

Hasil yang mungkin divi

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.

Baris kolom tunggal

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>

Tambahkan modul teks

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
Gaya teks yang dimodifikasi

Tambahkan ikon modul Blurb

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

Modul ringkasan pemilihan Divi

Kemudian hapus semua judul dan isi dari konten default dan pilih untuk menggunakan ikon panah bawah.

Modul ringkasan Divi

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
Modul ringkasan animasi Divi

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.

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]

Konfigurasi jarak modul divi

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.

Bagian pemilihan divi

Tambahkan satu baris

Kemudian tambahkan baris dengan empat kolom ke bagian.

Bagian memiliki 4 kolom divi

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)
Parameter garis Divi
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

Tambahkan div modul gambar

Gambar 1 Efek gulir

Efek gulir Divi
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.

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]

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)
Modul gambar divi efek bergulir

Tambahkan gambar 4

Untuk membuat gambar terakhir, copy gambar 1 dan paste di kolom 4.

Unggah gambar baru di pengaturan gambar.

Unggah gambar divi baru

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)
Opsi gulir Divi

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 bisa memindahkan gambar menggunakan fungsi drag and drop dimanapun kita mau. Di sinilah Anda bisa berkreasi dan melihat bagaimana gambar bergerak akan bergulir. Dan setelah gambar berada di tempatnya, Anda dapat mengganti konten modul gambar dengan gambar baru yang memenuhi kebutuhan situs web.

Total gambar divi

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
Jarak pandang divi

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

Padding divi

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
Tambahkan margin divi

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.

Buat Toko Online Anda dengan mudah

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

Perpanjang margin divi

Hasil akhir

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

Hasil akhir desktop Divi

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