Mengatur Top Bar dan Style (WordPress Theme)
Cara mengatur Top Bar tema WordPress TokoPressID: layout teks dan menu, mode Elementor, serta warna dan padding di tab Style.
Top Bar adalah bar horizontal tipis di bagian paling atas situs. Biasanya dipakai untuk teks info singkat (jam operasional, nomor telepon) dan menu tautan sekunder. Bagian ini opsional: Anda bisa mematikannya, menyembunyikan menu/teks saja, atau menggantinya sepenuhnya dengan template Elementor.
Tutorial ini berlaku untuk semua tema WordPress by TokoPressID, termasuk LarisManis, Adora, Salvia, LarisGram, LarisDigital, dan tema TokoPressID lainnya dengan struktur Theme Settings yang sama.
Cara membuka pengaturan
- Buka TokoPressID → Theme Settings.
- Pilih panel Theme Settings: Sections.
- Klik Top Bar.
Opsi Settings
| Label di admin | Jenis | Fungsi |
|---|---|---|
| HIDE Top Bar Globally In All Pages | Checkbox | Mematikan Top Bar di seluruh situs |
| Top Bar Type | Radio | Default Top Bar From Theme atau Custom Top Bar From Elementor |
| Custom Top Bar | Select | Memilih template Elementor (jika tipe Elementor) |
| Top Bar Layout | Radio | Posisi teks vs menu (lihat di bawah) |
| Setup Top Bar Menu | Link/tombol | Menuju Appearance → Menus untuk lokasi Top Bar Menu |
| HIDE Top Bar Menu | Checkbox | Menyembunyikan menu, teks tetap bisa tampil |
| Top Bar Text | Textarea HTML | Konten teks (mendukung HTML dasar) |
| HIDE Top Bar Text | Checkbox | Menyembunyikan teks, menu tetap bisa tampil |
Pilihan Top Bar Layout
- Text (Left) & Menu (Right) (default)
- Menu (Left) & Text (Right)
- Menu & Text (Center)
- Text & Menu (Center)
Layout hanya berlaku saat Top Bar Type = default tema, bukan Elementor.
Mode Elementor
- Pilih Custom Top Bar From Elementor pada Top Bar Type.
- Pilih template pada field Custom Top Bar.
- Opsi layout, teks, dan menu default tema tidak dipakai; desain sepenuhnya dari Elementor.
Opsi Style (tab Style)
Tersedia jika Top Bar tidak disembunyikan global dan memakai default tema:
| Label | Fungsi |
|---|---|
| Background Color / [Dark] Background Color | Warna latar |
| Text Color / [Dark] Text Color | Warna teks |
| Link Color / [Dark] Link Color | Warna link |
| Link Color (Hover) / [Dark] … | Warna link saat hover |
| Font Size | Ukuran font (slider, rem) |
| Top & Bottom Padding Space | Padding vertikal bar |
Override per halaman
Saat mengedit post atau page, metabox Page Layout bisa menyembunyikan Top Bar hanya untuk halaman tersebut, meskipun secara global masih aktif.
Langkah contoh: bar promo sederhana
- Pastikan HIDE Top Bar Globally tidak dicentang.
- Pilih layout Text (Left) & Menu (Right).
- Isi Top Bar Text, misalnya
Gratis ongkir untuk pesanan di atas Rp 200.000. - (Opsional) Buat menu kecil di Appearance → Menus, assign ke Top Bar Menu.
- Buka tab Style, sesuaikan Background Color dan Font Size.
- Klik Save Changes, lalu cek di frontend.
Troubleshooting
- Menu tidak muncul: pastikan menu sudah di-assign ke lokasi Top Bar di Appearance → Menus; cek HIDE Top Bar Menu.
- Style tidak bisa diubah: Top Bar dimatikan global atau memakai Elementor.
- HTML teks tidak rapi: gunakan markup sederhana; hindari CSS inline berlebihan.