Membuat halaman beranda dengan tema blok

Dalam tutorial ini, kita akan membuat halaman beranda menggunakan tema blok, tanpa plugin atau kode apa pun.

Hasil pembelajaran

1. Mengatur halaman beranda statis.
2. Membuat header dan footer untuk template halaman Anda.
3. Menambahkan berbagai jenis blok dan pola ke halaman beranda Anda dan memodifikasinya.
4. Menggunakan toolbar blok dan pengaturan sidebar.

Pertanyaan pemahaman

1. Template mana yang ingin Anda terapkan pada halaman beranda Anda?
2. Apakah Anda terbiasa menggunakan pola header dan footer?
3. Apa fungsi dari blok Konten Pos?

Transkrip

Hai dan selamat datang di Belajar WordPress. Hari ini kita akan membuat halaman beranda dengan tema blok. Halaman beranda adalah pusat kegiatan utama situs Anda dan berfungsi sebagai wajah dari suatu brand. Hal ini harus dapat mendorong pengunjung untuk menggali lebih dalam ke situs Anda, dan tentu saja menarik perhatian mereka. Dalam sesi hari ini, kita akan mengatur halaman beranda statis, membuat komponen template header dan footer, menghapus judul situs, dan membuat halaman beranda menggunakan editor blok. Kita akan mempraktekkan membuat ulang halaman beranda yang sudah saya buat ini. Saya hanya menggunakan blok untuk membuat halaman beranda tentang catatan perjalanan seperti ini, dan saya telah menyiapkan strategi untuk menarik pembaca lebih dalam ke situs web tersebut.

Pertama-tama, saya sudah membuat tiga pos. Saya sudah menambahkan semua media yang akan saya gunakan untuk situs web saya. Saya sudah membuat sejumlah halaman untuk menu navigasi saya, saya sudah memasang tema blok Twenty Twenty-Two, dan sekarang kita akan melanjutkan ke Pengaturan lalu mengeklik menu Membaca.

Langkah selanjutnya adalah mengatur halaman beranda statis, pilih sebuah halaman statis dan atur halaman Beranda dan halaman Pos Anda, lalu klik Simpan perubahan. Saat kita kembali ke layar daftar halaman, kita akan melihat sekarang tertulis halaman Pos di sebelah blog dan Halaman depan di sebelah beranda. Ketika kita membuka halaman beranda kita, kita akan melihat bahwa template default telah ditetapkan padanya, yang mana adalah template halaman, dan artinya halaman tersebut akan memiliki header dan footer yang sama dengan halaman lain. Jika Anda mau, Anda bisa membuat template unik khusus hanya untuk halaman beranda dengan mengeklik Baru. 

Setelah mengatur halaman beranda statis Anda, buka Tampilan dan klik Editor. Langkah ini akan membawa Anda ke Editor Situs. Klik pada Tampilan Daftar untuk melihat struktur halaman tersebut dengan lebih jelas, kemudian hal pertama yang akan kita lakukan adalah menghapus judul pos. Lalu jika kita mengklik konten pos, ingatlah bahwa di sinilah konten halaman Anda akan ditampilkan. Saya akan menggunakan pola untuk mengganti header yang sekarang. Jadi setelah Anda memilih blok induk, klik Ganti lalu cari pola relevan yang sesuai dengan kebutuhan Anda. Saya mencari pola header yang memiliki logo situs di tengah dan menu navigasi di samping. Kemudian saya akan menambahkan tautan ke halaman saya serta logo situs. Terakhir, saya ingin mengubah warna latar belakangnya menjadi putih dan warna teks serta tautannya menjadi hitam.

Sekarang kita bisa mengikuti proses yang sama untuk footer, pilih blok Footer, klik Ganti dan temukan pola footer yang sesuai. Tadaa!

Kita sudah selesai menyiapkan template, sekarang kita bisa mulai menambahkan konten ke situs kita. Jadi klik ikon WordPress atau ikon situs dan kembalilah ke dasbor. Bukalah halaman beranda dan sekarang kita bisa mulai berkreasi. Hal pertama yang ingin saya tambahkan adalah gambar andalan, jadi saya akan menambahkan sebuah pola. Saya akan membuka direktori pola dan mengetik “Hero banner”. Setelah Anda menemukan pola yang Anda cari, Anda cukup menyalin dan menempelkannya ke halaman Anda, kemudian mulai memodifikasinya.

Pertama-tama, saya akan mengganti gambar latar belakangnya, mengubah tingkat transparansinya dan kemudian mulai melakukan penyesuaian pada kontennya, dan dalam waktu singkat, Anda akan memiliki sebuah gambar utama dengan teks yang menyertainya. Selanjutnya, saya akan memasukkan blok Galeri dan memilih tiga gambar dari Pustaka Media saya. Kemudian saya akan mengklik Tampilan Daftar, memilih blok Galeri, mengubah perataannya menjadi lebar penuh dan jarak bloknya menjadi nol.

