RisangKalau website adalah sebuah toko, header adalah papan nama di atas pintu masuk, sementara footer adalah informasi yang tertempel di dekat kasir, berisi kontak, jam operasional, atau tautan penting lainnya. Keduanya mungkin terlihat sederhana, tapi punya peran besar. Header dan Footer SitePro hadir dengan pengaturan yang fleksibel, sehingga memudahkan bagi siapapun yang akan mengatur tampilannya.
Dalam panduan ini, kami akan membahas secara detail tentang Header dan Footer SitePro Website Builder dan bagaimana cara mengaturnya dengan mudah. Yuk simak penjelasannya.
Apa itu Header?
Header adalah suatu area atau elemen paling atas pada sebuah website. Header akan membuat suatu website menjadi lebih mudah dikenali oleh pengunjung, terutama jika menggunakan logo dan warna dasar identitas merk Anda.
Kebanyakan header pada website terdapat interaksi klik dipakai untuk mengarahkan pengunjung ke halaman yang disediakan dalam suatu website. Selain digunakan untuk tempat navigasi, header jugad apat digunakan untuk meletakkan logo perusahaan hingga CTA button.
Header juga dapat ditampilkan ke dalam 2 tipe berbeda, yaitu fixed header (header yang menempel) dan sticky header (header yang selalu tampil ketika scroll turun). Tipe ini dapat digunakan sesuai kebutuhan Anda dalam membangun website, tentunya perlu dipastikan juga agar header tidak menutupi konten di dalam website Anda.
Footer juga merupakan elemen penting di dalam sebuah website. Seperti namanya, lokasi footer tentunya berada di paling bawah pada sebuah website. Sama seperti header, footer dapat berguna untuk memberikan akses cepat ke suatu halaman atau bagian penting yang tidak tersedia di bagian atas suatu website.
Umumnya pada bagian footer akan berisikan elemen-elemen penting seperti CTA button, copyright, akun sosial media, floating button, navigasi tambahan, form subcriber, informasi kontak, dll. Footer juga dapat meningkatkan kredibiltas brand Anda.
Header dan Footer juga memiliki beberapa fungsi untuk sebuah website. Dimulai dari Header terlebih dahulu, posisinya yang berada di paling atas tersebut memiliki beberapa fungsi seperti
- Membangun identitas suatu brand
- Tempat untuk navigasi utama website
- Menampilkan CTA (Call to Action) button
- Memberikan informasi kontak cepat
Sedangkan untuk Footer yang posisinya berada di paling bawah pada sebuah website, memiliki beberapa fungsi seperti
- Tempat informasi legal seperti Copyright, Kebijakan Privasi, dll
- Sitemap mini atau link arsip konten
- Informasi kontak cepat dan lokasi
- Menampilkan CTA (Call to Action) button
Berikut kami berikan juga contoh dari tampilan Header dan Footer pada sebuah website.
Tampilan gambar di atas adalah bagian dari sebuah header website. Dapat terlihat di area header terdapat elemen seperti logo perusahaan, menu navigasi, CTA button “log In”, dan juga informasi kontak cepat.
Sedangkan untuk gambar di atas adalah bagian dari sebuah footer website. Dapat terlihat terdapat juga elemen seperti informasi legal, logo perusahaan, informasi kontak cepat, alamat, serta beberapa link arsip.
Cara Custom Header di SitePro
Setelah mengetahui beberapa informasi mengenai header dan footer, saatnya masuk ke dalam bagian cara custom tampilan untuk header dan footer pada SitePro Website Builder.
Pada bagian ini, kami menggunakan tampilan dari template yang dicustom sesuai kebutuhan. Karena ketika Anda akan melakukan edit website menggunakan SitePro, pasti akan diminta untuk memilih template terlebih dahulu.
Sebelum itu, pastikan Anda sudah login terlebih dahulu ke halaman SitePro melalui Clientzone. Anda dapat membaca artikel Cara Login SitePro terlebih dahulu. Setelah itu, kami akan memberikan beberapa bagian untuk cara customnya.
Pastikan terlebih dahulu Anda berada di section Header. Anda dapat mengetahuinya dengan klik bagian “page structure“.
Logo
- Karena logo menggunakan elemen gambar, maka untuk mengubah klik pada area gambar, maka nantinya akan ada opsi “Change Picture”.
- Kemudian upload file gambar logo yang ingin Anda pakai ke dalam area media. Jika sudah, klik “select” untuk menggunakannya.
Text
Terkadang ada website yang menambahkan text di sebelah logo. Jika Anda ingin menggunakannya, maka dapat dengan cara berikut:
- klik pada area teks, lalu klik lagi “edit text”.
- Isikan text sesuai kebutuhan. Anda juga dapat mengedit size text, style text, jenis font, jenis rata kiri kanan tengah, dll.
- Bagaimana jika tidak ada kolom teks dari template yang dipilih? Anda dapat menambahkan elemen sendiri dengan klik tanda + lalu pilih text.
- Akan ada opsi pilihan style yang bisa dipilih sesuai kebutuhan. Setelah memilih, Anda dapat mengatur tempat, edit teks, dan sebagainya.
Menu
Secara default ketika Anda memilih template, sudah ada menu yang tersusun. Anda dapat melakukan edit sesuai kebutuhan untuk nama menu di website Anda.
- Untuk edit dapat langsung klik di area menu lalu pilih “Edit Menu”.
- Nantinya akan ada tampilan seperti berikut dan Anda dapat mengedit menu, menghapus menu, dan juga menambah menu.
Untuk panduan lengkap terkait menu, Anda dapat membaca di artikel Membuat Menu SitePro
CTA Button
- Untuk CTA Button di Header Sitepro umumnya menggunakan elemen gambar. Sehingga Anda dapat menambahkan saja elemen gambar di area header atau edit gambar jika sudah ada.
- Anda dapat memiliih icon sesuai kebutuhan atau jika tidak ada yang sesuai maka dapat upload file gambar icon yang ingin dipakai ke dalam SitePro
- Kemudian Anda dapat menambahkan link pada gambar tersebut untuk mengarah ke halaman tujuan, bisa diisikan nomor telepon, link whatsapp, link sosmed, atau yang lainnya.
Setelah membahas header, saatnya membahas untuk Footer. Secara keseluruhan cara editnya hampir sama seperti Header. Sehingga kami akan menambahkan beberapa hal yang tidak ada di bagian Header.
Pastikan sudah masuk ke bagian footer terlebih dahulu.
Informasi Kontak & Copyright
- Pada area footer, akan tersedia text area untuk informasi kontak atau informasi copyright. Di mana untuk menambahkannya, perlu menggunakan elemen font.
- Karena akan ditaruh di footer, maka lebih baik langsung memilih yang footer saja.
- Setelah itu silakan edit text sesuai kebutuhan dan Anda juga dapat mengatur ukuran, style, dan font yang ingin dipakai.
Anda juga dapat menambahkan floating button di bagian footer. Dengan diletakkan di footer, akan membuat floating button tetap tampil di berbagai halaman website. Fitur ini bisa dipakai bagi Anda yang ingin ada WhatsApp mengambang.
Untuk detail caranya sudah pernah kami buat pada artikel Membuat WhatsApp di SitePro
Peta mini
Apabila Anda ingin menambahkan Maps kecil juga bisa diletakkan di area footer. Untuk membuatnya dengan klik pada icon + kemudian memilih Advanced.
Selanjutnya dapat membaca pada artikel yang pernah kami buat dengan judul Menambah Peta di SitePro
Form Subscriber
- Terkadang ada yang menginginkan adanya form untuk subscriber. Untuk mengatur ini, Anda perlu klik icon + kemudian pilih opsi Forms.
- Akan ada beragam pilihan form, silakan dipilih sesuai kebutuhan. Namun umumnya untuk form menggunakan kolom email saja sudah cukup.
Agar berfungsi. Anda perlu melakukan setting SMTP terlebih dahulu. Detailnya dapat dibaca di artikel Form SitePro
Fitur tambahan
Apabila template yang Anda pilih kurang lengkap untuk area form dan Anda bingung untuk mendesain tampilan footer. Anda dapat menggunakan fitur yang bernama blocks.
- Klik icon + kemudian pilih blocks.
- Pilih yang footer, kemudian pilih type yang ingin dipakai. Di mana tersedia 4 layout yang dapat digunakan.
- Selanjutnya Anda tinggal melakukan edit.
Penutup
Memahami fungsi header dan footer SitePro adalah langkah awal untuk menciptakan website yang profesional. Dengan penempatan elemen yang tepat di website Anda, selain tidak hanya mempercantik tampilan situs, tetapi juga dapat mempermudah pengunjung dalam menemukan informasi yang mereka butuhkan.
Jangan lupa untuk melakukan backup data terlebih dahulu baik sesudah ataupun sebelum edit website di SitePro. Hal ini agar jika waktu edit hasil tampilan menjadi tidak sesuai, maka dapat dikembalikan ke tampilan sebelumnya.
