Cara Mengubah Warna Menu Etalase WooCommerce

Diterbitkan: 2020-10-02

Cara Mengubah Warna Menu Etalase WooCommerce Menyiapkan toko WooCommerce Anda membutuhkan banyak waktu dan menemukan tema yang tepat juga merupakan tantangan besar. Namun, pencipta WooCommerce menciptakan tema Storefront yang tersedia secara gratis dan sangat fleksibel untuk disesuaikan. Dibutuhkan berjam-jam untuk membuat desain tata letak yang sempurna yang akan disukai pengguna. Anda mungkin ingin mengubah warna menu atau warna beberapa elemen lain yang mengganggu Anda.

Warna Menu Ubah Etalase Toko WooCommerce

Namun demikian, sangat mudah untuk membuat penyesuaian ini menggunakan opsi "Sesuaikan" di bawah "Tampilan" di dasbor. Bagian ini memungkinkan Anda mengubah tema dengan mudah dengan banyak cara yang diizinkan oleh pembuat tema. Namun, pembuat tema tidak dapat memikirkan semuanya, dan mengubah warna menu dapat termasuk dalam kategori itu.

CSS khusus disimpan secara terpisah tergantung pada tema dan triknya adalah mencari tahu CSS apa yang akan digunakan. Dalam tutorial singkat ini, saya akan memandu Anda tentang bagaimana Anda bisa melakukannya. Selain itu, Anda akan dapat mengubah warna elemen apa pun di tema Storefront Anda.

Langkah-langkah Mengubah Warna Menu Tema Storefront

Berikut adalah langkah-langkah sederhana yang perlu Anda ikuti:

1. Identifikasi Elemen yang perlu Anda Ubah

Sangat mudah untuk mengatakan 'ubah warna menu'. Namun, penerapannya adalah hal yang berbeda. Setiap tema memiliki cara yang berbeda untuk merujuk ke elemennya sehingga disarankan untuk menggunakan yang benar agar gaya CSS dapat berfungsi. Ini berarti bahwa sebelum kita dapat mengubah apa pun, kita harus memahami apa yang ingin kita ubah.

Cukup klik kanan pada area yang ingin Anda ubah di browser seperti Chrome atau Firefox dan klik "Inspect Element" seperti ini: memeriksa elemen

Setelah mengklik itu, ini akan memunculkan konsol yang berisi berbagai elemen halaman di sebelah kiri dan pengaturan untuk elemen-elemen itu di sebelah kanan. Sekarang Anda perlu menemukan elemen yang bertanggung jawab untuk mengubah warna. Pilih elemen

Untuk memilih elemen, klik pada pemilih elemen seperti yang ditunjukkan pada tangkapan layar. Kemudian arahkan kursor ke elemen menu untuk memeriksa gaya. Cari kata-kata seperti "latar belakang" atau "warna latar". Saat Anda menemukannya, hapus centang dan centang tanda "centang" di sebelahnya untuk melihat apakah mereka menghasilkan perubahan warna menu. Jika warnanya tidak berubah, maka bukan itu yang Anda cari. elemen

2. Pilih Warna yang Anda Inginkan

Sekarang setelah Anda melakukan kerja keras, langkah selanjutnya adalah mengubah warna. Ini dapat dilakukan dengan menghapus centang pada opsi warna yang ada dan klik di dekat tanda kurung tutup “}”. Ini akan memungkinkan Anda untuk memasukkan aturan CSS Anda. Anda perlu memasukkan sesuatu seperti "warna latar", tekan tab, dan ketik warna yang Anda inginkan. Memilih warna

Dalam contoh saya, saya telah mengubah warnanya menjadi merah dan Anda dapat melihat bahwa menu di atas konsol juga berubah menjadi merah. Namun, penting untuk dicatat bahwa ini tidak membuat perubahan nyata pada situs Anda. Ini bertindak hanya sebagai perubahan sementara yang terlihat di browser Anda. Hal ini memungkinkan Anda untuk bereksperimen dengan isi hati Anda. Selain itu, Anda bahkan dapat memutuskan untuk menempatkan gambar sebagai latar belakang. Sekarang setelah Anda puas dengan perubahan Anda, sekarang saatnya untuk membuatnya permanen.

