Bagaimana Cara Membuat Elemen Divi Lengket? (Panduan Langkah-demi-Langkah)

Apakah Anda ingin menyesuaikan situs Anda dan memperbaiki elemen? Dalam panduan ini, kami akan menunjukkan cara membuat elemen Divi menjadi lengket baik dengan maupun tanpa pengkodean.

Kami baru-baru ini melihat cara membuat header Anda lengket menggunakan Divi untuk membantu pengguna menavigasi konten Anda. Itu langkah pertama yang bagus tapi masih banyak lagi yang bisa Anda lakukan. Divi adalah tema yang sangat dapat disesuaikan yang memungkinkan Anda mempersonalisasi setiap inci situs WordPress Anda. Itu sebabnya, dalam tutorial ini, kita akan melihat berbagai cara untuk membuat elemen Divi menjadi lengket .

Mengapa Membuat Elemen Divi Lengket?

Secara default, elemen di situs tidak lengket sehingga ketika pengguna menggulir ke bawah, elemen tersebut menghilang dari layar dan pengguna melihat konten baru. Namun, Anda mungkin ingin membuat elemen terpenting di situs Anda selalu terlihat untuk membantu pelanggan menemukan apa yang mereka butuhkan. Ini berarti bahwa elemen akan selalu tetap di layar meskipun pengguna menggulir ke bawah. Misalnya, Anda dapat menempelkan menu utama, formulir pendaftaran, atau kolom dengan informasi penting yang dibutuhkan pengguna.

Idenya adalah untuk membuat elemen tersebut lebih terlihat untuk membantu pengunjung Anda. Elemen lengket juga bisa sangat membantu untuk meningkatkan penjualan dan konversi. Misalnya, banyak toko online membuat penawaran dan Call-to-Action (CTA) utama mereka melekat untuk meningkatkan penjualan mereka.

Bagaimana Cara Membuat Elemen Divi Lengket/Tetap?

Ada dua metode utama untuk membuat elemen Divi lengket:

1. Menggunakan plugin pembuat Divi bawaan
2. Dengan sedikit coding

Dalam panduan ini, kami akan menjelaskan cara membuat elemen diperbaiki dengan kedua metode. Kedua opsi akan menyelesaikan pekerjaan, jadi pilih salah satu yang paling sesuai dengan keahlian Anda.

1) Menggunakan Divi Builder

Divi Builder hadir dengan Divi jadi, jika Anda sudah menggunakan tema ini, Anda tidak perlu menginstal apa pun. Untuk membuat elemen apa pun lengket, pertama, Anda perlu membuat halaman dan menggunakan pembuat visual untuk menambah atau menghapus elemen, mengeditnya, dan seterusnya. Untuk demo ini, kita akan menggunakan salah satu paket tata letak premade mereka yang disebut Akuntan tetapi Anda juga dapat menggunakan halaman langsung atau halaman yang sama sekali baru.

Buat Halaman

Pertama, di dasbor WordPress Anda, buka Pages > Add New dan buat halaman baru.

Mulai sekarang, kita akan menggunakan pembuat visual Divi, jadi tekan tombol Gunakan Pembuat Divi dan Anda akan melihat pembuat visual seret dan lepas.

Impor Template Pilihan

Setelah pembuat terbuka, Anda akan melihat tiga opsi:

• Bangun dari awal
• Pilih tata letak yang sudah jadi
• Mengkloning halaman yang ada

Jika Anda ingin membuat desain khusus, pilih opsi pertama. Menggunakan pembuat Divi, akan sangat mudah untuk membuat desain halaman unik untuk situs Anda. Atau, Anda dapat mengkloning desain halaman yang ada atau memilih tata letak yang sudah jadi. Dalam kasus kami, kami akan menggunakan template tata letak premade ( Akuntan) . Jadi, untuk mengimpor template Akuntan , kami memilih opsi Pilih tata letak yang dibuat sebelumnya dan kemudian pilih yang Anda suka dari daftar.

