Cara Menghapus Bilah Sisi Dari Divi

Menghapus bilah sisi dari templat halaman default Divi dapat dengan mudah dilakukan saat Anda menggunakan Divi Builder. Namun, karena templat halaman default Divi (dengan bilah sisi) masih ditampilkan di halaman seperti 404 dan arsip, Anda mungkin ingin menghapus bilah sisi dari templat Anda sama sekali.

Cara paling jelas untuk mengganti tata letak bilah sisi kanan default Divi adalah dengan menggunakan Divi Builder untuk mendesain halaman atau posting. Namun, jika Anda tidak akan menggunakan Divi Builder untuk halaman atau postingan, ada dua cara utama untuk menghapus sidebar. Yang pertama adalah mengubah tata letak halaman per halaman saat mengedit halaman atau posting individual. Yang kedua adalah mengganti halaman default atau templat posting dengan membuat templat khusus di Divi Theme Builder.

Hari ini saya akan menunjukkan cara yang berbeda untuk menghapus sidebars pada template default Divi dan menimpa template dengan Divi Builder. Mudah-mudahan, ini akan membekali Anda dengan alat yang Anda butuhkan untuk membuat situs web lebar penuh yang dirancang secara konsisten.

Mari kita mulai!

Menghapus Sidebar di Halaman Menggunakan Pengaturan Halaman Divi

Mengubah Tata Letak Bilah Sisi Kanan Default untuk Posting atau Halaman Individual

Untuk halaman atau posting yang tidak menggunakan Divi Builder, tata letak halaman default menyertakan sidebar kanan yang terlihat seperti berikut:

Jika Anda tidak ingin menggunakan Divi Builder untuk halaman atau posting itu dan hanya ingin menghapus bilah sisi per halaman, cukup temukan kotak Pengaturan Halaman Divi di bilah sisi saat mengedit halaman Anda dan pilih lebar penuh (atau tidak ada sidebar ) untuk tata letak halaman Anda.

Ini akan menghilangkan bilah sisi untuk posting atau halaman tertentu.

Menghapus Sidebar di Halaman Toko WooCommerce, Halaman Kategori, dan Halaman Produk Menggunakan Opsi Tema Divi

Jika Anda telah menginstal WooCommerce, Anda dapat menemukan beberapa opsi dalam Opsi Tema Divi untuk mengubah tata letak halaman halaman Toko WC, Kategori, dan Produk.

Untuk menghapus bilah sisi di halaman Toko dan Kategori WC, navigasikan ke Divi > Opsi Tema. Di bawah tab General, temukan opsi berlabel “Shop Page & Category Page Layout for WooCommerce” dan ubah layout menjadi “No Sidebar” atau “Fullwidth”.

Untuk menghapus bilah sisi halaman produk, navigasikan ke Divi > Opsi Tema. Pilih tab Pembuat. Di bawah Integrasi Jenis Posting, pilih Tata Letak Produk “Tanpa Bilah Sisi” dari dropdown.

Menghapus Bilah Sisi dengan Membuat Templat Kustom menggunakan Pembuat Tema

Menghapus bilah sisi untuk setiap halaman/posting dengan pengaturan halaman Divi adalah solusi yang baik saat membuat posting dan halaman baru satu per satu. Namun, ini bisa sangat merepotkan, terutama jika Anda memutuskan untuk menghapus bilah sisi dari semua halaman. Plus, templat default (dengan bilah sisi) masih ditampilkan di halaman seperti 404 dan arsip. Jadi, Anda mungkin ingin menghapus bilah sisi dari halaman atau templat posting sama sekali. Untuk melakukan ini, Anda dapat membuat templat khusus menggunakan Divi Theme Builder. Ini akan memberi Anda kendali penuh atas halaman apa yang ingin Anda sembunyikan secara global.

