Cara Membuat Elemen Halaman Divi Lengket

Mengetahui cara membuat elemen halaman Divi menjadi lengket (atau diperbaiki) adalah salah satu keterampilan praktis yang dapat digunakan desainer web dalam beberapa cara. Jika Anda tidak terbiasa dengan istilah "lengket", itu hanya merujuk pada elemen di halaman web yang tetap "tetap" saat pengguna menggulir halaman ke bawah. Contoh populer dari elemen lengket adalah menu navigasi tetap. Divi memiliki fungsi navigasi tetap (atau lengket) yang tersedia secara default. Jadi ketika pengguna menggulir halaman ke bawah, versi menu tetap tetap macet di bagian atas halaman saat pengguna menggulir. Tetapi elemen lengket dapat digunakan untuk apa saja dan ini adalah cara yang bagus untuk menarik perhatian pada ajakan bertindak yang Anda inginkan pada halaman tertentu.

Dalam tutorial ini, saya akan menunjukkan kepada Anda cara mudah untuk membuat elemen apa pun di halaman Anda menjadi lengket dengan menggunakan plugin yang disebut Menu Tempel (atau Apa Pun!) di Gulir. Yang diperlukan hanyalah beberapa saat untuk mengonfigurasi pengaturan plugin. Maka yang perlu Anda lakukan hanyalah menambahkan ID CSS khusus ke elemen Anda. Semudah itu.

Mari kita masuk ke dalamnya!

Apa yang Anda Butuhkan untuk Tutorial Ini

Untuk tutorial ini Anda memerlukan yang berikut:

• Tema Divi
• Menu Lengket (atau Apa Pun!) pada plugin Gulir
• Tata Letak Halaman Blog Akuntan (tersedia dari dalam Divi Builder)

Cara Membuat Elemen Halaman Divi Lengket

Berlangganan Saluran Youtube Kami

Mengonfigurasi Pengaturan Plugin

Setelah Anda memiliki Menu Tempel (atau Apa Pun!) pada plugin Gulir yang diinstal dan diaktifkan pada tema Divi Anda, buka dasbor WordPress dan navigasikan ke Pengaturan> Menu Tempel (atau Apa Pun!).

Di bawah tab Pengaturan Dasar, perbarui opsi sebagai berikut:

Pertama, Anda perlu menambahkan pengidentifikasi unik untuk elemen lengket Anda. Ini bisa berupa ID CSS atau Kelas. Kami kemudian akan menambahkan pengidentifikasi ini ke elemen kami di Divi nanti. Agar mudah diingat, saya akan menambahkan ID CSS “#sticky”.

Elemen Lengket: #lengket

Kemudian Anda perlu menambahkan nilai piksel untuk ruang antara bagian atas halaman dan elemen lengket. Karena bilah navigasi tetap Divi tingginya 54px secara default, kami ingin menambahkan setidaknya 54px untuk opsi ini sehingga elemen lengket kami tidak tumpang tindih dengan navigasi tetap.

Spasi antara bagian atas halaman dan elemen lengket: 54 piksel

Ini juga merupakan ide yang baik untuk menonaktifkan elemen lengket di ponsel. Untuk melakukan ini, kita perlu mengonfigurasi plugin agar tidak menempelkan elemen saat layar lebih kecil dari 980px.

Jangan menempelkan elemen saat layar lebih kecil dari: 980 piksel

Simpan pengaturan Anda dan kemudian pergi ke tab Pengaturan Lanjutan dan perbarui yang berikut ini:

Untuk opsi z-index, kami ingin memastikan elemen kami ditumpuk di atas semua elemen lain di halaman, terutama jika kami merencanakan elemen kami tumpang tindih dengan elemen lain di scroll. Untuk memastikan ini terjadi, berikan atur indeks-z ke 99998.

Z-indeks: 99998

