Cara Menyebarkan Gambar di Gulir untuk Mempromosikan Galeri Gambar di Divi

Mengetahui cara menyebarkan gambar dengan efek gulir Divi dapat menjadi elemen desain yang halus dan mengesankan untuk membantu mempromosikan galeri gambar di halaman arahan. Idenya adalah untuk melibatkan pengguna saat mereka menggulir halaman ke bawah dengan menyebarkan gambar seperti kartu remi.

Dalam tutorial ini, kita akan membuat tata letak bagian yang bersih untuk mempromosikan galeri gambar yang menyertakan koleksi gambar yang menyebar saat digulir. Anda dapat menggunakan gambar apa pun yang Anda inginkan dengan desain ini dan itu akan menjadi tambahan yang bagus untuk halaman arahan mana pun.

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Bagian 1: Membuat Layout dan Konten Mock

Untuk tutorial bagian pertama ini, kita akan membuat tata letak bagian dengan baris dua kolom yang memiliki judul dan tombol di kolom kiri. Di bagian kedua, kita akan menambahkan gambar fan-out ke kolom kanan.

Pengaturan Bagian

Sebelum menambahkan apa pun ke tata letak, perbarui pengaturan untuk bagian default sebagai berikut:

• Padding: 10vw atas, 10vw bawah
• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Menambahkan Baris

Selanjutnya, tambahkan baris baru dengan struktur kolom sepertiga dua pertiga.

Pengaturan Baris

Kemudian perbarui pengaturan baris dengan gambar latar belakang khusus. Saya menggunakan salah satu dari Tata Letak Premade Halaman Landing Toko Alat Tulis. Setelah itu perbarui berikut ini:

• Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
• Posisi Gambar Latar Belakang: Kiri Atas
• Lebar Maks: 900px

Menambahkan Modul Teks untuk Membuat Judul

Setelah baris siap, tambahkan modul teks baru ke kolom 1 untuk membuat judul.

Konten Teks

Tambahkan Judul H1 berikut ke konten isi:

<h1>Our Gallery</h1>

Pengaturan Teks

Kemudian perbarui pengaturan teks sebagai berikut:

• Font Judul: Bellefair
• Heading Text Alignment (tablet dan ponsel): kanan
• Ukuran Teks Judul: 150px (desktop dan tablet), 110px (ponsel)

Menambahkan Tombol

Di bawah modul teks, tambahkan modul tombol baru.

Teks Tombol

Perbarui teks tombol dengan "Lihat Galeri".

Pengaturan Tombol

Di bawah tab desain, perbarui yang berikut ini:

• Alignment (tablet dan ponsel): benar
• Ukuran Teks Tombol: 14px
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #121212
• Lebar Batas Tombol: 0px
• Jarak Huruf Tombol: 3px
• Font Tombol: Montserrat
• Gaya Font Tombol: TT
• Margin: 7vw atas

Bagian 2: Membuat Gambar dengan Efek Gulir Fan-Out

Di bagian kedua dari tutorial ini, kita akan membuat gambar dengan efek gulir fan-out. Kita akan mulai dengan gambar tengah. Saya menggunakan gambar dari Tata Letak Premade Halaman Galeri Mode. Ukurannya harus sama untuk desain yang konsisten. Yang saya gunakan adalah 400px kali 600px.

Membuat Gambar Tengah

Tambahkan modul gambar baru ke kolom kanan.

Kemudian unggah gambar ke modul.

Pengaturan Gambar

Perbarui lebar dan margin maksimum untuk tampilan seluler sebagai berikut:

• Lebar Maks (tablet dan ponsel): 200px
• Margin (tablet dan ponsel): 0px kiri

Membuat Gambar Kanan Tengah

Untuk membuat gambar kedua (atau gambar kanan tengah), duplikat modul gambar pertama.

Pengaturan Gambar

Kemudian buka pengaturan untuk modul gambar duplikat dan perbarui yang berikut:

Posisi

• Posisi: Absolut

Transformasi Asal

• Transform Origin: tengah bawah

Efek Gulir

Di bawah Gerakan Horizontal, perbarui yang berikut ini:

• Aktifkan Gerakan Horizontal: YA
• Offset Awal: 0 (pada 20%)
• Offset Tengah: 0,5 (pada 50%)
• Offset Akhir: 0,5 (pada 100%)