Setelah itu, saat kami menggunakan Editor Klasik, Anda akan melihat sesuatu seperti ini di layar Anda:

Namun, lebih mudah untuk bekerja dengan pembuat visual jadi kita akan beralih ke itu.

Beralih ke Pembuat Visual

Di header, Anda akan melihat opsi untuk menggunakan pembuat visual yang disebut Build On the Front End . Tekan dan Anda akan melihat bagaimana layar berubah dan lebih mudah untuk melihat hasil modifikasi dari frontend.

Template Akuntan dilengkapi dengan bilah sisi kanan dan formulir pendaftaran buletin. Namun, itu tidak diperbaiki sehingga saat kami menggulir ke bawah, itu menghilang. Jadi, mari kita lihat cara membuat kotak pendaftaran buletin lengket.

Instal dan Aktifkan Plugin WordPress Menu Lengket

Untuk membuat elemen Divi menjadi lengket, kami akan menggunakan plugin Menu Tempel. Jadi, buka dashboard WordPress Anda, buka Plugins > Add new, dan cari Sticky Menu, Sticky Header on Scroll . Kemudian, klik Instal dan aktifkan.

Dengan plugin sederhana ini, kita dapat membuat menu, header, atau elemen apa pun menjadi lengket dalam waktu singkat. Untuk menyiapkan plugin, buka Pengaturan > Menu Tempel (atau apa pun!) .

Siapkan Menu Lengket

Ada dua opsi pengaturan penyesuaian utama:

• Dasar
• Canggih

Pertama, mari kita lihat bagaimana menyesuaikan pengaturan dasar. Anda perlu memberi nama elemen lengket. Dalam kasus kami, kami akan menyebutnya #sticky dan kami akan mengatur spasi antara halaman atas dan elemen menjadi 50px . Jangan khawatir jika Anda tidak yakin tentang spasi, Anda dapat mengubahnya nanti.

Kemudian, simpan pengaturan dasar dan buka tab Pengaturan lanjutan . Di sini kita akan memperbaiki elemen lengket sedikit lebih banyak. Misalnya, kami akan mengatur bidang Z-Index ke 99998 dan menambahkan #stop di bidang elemen push-up. Elemen push-up akan membantu Anda menghentikan widget lengket yang mengambang (lebih lanjut tentang ini nanti).

Ada beberapa opsi penyesuaian premium lainnya di sana, tetapi kami tidak akan menyentuhnya untuk saat ini. Jadi, setelah Anda menambahkan nilai-nilai ini, simpan pengaturannya dan Anda siap melakukannya. Setelah itu, buka halaman yang telah Anda buat menggunakan pembuat visual Divi. Kami akan membuat widget pendaftaran buletin melekat dengan menambahkan kelas CSS ke dalamnya. Ada dua kolom. Kolom kiri menunjukkan posting blog dan kolom kanan menampilkan bilah pendaftaran buletin. Jadi, kita perlu menerapkan ID CSS ke kolom kanan.

Tambahkan ID CSS Khusus

Untuk melakukan ini, buka bagian pengaturan Divi dan pilih kolom 2 . Di bawah tab Advanced , Anda akan melihat bagian untuk menambahkan ID CSS, kelas CSS, dan kode kustom CSS. Untuk membuat elemen ini lengket, Anda hanya perlu menambahkan Elemen Lengket yang Anda atur di pengaturan Dasar. Dalam kasus kami, kami akan menambahkan sticky ke bidang ID CSS dan menyimpan pengaturannya.

Pastikan Anda menyimpan seluruh pengaturan pembuat Divi, jika tidak maka tidak akan berfungsi. Kemudian, Anda dapat melihat pratinjau halaman.

Seperti yang Anda lihat di atas, formulir pendaftaran buletin sudah diperbaiki sekarang. Namun, ini tumpang tindih dengan elemen lain di situs sehingga kami akan membuat beberapa perubahan. Ini adalah saat ID elemen push-up dari pengaturan Lanjutan ikut bermain. Dalam kasus kami, kami akan membuat widget buletin berhenti tepat sebelum formulir kontak.

