Cara Membuat Bilah Sisi Tetap yang Responsif dengan Tautan Jangkar Pengguliran Halus dengan Divi

Sidebar tidak sepopuler dulu. Dalam banyak kasus, mereka akhirnya menjadi lebih mengganggu daripada membantu. Tapi terkadang sidebar masuk akal, terutama ketika berhadapan dengan konten yang panjang. Itulah mengapa saya mulai membuat bilah sisi yang sangat masuk akal.

Hari ini saya menunjukkan kepada Anda bagaimana Anda dapat menggunakan Divi Builder untuk membuat sidebar tetap (atau lengket) yang responsif dengan tautan jangkar gulir yang halus (atau tautan lompat). Karena bilah sisi tetap terlihat dan tautan jangkar menggulir dengan mulus ke berbagai bagian halaman, bilah sisi tetap menyatu dengan konten, menjadikannya fitur UX yang bermanfaat. Seperti kerangka dokumen, kombinasi ini membuat konten halaman web Anda lebih mudah diakses dan dibaca. Ini adalah solusi yang menyegarkan untuk halaman-halaman bergulir yang panjang itu.

Coba lihat!

Sneak Peek

Berikut adalah cuplikan dari apa yang akan kita bangun bersama.

Konsep

Bagi Anda yang tinggal di Google Documents seperti halnya saya, Anda mengetahui alat kerangka dokumen yang berguna yang memungkinkan Anda untuk dengan mudah menggunakan bilah sisi tetap dengan kerangka yang dapat diklik yang melompat ke berbagai judul pada dokumen Anda. Saya menyukainya karena ini membantu saya menemukan informasi lebih cepat. Saya pikir akan keren untuk membawa fitur yang sama ke situs web Anda.

Apa yang Anda Butuhkan untuk Memulai

Untuk tutorial ini, yang Anda butuhkan hanyalah Divi! Kami juga akan menggunakan Halaman Resep dari Paket Tata Letak Resep Makanan yang dapat diakses secara bebas dari Divi Builder.

Menambahkan Tata Letak ke Halaman Anda

Berlangganan Saluran Youtube Kami

Untuk memulai, lanjutkan dan buat halaman baru dan gunakan Divi Builder. Pilih opsi “Choose a Premade Layout”. Dari popup Muat Dari Perpustakaan, pilih Paket Tata Letak Resep Makanan, lalu klik untuk menggunakan Halaman Resep.

Setelah tata letak dimuat, klik untuk membangun di ujung depan.

Membuat Bagian Baru

Dari Divi Builder ujung depan, buat bagian baru dan seret ke bagian paling atas tata letak.

Salin tombol di bagian tajuk tata letak dan tempelkan ke baris satu kolom dari bagian baru yang Anda buat.

Buka pengaturan tombol dan tambahkan CSS khusus berikut ke Elemen Utama di bawah tab lanjutan:

display: block !important;

Ini hanya memungkinkan tombol untuk menjangkau lebar penuh kolom.

Ubah teks tombol untuk membaca "Pengantar". Dan kemudian tambahkan yang berikut untuk url tautan tombol:

#pengantar