Di bawah Memutar, perbarui yang berikut ini:

• Aktifkan Rotasi: YA
• Rotasi Mulai: 0 derajat (pada 20%)
• Rotasi Pertengahan: 20 derajat (pada 50%)
• Rotasi Akhir: 20 derajat (pada 100%)

Menciptakan Gambar yang Tepat

Untuk membuat gambar ketiga yang akan menyebar ke paling kanan, duplikat gambar kedua yang kita buat.

Perbarui Efek Gulir

Di bawah Gerakan Horizontal, perbarui yang berikut ini:

• Offset Tengah: 1
• Mengakhiri Offset: 1

Di bawah Memutar, perbarui yang berikut ini:

• Rotasi Pertengahan: 40 derajat
• Rotasi Akhir: 40 derajat

Jika Anda belum menyadarinya, kami pada dasarnya meningkatkan offset horizontal dengan peningkatan 0,5 dan offset berputar dengan peningkatan 20 derajat dengan setiap gambar. Ini akan menciptakan jarak yang sama antara gambar. Dan karena animasi efek gulir didasarkan pada asal transformasi tengah-bawah, itu akan memberi kesan bahwa gambar menyebar seperti tangan kartu remi.

Labeli Gambar Dalam Kotak Lapisan

Sebelum kita membuat dua gambar terakhir, mari kita perbarui label gambar saat ini agar kita tidak bingung.

Membuat Gambar Kiri Tengah

Untuk membuat gambar kiri tengah, kita dapat menduplikasi gambar kanan tengah.

Kemudian seret di atas gambar tengah ke atas kolom.

Anda juga dapat memperbarui label gambar itu.

Perbarui Efek Gulir

Buka pengaturan untuk gambar kiri tengah dan perbarui efek gulir berikut:

Di bawah Gerakan Horisontal…

• Offset Tengah: -0,5
• Offset Akhir: -0,5

CATATAN: Yang kita lakukan hanyalah mengubah nilai offset menjadi negatif.

Di bawah Memutar…

• Rotasi Pertengahan: -20 derajat
• Rotasi Akhir: -20 derajat

Membuat Gambar Kiri

Terakhir, mari buat gambar kiri terakhir dengan menduplikasi gambar kanan dan menyeretnya ke bagian paling atas kolom.

Anda juga dapat memperbarui label.

Perbarui Efek Gulir

Buka pengaturan untuk gambar kiri dan perbarui efek gulir:

Di bawah Gerakan Horisontal:

• Offset Tengah: -1
• Offset Akhir: -1

Di bawah Memutar…

• Rotasi Pertengahan: -40 derajat
• Rotasi Akhir: -40 derajat

Indeks Kolom 1 Z

Sekarang gambar di kolom akan tumpang tindih dengan konten di kolom 1. Untuk mengubah ini, buka pengaturan untuk kolom 1 dan perbarui indeks z sebagai berikut:

• Indeks Z: 10

Menambahkan Gambar dan Filter Baru

Sekarang, yang perlu kita lakukan adalah memperbarui setiap gambar dengan yang baru/berbeda.

Untuk efek unik, tambahkan filter berikut ke semua gambar (menggunakan multiselect) kecuali gambar kanan.

• Saturasi: 20%
• Opasitas: 85%

Hasil

Inilah hasilnya sejauh ini…

Memutar Kolom

Untuk sedikit mengubah desain, kita dapat memutar kumpulan gambar dengan memutar kolom induk.

Untuk melakukannya, buka pengaturan untuk kolom 2 dan tambahkan opsi transformasi berikut:

• Transformasi Putar Sumbu Z: 40 derajat

Hasil Akhir

Berikut adalah hasil akhirnya.

Desktop

Tablet

Telepon

Pikiran Akhir

Dalam tutorial ini, kami belajar cara menyebarkan gambar menggunakan efek gulir Divi, tetapi Anda tidak harus berhenti di situ! Anda dapat dengan mudah menggunakan teknik yang sama untuk menyebarkan koleksi modul apa pun (saya sedang memikirkan uraian). Saya membatasi jarak offset dengan efek gulir setiap gambar sehingga desainnya tidak benar-benar berfungsi (mis. Anda tidak dapat benar-benar melihat setiap gambar secara keseluruhan). Namun, Anda dapat meningkatkan offset untuk membuat gambar lebih terlihat jika Anda mau.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!