Cara Mengoptimalkan Bilah Sisi Anda di Seluler Menggunakan Pembuat Tema Divi

Saya beberapa kasus, menjaga sidebar di ponsel bisa sedikit berlebihan. Pengguna dengan senang hati menggulir info yang relevan di tablet dan ponsel mereka (sampai titik tertentu). Tetapi ketika Anda memiliki sejumlah besar konten sidebar setelah konten utama halaman, pengguna mungkin tidak akan pernah mencapai footer, yang biasanya terdiri dari beberapa panggilan penting untuk bertindak. Itulah mengapa penting untuk mengoptimalkan sidebar di ponsel.

Dalam tutorial ini, kita akan membahas cara Anda dapat menggunakan Divi Theme Builder untuk mengoptimalkan sidebar Anda di tampilan seluler. Berikut adalah beberapa hal yang akan kami bahas dalam artikel ini:

• Cara Membuat Template dengan Bilah Sisi
• Membuat Konten Bilah Sisi Menggunakan Modul Divi dan Widget WordPress
• Menggunakan Beberapa Area Widget untuk menyembunyikan/menampilkan widget tertentu di ponsel
• Mengontrol Spasi Antara Konten Sidebar di ponsel
• Menyembunyikan Konten Bilah Sisi Sepenuhnya di Seluler
• Menyembunyikan Beberapa Konten Bilah Sisi di Seluler
• Menyembunyikan Elemen dalam Modul untuk Meminimalkan Konten di Seluler
• Membuat Konten Bilah Sisi Responsif dengan menyesuaikan ukuran dan spasi teks
• Cara Mengubah Urutan Penumpukan Sidebar di Ponsel

Mari kita mulai.

Sneak Peek

Berikut ini sekilas tata letak Sidebar di Desktop dan bagaimana tata letak ini telah dioptimalkan untuk tampilan seluler.

Unduh Template GRATIS dengan Bilah Sisi yang Dioptimalkan di Seluler

Untuk mendapatkan template dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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 di daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan berlangganan 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!

Berlangganan Saluran Youtube Kami

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Mari kita ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda harus menginstal dan mengaktifkan Tema Divi. Pastikan Anda memiliki Divi versi terbaru.

Anda juga memerlukan beberapa posting/halaman yang dibuat untuk tujuan pengujian agar konten halaman benar-benar menunjukkan hasil.

Setelah itu, Anda siap untuk pergi.

Cara Mengoptimalkan Bilah Sisi Template Divi Anda di Seluler

Sebelum kita mulai mengoptimalkan sidebar kita di ponsel, kita perlu mengaktifkan dan menjalankan model yang berfungsi terlebih dahulu. Kita akan membangun sidebar kita pada template halaman menggunakan Divi Theme Builder. Ini akan membantu kami mendapatkan pemahaman yang lebih baik tentang apa yang terlibat dalam membangun bilah sisi di Divi sehingga kami dapat lebih memahami cara mengoptimalkannya di seluler.

Membuat Template dengan Sidebar

Mengimpor Paket Pembuat Tema Divi #3

Untuk memulai, kita akan menggunakan Divi Theme Builder Pack #3 untuk memulai desain situs kita. Kemudian, kita akan menggunakan salah satu template untuk menambahkan sidebar yang akan kita optimalkan untuk seluler.

Setelah Anda mengunduh paket, unzip folder tersebut.

Dari Dasbor WordPress, navigasikan ke Divi > Pembuat Tema. Kemudian klik ikon portabilitas di menu kanan atas halaman. Dari modal portabilitas, pilih tab impor dan pilih file divi-theme-builder-pack-3-all.json dari folder yang Anda unduh sebelumnya. Kemudian klik tombol impor.

Penting: Silakan gunakan situs uji dengan instalasi baru Divi sehingga Anda tidak menimpa konten langsung di situs web Anda atau merusak sesuatu.

Anda akan melihat semua template telah diimpor ke pembuat tema.

Membangun Tata Letak Bilah Sisi di dalam Templat Halaman Kategori

Temukan Template Semua Halaman Kategori dan klik untuk mengedit tata letak badan khusus.

Tata letak halaman saat ini menggunakan satu baris kolom untuk area konten utama halaman. Kita perlu mengubah ini menjadi struktur tata letak bilah sisi. Untuk melakukan ini, klik ikon "Pilih Tata Letak" pada menu baris dari baris kedua dan pilih struktur tata letak kolom dua pertiga sepertiga.

Sekarang Anda akan memiliki area di sisi kanan untuk sidebar Anda.

