Setelah sebelumnya tutorial WordPress Gutenberg terkait membuat post list/daftar postingan telah berhasil dikembangkan sebelumnya. Sekarang saatnya membuat Gallery Section di homepage.
Gallery Section di beranda/homepage berfungsi untuk menampilkan beberapa gambar yang dapat menarik perhatian pengunjung, sehingga berpotensi meningkatkan keterlibatan pengguna di website.
Pada tutorial kali ini, hasil akhir dari pembuatan gallery section akan tampak seperti gambar di bawah ini:
Hasil akhir dari bagian Galeri di Homepage. Dibuat menggunakan Gutenberg Editor, WordPress.
Jika Anda sudah siap, ikuti langkah-langkah di bawah ini untuk membuat bagian galeri, yang secara umum dibagi menjadi dua bagian: (1) menambahkan Widget Galeri dan (2) melakukan pengaturan sederhana.
Langkah 1: Menambahkan “Gallery Widget” dan Mengunggah Foto
Untuk membuat bagian ini, kita akan memanfaatkan blok Gallery Widget. Blok ini adalah fitur dari Gutentor, plugin yang Anda instal sebelumnya saat membuat header.
Untuk memulainya, buka halaman Home melalui WP Admin > pilih menu Pages > pilih halaman yang sudah Anda isi dengan header, footer, slider, dan daftar postingan (list of posts). Kemudian, ikuti langkah-langkah di bawah ini:
- Buka List View agar blok-blok tersebut dapat dengan mudah dikelola.
- Klik di bagian bawah area editor, lalu klik [+] > pilih Heading untuk membuat judul galeri. Isi judul sesuai dengan keinginan Anda. Kita akan menggunakan judul “Galeri”.
- Klik di bawah judul Galeri, lalu klik [+] > ketik galeri di kotak pencarian > pilih blok Gallery Widget.
- Selanjutnya, tambahkan gambar dengan mengklik Upload Image untuk unggah gambar. Anda dapat menggunakan gambar yang disediakan di sini. Untuk menambahkan lebih banyak gambar, klik Add Item > lalu klik Upload Gambar. Tambahkan gambar sebanyak yang diperlukan.
- Buka Pengaturan di sudut kanan atas > klik Block Title > nonaktifkan tombol Enable Block Title untuk mengaktifkan judul block. Langkah ini diperlukan untuk menghapus judul blok default.
- Gulir ke bawah dan klik Block Items > klik Template > pilih salah satu template galeri yang tersedia.
- Gulir lagi ke bawah. Nonaktifkan tombol Enable Title dan Enable Description.
Nah, pada titik ini, Anda telah berhasil menambahkan Galeri ke halaman arahan atau beranda Anda. Namun, jika Anda melihat pratinjaunya di front-end, tampilannya mungkin belum rapi. Jadi, Anda perlu merapikan Galeri.
Langkah 2: Merapikan Galeri
Merapikan Gallery Section penting untuk memastikan penampilannya konsisten dengan blok di atasnya. Selain itu, kita akan menambahkan warna latar belakang untuk membedakan bagian Gallery dari yang lainnya. Berikut ini caranya:
- Pada List View, pilih blok Heading dan Gallery Widget > klik tiga titik > pilih Group. Membuat grup untuk seluruh blok Galeri akan membuatnya lebih mudah dikelola.
- Selanjutnya, atur width/lebar Galeri ke 1200.
- Klik Group Gallery > pilih pengaturan lebar pada toolbar > pilih Wide width.
- Beri warna latar belakang dengan cara klik Style > klik Background > pilih warna yang diinginkan. Kami akan menggunakan warna dengan kode F6F6F6.
- Atur ukuran teks judul dengan cara klik Heading block > pada bagian Typography, lalu pilih ukuran L (Large). Anda juga dapat memilih ukuran sesuai dengan kebutuhan Anda.
- Selesai! Anda dapat menyimpan draft dan melakukan pratinjau untuk melihat hasil akhirnya. Inilah tampilannya di bagian depan.
Kesimpulan
Demikianlah tutorial cara membuat Gallery Section di homepage/beranda menggunakan editor WordPress Gutenberg dan salah satu plugin blok terlengkap, Gutentor.
Jika Anda sudah berhasil mencapai tahap ini, langkah selanjutnya adalah membuat homepage menjadi mobile-friendly dengan membuat header dan footer menjadi responsif.
Namun, proses pembuatan situs web memang membutuhkan waktu. Jangan biarkan hal ini membuat Anda enggan mengejar bisnis Anda karena kebutuhan akan situs web yang berfungsi dengan baik.
Anda bisa mempercayakan pembuatan website kepada Tim Tonjoo, tim pengembang software profesional yang sudah berpengalaman dalam menangani website perusahaan start-up maupun korporasi multinasional.
Mari diskusikan lebih lanjut dengan menghubungi kami untuk membuat website yang sesuai dengan bisnis Anda!
Updated on July 31, 2024 by Hanif Mufid
