Panduan Kustomisasi CSS Header WooCommerce Storefront Header

Jika Anda ingin mengubah tampilan header tema Storefront WooCommerce Anda, Anda mungkin ingin mempelajari beberapa trik CSS dari tutorial singkat ini.

Etalase WooCommerce adalah tema sederhana dan kuat yang gratis. Tema ini memberi Anda kontrol yang signifikan atas toko Anda terkait presentasi produk dan akses pengguna. Ini gratis dan menawarkan banyak pilihan penyesuaian melalui tema anak.

Tema Storefront mendukung penyesuai WordPress, dan Anda dapat mengedit header dari bagian ini.

Namun, Anda dapat menyesuaikan header etalase menggunakan filter. Namun, lebih mudah dengan CSS untuk menambahkan aturan Anda untuk mengubah gaya bagian tertentu. Untuk tutorial ini, Anda harus memiliki beberapa keterampilan pengkodean. Kami akan menambahkan aturan CSS di bagian CSS tambahan melalui penyesuai.

Keuntungan menggunakan bagian ini adalah penyesuai WordPress memungkinkan Anda untuk mengedit secara real-time. Anda dapat melihat perubahan yang Anda buat sebelum Anda dapat memublikasikan perubahan Anda.

Perlu juga disebutkan bahwa tema Storefront harus menjadi tema aktif saat menyesuaikannya.

Dengan itu, mari kita lihat beberapa tips CSS header yang dapat Anda gunakan untuk membawa toko Anda ke tingkat berikutnya.

1. Sesuaikan Ukuran Tajuk

Di sini kita akan menggunakan Theme Customizer lagi, tetapi kita akan menulis beberapa kode CSS di bagian 'CSS Tambahan'.

Tambahkan kode berikut:

 * Ketua */

#masthead.site-header {

    tinggi: 155px!penting;

    margin-bawah: 0px

}

/* CSS Seluler untuk Masthead */

@media saja layar dan (max-width: 320px) {

    #masthead.site-header {

    tinggi: 80px!penting;

    margin-bawah:0px;

}

}

/* Menu kepala tiang */

.storefront-primary-navigation a, .cart-contents a {

    margin:0 0 0 0;

}

.main-navigasi ul {

    padding:0 0 10px 4px!penting;

}

.main-navigasi li {

    tinggi:38px!penting;}

/* CSS Seluler untuk menu Masthead */

@media saja layar dan (max-width: 320px) {

.main-navigasi ul {

    latar belakang:#D6DDE4!penting;

}

}

/* Area tajuk */

.tajuk situs {

padding-top: 0.5em;

}

.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {

margin-bawah: -45px;

}

Inilah hasilnya:

2. Hapus Bilah Pencarian dari Header Tema

Tambahkan kode ini ke bagian 'CSS tambahan'.

 .site-header .widget_product_search {

tampilan: tidak ada;

}

Inilah hasilnya:

3. Ubah Warna Menu Header

Penyesuai memungkinkan kami untuk menyesuaikan tajuk dengan warna yang Anda inginkan. Anda dapat melakukannya dengan menavigasi ke Kustomisasi, lalu tajuk, dan pilih warna yang Anda inginkan.

Namun, opsi ini mewarnai seluruh wilayah header, termasuk bilah pencarian, bagian login, dan logo. Untuk mendapatkan latar belakang yang berbeda ke menu header, tambahkan cuplikan kode berikut ke panel CSS tambahan.

 .storefront-primary-navigation,

.main-navigation ul.menu ul.sub-menu{

warna latar: hijau;

}

Inilah hasilnya:

4. Sembunyikan Bilah Navigasi Utama

Storefront Theme, secara default, menampilkan semua halaman sebagai menu. Jika Anda ingin menyembunyikan bilah navigasi utama, menghapus menu saja tidak cukup. Arahkan ke Customize, lalu bagian CSS tambahan, dan tambahkan baris berikut:

 .storefront-primary-navigation {

tampilan: tidak ada;

}

Inilah hasilnya:

5. Hapus Ruang Kosong dari Header

Arahkan ke Customize, lalu bagian CSS tambahan, dan tambahkan baris berikut:

 .pencitraan situs {

margin-bawah: 0px;

}

Inilah hasilnya:

6. Tingkatkan Lebar Bilah Pencarian

Apa yang akan Anda lakukan jika Anda ingin memperpanjang lebar bilah pencarian? Menggunakan bagian CSS tambahan, tambahkan baris berikut:

 .woocommerce-active .site-header .site-search {

lebar: 44,739%;

}

#masthead .site-search .widget_product_search input[type="search"] {

lebar: 700 piksel !penting;

}

Inilah hasilnya:

