Cara Membuat Mockup Galeri Gulir dengan Opsi Overflow Baru Divi

Mencari cara kreatif untuk menampilkan gambar di situs web Anda? Pastikan Anda terus membaca karena, dalam posting ini, kami akan menunjukkan cara membuat mockup galeri gulir menggunakan opsi bawaan Divi saja. Secara konkret, kita akan mengubah bagian menjadi mockup dan membuat semua baris di bagian menjadi bagian dari mockup. Setelah Anda mendapatkan tekniknya, Anda akan dapat menampilkan segala jenis konten yang Anda inginkan dalam mockup seluler dan menambahkan interaksi ke halaman Anda dalam waktu singkat.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Desain Mockup Galeri Gulir GRATIS

Untuk mendapatkan desain mockup galeri gulir gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Perekat

Mulailah dengan membuat halaman baru atau membuka yang sudah ada dan menambahkan bagian reguler ke dalamnya. Buka pengaturan bagian dan ubah lebar dan lebar maksimum dalam pengaturan ukuran.

• Lebar: 25vw (Desktop), 60vw (Tablet), 80vw (Telepon)
• Lebar Maks: 25vw (Desktop), 60vw (Tablet), 80vw (Telepon)

Jarak

Kemudian, buka pengaturan spasi, hapus semua padding atas dan bawah default dan tambahkan beberapa margin atas dan bawah untuk menciptakan ruang.

• Margin Atas: 9vw
• Bawah: 9vw
• Padding Atas: 0px
• Padding Bawah: 0px

Berbatasan

Lanjutkan dengan masuk ke pengaturan batas bagian dan buat bentuk mockup seluler dengan menambahkan '30px' ke masing-masing sudut.

Bayangan Kotak

Tambahkan bayangan kotak halus untuk memungkinkan bentuknya muncul.

• Kekuatan Buram Bayangan Kotak: 100px
• Warna Bayangan: rgba (0,0,0,0.18)

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama ke bagian menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah warna latar belakang.

• Warna Latar Belakang: #ffffff

Perekat

Kemudian, buka pengaturan ukuran dan biarkan baris memenuhi seluruh lebar bagian.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Bayangan Kotak

Dan tambahkan bayangan kotak juga.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (0,0,0,0.92)

Indeks Z

Last but not least, kita akan memastikan baris (dan terutama bayangan kotaknya) tumpang tindih dengan baris berikutnya dengan meningkatkan indeks Z dalam pengaturan visibilitas.

• Indeks Z: 99

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H2

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Teks dengan beberapa konten H2.

Pengaturan Teks H2

Setelah Anda menambahkan salinan H2, buka pengaturan teks H2 dan buat beberapa perubahan.

• Judul 2 Font: Abril Fatface
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #000000
• Judul 2 Ukuran Teks: 1.5vw (Desktop), 3.5vw (Tablet), 5vw (Telepon)

Jarak

Tambahkan beberapa margin atas dan bawah kustom berikutnya.

• Margin Atas: 1.5vw (Desktop & Tablet), 3.5vw (Telepon)
• Margin Bawah: 1.5vw (Desktop & Tablet), 3.5vw (Telepon)

Tambahkan Baris #2

Struktur Kolom

Ke baris kedua! Di sini, kami menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar bagian. Kami juga memodifikasi tinggi dan tinggi maksimum untuk membuat efek pengguliran vertikal di langkah-langkah berikutnya.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%
• Tinggi: 38vw (Desktop), 100vw (Tablet), 120vw (Telepon)
• Tinggi Maks: 38vw (Desktop), 100vw (Tablet), 120vw (Telepon)

Jarak

Kemudian, buka pengaturan spasi dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Luapan Vertikal

Seperti yang disebutkan sebelumnya, kami membuat baris ini dapat digulir secara vertikal. Untuk melakukan itu, kita perlu mengubah luapan vertikal di pengaturan visibilitas baris.

• Luapan Vertikal: Gulir

Tambahkan Modul Gambar ke Kolom

Unggah Gambar

Lanjutkan dan tambahkan Modul Gambar pertama ke baris dan unggah gambar pilihan Anda. Anda dapat mengunduh gambar yang kami gunakan di sepanjang tutorial ini dengan membuka pos Paket Tata Letak Perencana Pernikahan.

Perekat

Pastikan Anda mengaktifkan opsi 'Paksa Lebar Penuh' di Modul Gambar untuk memastikan hasil yang responsif.

• Paksa Lebar Penuh: Ya

Jarak

Buka pengaturan spasi berikutnya dan buat beberapa ruang antara ini dan modul mana pun yang muncul berikutnya dengan menambahkan beberapa margin bawah.

• Margin Bawah: 1vw

Modul Gambar Klon Sesering yang Anda Inginkan

Setelah Anda selesai memodifikasi Modul Gambar pertama, Anda dapat mengkloningnya sebanyak yang Anda inginkan.

Unggah Gambar yang Berbeda

Tentu saja, Anda ingin mengubah gambar di setiap duplikat.

Tambahkan Baris #3

Struktur Kolom

Ke baris ketiga dan terakhir! Kami menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Perekat

Kemudian, buka pengaturan ukuran dan biarkan baris memenuhi seluruh lebar bagian.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Tambahkan beberapa nilai padding atas dan bawah kustom berikutnya.

• Padding Atas: 2.1vw (Desktop), 3.5vw (Tablet), 5vw (Telepon)
• Padding Bawah: 2.1vw (Desktop), 3.5vw (Tablet), 5vw (Telepon)

Bayangan Kotak

Dan tambahkan bayangan kotak untuk menciptakan kedalaman.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (0,0,0,0.92)

Indeks Z

Untuk memastikan baris ini (dan terutama bayangan kotaknya) tumpang tindih dengan baris sebelumnya, kita akan meningkatkan indeks Z.

• Indeks Z: 99

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Penyelarasan

Lalu, buka tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Ubah juga pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2.5vw (Tablet), 3.5vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000
• Lebar Perbatasan Tombol: 1px
• Font Tombol: Abril Fatface

Jarak

Dan buat bentuk yang Anda inginkan menggunakan nilai padding khusus.

• Padding Atas: 0.5vw (Desktop), 1vw (Tablet), 2vw (Telepon)
• Padding Bawah: 0.5vw (Desktop), 1vw (Tablet), 2vw (Telepon)
• Padding Kiri: 3vw (Desktop), 7vw (Tablet), 9vw (Telepon)
• Padding Kanan: 3vw (Desktop), 7vw (Tablet), 9vw (Telepon)

Bilah Gulir Gaya

Tambahkan ID CSS ke Baris #2

Terserah Anda apakah Anda ingin menata bilah gulir atau tidak. Jika ya, buka baris kedua dan tambahkan kelas CSS ke dalamnya.

• Kelas CSS: bilah gulir gambar

Buka Pengaturan Halaman

Kemudian, buka pengaturan baris.

Gaya Scrollbar Menggunakan CSS

Dan tambahkan baris kode CSS berikut ke kotak Custom CSS di tab lanjutan:

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat mockup galeri gulir yang indah hanya dengan opsi bawaan Divi. Di awal posting ini, Anda juga dapat mengunduh tata letak JSON secara gratis dan menggunakannya di situs web apa pun yang sedang Anda kerjakan. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.