Cara Buat Header Oxygen Builder – Pada artikel kali ini saya akan membahas tentang bagaimana membuat header di Oxygen Builder. Seperti sudah kita ketahui bersama, dengan menggunakan Oxygen Builder Anda dapat membangun website dengan mudah dan cepat. Salah satunya adalah ketika Anda membuat header.
Tidak terlalu banyak membuat kode style css dari awal ataupun yang lain untuk membuat header di Oxygen. Ada banyak elemen yang tersedia untuk membantu Anda membuat website. Salah satunya dalah Header Builder. Anda dapat membuat header menggunakan element yang tersedia pada oxygen, yaitu Header Builder.
Baca juga: Mengenal dan Belajar Oxygen Builder, Panduan Lengkap!
Cara Buat Header Oxygen Builder
Header builder di oxygen memberikan banyak kemudahan untuk Anda membuat header. Anda tidak perlu memikirkan kode responsive, sticky, dan lain-lainnya. Jika Anda ingin buat header oxygen, lakukan dan buat itu menggunakan template. Berikut cara buat header oxygen builder:
- Buka dashboard » Oxygen » Templates.
- Buat template baru, beri nama Header lalu publish.
- Klik tombol biru, Edit with Oxygen.
- Maka editor Oxygen akan muncul, klik menu Structure untuk lebih mempermudah Anda mendesain header.
- Klik Add New element, pilih menu Helpers » Header Builder , atau Anda dapat mencari menggunakan kolom pencarian “Header Builder”.
- Klik atau pilih Header Builder, maka akan muncul pada tampilan Structure sebelah kanan Anda.
- Jika diperhatikan pada elemen header builder memiliki 3 bagian, row left, row center, dan row right. Pada bagian ini lah nantinya akan kita susun bagian seperti logo, menu dan lain sebagainya.
- Klik pada bagian row left, lalu tambahkan elemen image untuk menampilkan logo di header. Pilih logo atau gambar yang ingin Anda tampilkan di header. Jangan lupa untuk atur width dan height logo.
- Selanjutnya adalah klik pada bagian row right. Pada bagian ini saya akan menampilkan menu header oxygen. Tambahkan elemen menu, lalu pilih menu yang ingin Anda tampilkan. Pastikan sudah membuat menu pada Appearance » Menus.
- Maka hasilnya seperti gambar dibawah ini:
Anda dapat menambahkan pengaturan pada menu seperti font-family, font-size, hover & active, mobile responsive dan lain sebagainya sesuai dengan keinginan.
Demikianlah pembahasan mengenai bagaimana cara membuat header. Cukup mudah bukan?, jika ada pertanyaan ajukan pada kolom komentar setelah artikel ini. Smeoga bermanfaat dan terimakasih. 🙂