Divi's Theme Builder adalah alat yang ampuh untuk merancang template global yang akan diterapkan ke halaman atau posting apa pun yang Anda inginkan. Setiap kali Anda membuat tata letak badan baru untuk sebuah template, template itu akan menggantikan tata letak halaman default Divi (yang mencakup sidebar). Oleh karena itu, yang perlu Anda lakukan untuk menghapus bilah sisi di tingkat template adalah membuat template baru di Divi Theme Builder dan menetapkannya ke halaman atau postingan pilihan Anda.

Membuat Template Posting Blog Fullwidth Menggunakan Divi Builder

Posting blog adalah contoh yang bagus di mana templat seluruh situs tanpa bilah sisi mungkin diperlukan. Opsi konten dinamis bawaan Divi memungkinkan Anda merancang templat posting blog yang akan diterapkan ke semua situs posting blog menggunakan Divi Builder dan konten dinamis. Setelah selesai, yang perlu Anda lakukan hanyalah memperbarui konten isi sebenarnya untuk semua posting mendatang. Konten postingan baru akan mewarisi desain template kustom!

Berikut adalah contoh cepat bagaimana melakukan ini:

Pertama, buat template baru dan tetapkan template ke All Posts.

Kemudian tambahkan badan khusus ke template.

Menggunakan Template Layout Editor, rancang seluruh tata letak menggunakan Divi Builder yang dikombinasikan dengan modul dan opsi konten dinamis bawaan Divi.

Misalnya, Anda dapat menggunakan Modul Judul Postingan untuk menampilkan judul postingan secara dinamis. Atau Anda dapat menarik judul posting sebagai konten dinamis ke badan modul teks dan membungkusnya dengan tag H1.

Anda dapat menggunakan modul gambar untuk menarik gambar unggulan sebagai konten dinamis.

Atau gunakan serangkaian modul uraian yang menarik metadata tertentu sebagai konten dinamis seperti penulis postingan, bio penulis postingan, kategori postingan, tanggal publikasi postingan, dan jumlah komentar.

Yang terpenting, Anda harus menyertakan modul Posting Konten saat membuat tata letak badan khusus untuk template Anda. Modul Konten Postingan mencakup area halaman atau konten postingan yang akan ditampilkan di dalam Area Tubuh template.

Setelah template dibuat, Anda dapat dengan mudah membuat posting blog baru menggunakan editor posting WordPress default dan membuat posting blog tersebut mewarisi desain template posting blog yang Anda buat menggunakan Divi Theme Builder.

Untuk lebih lanjut, lihat posting kami tentang cara mendesain template posting blog dengan Divi's Theme Builder.

Membuat Template Halaman Produk WooCommerce Fullwidth Menggunakan Divi Builder

Jika Anda ingin menghapus sidebar default untuk halaman produk, Anda juga dapat membuat template tata letak fullwidth yang bagus untuk semua posting blog Anda. Mirip dengan apa yang kami lakukan dengan templat posting blog, Anda juga dapat menggunakan Modul WooCommerce (atau Woo) bawaan Divi untuk membuat Templat Halaman Produk di seluruh situs kustom tanpa bilah sisi.

Untuk melakukan ini, cukup buat template baru dan tetapkan template ke "Semua Produk".

Kemudian tambahkan badan khusus ke template dan klik untuk membuat tata letak badan menggunakan editor template.

Kemudian gunakan Divi Builder untuk menyertakan Modul Woo dinamis untuk mendesain template halaman Produk.

Sekarang, Anda membuat produk baru di backend menggunakan editor halaman produk standar, produk akan secara otomatis mewarisi desain templat tubuh yang ditetapkan.

Untuk lebih lanjut, lihat posting kami tentang cara membuat templat halaman produk woo di seluruh situs.

Membuat Template Halaman Arsip Fullwidth Menggunakan Divi Builder

Pembuat Tema juga memudahkan untuk mendesain templat Halaman Arsip tanpa bilah sisi. Kunci untuk membuat template untuk halaman kategori adalah membuat template baru dan menetapkannya ke salah satu dari banyak template arsip yang tersedia di Divi Builder. Misalnya, Anda dapat menetapkannya ke semua halaman arsip di seluruh situs atau Anda dapat menetapkannya ke templat halaman kategori sehingga hanya menampilkan pada halaman yang menampilkan arsip posting dalam suatu kategori.

