Cara Mengubah Gaya pada Gulir Tanpa Gerakan Menggunakan Opsi Lengket Divi

Jika Anda menginginkan gaya desain yang bersih saat membangun situs web baru, kemungkinan besar Anda ingin menemukan cara untuk tetap menambahkan dimensi ekstra ke situs web Anda. Tutorial ini akan membahas semua itu. Kami akan menunjukkan cara menggunakan opsi lengket Divi untuk mengubah gaya lengket tanpa gerakan. Secara khusus, ini berarti bahwa segera setelah pengunjung menggulir melewati bagian tertentu dari halaman Anda, gaya bagian tersebut akan berubah tetapi elemennya akan tetap di tempatnya. Jenis efek ini sepenuhnya terfokus pada perilaku pengguna. Perubahan gaya lengket hanya terjadi ketika orang menggulir melewatinya, yang memberikan hasil yang indah. Dalam tutorial ini, kami akan menunjukkan kepada Anda langkah demi langkah bagaimana menuju ke sana. Setelah Anda mendapatkan pendekatannya, Anda akan dapat menggunakannya dalam segala jenis desain yang Anda buat! Anda juga dapat mengunduh file JSON secara gratis.

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Tata Letaknya GRATIS

Untuk mendapatkan tata letak 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!

1. Buat Struktur Elemen

Tambahkan Bagian Baru

Visibilitas

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan sembunyikan kelebihan di tab lanjutan. Ini akan membantu memastikan tidak ada bilah gulir horizontal yang muncul.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

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

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Pengaturan Kolom 1

Jarak

Kemudian, buka pengaturan kolom 1 dan terapkan beberapa nilai padding khusus di berbagai ukuran layar.

• Bantalan Atas:
  • Desktop: 200px
  • Tablet: 100 piksel
  • Telepon: 80px
• Bantalan Bawah:
  • Desktop: 200px
  • Tablet: 100 piksel
  • Telepon: 80px

Indeks Z

Tingkatkan indeks z kolom ini juga. Nanti di tutorial, kita akan membuat tumpang tindih horizontal antara kolom 1 dan 2. Kami meningkatkan indeks z untuk memastikan modul kolom 1 tetap berada di atas modul kolom 2.

• Indeks Z: 11

Pengaturan Kolom 2

Warna latar belakang

Selanjutnya, kita akan menambahkan warna latar belakang ke kolom 2.

• Warna Latar Belakang: #f9f9f9

Jarak

Kami akan menggunakan beberapa nilai padding kustom di berbagai ukuran layar juga.

• Bantalan Atas:
  • Desktop: 200px
  • Tablet: 150 piksel
  • Telepon: 100px
• Bantalan Bawah:
  • Desktop: 200px
  • Tablet: 150 piksel
  • Telepon: 100px

Pengaturan Kolom 3

Jarak

Last but not least, kami akan menambahkan beberapa nilai padding kustom ke kolom 3 juga.

• Bantalan Atas:
  • Desktop: 200px
  • Tablet: 100 piksel
  • Telepon: 50px
• Bantalan Bawah:
  • Desktop: 200px
  • Tablet: 100 piksel
  • Telepon: 50px
• Padding Kiri: 8%
• Padding Kanan: 8%

Tambahkan Modul Teks ke Kolom 1

Tambahkan Salinan

Saatnya menambahkan modul, dimulai dengan Modul Teks di kolom 1. Tambahkan nomor ke kotak konten.

Warna latar belakang

Ubah warna latar belakang berikutnya.

• Warna Latar Belakang: #efefef

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Montserrat
• Warna Teks: #ffffff
• Ukuran Teks: 100px
• Tinggi Baris Teks: 1em
• Perataan Teks: Tengah

Perekat

Ubah lebar berikutnya.

• Lebar: 150px

Jarak

Kemudian, tambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 20px
• Padding Bawah: 20px

Posisi

Ubah posisi modul juga.

• Posisi: Absolut
• Lokasi: Kanan Bawah
• Offset Horisontal: -5%

Tambahkan Modul Teks ke Kolom 2

Tambahkan Salinan H3 & H4

Ke kolom kedua. Di sana, kami akan menambahkan Modul Teks dengan beberapa salinan H3 dan H4.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Perataan Teks: Tengah
• Warna Teks: Gelap

Pengaturan Teks H3

Kemudian, ubah pengaturan teks H3.

• Judul 3 Font: Tampilan Playfair
• Judul 3 Perataan Teks: Tengah
• Judul 3 Ukuran Teks:
  • Desktop: 90px
  • Tablet: 70px
  • Telepon: 60px

Pengaturan Teks H4

Gaya teks H4 juga.

• Judul 4 Font: Montserrat
• Judul 4 Berat Font: Ringan

Perekat

Kemudian, buka pengaturan ukuran dan terapkan lebar "100%". Ini akan membantu dengan langkah selanjutnya, yaitu memposisikan ulang modul.

• Lebar: 100%

Posisi