PEMBERITAHUAN: Saya tidak menggunakan bagian khusus untuk tata letak bilah sisi ini. Bagian khusus tidak diperlukan saat membuat tata letak bilah sisi untuk halaman Anda, namun, jika Anda ingin mempertahankan fungsionalitas baris terpisah untuk area konten utama, Anda akan ingin menggunakan bagian khusus.

Kami tidak akan terlalu berkonsentrasi untuk membuat ulang desain modul yang tepat dalam tutorial ini. Sebagai gantinya, kami akan berkonsentrasi pada elemen-elemen yang akan membantu mengoptimalkan bilah sisi di ponsel.

Yang mengatakan, kita perlu menambahkan warna latar belakang dan padding ke kolom sidebar.

Pengaturan Kolom Sidebar

Buka pengaturan untuk kolom yang ditunjuk untuk bilah sisi dan perbarui yang berikut:

• Warna latar: #f2f5f9
• Padding: 25px atas, 25px bawah, 25px kiri, 25px kanan

Membuat Konten Bilah Sisi dengan Modul Divi dan Widget WordPress

Konten bilah sisi akan bervariasi sesuai dengan kebutuhan situs web. Namun, jika kita berbicara tentang situs blog, biasanya Anda akan menemukan beberapa kombinasi elemen konten bilah sisi berikut:

• Info Penulis (nama, foto, bio)
• Tombol ikuti media sosial
• Keikutsertaan email
• Tautan ke Produk dan/atau layanan
• Iklan
• Kategori
• Postingan Terbaru/Populer

Membuat elemen-elemen ini di Divi dapat dilakukan dengan menggunakan kombinasi Modul Divi. Untuk contoh ini, kami akan menambahkan Modul Divi berikut untuk membangun Konten Bilah Sisi kami.

1. Modul Pencarian – Ini akan berfungsi sebagai formulir pencarian.
2. Modul Optin Email – Ini akan berfungsi sebagai formulir optin email.
3. Modul Teks – Ini akan menjadi judul tombol Ikuti Media Sosial
4. Modul Ikuti Media Sosial – Ini akan menampilkan tombol ikuti media sosial.
5. Modul Teks (dengan gambar bg) – Ini akan berfungsi sebagai contoh Iklan untuk bilah sisi.
6. Modul Blurb (dengan konten penulis) – Ini akan berfungsi sebagai area Info Penulis di bilah sisi.
7. Modul Teks – Ini akan berfungsi sebagai judul untuk modul blog di bawahnya.
8. Modul Blog – Ini akan berfungsi sebagai konten posting terbaru/fitur di bilah sisi.

Menarik Widget WordPress Menggunakan Modul Sidebar

Jika Anda belum terbiasa, Divi memiliki modul sidebar yang memungkinkan Anda untuk menarik konten area widget (atau widget) ke area Divi Sidebar Anda. Bahkan, template ini sudah menggunakan widget sidebar di baris tepat di bawah yang sedang kita kerjakan.

Seret modul bilah sisi dari baris dan letakkan tepat di bawah modul optin email.

Kemudian buka pengaturan modul bilah sisi. Anda akan melihat bahwa modul menarik di area widget bilah sisi yang akan terlihat seperti berikut jika Anda memiliki pengaturan default di WordPress.

Menggunakan Beberapa Area Widget

Saat ini area widget "Sidebar" menampilkan beberapa widget karena ada beberapa widget di dalam area widget Sidebar. Namun, Anda sebenarnya dapat memperoleh kontrol lebih besar atas desain bilah sisi Divi Anda dengan menggunakan beberapa area widget yang berisi satu widget. Menggunakan beberapa area widget akan memberi Anda lebih banyak kontrol atas desain widget Anda serta visibilitas widget di ponsel.

Untuk membuat beberapa widget, buka tab baru dan buka Dasbor WordPress. Arahkan ke Penampilan> Widget.

Buat Area Widget baru dengan memasukkan nama dan mengklik tombol Buat. Karena area widget ini akan menjadi tempat kita menambahkan widget Kategori, beri nama area "Kategori". Refresh halaman untuk melihat area widget. Kemudian seret widget Kategori ke Area Widget Kategori.

Ulangi proses untuk membuat area widget baru bernama "Arsip". Kemudian seret Widget Arsip ke dalam area widget Arsip.

Kembali ke Templat Halaman Kategori dengan tata letak bilah sisi Anda dan perbarui konten Modul Bilah Sisi untuk menampilkan area widget Kategori.

Duplikat modul sidebar (untuk menjaga desain)

Perbarui modul bilah sisi duplikat untuk menarik Area Widget Arsip.

Mengambil Kontrol Jarak Antara Modul Sidebar