Tambahkan Berhenti CSS

Jadi seperti yang kita lakukan sebelumnya, kita perlu menyebutkan ID CSS push-up di bagian formulir kontak. Untuk melakukan ini, buka pengaturan Bagian Newsletter di Divi, buka tab Lanjutan, tambahkan perhentian ke ID CSS, dan simpan perubahannya.

Kemudian, segarkan halaman di frontend dan Anda akan melihat bahwa kotak pendaftaran buletin lengket tetapi berhenti saat mencapai formulir kontak dan tidak tumpang tindih dengan widget lain di situs.

Demikian pula, Anda dapat mengikuti langkah yang sama untuk membuat elemen Divi melekat pada situs Anda . Mari kita lihat bagaimana Anda dapat memperbaiki ikon sosial menggunakan Menu Lengket dan Divi Builder.

Membuat ikon media sosial menjadi lengket

Proses untuk membuat ikon media sosial lengket sangat mirip. Namun, sebelum kita mulai, perlu diingat bahwa dengan versi gratis dari Sticky Menu, Anda hanya dapat membuat satu elemen lengket pada saat yang sama, jadi ingatlah untuk menghapus ID CSS lengket dari kolom 2 .

Setelah itu, Anda harus menambahkan ID CSS lengket ke elemen ikon media sosial Anda. Seperti yang kita lakukan sebelumnya, klik pada elemen, buka tab Advanced , dan tambahkan ID CSS khusus di bidang yang sesuai.

Kemudian simpan pengaturan dan periksa hasilnya di frontend.

Seperti yang Anda lihat, kami baru saja membuat ikon media sosial melekat!

Jika Anda tidak ingin menginstal plugin apa pun, Anda dapat membuat elemen diperbaiki secara terprogram. Mari kita lihat bagaimana melakukannya.

2) Buat elemen Divi apa pun lengket dengan sedikit pengkodean

Di bagian ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat membuat elemen Divi diperbaiki secara terprogram . Dalam hal ini, alih-alih membuat widget pendaftaran buletin diperbaiki, kami akan menunjukkan cara membuat header lengket dengan sedikit pengkodean .

Buat Header Kustom

Dari pembuat tema Divi, Anda dapat membuat templat situs web khusus.

Untuk demo ini, pertama, mari kita buat Header Global.

Anda akan memiliki tiga opsi:

• Bangun dari awal
• Pilih tata letak yang sudah jadi
• Mengkloning halaman yang ada

Untuk demo ini, kami akan membuat header dari awal.

Pada langkah selanjutnya, Anda perlu memilih jumlah baris yang Anda inginkan pada header.

Untuk tutorialnya, kita akan memilih tata letak baris tunggal. Seperti yang telah kita lihat sebelumnya, setelah Anda membuat tajuk, Anda akan dapat mengeditnya dan menambahkan beberapa elemen seperti menu, gambar, tautan khusus, dan banyak lagi. Dengan drag and drop Divi Builder, Anda dapat menyesuaikan ukuran dan padding heading Anda dalam beberapa klik.

Dalam kasus kami, kami akan menambahkan menu ke header kami.

Tambahkan Kelas CSS

Sebelum melanjutkan, Anda perlu menyebutkan kelas CSS untuk header Anda. Dari pengaturan header, buka tab Advanced dan tambahkan kelas CSS khusus . Kami akan menambahkan pa-sticky-header sebagai Kelas CSS khusus.

Setelah itu, simpan perubahan dan dalam opsi tema Divi, Anda akan melihat bagian untuk memasukkan kode di bawah pengaturan Integrasi .

Tambahkan Kode JavaScript

Sekarang bagian yang menyenangkan dimulai. Salin kode JavaScript berikut:

 <skrip>
jQuery(fungsi ($) {
var headerHeight = $('header.et-l.et-l--header').outerHeight();
$(jendela).bind('gulir', fungsi () {
var windowHeight = $(jendela).height();
if ($(window).scrollTop() < windowHeight - headerHeight) {
$('pa-header').removeClass('pa-sticky-header');
}
kalau tidak {
$('pa-header').addClass('pa-sticky-header');
}
});
});
</skrip>