Ini adalah bagaimana Anda membuat tautan jangkar. Tagar (#) memberi tahu browser bahwa Anda akan menautkan ke ID CSS. Teks "pengantar" berikut akan sesuai dengan nama ID CSS yang akan kita tambahkan ke salah satu bagian kita di tata letak. Nama ID CSS bisa apa saja yang Anda inginkan. Pastikan itu cocok dengan ID CSS yang Anda berikan di bagian nanti.

Gandakan tombol dan kemudian ulangi proses memberi tombol Teks Tombol baru dan URL Tautan Tombol baru. Karena ini akan menjadi tautan jangkar yang melompat ke bagian halaman yang berbeda, pastikan ID CSS (teks setelah “#”) di unik dan sesuai dengan nama yang akan Anda berikan pada bagian Anda nanti.

Untuk tombol ini, ubah teks tombol menjadi “Bahan” dan URL tautan tombol menjadi “#bahan”.

Gandakan tombol lagi dan kemudian beri tombol baru teks tombol "Nutrisi" dan ubah URL tautan tombol menjadi "#nutrisi".

Gandakan tombol sekali lagi dan kemudian berikan tombol baru teks tombol "Instruksi" dan ubah URL tautan tombol menjadi "#instruksi".

Itu saja yang perlu kita lakukan untuk saat ini. Kami akan memutar kembali ke bagian ini mengubahnya menjadi sidebar tetap dalam sedikit.

Menambahkan ID CSS ke Bagian dan Baris

Sekarang setelah semua tombol kita dibuat dengan tautan jangkar di tempatnya, kita siap untuk menambahkan nama ID CSS yang sesuai ke bagian dan baris kita.

Tautan jangkar akan secara otomatis melompat ke elemen apa pun di halaman dengan ID CSS yang sesuai. ID CSS dapat diterapkan ke teks, modul, baris, atau bagian sebaris. Jika Anda ingin menambahkan ID CSS ke heading menggunakan HTML, tampilannya akan seperti ini:

<h2 id="introduction">Introduction</h2>

Namun, karena kita ingin melompat ke bagian halaman, kita dapat menambahkan ID CSS ke bagian halaman tertentu. Ini akan memberi pengguna ruang tampilan yang cukup nyaman sehingga pengunjung dapat dengan mudah mengenali di mana mereka berada di halaman. Melompat ke teks sebaris atau ke modul dapat menyebabkan kebingungan bagi pengunjung.

Seperti yang telah kita bahas sebelumnya, setiap url tombol yang kita buat dimaksudkan untuk sesuai dengan ID CSS dari bagian yang harus mereka lompati.

Untuk tombol “Pengenalan”, kita perlu menambahkan ID CSS ke bagian halaman yang berisi konten pengantar. Untuk melakukan ini, buka pengaturan bagian dari bagian ketiga halaman (bagian langsung di bawah header) dan tambahkan ID CSS berikut di bawah tab lanjutan:

ID CSS: pengantar

Ini akan sesuai dengan tombol Pengantar tautan jangkar yang kami buat sebelumnya.

Sekarang di bagian yang sama, temukan baris yang berisi judul "Bahan". Kemudian buka pengaturan baris dan tambahkan ID CSS berikut:

ID CSS: bahan

Ini akan sesuai dengan tombol tautan jangkar Bahan yang kami buat sebelumnya.

Gulir ke bawah ke bagian berikutnya dengan judul "Nutrisi" dan buka pengaturan bagian. Kemudian tambahkan ID CSS berikut:

ID CSS: nutrisi

Ini akan sesuai dengan tombol tautan jangkar Nutrisi yang kami buat sebelumnya.

Terakhir, gulir ke bawah ke bagian tata letak berikutnya dengan judul "Petunjuk Langkah demi Langkah". Kemudian buka pengaturan bagian dan tambahkan ID CSS berikut di bawah tab lanjutan:

ID CSS: instruksi

Ini akan sesuai dengan tombol tautan jangkar Petunjuk yang kami buat sebelumnya.

Simpan perubahan Anda.

Sekarang adalah saat yang tepat untuk melihat apakah tautan jangkar Anda berfungsi. Buka halaman di tab baru dan klik tombol di bagian atas untuk memastikan mereka melompat/menggulir ke lokasi yang sesuai di halaman.

Jika tidak berfungsi, pastikan untuk kembali dan memeriksa apakah ID CSS sudah benar dan cocok.

Membuat Tata Letak Bilah Sisi Tetap

Menambahkan Margin Kiri ke Bagian untuk Membuat Ruang untuk Bilah Sisi

Memiliki tautan jangkar di bagian atas halaman tidak masalah untuk hal-hal seperti daftar isi. Namun untuk kasus penggunaan ini, kami ingin agar tautan jangkar tersebut terlihat oleh pengguna setiap saat sehingga pengguna tidak perlu menggulir kembali ke bagian atas halaman setelah mengklik salah satu tautan. Bilah sisi yang diperbaiki akan menyelesaikan masalah ini karena akan tetap berada di sisi halaman saat pengguna mengklik tautan jangkar.

Tapi sebelum kita memposisikan sidebar, kita perlu membuat beberapa ruang untuk itu di sisi kiri halaman kita. Untuk melakukan ini, kami akan menambahkan margin kiri ke setiap bagian tata letak.

Jumlah margin kiri yang kita tambahkan ke setiap bagian akan sama dengan lebar sidebar jadi sekarang saatnya untuk memutuskan seberapa lebar sidebar yang Anda inginkan. Untuk contoh ini, lebar 20% akan dilakukan.

Buka pengaturan bagian kedua (yang langsung di bawah tombol tautan jangkar kami) dan tambahkan margin khusus berikut:

Margin Kustom: 20% tersisa

Sekarang sebelum Anda menyimpan pengaturan, klik kanan pada opsi Margin Kustom dan klik "Salin Margin Kustom" dan simpan pengaturan.

Pada setiap bagian yang tersisa di seluruh tata letak halaman Anda, tempel margin khusus ke bagian tersebut dengan mengklik kanan pada bagian tersebut dan mengklik "Tempel Margin Kustom".

Ini akan memberikan margin kiri 20% untuk semua bagian Anda kecuali bagian paling atas yang berisi tombol tautan jangkar.

Membuat Bilah Sisi Tetap

Untuk membuat bilah sisi, kita perlu memberinya posisi tetap di sebelah kiri halaman. Jadi pada dasarnya, kita akan mengubah bagian atas menjadi sidebar tetap. Untuk melakukan ini, buka pengaturan bagian atas dan perbarui yang berikut:

Di bawah tab Desain, perbarui tinggi dan lebar…

Lebar: 20%
Tinggi: 100%

Di bawah tab Advanced, perbarui posisi…

Posisi: tetap
Offset Vertikal: 80px

Ini memberikan bagian posisi tetap dengan lebar 20% halaman. Itu juga memposisikan bagian di sebelah kiri halaman dan 80px dari atas halaman untuk mengakomodasi ketinggian navigasi header. Ketinggian 100% memastikan bagian mencakup tinggi penuh halaman.

Sekarang lihat halaman di tab browser lain untuk melihat fungsinya. Saat Anda menggulir halaman ke bawah, bilah sisi tetap dan Anda dapat mengklik tombol tautan jangkar untuk menavigasi ke bagian yang berbeda dengan mudah.

Memperbaiki Tumpang Tindih Footer

Anda mungkin telah memperhatikan bahwa bagian tersebut tumpang tindih dengan bilah footer bawah di bagian bawah halaman.

Ada beberapa cara untuk mengatasi masalah ini. Misalnya, saya dapat mengambil "height: 100%" dari bagian atau Anda dapat menambahkan beberapa CSS ke pengaturan halaman untuk menyesuaikan lebar bilah footer. Tetapi jika Anda ingin mempertahankan tinggi bagian pada 100%, perbaikan mudah adalah dengan menghilangkan warna latar belakang bagian. Buka pengaturan bagian dari bagian yang kami gunakan untuk bilah sisi dan tambahkan warna latar belakang berikut:

Warna Latar Belakang: rgba(255,255,255,0)

Jika Anda ingin mengubah warna sidebar, Anda dapat membuka pengaturan halaman dan mengubah Warna Latar Area Konten.

Karena warna latar belakang bagian transparan, warna latar belakang area konten untuk halaman Anda bersinar. Dan karena semua bagian kami yang lain memiliki warna latar belakang, itu hanya akan ditampilkan melalui bagian bilah sisi tanpa tumpang tindih dengan bilah footer bawah.

Membuat Penyesuaian untuk Seluler

Desain ini benar-benar tidak masuk akal untuk ponsel cerdas karena tidak ada ruang untuk bilah sisi dan memiliki tautan di bagian atas halaman akan mengharuskan pengguna untuk menggulir kembali ke atas setiap kali mereka ingin mengeklik tautan jangkar. Tetapi desainnya akan tetap berfungsi untuk tablet, tetapi Anda mungkin perlu membuat lebih banyak ruang untuk tautan jangkar tersebut. Untuk melakukan ini, buka pengaturan baris untuk baris bilah sisi bagian dan perbarui yang berikut:

Lebar Kustom: 100
Padding Kustom (desktop): 10% kiri, 10% kanan
Padding Kustom (tablet): 0% kiri, 0% kanan

Sekarang yang harus kita lakukan adalah menyembunyikan (atau menonaktifkan) bagian pada smartphone. Untuk melakukan itu, buka pengaturan bagian dan buka tab lanjutan dan klik kotak centang untuk menonaktifkan pada ponsel cerdas.

Itu dia. Anda sekarang memiliki menu bilah sisi tetap yang responsif dengan tautan jangkar gulir yang mulus!

Hasil akhir

Sekarang mari kita periksa hasil akhirnya.

Dan inilah tampilan layout di tablet.

Pelajari Lebih Lanjut Tentang Elemen Tetap dan Tautan Jangkar

Jika Anda merasa tutorial ini bermanfaat, lihat beberapa tutorial terkait kami di bawah ini:

• 5 Hal Keren yang Dapat Anda Lakukan Di Divi dengan Anchor Links
• Cara Membuat Elemen Halaman Divi Lengket
• Cara Menambahkan Widget Tetap ke Bilah Sisi Anda di WordPress
• Cara Membuat Navigasi Divi Anda Mulai dari Bawah, Lalu Tetap Tetap di Atas Saat Menggulir
• Cara Membuat Divi Footer Anda Tetap
• Cara Membuat Menu Pop-out Mengambang di Divi

Pikiran Akhir

Keindahan pengaturan ini adalah Anda dapat dengan mudah menambahkan bilah sisi tetap ke halaman mana pun dengan tautan jangkar berbeda (atau apa pun yang Anda inginkan). Karena bilah sisi Anda pada dasarnya adalah bagian Divi, Anda dapat menyesuaikannya menggunakan pengaturan bawaan, menambahkan lebih banyak baris, dan menggunakan kombinasi modul apa pun yang Anda inginkan.

Pengaturan ini akan bagus untuk kursus keanggotaan, tutorial, FAQ, portofolio, atau posting blog yang panjang. Anda bahkan dapat menggunakannya untuk situs web satu halaman juga. Apakah Anda memiliki kegunaan lain untuk dibagikan? Saya tertarik untuk mendengar apa yang ada di komentar.

Bersulang!