Setelah sebelumnya berhasil membuat Slider atau Carousel, pada tutorial cara menggunakan Gutenberg WordPress, pada bagian 6 ini kita akan fokus pada cara membuat Client Logo Section pada Home Page.
Sebuah website membutuhkan bagian logo klien untuk menunjukkan bahwa pemiliknya telah berkolaborasi dengan perusahaan atau brand tertentu. Elemen ini berguna untuk membangun kredibilitas perusahaan atau brand di mata pengunjung.
Di sini kita akan membuat bagian yang sederhana, namun Anda dapat mengembangkannya sesuai dengan preferensi Anda. Bagian logo klien yang akan kita buat akan terlihat seperti berikut ini:
Hasil akhir pembuatan bagian logo klien menggunakan editor Gutenberg WordPress.
Ada empat langkah untuk membuat bagian logo klien, mulai dari (1) membuat kerangka untuk judul dan deskripsi, (2) membuat kerangka untuk logo klien, (3) mengisi kerangka dengan teks dan logo, dan (4) melakukan penyesuaian sederhana.
Langkah 1: Membuat Kerangka untuk Judul dan Deskripsi
Pada langkah pertama ini, kita akan membuat kerangka kerja untuk mendukung elemen-elemen pada bagian logo klien, khususnya untuk judul dan deskripsinya.
Di sini, Anda akan menggunakan beberapa blok dari Editor Gutenberg, yaitu blok Stack, Heading, dan Paragraph. Berikut ini cara untuk memulai:
- Buka Halaman yang telah dibuat sebelumnya, yang sudah berisi Slider. Kemudian gulir ke bagian bawah.
- Buka List View terlebih dahulu untuk memudahkan pengeditan > klik [+] pada bagian blok > ketik stack pada Search Box > klik Stack. Blok Stack digunakan untuk menggabungkan blok atas dan bawah menjadi satu.
- Pada blok Stack yang telah muncul, klik [+] > pilih blok Heading. Heading digunakan untuk menempatkan judul bagian.
- Selanjutnya, klik [+] di bawah heading > pilih blok Paragraph. Paragraf digunakan untuk menambahkan deskripsi atau informasi tambahan pada bagian.
- Sejajarkan Heading dan Paragraph di tengah dengan mengklik Align text center di menu toolbar.
Setelah membuat kerangka untuk Heading dan Paragraph, Anda dapat melanjutkan untuk mengisi konten. Jika Anda masih ragu tentang apa yang harus ditulis, Anda dapat menggunakan teks Lorem Ipsum.
Langkah 2: Membuat Kerangka untuk Logo Klien
Selanjutnya, kita akan membuat kerangka kerja untuk menempatkan logo klien. Untuk ini, kita akan memanfaatkan blok Row dan Image. Berikut adalah langkah-langkahnya:
- Klik di bawah paragraf dan klik [+] > ketik row di Kotak Pencarian > pilih blok Row. Blok Baris digunakan untuk menyisipkan blok secara horizontal dalam satu baris.
- Selanjutnya, klik [+] > pilih blok Image.
- Duplikat dengan mengklik tiga titik pada blok Image di Tampilan Daftar > pilih Duplicate > ulangi proses ini sebanyak 4 kali, atau sesuai kebutuhan.
- Hasilnya akan terlihat sebagai berikut:
Hingga langkah ini, kerangka untuk logo sudah siap. Anda dapat membuat ruang untuk gambar logo sesuai kebutuhan dengan menduplikasi blok Gambar yang ada.
Langkah 4: Menyesuaikan Bagian Klien Logo
Pada langkah ini, Anda akan menyesuaikan bagian klien logo dengan mengelompokkan setiap elemen, menyesuaikan ukuran, dan menambahkan warna latar belakang. Ikuti langkah-langkah berikut ini:
- Pada Tampilan Daftar sisi kiri, klik Stack dan Row yang telah dibuat sebelumnya > klik tiga titik > pilih opsi Group. Langkah ini membuatnya lebih mudah untuk melakukan penyesuaian.
- Setelah semua elemen dikelompokkan, klik pada logo client Group > klik pada Pengaturan di sudut kanan atas > di bagian Lebar, masukkan ukuran 1200.
- Selanjutnya, tambahkan warna pada latar belakang dengan mengklik Style (ikon lingkaran hitam dan putih) > pilih menu Background > pilih warna yang diinginkan. Kami menggunakan warna dengan kode hex ABB8C3.
- Lihatlah bagian Dimensi, sesuaikan Padding sesuai dengan preferensi Anda. Kami menggunakan nilai padding sebesar 1.
- Kemudian, klik pada bagian Group logo client > klik Align pada toolbar yang muncul > pilih opsi Wide width (dengan ukuran yang telah diatur sebelumnya).
- Sesuaikan posisi logo dengan mengklik Row > klik pada pengaturan posisi di toolbar > pilih Justify items center untuk menyelaraskan elemen logo di tengah.
- Selesai. Selanjutnya, Anda dapat memeriksa hasil akhir pembuatan bagian klien logo dengan mengklik Preview.
Hasil akhir pembuatan bagian klien logo di beranda adalah sebagai berikut:
Hasil akhir pembuatan bagian logo klien di situs web menggunakan editor WordPress Gutenberg.
Kesimpulan
Demikianlah tutorial tentang cara membuat bagian klien logo di halaman Beranda Anda. Selanjutnya, ada bagian lain yang perlu Anda tambahkan ke beranda Anda, yaitu bagian posting.
Membuat situs web dengan desain dan fungsionalitas yang baik bukanlah tugas yang mudah. Jika Anda tidak ingin repot, Anda bisa mempercayakan pembuatannya pada layanan profesional seperti Tonjoo. Dengan cara ini, Anda bisa menghemat lebih banyak waktu.
Kami telah berpengalaman dalam mengembangkan website berbasis WordPress, seperti Hello Health Group, Hello Sehat, dan Hello Dokter. Jika Anda ingin membuat website serupa, jangan ragu untuk menghubungi kami melalui kontak Tonjoo.
Baca artikel terkait WordPress, WooCommerce, plugin, dan pengembangan website oleh Moch. Nasikhun Amin di blog Tonjoo.
Updated on July 17, 2024 by Hanif Mufid
