# Pembuat header dan footer yang tersusun dari blok sungguhan URL: https://canvaswp.com/id/header-builder/ Updated: 2026-11-05 Pembuat Header Header, footer, top bar, Mega Menu, Panel Samping, Judul Halaman, dan hero adalah entri yang Anda desain di editor blok, lalu tetapkan ke seluruh situs atau ke satu halaman saja. [Lihat di demo](https://canvaswp.com/id/demos/) [Cara kerja penyunting](https://canvaswp.com/id/editor/) Diperbarui 5 November 2026 Cara membangun header ## Blok tersarang seperti yang Anda harapkan Sebuah rekaman header berisi Header Root. Root berisi Container, dan Container berisi Zona. Zona adalah satu sel dalam baris header: logo di satu sel, menu di sel berikutnya, lalu ikon pencarian dan keranjang di sel terakhir. ### Zona mengatur tata letak Zona menentukan posisi setiap elemen. Dorong satu zona ke kanan, kelompokkan pencarian dan keranjang dalam satu klaster, atau biarkan zona polos jika Anda ingin markup tidak mengganggu. - Zona dapat diurutkan ulang per breakpoint, sehingga satu entri mencakup desktop, tablet, dan ponsel - Setiap zona dapat dibatasi pada satu tingkat perangkat dan tidak ditampilkan di markup untuk perangkat lain - Kelas tambahan pada zona jika Anda ingin mengaksesnya dari CSS Anda sendiri [Semua blok di pustaka](https://canvaswp.com/id/blocks/) ### 22 blok header #### Header Root Header itu sendiri. Semua elemen lain tersarang di dalamnya. #### Header Container Kontainer lebar, sehingga header bisa dibatasi lebarnya, selebar layar penuh, atau keduanya pada breakpoint yang berbeda. #### Header Zone Sel di baris header. Zona menampung bagian-bagian dan menentukan posisinya. #### Header Logo Logo Anda, dengan file terpisah untuk kondisi sticky dan gelap. #### Header Navigation Menu utama, dengan dropdown dan panel Mega Menu. #### Header Search Ikon pencarian yang membuka kolom, atau kolom yang selalu terbuka. #### Header Cart Keranjang WooCommerce dengan jumlah item dan ringkasan tarik-turun. #### Header Social Baris ikon media sosial dari profil yang Anda atur sekali saja. #### Header Button Tombol ajakan bertindak dengan pengaturan ukuran, gaya, dan tautan yang lazim. #### Header Icon Link Satu ikon tunggal yang bisa ditautkan ke mana saja, misalnya untuk nomor telepon atau halaman akun. #### Header Info Blok kecil berisi detail kontak, alamat, atau jam buka. #### Header Shop Search Pencarian produk untuk toko, dibatasi pada katalog Anda. #### Header Topbar Menempatkan entri bilah atas di atas baris header. #### Mega Menu Column Kolom di dalam panel Mega Menu, sehingga panel dapat memuat tata letak yang sesungguhnya. Preset tata letak ## 7 preset sebagai titik awal Preset adalah sekumpulan pengaturan tata letak yang dapat Anda terapkan sekaligus dengan satu klik. Pilih perilaku yang Anda inginkan, lalu ubah apa pun yang Anda suka di pengaturan blok. ### Transparan Tanpa latar belakang, sehingga apa pun yang berada di belakang header akan terlihat. ### Semi-transparan Latar belakang semi-transparan, sehingga gambar di belakangnya tetap terlihat dan teksnya tetap mudah dibaca. ### Mengambang Header mengambang di dalam halaman, dengan ruang di setiap sisinya. ### Melayang semi-transparan Melayang, dengan latar belakang transparan juga. ### Mengambang kecil Header mengambang dengan tinggi yang dikurangi. ### Lebar penuh dan lengket Membentang di seluruh lebar viewport dan tetap terpasang saat halaman digulir. ### Sticky saat menggulir ke atas Menghilang dari bagian atas saat pengunjung menggulir ke bawah dan muncul kembali saat mereka menggulir ke atas. Komponen yang dapat digunakan ulang ## Bilah atas, Mega Menu, dan Panel Samping juga merupakan rekaman Rancang masing-masing sekali, atur sebagai default situs, lalu timpa pada halaman yang membutuhkan tampilan berbeda. ### Bilah atas Bilah atas adalah data tersendiri dengan bloknya sendiri: nomor telepon, jam buka, pengalih bahasa, dan promosi. Blok Header Topbar menempatkannya di atas baris header. Tetapkan satu secara global dan timpa per halaman. 12 dari 88 demo memiliki bilah atas yang dapat Anda sunting. ### Mega Menu Mega menu adalah entri yang Anda rancang sebagai blok dan tampilkan dengan blok Mega Menu. Item menu kemudian membuka panel lebar penuh yang dapat berisi kolom, gambar, tombol, atau blok lainnya. Mega Menu Column menjaga panel tetap dalam grid. 5 Demo masing-masing menyertakannya. ### Panel samping Panel samping adalah rekaman yang meluncur dari tepi layar, untuk menu sekunder, keranjang, formulir kontak, atau sekumpulan detail yang bisa membuat header terlalu penuh. 6 demo menyertakan Panel Samping yang sudah terhubung ke pemicu. Menetapkan sebuah entri dilakukan lewat bidang: pilih panel samping default, sisi layar tempat panel itu muncul, apakah panel mendorong halaman atau melayang di atasnya, dan seperti apa pemicunya. Top bar, mega menu, dan footer ditetapkan dengan cara yang sama. Opsi header ## 94 kolom, bagian terbesar di Opsi Tema Opsi Tema memuat pengaturan header seluruh situs yang tidak sebaiknya dikelola oleh satu entri saja. Impor demo akan mengatur semuanya untuk Anda, dan Anda dapat mengubah pengaturan yang Anda perlukan. - 94 dari 533 kolom Opsi Tema termasuk dalam header - Atur header default, lalu timpa di halaman mana pun - Perilaku sticky, tinggi, jarak, dan breakpoint mobile - Setiap isian didokumentasikan dalam artikel referensi [Semua 533 Opsi Tema](https://canvaswp.com/id/features/#options) **Opsi Tema, Header.** Panelnya sendiri, difoto di situs yang sedang berjalan. Pola ## 40 pola header untuk memulai Saat Anda menyisipkan pola, Anda mendapatkan blok biasa yang dapat diatur ulang, diganti namanya, dan dihapus. Tidak ada yang terkunci, dan tidak ada yang berupa tangkapan layar tata letak yang tidak bisa Anda akses. - 40 pola header, lebih banyak daripada kategori lain - 16 pola footer untuk bagian bawah halaman - 183 pola secara keseluruhan, dikelompokkan dalam 17 kategori - Disisipkan dari tab Pola di penyisip yang sudah Anda gunakan [Pola menurut kategori](https://canvaswp.com/id/editor/#patterns) Pembuat Footer ## Footer dan bilah hak cipta merupakan rekaman yang terpisah Footer bekerja persis seperti header. Rekaman Footer menampung kolom-kolom, dan rekaman Copyrights menampung bilah tipis di bawahnya, sehingga Anda dapat mengubah baris hukum di seluruh situs tanpa menyentuh desain di atasnya. ### Enam blok dan 17 opsi Footer About untuk teks tentang perusahaan, Footer Contacts untuk alamat dan telepon, Footer Instagram untuk feed, Footer Widget Area untuk apa pun yang dapat ditampilkan widget, Widget Links untuk kolom tautan yang rapi, dan Copyrights untuk bilah bawah. - Tetapkan footer secara global atau per halaman, seperti header - Rekaman hak cipta terpisah untuk bilah di bawahnya - 16 pola footer untuk memulai - Ditampilkan di kanvas penyuntingan saat Anda membangun halaman **Opsi Tema, Footer.** 17 kolom untuk seluruh situs di balik rekaman footer. Judul Halaman ## 4 gaya, atau rancang sendiri Pita di bawah header adalah permukaan desain tersendiri, dengan 57 opsi di baliknya dan penggantian per halaman untuk setiap halaman yang Anda terbitkan. **Opsi Tema, Judul Halaman.** 57 kolom, bagian terbesar ketiga dalam produk. ### Default, Mini, Templat, atau Kustom Default adalah tampilan standar. Mini adalah versi ringkas untuk halaman dalam. Template memilih salah satu tata letak khusus yang sudah ditentukan. Custom menampilkan rekaman judul halaman yang Anda bangun sendiri dari blok. - Blok Judul Halaman, Heading, Subtitle, Breadcrumbs, dan Buttons - Default untuk seluruh situs yang dapat ditimpa oleh halaman mana pun - Latar belakang, tinggi, perataan, dan breadcrumb semuanya merupakan pengaturan [Judul Halaman dalam daftar fitur](https://canvaswp.com/id/features/#page-titles) Hero dan slider ## Ditempatkan dalam templat oleh blok slot Hero dan Slider adalah rekaman tersendiri, seperti header. Blok slot berada di templat blok dan menarik Hero atau Slider yang ditetapkan untuk halaman yang sedang dilihat. - Rekaman Hero dan rekaman Slider, keduanya dibangun dari blok - Blok Hero Slot dan Slider Slot berada di templat, bukan di konten Anda - Satu templat melayani setiap halaman, masing-masing dengan pembukaannya sendiri - 12 dari 88 demo menyertakan slider yang dapat Anda sunting [Hero dan slider](https://canvaswp.com/id/features/#heroes) Di editor ## Anda membangun header tepat di tempat Anda akan melihatnya Blok slot memproyeksikan header, bilah atas, judul halaman, hero, dan footer ke kanvas penyuntingan, sehingga halaman terbuka tampil seperti halaman, bukan seperti kumpulan paragraf. Halaman di penyunting blok, dengan header dan footer digambar di sekitar konten oleh kode yang sama dengan yang menggambarnya untuk pengunjung. ### Satu renderer Header yang Anda lihat di kanvas digambar oleh kode yang sama dengan yang menggambarnya untuk pengunjung, sehingga tidak ada pratinjau terpisah yang perlu dijaga tetap akurat. ### Global atau per halaman Atur header, bilah atas, judul halaman, hero, dan footer default untuk situs, lalu ganti salah satunya di halaman tertentu dari pengaturan halaman itu sendiri. ### Responsif secara bawaan Zona dapat diurutkan ulang per breakpoint dan dapat dibatasi ke tingkat perangkat tertentu, sehingga Anda dapat memeriksa tata letak ponsel di penyunting sebelum orang lain melihatnya. [Semua yang bisa dilakukan editor](https://canvaswp.com/id/editor/) Pertanyaan ## Tentang Pembuat Header Jawaban lainnya tersedia di [FAQ lengkap](https://canvaswp.com/id/faq/) dan [dokumentasi](https://docs.canvaswp.com/how-to-build-a-header). **Apakah Anda memerlukan header kedua untuk seluler?** Satu header Canvas biasanya juga mencakup perangkat seluler, karena zona diurutkan ulang per breakpoint dan masing-masing dapat dibatasi pada tingkat perangkat tertentu. Satu rekaman header dapat menempatkan logo di tengah pada ponsel, menghapus detail kontak, dan memindahkan menu ke balik tombol toggle. Buat rekaman kedua hanya jika Anda memang menginginkan desain yang berbeda, bukan untuk memperbaiki tata letak. **Bisakah satu halaman menggunakan header yang berbeda?** Ya, setiap Header, bilah atas, Judul Halaman, dan footer Canvas memiliki default untuk seluruh situs dan penggantian per halaman, sehingga halaman arahan dapat memiliki header transparan dan bilah atas khusus logo, sementara bagian lain situs tetap memiliki pengaturannya sendiri. **Apakah header itu area widget atau menu?** Header Canvas bukan keduanya: ia adalah catatan yang Anda sunting di penyunting blok, persis seperti halaman. Navigasi, logo, pencarian, keranjang, dan tombol di dalamnya adalah blok dengan panel pengaturannya sendiri. **Apa yang terjadi pada header Anda saat lisensi Anda berakhir?** Saat lisensi Canvas berakhir, header dan bagian lain situs Anda tetap tampil seperti saat ini. Yang dijeda adalah layanannya: pembaruan, impor Demo, AI, dan pengeditan blok premium berhenti sampai Anda memperpanjang. Ada masa tenggang 14 hari jika pemeriksaan lisensi tidak dapat menjangkau server kami. **Apakah Anda masih bisa menggunakan Penyunting Situs?** Ya, Canvas dibangun di atas templat blok asli, sehingga templat dan bagian templat tetap berada di tempat WordPress menyimpannya, dan rekaman header ditempatkan ke dalam templat oleh sebuah blok. [Baca cara kerja penyunting](https://canvaswp.com/id/editor/).