7. Cara Mengubah Ukuran Logo, Navigasi Sekunder, dan Bilah Pencarian

Untuk mengubah semuanya sekaligus, tambahkan kode berikut ke bagian CSS Tambahan Anda:

 @media screen dan (min-width: 768px) {

/* LOGO */

.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 30% !important; /* Gunakan nilai px jika Anda mau, mis. 350 piksel */ }




/* NAVIGASI SEKUNDER */

.site-header .secondary-navigation { lebar: 40% !penting; /* Gunakan nilai px jika Anda mau, mis. 350 piksel */ }




/* BAR PENCARIAN */

.site-header .site-search { lebar: 30% !penting; /* Gunakan nilai px jika Anda mau, mis. 350 piksel */ }

Inilah hasilnya:

8. Hapus Keranjang dari Header

Dalam contoh ini, saya akan menghapus ikon keranjang dengan menambahkan aturan baru ' display: none; '. Tambahkan kode CSS berikut di bagian CSS tambahan:

 .site-header-cart .cart-contents {

tampilan: tidak ada;

}

Inilah hasilnya:

9. Sembunyikan Header

Untuk menyembunyikan header, tambahkan kode CSS berikut di bagian CSS tambahan:

 .tajuk situs {

tampilan: tidak ada;

}

Inilah hasilnya:

10. Tingkatkan Ukuran Tautan Menu di Header Storefront

Menu sedikit lebih kecil, sesuai dengan preferensi banyak pengguna. Namun, mereka perlu meningkatkan ukuran font tautan menu di tema etalase. Tambahkan kode berikut di bagian CSS tambahan:

 .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {

ukuran font:28px;

}

Inilah hasilnya:

11. Ubah Ukuran Ikon Keranjang di Header Storefront

Anda dapat melakukan ini dengan menambahkan kode CSS berikut di bagian CSS Tambahan

 .site-header-cart .cart-contents {

ukuran font:30px;

}

Inilah hasilnya:

12. Ubah Ukuran Judul Header Situs di Tema Storefront

Tambahkan kode berikut di bagian CSS tambahan:

 .tajuk situs {

ukuran font: 20px;

}

Inilah hasilnya:

13. Ubah Ukuran Tombol Menu Seluler

Penting untuk dicatat bahwa cara menu ditampilkan adalah bagian dari membuat menu responsif. Oleh karena itu, jika menu navigasi utama Anda berupa daftar di perangkat desktop, menu yang sama dapat ditampilkan sebagai menu hamburger di perangkat seluler.

Untuk mengubah ukuran, tambahkan kode CSS berikut di bagian CSS tambahan:

 .button.menu-toggle {

ukuran font: 19px;

}

Inilah hasilnya:

Kesimpulan

Dalam panduan ini, saya telah membagikan beberapa tips CSS header yang dapat Anda gunakan untuk menata header. Saya sangat menyarankan Anda menambahkan aturan CSS di bagian CSS tambahan sehingga Anda dapat melihat pratinjau perubahan secara real-time. Pratinjau perubahan Anda akan memungkinkan Anda untuk mengubah aturan ke spesifikasi Anda.

Untuk menambahkan aturan, salin/tempel 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.
• Tambahkan aturan CSS.
• Jika Anda puas dengan perubahannya, klik Publikasikan.

Namun, penting untuk dicatat bahwa tips CSS yang dibagikan di sini hanya berfungsi untuk tema Storefront.

Artikel Serupa

1. Cara Membuat Area Widget Kustom di WordPress Langkah demi Langkah
2. Cara Menyesuaikan Tema Storefront – Kustomisasi Beranda [Panduan Utama]
3. Bagaimana Menambahkan Gambar Latar Belakang Header Tema Storefront
4. Cara Mengedit Header di Tema WooCommerce Storefront
5. Cara Membuat Solusi Perbaikan Cepat Menu Seluler Divi yang Dapat Digulir
6. Cara Mengubah Ukuran Ikon Keranjang Di Tema Toko WooCommerce
7. Cara Mengubah Ukuran Tema Toko Tombol Menu Seluler
8. Cara Menyesuaikan Tinggi Header Toko WooCommerce
9. Cara Mengubah Ukuran Font Menu Utama Tema Storefront
10. Cara Mengubah Ketinggian Footer Etalase Toko WooCommerce
11. Cara Mengubah Warna Menu Etalase WooCommerce
12. Cara Menyesuaikan Tema WooCommerce Storefront: Panduan Kustomisasi Tema Storefront Ultimate
13. Cara Mengubah Ukuran Judul Situs Tema Etalase WooCommerce
14. Cara Menghapus Tema Header WooCommerce Storefront