Gutenberg WordPress (Part 4): Membuat Halaman Sederhana (Footer)

Nasikhun A. 21 Jun 2023 3 Menit 0

Advertisements

Pada tutorial Gutenberg WordPress sebelumnya, Anda telah berhasil membuat Header. Selanjutnya, membuat halaman sederhana pada website juga perlu ditambahkan footer.

Footer merupakan bagian paling bawah dari website yang umumnya memuat informasi kontak, deskripsi perusahaan, navigasi tambahan, hingga informasi hak cipta (copyright).

Hasil akhir dari pembuatan footer dengan menggunakan editor Gutenberg WordPress adalah sebagai berikut:

membuat halaman sederhana footer

Hasil akhir footer yang dibuat menggunakan editor Gutenberg WordPress.

Di tutorial ini, ada empat tahap pembuatan footer hingga selesai, yakni mulai dari pembuatan kolom, membuat bagian deskripsi, membuat bagian menu navigasi, dan membuat background. Berikut selengkapnya!

Advertisements

Langkah pertama pembuatan footer adalah dengan menambahkan kolom. Kolom berfungsi sebagai pemisah antar bagian footer. Sehingga masing-masing bagiannya tampak rapi. Berikut cara membuat kolom untuk footer:

  1. Pada halaman WP-Admin, klik Appearance > pilih Editor.
    membuat halaman sederhana footer
  2. Selanjutnya, pilih Template Parts > pilih menu Footer > klik ikon Edit.
    membuat halaman sederhana footer
  3. Pada block yang sudah ada, klik [+] > ketik columns di search box > pilih Columns untuk membuat kolom.
    membuat halaman sederhana footer
  4. Pilih kolom 50/50 untuk membuat kolom dengan dua bagian.
    membuat halaman sederhana footer
  5. Selesai, Anda sudah berhasil membuat kolom untuk footer dengan dua bagian. Satu bagian untuk deskripsi, dan satunya lagi untuk navigasi.

Bagian kanan footer selanjutnya akan digunakan sebagai letak deskripsi. Bagian ini bisa memuat nama perusahaan, alamat, hingga deskripsi singkat dari perusahaan. Berikut cara membuat bagian deskripsi footer:

  1. Pada kolom footer sebelah kiri, klik [+] > pilih Heading > kemudian isi judul deskripsi pada footer.
    membuat deskripsi footer
  2. Klik List View > pilih Header yang telah dibuat > klik titik tiga > pilih Insert after untuk menambahkan deskirpsi di bawahnya.
    membuat deskripsi footer
  3. Setelah muncul block paragraf, isi deskripsi pada footer.
    membuat deskripsi footer gutenberg wordpress
  4. Selanjutnya, edit heading pada footer dengan klik Heading tersebut > klik Settings di kanan atas > pada bagian Size Custom, klik Setting > isi ukuran header. Kami menggunakan ukuran 30.
    membuat deskripsi footer gutenberg wordpress
  5. Selanjutnya, atur juga deskripsi pada footer, dengan cara sama, klik block paragraf deskripsi > klik Settings > pada bagian Typography, klik Setting > masukkan ukuran yang sesuai. Kami menggunakan ukuran 20.
    membuat deskripsi footer gutenberg wordpress
  6. Selesai. Footer bagian untuk pengisian deskripsi sudah selesai.

Bagian footer ini dapat Anda isi dengan informasi seperti alamat perusahaan, deskripsi singkat perusahaan dan informasi singkat lainnya.

Advertisements

Footer juga sering digunakan untuk menampilkan navigasi tambahan atau menu terkait seperti kebijakan privasi, syarat dan ketentuan, sitemap, atau halaman lain yang mungkin tidak dimasukkan ke dalam menu utama.

