Cara Menjaga Modul Tetap di Wadah Kolomnya dengan Divi

Saat menampilkan beberapa ajakan bertindak di halaman Anda, ini dapat membantu menciptakan efek gulir interaktif yang menyatukan berbagai elemen. Salah satu cara untuk mendekati ini adalah dengan mengubah modul menjadi elemen tetap saat mereka bergerak di dalam wadah kolomnya. Dalam tutorial hari ini, kami akan menunjukkan cara membuat desain cantik yang menangani teknik ini dan Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Tablet & Seluler

Unduh Desain Kontainer Kolom Lengket secara GRATIS

Untuk mendapatkan desain wadah kolom lengket gratis, 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!

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Mulailah dengan menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan.

Jarak

Buka pengaturan bagian dan ubah padding atas dan bawah di berbagai ukuran layar.

• Padding Atas: 7vw (Desktop), 10vw (Tablet), 15vw (Telepon)
• Padding Bawah: 20vw (Desktop), 7vw (Tablet), 10vw (Telepon)

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar bagian. Ini juga sangat penting untuk mengaktifkan opsi 'Equalize Column Heights'. Dengan melakukan itu, Anda akan membuat beberapa ruang kosong di kolom yang memungkinkan modul tetap bergerak bebas saat menggulir halaman ke bawah.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Kolom 2 Padding Atas

Buka pengaturan kolom 2 berikutnya dan tambahkan beberapa padding atas di desktop.

• Padding Atas: 20vw (Desktop), 0vw (Tablet & Ponsel)

Kolom 3 Padding Atas

Tambahkan nilai padding atas kustom ke kolom ketiga juga.

• Padding Atas: 40vw (Desktop), 0vw (Tablet & Ponsel)

Kolom 4 Padding Atas

Dan selesaikan pengaturan baris dengan menambahkan nilai padding atas ke kolom 4 juga.

• Padding Atas: 60vw (Desktop), 0vw (Tablet & Ponsel)

Tambahkan CTA ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Modul pertama yang kita butuhkan di kolom 1 adalah Modul CTA. Masukkan beberapa konten pilihan Anda.

Tautan

Tambahkan tautan ke tombol juga. Melakukan ini akan memungkinkan tombol muncul dalam desain.

• URL Tautan Tombol: #

Warna latar belakang

Ubah warna latar belakang modul selanjutnya.

• Warna Latar Belakang: #ffffff

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks umum.

• Perataan Teks: Tengah
• Warna Teks: Gelap

Pengaturan Teks Judul

Ubah juga pengaturan teks judul.

• Judul Judul Level: H3
• Judul Font: Spectral
• Warna Teks Judul: #000000
• Judul Teks Ukuran: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)

Pengaturan Teks Tubuh

Bersamaan dengan pengaturan teks isi.

• Font Tubuh: Fira Sans
• Berat Huruf Tubuh: Ringan
• Warna Teks Tubuh: #000000
• Ukuran Teks Tubuh: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Tinggi Garis Tubuh: 1.8em

Pengaturan Tombol

Jangan lupa untuk mengatur gaya tombol Modul CTA Anda juga.

• Gunakan Gaya Kustom 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 Perbatasan Tombol: 50vw
• Font Tombol: Fira Sans

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

Jarak

Kemudian, buka pengaturan jarak dan tambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 8vw
• Padding Bawah: 8vw

Berbatasan

Tambahkan beberapa sudut membulat ke modul juga.

• Sudut Bulat: 1vw (Semua Sudut)

Bayangan Kotak

Lengkapi desain modul dengan menambahkan bayangan kotak halus.

• Posisi Horizontal Bayangan Kotak: 10px
• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.08)

Kelas CSS

Sekarang, untuk membuat efek lengket bergulir, kita perlu menambahkan beberapa baris kode CSS di akhir tutorial ini. Sebagai persiapan untuk itu, kita akan menambahkan kelas CSS ke Modul CTA.

• Kelas CSS: sticky-cta

Tambahkan Modul Gambar ke Kolom 1

Unggah Gambar

Ke modul berikutnya dan terakhir yang kita butuhkan di kolom 1, yang merupakan Modul Gambar. Unggah gambar PNG pilihan Anda.

Penyelarasan

Ubah perataan gambar berikutnya.

• Penjajaran Gambar: Tengah

Perekat

Pastikan Anda juga memaksakan lebar penuh pada modul.

• Paksa Lebar Penuh: Ya

Jarak

Selesaikan pengaturan modul dengan membuka pengaturan spasi dan menambahkan beberapa nilai spasi khusus di berbagai ukuran layar.

• Margin Atas: -5vw (Tablet & Ponsel)
• Margin Bawah: -12vw (Desktop), 5vw (Tablet & Telepon)
• Padding Kiri: 3vw (Desktop), 10vw (Tablet), 25vw (Telepon)
• Padding Kanan: 3vw (Desktop), 10vw (Tablet), 25vw (Telepon)

Kloning Kedua Modul Tiga Kali & Tempatkan Di Kolom Tersisa

Setelah Anda menyelesaikan kedua modul di kolom 1, Anda dapat mengkloning keduanya tiga kali dan menempatkan duplikat di kolom baris yang tersisa.

Ubah Gambar

Pastikan Anda mengubah gambar di setiap Modul Gambar duplikat.

Ubah Konten CTA & Warna Latar Tombol

Ubah konten CTA bersama dengan warna latar belakang tombol juga.

• Modul CTA #2: #89ffb4
• Modul CTA #3: #ff89f1
• Modul CTA #4: #ffd389

Tambahkan Kelas CSS ke Modul Gambar di Kolom 1, 2 & 3

Sekarang, untuk memastikan efek lengket bekerja 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

Satu-satunya yang tersisa untuk dilakukan adalah menambahkan kode CSS. Untuk melakukan itu, tambahkan baris baru.

Tambahkan Modul Kode dengan Kode CSS

Tambahkan Modul Kode ke baris, masukkan kode CSS di bawah ini dan selesai!

<style>
@media only screen and (min-width: 980px) {
.sticky-cta {
position: sticky;
position: -webkit-sticky;
top: 8vw !important;
}

.sticky-image {
position: sticky;
position: -webkit-sticky;
top: 28vw !important;
}
}</style>

Pratinjau

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

Desktop

Tablet & Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menjaga modul tetap di wadah kolomnya. Menggunakan teknik ini dapat menghasilkan beberapa efek gulir menakjubkan yang memungkinkan Anda untuk menekankan berbagai ajakan bertindak di halaman Anda. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk 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.