Cara Membuat Daftar Interaktif di Gulir dengan Opsi Lengket Divi

Opsi lengket Divi memungkinkan Anda untuk dengan mudah menambahkan interaksi ke halaman yang Anda buat dan desain. Jika Anda mencari cara untuk menyebutkan banyak item tanpa hanya membuat daftar statis, Anda akan menikmati tutorial ini. Hari ini, kami menunjukkan kepada Anda cara membuat daftar interaktif di scroll menggunakan opsi tempel Divi. Saat orang menggulir ke bawah bagian, item yang berbeda ditambahkan ke daftar di sebelah kiri. Ini membantu menjaga ikhtisar. Anda juga dapat mengunduh file JSON 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!

Buat Struktur Elemen

Tambahkan Bagian Baru

Warna latar belakang

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Tambahkan warna latar belakang ke bagian.

• Warna Latar Belakang: #f2f2f2

Menambahkan baris

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Lebar: 100%
• Lebar Maks: 100%

Warna Latar Kolom 1

Kemudian, buka pengaturan kolom 1 dan tambahkan warna latar belakang.

• Warna Latar Belakang: #f2f2f2

Spasi Kolom 1

Ubah pengaturan spasi kolom berikutnya.

• Bantalan Atas:
  • Tablet: 20 piksel
  • Telepon: 20px
• Bantalan Bawah:
  • Tablet: 20 piksel
  • Telepon: 20px
• Padding Kiri: 3%
• Padding Kanan: 3%

Indeks Kolom 1 Z

Dan tingkatkan indeks z kolom di tab lanjutan.

• Indeks Z: 12

Tambahkan Modul Teks #1 ke Kolom 1

Tambah isi

Saatnya menambahkan modul, dimulai dengan Modul Teks pertama di kolom 1. Tambahkan beberapa konten pilihan Anda.

Pengaturan Teks

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

• Font Teks: Tampilan Playfair
• Berat Font Teks: Tebal
• Gaya Font Teks: Miring
• Warna Teks: #bfbfbf
• Ukuran teks:
  • Desktop: 2vw
  • Tablet: 5vw
  • Telepon: 8vw
• Tinggi Baris Teks: 1em

Tambahkan Modul Teks #2 ke Kolom 2

Tambahkan Konten H3

Tambahkan Modul Teks lain ke kolom dengan beberapa konten H3 pilihan Anda.

Pengaturan Teks H3

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

• Judul 3 Font: Tampilan Playfair
• Judul 3 Berat Font: Tebal
• Judul 3 Warna Teks: #000000
• Judul 3 Ukuran Teks:
  • Desktop: 3vw
  • Tablet: 10vw
  • Telepon: 12vw

Jarak

Tambahkan beberapa margin atas dan bawah kustom berikutnya.

• Margin Atas: 2vh
• Margin Bawah: 2vh

Transformasi Skala

Kemudian, terapkan beberapa pengaturan skala transformasi kustom.

• Keduanya: 300%

Ubah Terjemahan

Dan selesaikan pengaturan modul dengan menerapkan pengaturan transformasi terjemahan berikut:

• Bawah: 30%

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Modul terakhir yang kita butuhkan di kolom 1 adalah Modul Pembagi. Pastikan opsi "Tampilkan Pembagi" diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Pindah ke tab desain modul dan ubah pengaturan baris yang sesuai:

• Warna Garis: #000000
• Gaya Garis: Padat
• Posisi Garis: Atas

Perekat

Ubah juga pengaturan ukuran modul.

• Berat Pembagi: 4px
• Tinggi Pembagi: 4px

Tambahkan Modul Gambar ke Kolom 2

Biarkan Kotak Gambar Kosong

Di kolom 2, modul pertama yang akan kita tambahkan adalah Modul Gambar. Biarkan kotak gambar kosong.

Gambar latar belakang

Gunakan gambar latar belakang sebagai gantinya.

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah

Jarak

Dan untuk memungkinkan gambar latar belakang muncul, kami akan mengubah pengaturan spasi sebagai berikut:

• Batas atas:
  • Desktop: 15vh
  • Tablet & Telepon: 0vh
• Padding Atas: 33vh
• Padding Bawah: 33vh

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Modul berikutnya dan terakhir yang kita butuhkan adalah Modul Teks di bawah Modul Gambar. Tambahkan beberapa konten deskripsi pilihan Anda.

Pengaturan Teks

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

• Font Teks: Kabin
• Warna Teks: #000000
• Ukuran teks:
  • Desktop: 1.2vw
  • Tablet: 2.3vw
  • Telepon: 3.4vw
• Tinggi Baris Teks: 1.6em

Jarak

Selesaikan pengaturan modul dengan mengubah pengaturan jarak modul yang sesuai:

• Bantalan Kiri:
  • Tablet & Telepon: 5%
• Padding Kanan: 5%

Terapkan Efek Lengket

Putar Kolom #1 Lengket

Sekarang setelah semua elemen berada di tempatnya, kita dapat mulai menerapkan pengaturan sticky. Buka pengaturan kolom 1 dan gunakan pengaturan lengket responsif berikut di tab lanjutan:

• Posisi Lengket: Menempel ke Atas
• Batas Lengket Bawah
  • Desktop: Bagian
  • Tablet & Telepon: Baris
• Offset Dari Elemen Lengket Sekitarnya:
  • Desktop: Ya
  • Tablet & Telepon: Tidak
• Default Transisi dan Gaya Lengket: Ya

Modul Teks #1 di Kolom #1: Pengaturan Tempel

Tinggi

Sekarang kolom 1 telah berubah menjadi sticky, kita dapat mulai menerapkan beberapa pengaturan sticky ke elemen di dalam kolom ini. Kita akan mulai dengan tinggi Modul Teks pertama.

• Tinggi: 0px
• Tinggi Lengket: Otomatis

Kegelapan

Kami juga memodifikasi opacity.

• Opasitas: 0%
• Opasitas Lengket: 100%

Modul Teks #2 di Kolom #1: Pengaturan Tempel

Transformasi Skala

Selanjutnya, kita akan membuka Modul Teks kedua di kolom 1. Kembalikan nilai skala transformasi ke "100%" dalam keadaan lengket.

• Lengket Keduanya: 100%

Ubah Terjemahan

Ubah juga pengaturan terjemahan transformasi lengket.

• Bagian Bawah Lengket: 0%

Transisi

Dan selesaikan pengaturan modul dengan meningkatkan durasi transisi di tab lanjutan.

• Transisi: 1000ms

Modul Pembagi: Pengaturan Lengket

Lebar Maks

Last but not least, kami juga akan memodifikasi lebar maksimum Modul Pembagi.

• Lebar Maks: 0px
• Lebar Maks Lengket: 120px

Baris Klon Dua Kali

Setelah baris pertama Anda selesai, Anda dapat mengkloningnya dua kali.

Ubah Semua Konten & Gambar

Pastikan Anda mengubah semua konten dan gambar dan selesai!

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 menunjukkan kepada Anda cara membuat daftar interaktif di scroll. Saat orang menggulir ke bawah desain bagian, item yang berbeda dari daftar Anda dikumpulkan di sisi kiri. Ini memberikan gambaran terstruktur dan membantu Anda membuat desain interaktif. Anda dapat menggunakan pendekatan ini untuk semua jenis daftar yang ingin Anda bagikan 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.