Selesaikan pengaturan modul dengan masuk ke tab lanjutan dan ubah pengaturan posisi sebagai berikut:

• Posisi: Absolut
• Lokasi: Kiri Bawah
• Offset Vertikal: 20px

Tambahkan Modul Teks ke Kolom 3

Tambahkan Konten H5 & Paragraf

Ke kolom ketiga. Tambahkan Modul Teks dengan beberapa konten H5 dan paragraf pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah font di pengaturan teks.

• Font Teks: Montserrat

Pengaturan Teks H5

Gaya teks H5 juga.

• Judul 5 Font: Montserrat
• Judul 5 Berat Font: Tebal
• Judul 5 Ukuran Teks:
  • Desktop & Tablet: 23px
  • Telepon: 18px

2. Perubahan Kunci untuk Membuat Efek

Bagian

Hapus Bagian Padding

Sekarang kita telah menetapkan dasar desain kita, kita dapat mulai membuat efek gaya tempel kustom yang dapat Anda lihat di pratinjau posting ini. Langkah pertama untuk mencapai efek ini adalah memastikan nilai padding atas dan bawah bagian Anda adalah nol. Melakukan hal ini akan membantu kami memastikan bahwa bagian dan baris dimulai dan diakhiri pada titik yang sama. Ini penting ketika kita menambahkan posisi sticky ke baris kita di langkah-langkah yang akan datang. Dengan menetapkan batas ke bagian bawah, kami tidak memberikan ruang bagi baris untuk bergerak. Baris, bagaimanapun, akan berubah menjadi lengket selama beberapa detik dan akan menyoroti gaya lengket yang diubah dalam desain kita.

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

Baris

Ubah Baris Lengket

Buka pengaturan baris dan ubah baris menjadi lengket. Seperti disebutkan pada langkah sebelumnya, penting untuk memastikan batas tempel bawah baris kita adalah bagiannya. Karena tidak ada ruang antara akhir baris dan akhir bagian, baris lengket akan tetap di tempatnya.

• Posisi Lengket: Menempel ke Atas
• Offset Atas Lengket: 0px
• Batas Lengket Bawah: Bagian
• Offset Dari Elemen Lengket Sekitarnya: Ya
• Default Transisi dan Gaya Lengket: Ya

Warna Latar Belakang Baris Lengket

Saatnya untuk mulai menerapkan beberapa gaya lengket ke elemen kita! Mulailah dengan warna latar belakang baris.

• Warna Latar Belakang: #161616

Transisi Baris

Untuk memastikan transisi yang mulus, kami akan meningkatkan durasi transisi di tab lanjutan baris.

• Durasi Transisi: 500ms
• Kurva Kecepatan Transisi: Kemudahan

Warna Latar Belakang Kolom Lengket 2

Kemudian, kita akan mengubah warna latar belakang sticky column 2.

• Warna Latar Belakang: #262626

Modul Teks di Kolom 1

Warna Latar Belakang Lengket

Kami akan mengubah warna latar belakang Modul Teks di kolom 1 juga.

• Warna Latar Belakang: #ddc7b5

Warna Teks Lengket

Seiring dengan warna teks yang lengket.

• Warna Teks: #0a0a0a

Ukuran Lengket

Dan kita akan menambah lebar modul dalam pengaturan ukuran.

• Lebar: 105%

Transisi

Kami memastikan transisi yang mulus dengan memodifikasi durasi transisi modul di tab lanjutan.

• Durasi Transisi: 500ms
• Kurva Kecepatan Transisi: Kemudahan

Modul Teks di Kolom 2

Warna Teks Lengket

Selanjutnya, kita memiliki Modul Teks di kolom 2. Kita akan mengubah warna teks menjadi terang dalam keadaan lengket.

• Warna Teks: Cahaya

Modul Teks di Kolom 3

Warna Teks Lengket

Hal yang sama berlaku untuk Modul Teks di kolom 3.

• Warna Teks: Cahaya

3. Bagian Klon untuk Digunakan Kembali

Sekarang kita telah menyelesaikan bagian pertama, termasuk efek perubahan gaya lengket, kita dapat menggunakan kembali bagian ini sebanyak yang kita inginkan dengan mengkloningnya.

Ubah Semua Salin

Pastikan Anda mengubah semua salinan duplikat.

Tambahkan Beberapa Margin Atas ke Bagian Pertama & Margin Bawah ke Bagian Terakhir

Dan last but not least, kami akan menambahkan beberapa margin atas ke bagian pertama dan margin bawah ke bagian terakhir. Ini akan membantu kami mencegah transisi langsung sebelum orang mulai menggulir. Itu dia!

• Margin Atas: 200px

• Margin Bawah: 200px

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 berkreasi dengan opsi lengket Divi. Lebih khusus lagi, kami telah menggunakan opsi sticky Divi untuk mengubah gaya sticky tanpa menambahkan gerakan. Segera setelah orang menggulir melewati bagian tertentu dari halaman Anda, gaya desain berubah, yang menyoroti bagian tertentu dari halaman tersebut. 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.