Rekatkan ke editor dan simpan perubahannya.

Tambahkan CSS Tambahan

Setelah itu, kita akan mengatur elemen yang ingin kita buat lengket di situs. Dalam kasus kami, untuk membuat header tetap di atas, salin kode CSS berikut dan tempel ke editor CSS dan simpan perubahannya.

 /*untuk membuat elemen tertentu menjadi lengket*/

.pa-sticky-header {
	posisi: tetap!penting;
	atas: 0; /*Menyetel jarak header dari bagian atas halaman*/
	lebar: 100%;
} 

Sekarang, periksa frontend situs web Anda dan Anda akan melihat bahwa header akan diperbaiki.

Selain itu, Anda dapat menyesuaikan tajuk dan mengubah posisinya, ukurannya, dan sebagainya. Demikian pula, Anda dapat menggunakan kode sebagai basis dan membuat elemen lain lengket di Divi. Misalnya, Anda dapat menggunakannya untuk membuat formulir, tombol, atau kolom tetap.

Rekomendasi

Sekarang Anda tahu cara membuat elemen lengket pada instalasi Divi Anda, tetapi sebelum menyimpulkan panduan kami, mari kita lihat beberapa tips.

Tidak Ada Animasi

Dengan plugin Divi builder, Anda dapat menambahkan efek hover ke elemen, bagian, dan lainnya. Namun, kami tidak menyarankan penggunaan efek arahkan kursor pada elemen lengket Anda karena dapat merusak situs Anda. Jika Anda mengalami masalah teknis pada instalasi Anda, cukup nonaktifkan efek animasi hover dan semuanya akan kembali normal.

Pratinjau Perubahan sebelum Menerbitkan

Divi Builder memungkinkan Anda melihat perubahan yang Anda buat di layar. Ini sangat berguna untuk memastikan bahwa perataan sudah benar dan elemen tidak tumpang tindih dengan widget lain di situs.

Elemen Lengket Terbatas Dalam Versi Gratis

Versi gratis WP Sticky Menu hanya memungkinkan Anda untuk menambahkan satu elemen lengket. Jadi, jika Anda ingin menambahkan lebih banyak elemen ke situs web Anda, Anda mungkin ingin mempertimbangkan untuk meningkatkan ke versi pro yang dimulai dari 39 USD.

Kesimpulan

Secara keseluruhan, memperbaiki beberapa elemen adalah opsi yang bagus ketika Anda ingin membuatnya lebih terlihat oleh pengguna Anda. Dalam tutorial ini, kita telah melihat dua opsi untuk membuat elemen Divi menjadi lengket:

• Menggunakan plugin Divi Builder
• Secara terprogram

Jika Anda tidak memiliki keterampilan pengkodean, Anda dapat menggunakan plugin Divi Builder. Ini adalah cara paling sederhana dan paling ramah bagi pemula untuk melakukannya. Dengan mode pratinjau langsung, Anda dapat melihat setiap perubahan secara instan.

Di sisi lain, jika Anda tidak ingin menginstal plugin apa pun atau hanya ingin membuat kode, Anda dapat membuat elemen apa pun diperbaiki secara terprogram. Cukup gunakan kode JavaScript sebagai dasar dan sesuaikan untuk membuat elemen apa pun yang Anda inginkan lengket. Anda dapat menambahkan kode CSS ke style.css tema Anda atau menggunakan bagian CSS tambahan di Divi. Sebelum Anda melakukannya, pastikan Anda menyebutkan kelas CSS pada elemen Anda.

Metode mana yang Anda gunakan untuk membuat elemen Anda lengket? Apakah Anda tahu yang lain? Beri tahu kami di bagian komentar di bawah.

Jika tutorial ini bermanfaat, silakan bagikan dengan teman dan sesama blogger di media sosial. Untuk tutorial lebih lanjut, lihat blog kami.