Saat ini Baris yang berisi bilah sisi memiliki nilai lebar talang 2. Ini berarti akan ada margin/spasi bawah default antara setiap modul di dalam bilah sisi. Untuk mendapatkan kontrol lebih besar atas jarak ini, kita dapat menghapus margin bawah semua modul di kolom bilah sisi. Untuk melakukannya, buka pengaturan modul pencarian dan perbarui yang berikut ini:

• Margin Bawah: 0px (desktop), 15px (tablet)

Kemudian klik ikon More Settings (atau menu klik kanan) pada opsi margin. Kemudian pilih “Perpanjang Margin”.

Di Modul Perpanjang Gaya, perbarui opsi untuk memperluas margin ke "Semua Modul" di "Kolom Ini".

Kemudian kita dapat menambahkan jarak antar modul menggunakan modul pembagi.

Mengoptimalkan Bilah Sisi di Seluler

Menyembunyikan Bilah Sisi di Seluler

Terkadang, Anda mungkin ingin menyembunyikan bilah sisi sepenuhnya di ponsel. Untuk melakukan ini, Anda harus menonaktifkan visibilitas kolom yang berisi bilah sisi di tablet dan ponsel.

Buka pengaturan baris dan buka pengaturan kolom yang ditunjuk untuk bilah sisi. Kemudian perbarui visibilitas sebagai berikut:

• Nonaktifkan Aktif: Tablet, Ponsel

Ini akan menyembunyikan seluruh bilah sisi di tablet dan tampilan seluler.

Menyembunyikan Beberapa Konten Bilah Sisi di Seluler

Di desktop, Anda mungkin memiliki ruang untuk menyimpan sebagian besar (atau semua) konten bilah sisi tanpa terlalu mengganggu konten. Namun di seluler, pengguna perlu menggulir banyak konten bilah sisi yang mungkin kurang menarik untuk dilihat. Jadi, saat membangun sidebar Anda di Divi Theme Builder, manfaatkan opsi visibilitas untuk menonaktifkan beberapa elemen sidebar di tampilan seluler. Dan, jika Anda menggunakan widget WordPress untuk konten bilah sisi, buat beberapa area widget untuk membantu mendesain dan menyembunyikan widget tertentu di ponsel juga.

Untuk menyembunyikan modul di ponsel, buka modul tampilan gambar rangka, lalu gunakan fitur multiselect Divi untuk memilih semua modul yang ingin Anda sembunyikan/nonaktifkan di tablet dan ponsel. Kemudian buka pengaturan untuk salah satu modul yang dipilih dan perbarui yang berikut:

• Nonaktifkan Aktif: Ponsel, Tablet

Dalam ilustrasi ini, kami menyembunyikan semua modul (termasuk pembagi) kecuali dua modul bilah sisi (berisi widget kategori dan arsip) dan modul teks (berisi Iklan) pada tampilan tablet dan ponsel. Dengan kata lain, hanya kategori, arsip, dan iklan yang akan ditampilkan di seluler.

Mempratinjau Hasil di Halaman Blog

Sebelum kita melihat hasilnya di halaman langsung, mari kita tetapkan ke halaman blog situs terlebih dahulu. Untuk melakukannya, klik ikon roda gigi di atas template, pilih Blog dari daftar, dan simpan.

Pastikan Anda memiliki halaman posting yang dipilih di bawah Appearance > Reading.

Hasil

Inilah perbedaan antara sidebar desktop dan sidebar seluler. Perhatikan bagaimana bilah sisi seluler memiliki konten pelajaran.

Menghindari Duplikat Sidebar dan Konten Footer di Seluler

Di Desktop, Anda bisa lolos dengan menambahkan konten duplikat di sidebar dan footer Anda. Sebenarnya, ini adalah cara yang baik untuk meningkatkan konversi. Misalnya, di desktop, masuk akal untuk menyertakan modul email optin di bagian atas sidebar Anda dan di dalam footer sehingga pengguna dapat melihat email optin saat membaca konten posting serta di akhir posting. Namun, di seluler, tidak ada tata letak bilah sisi. Semuanya ditampilkan dalam satu kolom (mungkin dua). Bilah sisi kanan menumpuk di bawah konten postingan/halaman dan bilah sisi kiri menumpuk di atas konten postingan/halaman. Jadi, jika modul optin email sidebar menumpuk di bawah konten posting/halaman, pengguna dapat menggulir lebih dari satu modul optin email (satu di sidebar dan satu di footer). Selanjutnya, jika ada email optin di bagian bawah sidebar kanan dan satu di bagian atas footer, pengguna akan menggulir dua email optin berturut-turut di ponsel.

Menyembunyikan Elemen dalam Modul untuk Meminimalkan Konten di Seluler