Elemen penting pertama dari konten dinamis untuk template arsip harus menyertakan judul posting/arsip.

Elemen penting kedua dari konten dinamis adalah arsip posting aktual yang akan ditampilkan. Untuk melakukan ini, tambahkan modul blog dan pilih opsi untuk menampilkan posting untuk halaman saat ini.

Untuk panduan lengkap, lihat posting kami tentang cara membuat templat halaman kategori untuk blog Anda menggunakan Divi Theme Builder.

Membuat Template Halaman 404 Lebar Penuh Menggunakan Divi Builder

Pembuat Tema juga memudahkan untuk mendesain templat Halaman 404 untuk situs web Divi Anda tanpa bilah sisi default. Halaman 404 tidak selalu bergantung pada konten dinamis apa pun, jadi silakan mendesain apa pun yang Anda inginkan menggunakan Divi Builder.

Untuk panduan lengkap, lihat posting kami tentang cara membuat template halaman 404 menggunakan Divi Theme Builder.

Membuat Template Halaman Pencarian Fullwidth Menggunakan Divi Builder

Pembuat Tema juga memudahkan merancang templat Halaman Hasil Pencarian untuk situs web Divi Anda tanpa bilah sisi default. Seperti templat halaman kategori, kunci untuk membuat templat untuk hasil pencarian adalah membuat area badan khusus dan menyertakan hal berikut:

1: Judul postingan/arsip sebagai konten dinamis

2: Modul Blog untuk menampilkan posting untuk halaman saat ini.

3: Modul Pencarian untuk memungkinkan pengguna melanjutkan pencarian sesuai kebutuhan.

Untuk panduan lengkap, lihat posting kami tentang cara membuat templat halaman Hasil Pencarian untuk situs web Anda menggunakan Divi Theme Builder.

Jangan Membuat Template Tubuh Lebar Penuh untuk Semua Halaman Kecuali Anda Memiliki Alasan Tertentu

Membuat template khusus dengan tata letak tubuh lebar penuh untuk semua halaman Anda mungkin tampak seperti ide yang bagus pada awalnya. Namun, itu mungkin tidak berjalan seperti yang diharapkan. Misalnya, Anda dapat membatasi area yang dapat Anda gunakan untuk menggunakan Divi Builder untuk halaman atau membuat area isi yang terlalu lebar untuk halaman yang tidak menggunakan Divi Builder. Itulah mengapa lebih baik membuat templat halaman hanya untuk halaman-halaman yang tidak akan menggunakan Divi Builder.

Untuk lebih lanjut, lihat dokumentasi tentang membangun kerangka tubuh global.

Menghapus Sidebar Default dengan CSS Kustom

Jika Anda menggunakan tata letak halaman tema default Divi tanpa menggunakan Divi Builder, atau jika Anda ingin menyingkirkan bilah sisi di seluruh situs tanpa harus menimpanya menggunakan pengaturan halaman individual atau templat pembuat tema, Anda dapat menggunakan beberapa CSS mode lama yang bagus .

Arahkan ke Divi > Opsi Tema. Di bawah Tab Umum, rekatkan kode berikut di kotak CSS Kustom di bagian bawah halaman:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Pikiran Akhir

Saat membangun situs web, penting agar semua halaman Anda memiliki tata letak dan desain yang konsisten. Jadi, Jika Anda sedang membangun situs dengan tata letak lebar penuh menggunakan Divi Builder, Anda mungkin ingin mempertahankan tata letak ini untuk semua halaman Anda secara default. Ini dapat meningkatkan pengalaman pengguna. Jika ada, Anda sekarang memiliki kekuatan untuk menyesuaikan tampilan bilah sisi sesuai keinginan Anda.

Saya harap Anda akan menemukan ini berguna untuk situs Anda dan proyek masa depan.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!