Untuk memberi Anda gambaran tentang bagaimana elemen diurutkan di Divi, bagian memiliki indeks-z 2, kolom memiliki indeks-z 9, dan bilah header/navigasi memiliki indeks-z 99999. Jadi pada dasarnya, kita ingin elemen lengket kami menjadi 1 angka lebih rendah dari indeks-z untuk navigasi header. Ini akan memastikan elemen lengket berada di atas segalanya di halaman kecuali nav. Ini akan berguna setiap kali Anda ingin menghentikan elemen Anda dan mendorongnya ke atas halaman sehingga elemen lengket tidak akan duduk di atas nav saat Anda menggulir (terlihat berantakan dan rusak).

Selanjutnya, kita dapat menambahkan pengenal elemen "push up". Anda dapat menganggap ini sebagai penghenti untuk elemen lengket kami. Ini biasanya merupakan elemen footer. Pada dasarnya, ini mengidentifikasi elemen yang akan menghentikan elemen lengket saat menggulir ke bawah halaman, memungkinkan elemen lengket didorong ke atas dengan sisa halaman. Untuk contoh ini, saya akan mengatur pengenal dengan ID CSS “#stop”.

Elemen push-up: #stop

Simpan Pengaturan.

Sekarang kita dilengkapi dengan kekuatan yang kita butuhkan untuk membuat elemen lengket!

Membuat Elemen Halaman Divi Lengket

Untuk menunjukkan cara membuat elemen Divi lengket, saya akan menggunakan Halaman Blog Akuntan Divi dari Paket Tata Letak Akuntan. Untuk memulai, buat halaman baru, beri judul halaman Anda, dan terapkan Visual Builder. Kemudian pilih opsi “Choose a Premade Layout”. Dari popup beban dari perpustakaan, pilih Paket Tata Letak Akuntan dan pilih halaman Blog.

Halaman ini menampilkan formulir berlangganan email di bilah sisi kanan bagian khusus. Dalam upaya untuk menarik lebih banyak perhatian ke formulir ini, kami dapat membuatnya menjadi lengket setelah pengguna menggulir halaman ke bawah. Kemudian kita bisa membuat elemen berhenti (atau push up) setiap kali mencapai bagian berikutnya pada halaman sehingga tidak tumpang tindih.

Cara Membuat Kolom Lengket

Namun, pada titik ini, kita perlu memutuskan elemen spesifik apa yang ingin kita buat lengket. Kita bisa saja membuat modul Opsi Email lengket, tetapi itu tidak akan memperhitungkan modul Ikuti Media Sosial langsung di bawah formulir, yang juga ingin kita buat lengket. Dan, kita dapat memberikan kedua modul tersebut pengidentifikasi yang sama karena keduanya akan menjadi lengket pada posisi yang sama yang menyebabkan tumpang tindih. Cara terbaik untuk melakukannya adalah dengan membuat seluruh kolom (kolom 2) lengket.

Untuk membuat kolom 2 lengket, buka pengaturan baris dari baris yang berisi kolom yang ingin kita targetkan. Kemudian, di bawah tab Advanced, tambahkan CSS ID “sticky”. Ini sesuai dengan pengidentifikasi unik elemen lengket yang kami tambahkan di pengaturan plugin kami.

ID CSS: lengket

(CATATAN: Jangan letakkan simbol hashtag (atau pound) sebelum ID di sini. Juga, pastikan Anda menambahkannya ke ID CSS dan bukan Kelas CSS)

Simpan pengaturan dan pratinjau versi langsung halaman. Jika Anda menggulir ke bawah, Anda akan melihat bahwa kolom 2 (dengan kedua modul) akan menjadi lengket setelah menjadi 54px dari atas jendela dan tetap pada posisi itu saat Anda terus menggulir.

Menghentikan Elemen Lengket di Bagian