Anda dapat memutuskan bahwa menyembunyikan seluruh modul di ponsel tidak diperlukan. Sebagai gantinya, Anda dapat meminimalkan konten modul dengan menyembunyikan elemen tertentu hanya di tampilan seluler.

Misalnya, Anda mungkin ingin menampilkan gambar unggulan dan kutipan postingan unggulan di bilah sisi desktop. Namun, di perangkat seluler, Anda dapat menyembunyikan gambar unggulan dan kutipan untuk membuat versi konten yang diperkecil.

Membuat Konten Bilah Sisi Responsif

Anda dapat memutuskan untuk menyimpan semua konten bilah sisi di tampilan seluler. Mengapa tidak? Jika Anda memiliki info berharga yang Anda tahu akan dihargai oleh pengguna, tentu saja, simpanlah. Namun, Anda perlu mengambil langkah-langkah untuk memastikan konten bilah sisi responsif. Artinya, Anda ingin menyesuaikan ukuran dan jarak elemen agar sesuai dengan layar yang lebih kecil. Ini akan mengurangi jarak gulir halaman dan membuat konten lebih mudah dibaca.

Sesuaikan Ukuran Teks di Ponsel

Salah satu cara mudah untuk meminimalkan spasi vertikal dan meningkatkan keterbacaan di perangkat seluler adalah dengan menyesuaikan ukuran teks konten modul di bilah sisi. Misalnya, Anda dapat menyesuaikan teks judul dari 24px di desktop menjadi 14px di seluler.

Sesuaikan Spasi/Pembagi di Seluler

Dalam contoh ini, kami menambahkan pembagi antar modul untuk menciptakan ruang. Namun, kita dapat menggunakan pengaturan Divi's Divider untuk mengatur jarak pemisah tersebut di ponsel. Ini akan mengurangi ruang yang terbuang saat menggulir.

Misalnya, Anda dapat mengubah margin atas dan bawah Pembagi dari 30px menjadi 15px di tablet dan ponsel.

Mengubah Urutan Penumpukan Sidebar di Seluler

Susunan urutan adalah masalah umum dengan bilah sisi. Hal ini terutama berlaku untuk sidebar kiri. Seperti yang saya sebutkan sebelumnya, bilah sisi kanan menumpuk di bawah (atau setelah) konten posting/halaman dan bilah sisi kiri menumpuk di atas (atau sebelum) konten posting/halaman. Ini berarti bahwa ketika Anda melihat halaman dengan sidebar kiri di ponsel, hal pertama yang akan dilihat pengguna adalah konten sidebar, bukan konten utama dari postingan/halaman. Ini tidak baik untuk UX. Untuk memperbaikinya, Anda dapat menyembunyikan bilah sisi sama sekali atau Anda dapat mengubah urutan penumpukan sehingga bilah sisi kiri berada di bawah konten posting/halaman di ponsel.

Untuk mengubah urutan penumpukan bilah sisi kiri menjadi tumpukan di bawah (atau setelah) konten halaman di seluler, buka pengaturan baris dari baris yang berisi tata letak bilah sisi. Kemudian tambahkan CSS khusus berikut ke Elemen Utama:

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

Kemudian buka pengaturan kolom kolom yang ditunjuk sebagai sidebar dan tambahkan CSS khusus berikut ke tampilan Tablet Elemen Utama:

order: 2;

Jika Anda belum menebak, cuplikan kecil ini mengubah urutan dari nilai default (“1”) menjadi nilai “2” yang menyebabkan seluruh kolom/sidebar menumpuk di bawah/setelah kolom yang berisi konten utama.

Pikiran Akhir

Bilah sisi terus menjadi ruang yang akrab bagi pengguna yang menyediakan konten sekunder yang bermanfaat saat mereka terlibat dengan konten utama halaman. Namun, konten sidebar yang sama di ponsel dapat menjadi gangguan. Semoga postingan ini menginspirasi Anda untuk memberikan perhatian yang layak pada bilah sisi Anda di tablet dan ponsel. Ini mungkin berarti Anda menyembunyikan bilah sisi sepenuhnya, hanya menampilkan beberapa konten bilah sisi, atau mengoptimalkan konten yang ada khusus untuk tampilan seluler.

Bilah sisi yang dibuat untuk templat dalam tutorial ini dirancang menggunakan elemen desain yang ada yang ditemukan di paket tata letak pembuat tema #3. Jika Anda menyukai desain template ini dengan bilah sisi, silakan unduh di atas untuk melihat lebih dekat.

Untuk info lebih lanjut, lihat panduan ini untuk menggunakan bilah sisi dengan Divi Theme Builder.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!