Loncat ke Konten Utama

Bagaimana mengubah sisi sidebar pada WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Baru-baru ini salah satu pembaca kami bertanya kepada kami bagaimana cara mengubah sisi sidebar tema WordPress?

Kami biasanya mendapatkan pertanyaan ini dari pengguna yang ingin mengubah lokasi bilah sisi mereka dari kiri ke kanan atau dari kanan ke kiri.

Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana mengubah lokasi sidebar di WordPress.

Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Lalu kembali ke mengapa kita ada di sini.

Cara merubah letak sidebar pada wordpress e1568058176266

Mengapa mengubah lokasi sidebar di WordPress?

Pakar kegunaan percaya orang memindai halaman dari kiri ke kanan. Mereka merekomendasikan meletakkan konten penting di sebelah kiri sehingga pengguna melihat konten ini terlebih dahulu. Namun, ini dapat dibalik jika situs web Anda menggunakan bahasa RTL (tepat di sebelah kiri).

Cari tahu apakah seharusnya blog WordPress Anda memiliki sidebar

Banyak situs WordPress menggunakan tata letak blog biasa dengan dua kolom. Satu untuk konten, dan kolom lainnya untuk sidebar.

demo sidebar WordPress konten khas

Jika Anda baru mengenal situs web maka Anda harus memilih tema WordPress yang memiliki bilah sisi di situs yang Anda sukai.

Banyak tema WordPress menawarkan opsi untuk mengubah sisi bilah sisi dalam pengaturan yang terakhir. Namun, jika tema WordPress Anda tidak memiliki opsi ini, Anda harus mengubah sisi sidebar secara manual. Pergi lebih jauh dengan menemukan cara menghapus sidebar di WordPress

Yang mengatakan, mari kita lihat metode yang harus Anda gunakan untuk dengan mudah mengubah sisi sidebar WordPress dengan menggunakan CSS.

Mengubah bilah sisi dengan CSS

Sebelum membuat perubahan apa pun pada tema WordPress Anda, Anda harus terlebih dahulu mempertimbangkan membuat tema anak. Dengan menggunakan tema anak, Anda dapat memperbarui tema orang tua tanpa kehilangan perubahan.

Temukan Bagaimana untuk menampilkan sidebar berbeda untuk setiap item di WordPress

Kedua, Anda harus selalu membuat cadangan situs WordPress Anda ketika Anda membuat perubahan waktu-nyata untuk tema aktif Anda.

Anda membutuhkan klien FTP untuk mengedit file tema WordPress. Konsultasikan panduan tentang cara menggunakan FTP.

Masuk ke situs WordPress Anda menggunakan klien FTP dan navigasikan ke folder tema. Biasanya terletak di:

 / Yoursite / wp-content / themes /-tema-folder Anda / 

Sekarang Anda perlu mengunduh dan membuka file stylesheet utama tema WordPress Anda di editor teks seperti Notepad. File ini disebut style.css, dan itu ada di direktori root tema WordPress Anda.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Temukan cara mengelola file dan folder WordPress

Dalam file ini, cari kelas CSS pada bilah sisi Anda. Umumnya kelas ini adalah " sidebar ". Dalam contoh ini, kami menggunakan tema WordPress default " dua puluh lima belas Siapa yang memiliki kelas ini untuk bilah sisi:

.sidebar {float: left; margin-right: -100%; lebar maks: 413px; posisi: relatif; lebar: 29.4118%; }

Seperti yang Anda lihat sidebar mengapung ke kiri dengan margin -100%. Kami akan mengubah pelampung ke kanan:

.sidebar {float: right; margin-kiri: -100%; lebar maks: 413px; posisi: relatif; lebar: 29.4118%; }

Simpan perubahan Anda dan unggah file style.css ke situs web Anda menggunakan klien FTP. Sekarang, jika Anda mengunjungi situs web Anda, akan terlihat seperti ini:

situs demo mengubah sidebar

Memang, kami memindahkan bilah sisi, tetapi kami tidak memindahkan area konten. " Dua puluh Lima belas Gunakan CSS ini untuk menentukan posisi area konten.

.site-content {display: block; mengapung: kiri; margin-kiri: 29.4118%; lebar: 70.5882%; }

Kami akan mengubahnya untuk memindahkan konten ke kanan. Sebagai berikut:

.site-content {display: block; mengapung: kiri; margin-right: 29.4118%; lebar: 70.5882%; }

Inilah tampilan situs web Anda setelah menerapkan kode CSS ini.

presentasi baru pindah situs sidebar

Seperti yang Anda lihat, kami mengubah lokasi area konten dan bilah sisi. Namun, masih ada blok putih di sebelah kiri.

Melangkah lebih jauh dengan menemukan cara mengelola file dan folder WordPress

Anda akan sering menemukan kesalahan ini ketika bekerja dengan CSS. Butuh beberapa upaya detektif untuk memahami apa yang menyebabkan ini dan bagaimana cara memperbaikinya.

Gunakan alat "Inspektur" browser Anda untuk melihat kode sumber. Arahkan mouse Anda ke wilayah yang terpengaruh di browser, klik kanan dan pilih "Inspektur" dari menu browser.