Seperti yang Anda lihat, elemen tetap lengket sehingga tumpang tindih dengan konten bagian lain di bawahnya. Untuk menghentikan hal ini terjadi, kita dapat menggunakan pengenal "push up" (#stop) yang kita tambahkan di pengaturan plugin.

Untuk menghentikan elemen lengket pada bagian di bawah ini, kita perlu membuka pengaturan bagian dan menambahkan ID CSS "berhenti".

ID CSS: berhenti

Sekarang buka pratinjau versi langsung halaman tersebut. Perhatikan bagaimana elemen lengket berhenti di bagian yang Anda identifikasi.

Cukup keren bukan?

Cara Membuat Modul Lengket

Untuk membuat satu modul lengket, Anda perlu melakukan penyesuaian di Divi untuk memastikan elemen Anda memiliki indeks-z yang benar sehingga berada di atas elemen lain di seluruh halaman saat menggulir. Seperti yang saya sebutkan sebelumnya, Divi memberikan aa z-index 2 untuk semua bagian. Dan plugin menerapkan indeks-z 99998 ke elemen lengket. Tetapi karena modul tidak dapat diurutkan (atau diindeks) di atas elemen induknya (bagian), modul akan tetap berada di belakang modul lain di halaman. Untuk memperbaikinya, kita perlu memastikan dan memberikan bagian yang memegang modul sticky kita indeks-z 99998 secara manual.

Untuk mengilustrasikannya, saya akan menggunakan tata letak halaman Blog Akuntan yang sama dengan yang kita gunakan sebelumnya. Sebelum kita menambahkan ID CSS kita ke modul, pertama-tama, kita perlu mengeluarkan ID CSS (lengket) yang kita tetapkan untuk kolom 2. Dan kemudian keluarkan ID CSS (berhenti) yang kita tetapkan untuk bagian di bawahnya. Setelah itu, buka pengaturan modul Ikuti Media Sosial dan tambahkan ID CSS "lengket" ke modul.

Jika Anda melihat halaman langsung, Anda akan melihat elemen lengket disembunyikan saat tumpang tindih dengan modul lain di bagian di bawah saat Anda menggulir.

Untuk memperbaikinya, buka pengaturan bagian untuk bagian yang berisi elemen tempel modul ikuti media sosial. Kemudian tambahkan CSS khusus berikut ke Elemen Utama:

z-index: 99998;

Sekarang periksa halaman langsung. Perhatikan bagaimana ikon media sosial akan menempel di bagian atas halaman (54px dari atas), tepat di bawah nav tetap dan kemudian tetap di atas modul lain saat Anda menggulir.

Membuat Bagian Lengket

Untuk membuat seluruh bagian lengket, Anda akan mengikuti proses yang sama menambahkan ID CSS "lengket" bagian pilihan Anda. Tidak perlu memperbarui indeks-z menggunakan css khusus karena plugin melakukannya untuk Anda secara otomatis.

Efek Arahkan Arah Dapat Menyebabkan Elemen Lengket menjadi Glitch

Jika Anda memiliki efek hover aktif di seluruh halaman Anda atau pada elemen lengket Anda, Anda mungkin mengalami beberapa gangguan. Jika ini terjadi, Anda mungkin perlu menonaktifkan efek melayang elemen lengket.

Hanya Satu Elemen Lengket Per Halaman

Plugin hanya mengizinkan satu elemen lengket per halaman jadi jika Anda ingin menambahkan beberapa elemen lengket, Anda memerlukan solusi yang lebih canggih (atau plugin lain yang mendukung ini).

Pikiran Akhir

Saya harap artikel ini membantu dalam memberikan cara sederhana yang menyegarkan untuk membuat elemen halaman Divi menjadi lengket. Gunakan itu untuk membuat sub menu lengket, CTA lengket, penawaran promosi lengket, dan apa saja yang dapat Anda pikirkan. Bersenang-senang menjelajahi kemungkinan!

Saya berharap untuk mendengar dari Anda di komentar di bawah.

Bersulang!