Setelah blok Galeri, saya ingin menambahkan penawaran khusus, dan untuk melakukan ini saya akan menggunakan judul dan blok Kolom. Saya akan lanjut dengan mengetik “Penawaran khusus”, mengubah perataannya ke tengah dan menekan enter. Kemudian saya akan menambahkan blok Kolom dengan dua kolom. Saya akan membuka Tampilan Daftar untuk memastikan saya telah memilih blok induk. Saya akan mengubah perataan bloknya menjadi lebar penuh. Di kolom kiri, saya akan menambahkan gambar, saya akan mengubah gayanya menjadi membulat, menambahkan keterangan, saya akan menambahkan blok Tombol dan menambahkan teks yang memberitahukan bahwa Anda akan mendapat diskon 15% dengan penawaran khusus ini. Saya akan mengubah perataannya menjadi ke tengah, radiusnya menjadi 100, menambahkan tautan dan mengubah latar belakangnya menjadi hitam; lalu melakukan hal yang persis sama di kolom kanan. Sebelum saya melanjutkan, saya ingin membuat jarak menggunakan blok Spasi.

Sekarang saya akan memasukkan blok Pengulangan Kueri untuk menampilkan beberapa pos terbaru saya. Jadi mari tambahkan judul dan beri nama “Where to next”, saya akan mengubah perataannya menjadi lebar penuh dan perataan teksnya menjadi ke tengah. Setelah menekan Enter, saya akan memasukkan blok Pengulangan Kueri dan mengklik Mulai kosong. Kemudian saya akan memilih opsi tanggal dan judul gambar serta tampilan kisi. Lalu saya akan mengubah perataannya menjadi lebar penuh. Pilih salah satu gambar dan di pengaturan sidebar Anda, ubah ketinggiannya untuk memastikan bahwa semua gambar memiliki ukuran yang persis sama dan sesuai dengan kebutuhan Anda. Terakhir, klik Tampilan Daftar dan hapus semua blok yang menurut Anda tidak penting. Misalnya, blok Penomoran halaman, blok Tidak ada hasil, dan blok Tanggal pos.

Setelah menambahkan satu lagi blok Spasi, saya akan melanjutkan dengan memasukkan blok Sampul. Saya akan memilih salah satu gambar dari Pustaka Media saya, mengubah perataannya menjadi lebar penuh dan kemudian memperbesarnya, dan memodifikasi pemilih titik fokusnya sesuai yang saya inginkan. Saya juga akan mengubah tingkat transparansinya menjadi sedikit lebih gelap. Dan setelah kita selesai melakukannya, kita bisa mulai menambahkan konten kita. Dalam hal ini, saya akan memperkenalkan pada pembaca beberapa tujuan wisata terpopuler di tahun 2022. Seperti yang bisa Anda lihat, Anda bisa mengubah ukuran teks di pengaturan sidebar. Kemudian saya akan menambahkan blok Tombol. Saya akan mengubah teksnya menjadi tebal, warna teksnya menjadi hitam dan warna latar belakangnya menjadi putih. Kemudian saya akan mengubah radiusnya menjadi 100 dan saya akan menambahkan tautan.

Selanjutnya, kita akan memperkenalkan tim kita pada pengunjung, jadi saya akan menambahkan blok Media dan Teks. Setelah mengubah perataannya menjadi lebar penuh, kita akan menambahkan gambar di sisi kiri serta teks dan tombol yang sesuai di sisi kanan. Kita akan mengikuti langkah atau proses yang sama seperti pada contoh sebelumnya.

Selanjutnya, saya ingin menyisipkan pola call-to-action, jadi klik Telusuri semua lalu buka pola. Saya akan mencari pola tombol, dan begitu Anda mengklik pola tersebut, pola itu akan langsung dimasukkan ke laman Anda. Dan sekarang saya akan melanjutkan dan memodifikasi kontennya. Menyiapkan langganan buletin Anda adalah cara lain agar dapat lebih terlibat dengan pengunjung situs Anda dan berinteraksi dengan mereka. Saya benar-benar hanya mengubah teksnya dan ingatlah untuk menambahkan tautan URL pada tombol Anda.

Terakhir, saya akan menambahkan blok Galeri dengan enam gambar. Pastikan Anda memilih blok induk di Tampilan Daftar dan ubah galeri Anda untuk menampilkan enam kolom. Kemudian lihatlah ke bawah dan atur jarak blok ke nol dan begitu Anda mengubah perataannya menjadi lebar penuh, maka Anda sudah siap. Saat saya mengklik Pratinjau di tab baru, saya akan dapat melihat halaman beranda saya yang sudah selesai, yang mana dibuat tanpa plugin atau kode apa pun.

Sukses selalu dengan usaha Anda dalam menggunakan tema blok untuk membuat halaman beranda dan situs web Anda sendiri.