Pada tutorial Gutenberg WordPress sebelumnya, Anda telah berhasil membuat Header. Selanjutnya, saat membuat halaman sederhana di website, Anda juga perlu mengetahui cara membuat footer di WordPress.
Footer adalah bagian bawah website yang biasanya berisi informasi kontak, deskripsi perusahaan, navigasi tambahan, dan informasi hak cipta.
Hasil akhir dari pembuatan footer menggunakan editor Gutenberg WordPress adalah sebagai berikut:
Hasil akhir footer yang dibuat menggunakan editor WordPress Gutenberg.
Pada tutorial ini, terdapat empat langkah untuk membuat footer hingga selesai, yaitu membuat kolom, menambahkan bagian deskripsi, membuat bagian menu navigasi, dan mengatur latar belakang. Berikut ini adalah detailnya!
Daftar Isi
Langkah 1: Membuat Kolom Footer
Langkah pertama dalam membuat footer adalah menambahkan kolom. Kolom berfungsi sebagai pemisah antar bagian footer, memastikan bahwa setiap bagian terlihat teratur. Berikut ini cara membuat kolom untuk footer:
- Di halaman Admin WP, klik Appearance > pilih Editor.
- Kemudian, pilih Template Parts > pilih menu Footer > klik ikon Edit.
- Pada blok yang ada, klik tanda [+] > ketik kolom pada kotak pencarian > pilih Columns untuk membuat kolom.
- Pilih opsi kolom 50/50 untuk membuat kolom dengan dua bagian.
- Selesai, Anda telah berhasil membuat footer dua kolom. Satu kolom untuk deskripsi dan satu kolom lainnya untuk navigasi.
Langkah 2: Membuat Deskripsi Footer
Langkah selanjutnya adalah menggunakan kolom kanan footer untuk deskripsi. Bagian ini bisa mencakup nama perusahaan, alamat, dan deskripsi singkat tentang perusahaan. Berikut ini cara membuat bagian deskripsi footer:
- Pada kolom kiri footer, klik [+] > pilih Heading > lalu masukkan judul untuk deskripsi footer.
cara membuat footer menggunakan Gutenberg WordPress
- Klik List View > pilih Heading yang telah dibuat > klik tiga titik > pilih Insert after untuk menambahkan deskripsi di bawahnya.
- Setelah blok paragraf muncul, isikan deskripsi pada footer.
- Selanjutnya, edit heading pada footer dengan cara klik heading > klik Settings di pojok kanan atas > pada bagian Size Custom, klik Setting > masukkan ukuran header. Kami menggunakan ukuran 30.
- Selanjutnya sesuaikan juga deskripsi pada footer, dengan cara yang sama, klik blok paragraf deskripsi > klik Setting > pada bagian Typography, klik Setting > masukkan ukuran yang sesuai. Kami menggunakan ukuran 20.
- Selesai. Bagian untuk mengisi deskripsi di footer sekarang sudah selesai.
Langkah 3: Membuat Menu Navigasi di Footer
Footer sering kali digunakan untuk menampilkan navigasi tambahan atau menu terkait seperti kebijakan privasi, syarat dan ketentuan, sitemap, atau halaman lain yang mungkin tidak disertakan dalam menu utama.
Sekarang, Anda dapat menambahkannya di bagian menu navigasi. Berikut cara membuat menu navigasi di footer:
- Di kolom kanan footer, klik [+] > pilih Advanced Columns.
membuat menu navigasi di footer
- Pilih kolom 4-4-4. Kolom ini terdiri dari 3 bagian.
- Klik [+] pada kolom pertama > pilih Heading.
- Isi Heading dengan judul menu > klik Settings > pada bagian Typography, klik Setting > masukkan ukuran yang diinginkan. Kami menggunakan ukuran 25.
- Tambahkan daftar menu dengan mengklik View List di sisi kiri > klik tiga titik pada judul menu > pilih Insert after.
- Setelah blok muncul, klik [+] > pilih Advanced List.
- Isi daftar pertama dengan nama menu > klik ikon Settings.
- Klik toggle Enable Item Link > klik Link Options > pada kolom URL, masukkan “#” jika belum ada halaman yang akan ditautkan > kemudian klik Close. Nantinya, Anda dapat mengganti teks “#” dengan URL halaman jika sudah tersedia.
- Tambahkan judul menu dan item menu ke dua kolom yang berdekatan, dengan menggunakan metode yang sama.
- Setelah ditambahkan, klik salah satu item menu > buka pengaturan > Anda dapat menyesuaikan ikon List Indicator menggunakan toggle.
- Selanjutnya, gabungkan seluruh bagian footer ke dalam satu grup dengan membuka List View di pojok kiri atas > klik pada tiga titik di seluruh bagian Columns > pilih Group.
- Untuk merapikan footer, klik pada tiga titik di seluruh bagian Group > klik Settings > pada bagian Width, masukkan ukuran 1200. Kemudian, klik Simpan.
Langkah 4: Menambahkan Latar Belakang, Hak Cipta, & Footer Padding
Terakhir, untuk membuat bagian footer lebih menarik secara visual, Anda dapat menambahkan warna latar belakang ke footer. Selain itu, Anda dapat menyertakan informasi hukum seperti pemberitahuan hak cipta.
Jangan lupa untuk memberikan padding pada footer untuk memberikan tampilan yang rapi. Berikut ini adalah cara menambahkan latar belakang, hak cipta, dan padding ke footer:
- Buka List View di pojok kiri atas > pilih footer Group > klik Settings > klik opsi Style > pilih Background > sesuaikan warna latar belakang sesuai dengan keinginan Anda.
- Selanjutnya, tambahkan hak cipta dengan mengklik tiga titik pada bagian Columns > pilih Insert after > kemudian masukkan teks hak cipta.
- Untuk meratakan teks di tengah, klik blok Hak Cipta > pilih pengaturan perataan paragraf > lalu pilih Align Text Center (Ratakan teks di tengah).
- Atur padding dengan memilih seluruh footer > klik Settings, lalu pilih Style, dan gulir ke bawah > di bagian Dimensions, klik Settings > masukkan ukuran padding. Kami menggunakan ukuran 20.
- Selesai. Anda telah berhasil membuat latar belakang footer, hak cipta, dan padding.
Kesimpulan
Demikianlah tutorial Gutenberg WordPress tentang cara membuat footer di WordPress. Footer adalah bagian penting dari sebuah website yang menyediakan informasi tambahan dan memudahkan navigasi bagi pengunjung.
Langkah selanjutnya dalam membuat halaman sederhana menggunakan Gutenberg WordPress adalah mengkonfigurasi komponen homepage.
Yup, membangun sebuah website memang membutuhkan waktu yang tidak sebentar. Bahkan untuk membuat website dengan desain dan fungsionalitas dasar saja, bisa memakan waktu.
Jika Anda tidak ingin menghabiskan banyak waktu untuk membuat website, Anda bisa mempercayakannya pada Tonjoo Team, sebuah agensi software profesional yang sudah berpengalaman dalam pembuatan website baik untuk pemerintahan hingga start-up.
Mari berdiskusi lebih lanjut dengan menghubungi kami!
Baca artikel terkait WordPress, WooCommerce, plugin, dan pengembangan website oleh Moch. Nasikhun Amin di blog Tonjoo.
Updated on May 26, 2024 by Hanif Mufid
