Gutenberg WordPress (Part 9): Cara Membuat Header & Footer Responsive

Nasikhun A. 30 Jun 2023 3 Menit 0

Advertisements

Setelah menyelesaikan tutorial Gutenberg WordPress sebelumnya, yakni membuat section gallery di homepage, Anda perlu mencoba cara membuat header & footer responsive.

Fitur responsif pada website penting karena orang yang berkunjung pada website kemungkinan besar menggunakan perangkat yang beragam, seperti laptop, tablet, hingga HP atau mobile phone.

Dengan membuat website Anda responsif, pengguna akan mendapatkan pengalaman yang lebih baik dalam menggunakan website. Di sini, kita akan mengubah header menjadi responsif seperti berikut:

hreader responsif

Mengubah header biasa (kiri) menjadi header responsif (kanan) dengan editor Gutenberg WordPress.

Ada beberapa langakah yang perlu Anda lakukan untuk membuat header dan footer pada website menjadi responsif. Berikut langkah-langah selengkapnya:

Advertisements

Langkah 1: Download Plugin Responsive

Untuk membuat header pada website, langkah pertama adalah download dan install plugin responsif. Berikut cara install plugin di WordPress:

  1. Pada halaman WP Admin, klik Plugins > pilih Add New.
    cara membuat header responsive
  2. Selanjutnya, ketik responsive block control pada search box plugin.
  3. Klik Install Now pada plugin Responsive Block Control.

Apabila plugin Responsive Block Control sudah terpasang, selanjutnya Anda perlu membuat header khusus untuk versi mobile.

Langkah 2: Membuat Header Khusus untuk Mobile

Header khusus untuk mobile ini dibuat di bawah header yang sebelumnya. Namun, Anda tidak perlu menghapus header yang sudah ada. Untuk menambahkan header khusus, silakan masuk ke editor header dengan langkah berikut:

  1. Klik Appearance > pilih Editor > klik Template Parts > pilih Header > klik Edit.
    cara membuat header responsive
  2. Selanjutnya, buka List View untuk mempermudah pengaturan.
    cara membuat header responsive
  3. Klik [+] untuk memasukkan block, kemudian ketik column pada search box block > pilih Columns. > pilih One column untuk memasukkan 1 kolom.
    cara membuat header responsive
  4. Kamudian klik [+] > ketik row pada search box > pilih block Row.
    cara membuat header responsive
  5. Klik [+] > ketik navigation pada search box block> pilih block Navigation untuk menambahkan tombol navigasi.
    cara membuat header responsive
  6. Masuk ke Settings > pilih Setting > pada bagian ICON, pilih ikon 3 baris (untuk membuat humburger menu).
    cara membuat header responsive
  7. Jika menu di navigasi masih kurang, klik [+] pada block navigasi > kemudian pilih menu yang hendak ditambahkan.
    cara membuat header responsive
  8. Kemudian klik block Row > klik [+] pada block tersebut > ketik site pada search box > pilih Site Logo. Hal ini berfungsi untuk menambahkan logo website.
    cara membuat header responsive dengan gutenberg wordpress
  9. Klik block Site Logo > klik Style pada kolom pengaturan > klik + pada menu Dimensions. > pilih Margin.
    cara membuat header responsive dengan gutenberg wordpress
  10. Atur Margin sesuai kebutuhan. Kami menggunakan ukuran margin 1.
    cara membuat header responsive dengan gutenberg wordpress

Apabila menu pada navigasi dan site logo sudah dibuat, selanjutnya lakukan pengaturan visibility pada header untuk tampilan desktop dan header untuk tampilan mobile.

Advertisements

Langkah 3: Pengaturan Header Responsive

Pembuatan header responsive dilakukan dengan mengatur visibility. Visibility di sini adalah pengaturan terkait mana block yang ditampilkan saat menggunakan jenis perangkat tertentu. Berikut langkah-langkahnya:

  1. Klik block Columns yang telah dibuat > pada menu Settings di sebelah kiri, klik Visibility > aktifkan toggle Hide on Tablet, Hide on Desktop, dan Hide on Wide.
    cara membuat header responsive
  2. Klik block Columns yang atas > klik Visibility pada bagian Settings > aktifkan toggle Hide on Mobile.
    cara membuat header responsive
  3. Jika sudah selesai melakukan pengaturan, silakan klik Save.

Sampai di sini, pembuatan header yang responsif sudah selesai. Hasil akhir dari pembuatan header responsif dapat Anda lihat dengan cara buka front-end website. Kemudian tekan tombol Shift + Ctrl + C > pilih tampilan Mobile.

Asumsinya, Anda sudah berhasil membuat footer dengan Gutenberg. Apabila Anda mengikuti tata cara pembuatan footer tersebut, berarti Anda sudah menggunakan salah satu fitur penting dari Gutentor, yakni block Advanced Column.

Jika sudah menggunakan block Advanced Column, maka footer tersebut akan otomatis responsif. Anda bisa melakukan pengaturan lanjutan dengan cara berikut:

  1. Klik menu Appearance > pilih Editor > Template Parts > Footer > klik ikon Edit.
    cara membuat footer responsive dengan gutenberg
  2. Pada halaman editor, klik List View > pilih navigasi footer yang Advanced Columns > klik Settings > pada bagian Layout, kli bagian ikon Mobile. Silakan pilih pengaturan yang sesuai. Kami memilih satu kolom.
    cara membuat footer responsive dengan gutenberg
  3. Selesai. Apabila Anda melihatnya di front-end dengan tampilan mobile, maka footer sudah responsif.

Advertisements

Penutup

Demikian tutorial pembuatan header dan footer responsive menggunakan Editor Gutenberg WordPress. Selanjutnya, Anda perlu menerapkan fitur responsif pada slider. Slider tersebut telah Anda buat di tutorial ke-5.

Apabila tidak ingin direpotkan dengan pembuatan website, Anda dapat menyerahkan urusan pembuatan website ke Tim Tonjoo, pengembang website profesional yang telah dipercaya oleh berbagai kalangan.

Mari diskusikan ide dan kebutuhan website Anda melalui Kontak Tonjoo, dan kami akan membantu mewujudkannya!


Baca artikel terkait WordPress, WooCommerce, Plugin dan pengembangan website lainnya dari Moch. Nasikhun Amin di blog Tonjoo Studio.


 

Last Updated on Juli 16, 2023 by Nasikhun A.

Bagikan ke:
Diarsipkan di bawah:
Nasikhun A.
Ditulis oleh

Nasikhun A.

A late specializer, data-informed technical writer who is constantly hungry for growth. A lifelong learner who is interested in the marriage between creativity and technology.

Advertisements

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.