3. Mengekstrak Aturan Baru

Anda perlu mengekstrak aturan dengan mengklik kanan (di Firefox) seperti ini dan memilih "Salin Aturan": Mengekstrak aturan

Namun, jika Anda menggunakan Chrome, Anda cukup memilih seluruh aturan dengan mouse dan menyalin teksnya. Tempelkan ke editor dan hapus semua aturan yang ada kecuali yang baru yang baru saja Anda tambahkan jika ada.

4. Menambahkan Aturan

Bagian yang tersisa adalah menyalin/menempel ke bagian " CSS tambahan " dari antarmuka kustomisasi tema Storefront Anda. Untuk melakukan ini:

  • Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
  • Dari menu Dashboard, klik pada Appearance Menu > Customize .
  • Arahkan ke bawah ke CSS tambahan di bilah sisi kiri yang muncul. Sebelum menambahkan CSS
  • Tambahkan aturan CSS seperti yang ditunjukkan di bawah ini: warna berubah
  • Klik terbitkan setelah Anda puas dengan perubahannya.

Kesimpulan

Dalam tutorial ini, saya telah menunjukkan cara yang sangat mudah untuk mengubah warna menu tema Storefront Anda hanya dalam empat langkah mudah. Selain itu, Anda dapat menggunakan prosedur di atas untuk mengubah tampilan elemen apa pun di situs Anda, bukan hanya menu. Bagian yang sulit hanyalah menemukan elemen yang tepat dan aturan yang tepat untuk berubah.

Setelah mengidentifikasi elemen, Anda harus memilih warna yang disukai. Area konsol memungkinkan Anda memasukkan aturan CSS, tetapi ini tidak membuat perubahan nyata apa pun pada situs Anda. Ini memungkinkan Anda untuk bereksperimen dengan aturan Anda dan melihatnya beraksi sebelum menerapkannya di situs Anda.

Setelah Anda puas dengan perubahannya, Anda perlu mengekstrak aturan baru dan menempelkannya di bagian CSS tambahan dari antarmuka kustomisasi Storefront Anda. Jika Anda terkesan dengan perubahannya, Anda dapat mengklik terbitkan. Sekarang, saya yakin Anda dapat mengubah warna elemen apa pun di situs Anda!

Artikel Serupa

  1. Cara Mengubah Teks Tombol Checkout di WooCommerce [Tempatkan Pesanan]
  2. Menata Tabel, Baris, Kolom, dan Sel HTML Tertentu
  3. Cara Menambahkan Kelas Navigasi Aktif Berdasarkan URL
  4. Cara Mengubah Pemberitahuan 'Ditambahkan ke Keranjang' WooCommerce
  5. Cara Mengubah Teks Tombol Tambahkan ke Keranjang Di Halaman Toko WooCommerce
  6. Cara Menghitung Item yang Ditambahkan ke Keranjang Kode Hitung Keranjang WooCommerce
  7. Cara Menyembunyikan Subtotal Keranjang Di WooCommerce atau Menghapus Baris Subtotal
  8. Cara Membuat Halaman Postingan WordPress atau Halaman Blog Terpisah
  9. Menata Item Menu WordPress Secara Terpisah Kelas CSS Menu WordPress
  10. Cara Memilih Semua Kecuali Anak Terakhir Di CSS »Contoh CSS Bukan Anak Terakhir
  11. 80+ Trik untuk Menyesuaikan Tema WooCommerce Storefront: Panduan Kustomisasi Tema Storefront Ultimate
  12. Cara Mengubah Ukuran Ikon Keranjang Di Tema Toko WooCommerce
  13. Cara Mengubah Ukuran Tema Toko Tombol Menu Seluler
  14. Bagaimana Cara Mengarahkan Halaman WordPress Tanpa Plugin?
  15. Cara Menambahkan Menu Baru di Menu Halaman Akun Saya di Woocommerce
  16. Cara Menghapus Teks Footer Email 'Built With WooCommerce'
  17. Cara Membuat Solusi Perbaikan Cepat Menu Seluler Divi yang Dapat Digulir
  18. Bagaimana Mengubah Lanjutkan Ke Teks Checkout Di WooCommerce
  19. Cara Menyesuaikan Tinggi Header Toko WooCommerce