memeriksa alat peramban

Saat Anda menggerakkan mouse di sekitar tampilan kode sumber, Anda akan melihat area yang terpengaruh yang disorot dalam pratinjau langsung. Di panel kanan, Anda akan dapat melihat CSS yang digunakan untuk elemen yang dipilih itu.

Temukan kami Plugin 5 WordPress untuk mengedit CSS secara visual di blog Anda

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Jadi CSS yang sesuai dengan item yang disorot harus disesuaikan kembali.

Layar @media dan (min-width: 59.6875em) {body: before {background-color: #fff; bayangan kotak: 0 0 1px rgba (0, 0, 0, 0.15); konten: ""; display: blok; tinggi: 100%; min-height: 100%; posisi: tetap; atas: 0; kiri: 0; lebar: 29.4118%; z-index: 0; / * Memperbaiki bug yang berkedip dengan menggulir di Safari * /}

Kode CSS ini menambahkan blok kosong lebar 29,4118% dan lebar 100% ke kiri atas. Begini cara kita memindahkannya ke kanan.

Layar @media dan (min-width: 59.6875em) {body: before {background-color: #fff; bayangan kotak: 0 0 1px rgba (0, 0, 0, 0.15); konten: ""; display: blok; tinggi: 100%; min-height: 100%; posisi: tetap; atas: 0; kanan: 0; lebar: 29.4118%; z-index: 0; / * Memperbaiki bug yang berkedip dengan menggulir di Safari * /}

Setelah menyimpan dan mengunggah stylesheet ke server, seperti inilah tampilan situs web Anda.

baru lihat situs sidebar di sebelah kanan

Bekerja dengan CSS bisa membingungkan bagi pemula. Jika Anda tidak ingin melakukan semua pekerjaan manual, maka Anda dapat mencoba Plugin WordPress CSS Hero. Ini memungkinkan Anda untuk mengedit CSS tanpa menulis kode, dan berfungsi dengan setiap tema WordPress.

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. Zxeion

Zxeion adalah plugin WordPress premium yang kuat yang bertanggung jawab untuk meningkatkan keamanan situs Anda. Plugin ini berisi kumpulan alat perlindungan dan keamanan yang akan melindungi situs web Anda dari kemungkinan serangan.Plugin wordpress Zxeion melindungi situs dari serangan virus malware

Sistem perlindungan real-time-nya akan membantu Anda mengidentifikasi ancaman ke situs web Anda dan memblokirnya, tanpa Anda harus melakukan apa pun.

Temukan juga milik kami 7 plugin untuk meningkatkan sidebar Anda di WordPress

Fitur-fiturnya adalah: perlindungan waktu nyata, dukungan pelanggan yang sangat baik, pembaruan rutin, pemblokir alamat IP, dokumentasi yang sangat baik, antarmuka modern dan profesional, dukungan pelanggan khusus, dan lainnya.

Download | Demo | Hébergement Web

2. Slaido 

Slaido adalah plugin WordPress premium yang memungkinkan Anda memilih dari hampir 320 template slider responsif dan mengimpor salah satunya ke situs web Anda hanya dengan beberapa klik. Ini adalah paket templat lengkap, cocok untuk Slider Revolusi. Jadi, pertama-tama Anda harus menginstal yang terakhir untuk menggunakan plugin WordPress ini sepenuhnyaPaket template Slaido untuk revolusi slider wordpress

Fitur utamanya adalah: tata letak slider yang responsif, kemudahan mengimpor atau mengekspor slider, pembaruan rutin, dukungan pelanggan tersedia 24/7, animasi yang lancar dan sangat keren, ketersediaan tutorial video untuk memulai dengan cepat, dukungan untuk Google Fonts, dan banyak lagi.

Download | Demo | Hébergement Web

3. Formulir Hubungi Kami

Formulir Hubungi Kami adalah plugin WordPress responsif premium dan alat sederhana namun kaya akan opsi penyesuaian yang memungkinkan Anda untuk menampilkan formulir yang jelas dan menggembirakan, di mana pengunjung Anda dapat menghubungi Anda dengan meninggalkan pesan mereka.

Hubungi kami dari plugin formulir kontak wordpress

Anda akan dapat menentukan bidang yang diperlukan, memilih tata letak bidang yang terbaik dan menyesuaikannya sepenuhnya untuk mendorong pelanggan atau pengunjung untuk meninggalkan saran atau pesan mereka.

Kami juga mengundang Anda untuk membaca: Plugin 10 WordPress untuk membuat dan mengelola situs web restoran

Cukup atur alamat email tempat Anda ingin menerima pesan dan gunakan untuk menumbuhkan bisnis Anda ke arah yang paling menguntungkan.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.

Kesimpulan

Here! Itu saja untuk tutorial ini. Kami harap ini membantu Anda mengubah sisi sidebar blog WordPress Anda. merasa bebas untuk bagikan artikel ini dengan teman-teman Anda di jejaring sosial favorit Anda

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.

...  

Artikel ini berisi 1 komentar

  1. […] Dalam tutorial ini, Anda akan belajar bagaimana mengubah lokasi sidebar tema WordPress Anda. […]

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
1 saham
saham
menciak
Register1