Saat menampilkan beberapa ajakan bertindak di halaman Anda, sebaiknya buat efek pengguliran interaktif yang menyatukan berbagai elemen. Salah satu solusinya adalah mengubah modul menjadi elemen tetap saat mereka bergerak dalam wadah kolomnya. Dalam tutorial hari ini, kami akan menunjukkan kepada Anda cara membuat desain cantik yang menangani teknik ini. Anda juga dapat mengunduh file JSON secara gratis!
Mari kita pergi.
penelitian
Sebelum kita menyelami tutorial, mari kita lihat terakhir bagaimana itu bekerja dengan ukuran layar yang berbeda.
Ayo mulai menciptakan!
Tambahkan bagian baru
Mulailah dengan menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan.
jarak
Buka pengaturan bagian dan ubah margin bawah dan atas untuk ukuran layar yang berbeda.
- Atas pelapis: 7vw (desktop), 10vw (tablet), 15vw (ponsel)
- Pelapis di bagian bawah: 20vw (desktop), 7vw (tablet), 10vw (ponsel)
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan itu memenuhi seluruh lebar bagian. dia juga sangat penting aktifkan opsi 'Equalize Column Heights'. Dengan melakukan ini, Anda akan membuat ruang kosong di kolom yang memungkinkan modul stasioner bergerak bebas saat menggulir halaman.
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Menyamakan ketinggian kolom: Ya
- Lebar: 100%
- Lebar maksimum: 100%
Kolom 2 Padding Atas
Kemudian buka pengaturan untuk kolom 2 dan tambahkan beberapa pengisi atas pada desktop.
- Lapisan atas: 20vw (desktop), 0vw (tablet dan telepon)
Kolom 3 Padding Atas
Tambahkan juga nilai isian top kustom ke kolom ketiga.
- Padding terbaik: 40vw (desktop), 0vw (tablet dan telepon)
Kolom 4 Padding Atas
Dan lengkapi parameter garis dengan menambahkan nilai isian yang lebih tinggi ke kolom 4.
- Lapisan atas: 60vw (desktop), 0vw (tablet dan telepon)
Tambahkan CTA ke kolom 1
Tambahkan konten
Saatnya untuk mulai menambahkan modul! Modul pertama yang kita butuhkan pada kolom 1 adalah modul CTA (Call to Action). Menyisipkan isi pilih pemilih.
Hak gadai
Tambahkan juga tautan ke tombol. Ini akan memungkinkan tombol untuk ditampilkan dalam desain.
- URL tautan tombol: #
Warna latar belakang
Ubah warna latar belakang modul setelahnya.
- Warna latar: #ffffff
Pengaturan teks
Beralih ke tab Desain dan ubah pengaturan teks umum.
- Penyelarasan teks: pusat
- Warna teks: gelap
Pengaturan teks judul
Juga ubah pengaturan teks pada judul.
- Judul Level Judul: H3
- Judul Teks: Spectral
- Judul teks berwarna: # 000000
- Ukuran Judul Teks: 2vw (desktop), 4vw (tablet), 6vw (telepon)
Pengaturan teks tubuh
Dengan parameter isi teks.
- Jenis huruf: Fira Sans
- Berat font: Ringan
- Teks berwarna badan: # 000000
- Ukuran teks isi: 1vw (desktop), 2vw (tablet), 3vw (telepon)
- Tinggi badan: 1.8em
Pengaturan tombol
Jangan lupa untuk mengatur gaya tombol modul CTA Anda juga.
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran teks tombol: 1vw (desktop), 2vw (tablet), 3vw (telepon)
- Warna teks tombol: #ffffff
- Warna latar tombol: #444eff
- Lebar batas tombol: 0px
- Radius batas tombol: 50vw
- Font Tombol: Fira Sans
- Lapisan atas: 1vw (desktop), 2vw (tablet), 3vw (telepon)
- Pelapis di bagian bawah: 1vw (desktop), 2vw (tablet), 3vw (ponsel)
- Padding kiri: 3vw (desktop), 7vw (tablet), 13vw (ponsel)
- Pelapis di sebelah kanan: 3vw (desktop), 7vw (tablet), 13vw (ponsel)
jarak
Lalu pergi ke pengaturan jarak dan tambahkan margin dalam dan bawah kustom.
- Top Padding: 8vw
- Lapisan bawah: 8vw
Batas
Juga tambahkan sudut bulat ke modul.
- Sudut bundar: 1vw (semua sudut)
Kotak bayangan
Selesaikan desain modul dengan menambahkan bayangan kotak halus.
- Bayangan kotak Posisi horisontal: 10px
- Box Shadow Blur Force: 50px
- Warna bayangan: rgba (0,0,0,0,08)
Kelas CSS
Sekarang, agar efek gulir lengket berfungsi, kita perlu menambahkan beberapa baris kode CSS di akhir tutorial ini. Sebagai persiapan, kami akan menambahkan kelas CSS ke modul CTA.
- Kelas CSS: sticky-cta
Tambahkan modul gambar ke kolom 1
Upload Gambar
Mari beralih ke mod berikutnya dan terakhir yang kita butuhkan di kolom 1, yang merupakan mod gambar. Unggah gambar PNG pilihan Anda.
penjajaran
Ubah perataan gambar berikutnya.
- Penjajaran Gambar: Tengah
perekat
Pastikan untuk memaksa lebar penuh pada modul juga.
- Force Fullwidth: Ya
jarak
Selesaikan pengaturan modul dengan membuka pengaturan jarak dan menambahkan nilai spasi kustom untuk berbagai ukuran layar.
- Margin atas: -5vw (tablet dan telepon)
- Margin bawah: -12vw (desktop), 5vw (tablet dan telepon)
- Padding kiri: 3vw (desktop), 10vw (tablet), 25vw (ponsel)
- Pelapis di sebelah kanan: 3vw (desktop), 10vw (tablet), 25vw (ponsel)
Kloning dua modul tiga kali dan letakkan kolom yang tersisa
Setelah Anda menyelesaikan kedua modul di kolom 1, Anda dapat menduplikasinya tiga kali dan menempatkan duplikat di kolom kolom yang tersisa.
Ubah Gambar
Pastikan untuk mengubah gambar di setiap modul gambar duplikat.
Ubah konten CTA dan warna latar belakang tombol
Ubah juga isi CTA dengan warna latar belakang tombol.
- Modul CTA #2: #89ffb4
- Modul CTA #3: #ff89f1
- Modul CTA #4: #ffd389
Tambahkan kelas CSS ke modul gambar di kolom 1, 2 dan 3
Sekarang, untuk memastikan efek lengket berfungsi pada gambar juga, kita perlu menambahkan kelas CSS ke modul gambar di kolom 1, 2 dan 3.
- Kelas CSS: gambar-lengket
Tambahkan baris 2
Struktur kolom
Tinggal menambahkan kode CSS. Untuk melakukan ini, tambahkan baris baru.
Tambahkan modul kode dengan kode CSS
Tambahkan modul kode ke baris, masukkan kode CSS di bawah ini dan Anda selesai!
<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>
penelitian
Sekarang semua langkah telah diambil, mari kita lihat terakhir apa yang terjadi dengan ukuran layar yang berbeda.
final pikiran
Di artikel ini, kami telah menunjukkan kepada Anda cara menjaga modul tetap di wadah kolomnya. Menggunakan teknik ini dapat menghasilkan efek pengguliran yang menakjubkan yang memungkinkan Anda menyoroti berbagai ajakan bertindak di laman Anda. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.