Nah, Anda dapat menambahkannya di bagian menu navigasi. Berikut cara membuat menu navigasi di bagian footer:

  1. Pada kolom footer sebelah kanan, klik [+] > pilih Advanced Columns.
    membuat navigasi menu di footer
  2. Pilih kolom 4-4-4. Kolom ini berisi 3 bagian.
    membuat navigasi menu di footer
  3. Klik [+] pada kolom pertama > pilih Heading.
    membuat navigasi menu di footer
  4. Isi Heading dengan judul menu > klik Settings > pada bagian Typography, klik Setting > isi ukuran sesuai kebutuhan. Kami menggunakan ukuran 25.
    membuat navigasi menu di footer
  5. Tambahkan daftar menu dengan cara klik View List di bagian kiri > klik titik tiga pada judul menu > pilih Insert after.
    membuat navigasi menu di footer
  6. Setelah muncul block-nya, klik [+] > pilih Advanced List.
    membuat navigasi menu di footer
  7. Isi list pertama dengan nama menu > klik ikon pengaturan.
    membuat navigasi menu di footer
  8. Klik toggle Enable Item Link > klik Link Options > pada kolom URL, isi # bila belum ada halaman untuk ditautkan > kemudian Close. Nantinya, teks # dapat Anda ganti dengan URL halaman apabila sudah ada.
    membuat navigasi menu di footer
  9. Tambahkan judul menu dan daftar menu pada dua kolom sampingnya, dengan cara yang sama.
  10. Jika sudah ditambahkan, klik salah satu daftar menu > buka pengaturan > Anda bisa mengatur ikon List Indicator melalui toggle-nya.
    membuat navigasi menu di footer
  11. Selanjutnya, gabungkan keseluruhan bagian footer menjadi satu group dengan cara buka List View di bagian kiri atas > klik titik tiga pada Columns keseluruhan > pilih Group.
    membuat navigasi menu di footer
  12. Untuk merapikan footer, klik titik tiga pada pada Group keseluruhan > klik Setting > pada bagian Width, isi dengan ukuran 1200. Kemudian Save.membuat navigasi menu di footer

Terakhir, agar bagian footer tidak terkesan monoton, Anda dapat menambahkan warna pada backgroud footer. Selain itu, Anda juga bisa menambahkan informasi legalitas dengan tulisan copyright.

Jangan lupa juga untuk memberikan padding pada footer agar terlihat lebih rapi. Berikut cara membuat background, copyright, dan juga padding pada footer:

  1. Buka List View di kiri atas > pilih Group footer > klik Settings > klik opsi Style > pilih Background > atur warna background sesuai keinginan Anda.
    membuat background warna pada footer
  2. Selanjutnya, tambahkan Copyright dengan klik titik tiga pada Columns > pilih Insert after > kemudian isi Copyright.
    membuat background warna pada footer
  3. Agar text-nya rata tengah, klik block Copyright > pilih pengaturan rata paragraf > pilih Align text center.
    membuat background warna pada footer
  4. Atur padding dengan pilih keseluruhan footer > klik Settings dan pilih Style, kemudian scroll ke bawah > pada bagian Dimensions, klik Settings > masukkan ukuran padding. Kami menggunakan ukuran 20.
    mengatur padding pada footer
  5. Selesai. Anda sudah berhasil membuat backgroud footer, copyright, dan padding.

Advertisements

Penutup

Demikian tutorial Gutenberg WordPress, yakni membuat footer sebagai bagian penying dari sebuah website. Footer adalah bagian penting dalam sebuah website yang memberikan informasi tambahan dan memudahkan navigasi bagi pengunjung.

Langkah selanjutnya untuk membuat halaman sederhana menggunakan Gutenberg WordPress adalah menambahkan komponen homepage. Komponen pertama adalah membuat slider pada homepage.

Yup, pembuatan sebuah website memang membutuhkan waktu cukup lama. Bahkan untuk pembuatan dengan tampilan dan fungsi dasar memang cukup memakan waktu.

Apabila Anda tidak ingin menghabiskan banyak waktu dalam pengembangan website, Anda bisa serahkan ke Tim Tonjoo, agensi prangkat lunak profesional dengan pengalaman membuatan website pemerintah hingga start-up.

Yuk, diskusi bersama kami melalui kontak kami!


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


Last Updated on Juli 5, 2023 by Nasikhun A.

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

Nasikhun A.

Moch. Nasikhun Amin adalah SEO Technical Writer di Tonjoo. Spesialisasi topik yang ditulis meliputi, namun tidak terbatas pada WordPress, WooCommerce, dan Web Development. Setiap konten yang dibuat telah melalui tahap testing dan teknikal review oleh tim software engineer.

Advertisements

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.

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