Gutenberg WordPress (Part 6): Membuat Section Logo Partner

Nasikhun A. 23 Jun 2023 3 Menit 0

Setelah berhasil membuat Slider atau Carousel, di tutorial cara menggunakan Gutenberg WordPress ke-6 ini, kita akan fokus membuat section logo partner pada halaman Home.

Website membutuhkan logo partner untuk menunjukkan bahwa pemiliknya telah bekerja sama dengan perusahaan atau brand tertentu. Elemen ini berguna untuk membangun kredibilitas perusahaan atau brand di mata pengunjung.

Di sini kita membuat section yang sederhana. Namun Anda dapat mengembangkannya sesuai selera. Section logo partner yang kita buat nantinya akan terlihat seperti berikut ini:

cara membuat section logo partner

Hasil akhir pembuatan section logo partner menggunakan Gutenberg WordPress.

Ada empat langkah untuk membuat section logo partner, mulai dari (1) membuat kerangka heading dan deskripsi, (2) membuat kerangka untuk logo partner, (3) mengisi kerangka dengan text dan logo, dan (4) melakukan pengaturan sederhana.

Langkah 1: Membuat Kerangka Heading dan Deskripsi

Pada langkah pertama ini, kita membuat kerangka yang akan menopang elemen-elemen dari section logo partner, yakni khusus untuk heading dan deskripsinya.

Di sini, Anda akan mengguankan beberapa block dari Editor Gutenberg, yakni block Stack, Heading, dan Paragraph. Berikut cara memulainya:

  1. Buka Page yang sudah Anda buat sebelumnya, yakni yang sudah berisi Slider. Kemudian scroll ke bagian bawah.
    gutenberg wordpress membuat section logo partner
  2. Buka List View terlebih dahulu untuk mempermudah editing > klik [+] pada bagian block > ketika stack di Search Box > klik Stack. Stuck berfungsi untuk membuat block atas bawah menjadi satu.
    gutenberg wordpress membuat section logo partner
  3. Pada block Stack yang sudah muncul, klik [+] > pilih block Heading. Heading digunakan untuk meletakkan judul section.
    gutenberg wordpress membuat section logo partner
  4. Selanjutnya, klik [+] di bawah heading > pilih block Paragraph. Paragraf digunakan untuk menambahkan deskripsi atau keterangan pada section.
    gutenberg wordpress membuat section logo partner
  5. Atur letak Heading dan Paragraph di tengah dengan klik Align text center pada menu toolbar.
    gutenberg wordpress membuat section logo partner

Setelah kerangka Heading dan Paragraph jadi, Anda sebenarnya bisa langsung mengisinya. Jika masih belum mengetahui akan ditulis apa, Anda bisa menggunakan text Lorem Ipsum.

Langkah 2: Membuat Kerangka untuk Logo Partner

Selanjutnya, kita akan membuat kerangka sebagai tempat meletakka logo partner. Untuk penyusunannya, kita memanfaatkan block Row, dan Image. Berikut langkah-langkahnya:

  1. Klik bagian bawah paragraf dan klik [+] > ketik row di Search Box > pilih block Row. Row berfungsi untuk memasukkan elemen block ke dengan baris ke samping.
    cara membuat section logo partner di wordpress
  2. Selanjutnya, klik [+] > pilih block Image.
    cara membuat section logo partner di wordpress
  3. Gandakan dengan cara klik titik tiga pada block Image di List View > pilih Duplicate > lakukan hingga 4 kali, atau sesuai dengan kebutuhan.
    cara membuat section logo partner di wordpress
  4. Hasilnya akan seperti berikut ini:
    cara membuat section logo partner di wordpress

Sampai tahap ini, kerangka logo sudah jadi. Anda bisa membuat tempat untuk image logo sesuai kebutuhan. Caranya hanya melakukan duplicate pada block Image yang sudah ada.

Langkah 3: Mengisi Text dan Logo Partner

Sampai tahap ini, kerangka untuk text dan image sudah selesai. Saatnya Anda memasukkan teks judul section, deskripsi, dan logo partnernya. Berikut tahapannya:

  1. Isi bagian block text Heading dan Paragraph sesuai kebutuhan.
    cara membuat section logo partner di wordpress
  2. Klik salah satu block Image. Anda dapat memilih cara memasukkannya melalui Upload, Media Library, atau Inser from URL. Di sini kami menggunakan Upload.
    cara membuat section logo partner di wordpress
  3. Pilih Logo partner yang hendak dimasukkan > klik Open. Untuk percobaan, Anda dapat menggunakan logo yang kami sediakan di sini.
    cara membuat section logo partner di wordpress
  4. Hasilnya seperti berikut ini:
    cara membuat section logo partner di wordpress

Semau konten untuk section logo partner sudah berhasil Anda masukkan. Namun tampilannya masih belum rapi dan tidak ada dekorasi. Maka Anda perlu melakukan pengaturan pada section tersebut.

Langkah 4: Melakukan Pengaturan pada Section Logo Partner

Pada step ini, Anda akan melakukan pengaturan section logo partner dengan cara melakukan grouping pada setiap elemen, mengatur ukuran, hingga memberi warna pada background. Ikuti langkah berikut ini:

  1. Pada List View di sebelah kiri, klik Stack dan Row yang sebelumnya dibuat > klik titik tiga > pilih opsi Group. Langkah ini mempermudah dalam melakukan pengaturan.
    membuat section logo partner
  2. Setelah semua elemen menjadi satu, klik Group logo partner > klik Settings di sebelah kanan atas > pada bagian Wide, masukkan ukuran 1200.
    membuat section logo partner
  3. Selanjutnya, beri warna pada backgroud dengan klik Style (ikon lingkaran hitam-putih) > pilih menu Background > pilih warna sesuai kebutuhan. Kami menggunakan warna dengan index color ABB8C3.membuat section logo partner
  4. Lihat pada bagian Dimensions, atur Padding sesuai keinginan. Kami menggunakan jarak padding 1.cara membuat section logo partner
  5. Kemudian, klik Group section logo partner > klik Align pada toolbar yang muncul > pilih opsi Wide width (dengan ukuran yang sudah diatur sebelumnya).
    cara membuat section logo partner
  6. Atur posisi logo dengan klik Row > klik pengaturan posisi pada toolbar > pilih Justify items center untuk membuat elemen logo rata tengah.
    cara membuat section logo partner
  7. Selesai. Selanjutnya Anda bisa cek hasil akhir dari pembuatan section logo partner dengan klik Preview.

Hasil akhir dari pembuatan section logo partner pada halaman homepage seperti berikut ini:

cara membuat section logo partner

Membuat section logo partner dengan Gutenberg WordPress.

Penutup

Demikian tutorial cara membuat section logo partner pada halaman homepage Anda. Selanjutnya, ada bagian homepage lagi yang perlu Anda tambahkan, yakni membuat section post pada homepage.

Pembuatan website dengan tampilan dan fungsionalitas yang baik memang tidak mudah. Apabila tidak ingin kerepotan, Anda dapat mempercayakan pembuatannya kepada jasa profesional seperti Tim Tonjoo. Sehingga Anda bisa lebih menghemat waktu.

Kami telah berpengalaman menangani pengembangan website berbasis WordPress seperti Hello Health Group, Hello Sehat, atau Hello Doktor. Jika ingin membuat website serupa, yuk, langsung menghubungi kami melalui kontak Tonjoo.


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.

A late specializer, data-informed technical writer who is constantly hungry for growth. A lifelong learner who is interested in the marriage between creativity and technology.

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.

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