Membuat Gulir Sebaris Terungkap dengan Divi
Diterbitkan: 2019-08-14Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.
Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang berkelanjutan, kami akan menunjukkan kepada Anda cara membuat tampilan gulir sebaris yang indah menggunakan Paket Tata Letak DJ. Ini adalah cara yang bagus untuk menarik perhatian ke satu wadah kolom tertentu di situs web Anda, tanpa harus menambahkannya ke halaman Anda beberapa kali. Kami akan menambahkan efek hover/release yang keren ke teknik yang akan membantu pengunjung memegang wadah kolom dan menjatuhkannya kapan pun mereka mau. Anda juga dapat mengunduh file JSON secara gratis!
Pratinjau
Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.
Desktop
Seluler
Unduh Inline Scroll Reveals Layout GRATIS
Untuk meletakkan tangan Anda pada gulir sebaris gratis yang mengungkapkan tata letak, 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 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.
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!
Buat Halaman Baru Menggunakan Halaman Beranda DJ Layout Pack
Tambahkan Halaman Baru
Untuk tutorial use case ini, kita akan menggunakan salah satu layout DJ. Mulailah dengan membuat halaman baru, beri judul halaman Anda dan beralih ke Visual Builder.
Unggah Beranda DJ
Lanjutkan dengan mengunggah tata letak beranda DJ ke halaman Anda.
Tambahkan Nilai Indeks Z Lebih Tinggi ke Setiap Bagian di Halaman
Tambahkan Indeks Z Lebih Tinggi ke Bagian Pahlawan
Kami akan membuat satu kolom tertentu diperbaiki dan memungkinkannya untuk ditampilkan di mana pun kami inginkan. Kebalikannya juga benar; kami ingin menyembunyikannya di mana pun kami tidak ingin itu muncul. Untuk melakukan itu, kita akan memberikan setiap bagian pada halaman (selain salah satu kolom berada, yaitu bagian #2 pada halaman) nilai indeks z yang lebih tinggi. Mulailah dengan membuka bagian pahlawan dan tingkatkan indeks z di pengaturan visibilitas.
- Indeks Z: 2
Salin Indeks Z
Setelah Anda menambahkan indeks z, Anda dapat menyalinnya.
Tempel ke Bagian Lain di Halaman Kecuali Bagian #2
Dan tempelkan ke semua bagian lain pada halaman, kecuali untuk bagian #2 (bagian yang berisi kolom yang akan kita ubah menjadi pengungkapan gulir sebaris).
Ubah Bagian #2
Tempatkan Konten Kolom di Baris Terpisah
Ubah Struktur Kolom Baris
Mari kita mulai memodifikasi bagian kedua, dimulai dengan struktur kolom dari baris.
Baris Duplikat
Lanjutkan dengan mengkloning baris.
Hapus Modul di Baris
Hapus Modul Teks dan Tombol di baris pertama dan Modul Audio di baris kedua.
Ubah Baris #1 di Bagian #2
Hapus Beberapa Modul Audio (agar Ukuran Layar Lebih Kecil)
Pada langkah selanjutnya, kita akan membuat kolom yang berisi Modul Audio diperbaiki. Sekarang, untuk memastikan kolom sesuai dengan ketinggian viewport dari ukuran layar yang lebih kecil, kita perlu menghapus beberapa Modul Audio.
Tambahkan Margin Bawah ke Baris
Lanjutkan dengan membuka pengaturan baris, buka tab desain dan tambahkan beberapa bantalan bawah. Kita akan membutuhkan ruang ini untuk memungkinkan kolom terbuka saat digulir nanti di tutorial.
- Margin Bawah: 700px
Buka Pengaturan Kolom
Saatnya mulai mengubah kolom menjadi pengungkapan gulir sebaris! Buka pengaturan kolom.
Arahkan Bayangan Kotak
Lalu, buka tab desain dan ubah beberapa nilai bayangan kotak saat mengarahkan kursor.
- Kekuatan Buram Bayangan Kotak: 150px
- Warna Bayangan: rgba (0,0,0,0.55)
Arahkan Skala Transformasi
Tingkatkan ukuran kolom saat melayang juga dengan memodifikasi nilai skala transformasi.
- Bawah: 110%
- Kanan: 110%
Elemen Utama Default
Untuk membuat kolom tetap, kita akan menambahkan beberapa baris kode CSS ke elemen utama kolom.
position: fixed; bottom: 100px; max-width: 800px !important; width: 80% !important;
Arahkan Elemen Utama
Pastikan Anda menambahkan baris CSS posisi tetap ke elemen utama hover juga. Ini akan mencegah kolom berkedip.
position: fixed;
Indeks Z Default
Sekarang, dalam keadaan normal, kami ingin modul muncul di bawah semua konten halaman. Untuk memastikan itu terjadi, kita akan mengubah indeks z kolom.
- Indeks Z: 0
Arahkan ke Indeks Z
Namun, saat mengarahkan kursor, kami ingin kolom tersebut tumpang tindih dengan semua konten halaman. Segera setelah seseorang melepaskan kolom, kolom tersebut akan kembali ke tempatnya di belakang semua konten halaman. Ubah indeks z saat mengarahkan kursor:
- Indeks Z: 10
Ubah Baris #2 di Bagian #2
Tambahkan Padding Atas ke Kolom
Untuk tujuan estetika, kita akan membuka kolom di baris kedua bagian #2 dan menambahkan beberapa padding atas kustom.
- Padding Atas: 80px
Tambahkan Margin Bawah Kustom ke Bagian di Seluruh Halaman
Temukan Bagian
Buka Pengaturan Bagian
Sekarang kita telah memodifikasi kolom pengungkapan gulir sebaris, kita harus membuat beberapa ruang agar itu muncul. Kami telah melakukannya untuk baris yang sudah ada (padding bawah 700px), tetapi kami juga akan mengizinkan kolom untuk muncul di tempat lain di halaman. Buka pengaturan bagian dari bagian berikut:
Tambahkan Margin Bawah
Buka pengaturan spasi dan tambahkan beberapa margin bawah. Menambahkan margin bawah akan membuat ruang kosong pada halaman yang memungkinkan kolom indeks z rendah muncul.
- Margin Bawah: 700px
Temukan Bagian
Buka Pengaturan Bagian
Buka bagian berikut selanjutnya:
Tambahkan Margin Bawah
Dan tambahkan beberapa margin bawah di sini juga.
- Margin Bawah: 700px
Hapus Kelebihan Bagian Padding
Hapus Bagian #2 Bagian Bawah Padding
Sekarang, satu-satunya yang tersisa untuk kita lakukan adalah mengoptimalkan cara desain kita cocok dengan pengungkapan gulir sebaris. Buka bagian kedua pada halaman dan lepaskan bantalan bawah.
- Bawah: 0px
Temukan Bagian
Buka Pengaturan Bagian
Buka pengaturan bagian berikut selanjutnya:
Hapus Padding Bawah & Tambahkan Padding Atas
Tambahkan beberapa padding atas dan lepaskan padding bawah.
- Padding Atas: 100px
- Padding Bawah: 0px
Temukan Bagian
Buka Pengaturan Bagian
Ke bagian terakhir. Buka pengaturan bagian.
Hapus Padding Atas
Lepaskan bantalan atas dan selesai!
- Padding Atas: 0px
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 pengungkapan gulir sebaris dengan Divi dan Paket Tata Letak DJ. Ini adalah cara yang bagus untuk menambahkan interaksi ke situs web Anda. Kami harap tutorial ini menginspirasi Anda untuk membuat pengungkapan gulungan sebaris tetap Anda sendiri juga! 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.