Membangun Situs Ulasan Produk Dengan Ekstra – Bagian 2

Selamat datang di bagian 2 dari seri 4 bagian ini tentang cara mengembangkan situs ulasan produk menggunakan Extra. Jika Anda memeras otak tentang cara memulai mengembangkan situs ulasan produk, seri ini cocok untuk Anda. Dengan fungsi ulasan bawaan dan kategorisasi pos cerdas, Extra dilengkapi secara khusus untuk membuat ulasan yang tampak hebat, template pos produk, menu mega, dan tata letak kategori dalam hitungan menit. Bergabunglah dengan saya saat kami menjelajahi kekuatan Extra.

Di bagian 1 seri ini, kami memulai perjalanan kami membangun situs ulasan produk dengan menyiapkan Opsi Tema dan Pengaturan Penyesuai Tema.

Hari ini kita akan mulai bekerja dengan menambahkan ulasan produk pertama kita sebagai postingan baru dan menyesuaikan tata letak postingan untuk postingan tersebut menggunakan Divi Builder dan Pengaturan tema Ekstra. Setelah Anda menyelesaikan tutorial ini, Anda akan memiliki template posting tersimpan yang dapat Anda tarik dari perpustakaan Anda untuk membuat sisa posting Anda dengan mudah.

Berikut adalah Sneak Peek dari Apa yang Akan Kami Bangun

Mempersiapkan Elemen Desain

Karena kami akan menambahkan produk kami di bagian seri ini, Anda akan memerlukan gambar produk Anda. Untuk tutorial ini, saya akan memiliki 4 kategori dengan 3 produk di setiap kategori jadi saya akan menggunakan total 12 gambar. Saya menggunakan gambar stok dari shutterstock dengan latar belakang putih untuk memberikan tampilan yang lebih bersih.

Untuk mendesain tata letak posting kita akan menggunakan Visual Builder dan sedikit CSS Kustom.

Mari kita mulai.

Membangun Situs Review Produk dengan Ekstra – Bagian 2

Berlangganan Saluran Youtube Kami

Menambahkan Ulasan Produk Pertama Anda sebagai Posting Baru

Dari dasbor WordPress, buka Posting > Add New .

Setiap posting akan menjadi review produk Anda sehingga nama posting Anda harus nama produk Anda. Karena produk saya akan menjadi pelacak kebugaran, saya akan memasukkan "Pelacak Kebugaran" sebagai judul posting saya.

Catatan : jika Anda belum melakukannya, sekarang adalah saat yang tepat untuk mengatur pengaturan tautan permanen Anda ke opsi "Nama Postingan" sehingga URL Anda hanya akan berisi nama produk (tentu saja preferensi Anda).

Selanjutnya, klik tombol "Gunakan Divi Builder" dan kemudian tombol "Gunakan Visual Builder" untuk menyebarkan Visual Builder.

Dari Visual Builder, masukkan baris satu kolom dan tambahkan modul teks ke kolom.

Di tab konten Pengaturan Modul Teks, masukkan html berikut di kotak konten (pastikan Anda bekerja di tab "teks" dan bukan tab "visual"):

<h2 class="subtitle fancy"><span>Product Description</span></h2>

Ini akan berfungsi sebagai subtitle "mewah" kami untuk bagian yang berbeda. Kami akan menatanya dengan CSS khusus nanti.

Tepat di bawah tag h2 Anda dapat menambahkan teks deskripsi produk Anda. Saya menggunakan beberapa "lorem ipsum" untuk saat ini.

Tambahkan baris satu kolom lagi di bawah baris Anda saat ini dan tambahkan modul teks lain di dalamnya. Di Pengaturan Modul Teks, tambahkan subtitle html lain dengan memasukkan tag h2 "Pro & Kontra" berikut di tab teks bagian konten Anda.

<h2 class="subtitle fancy"><span>Pros & Cons</span></h2>

Ini akan memulai bagian Pro dan Kontra dari ulasan produk Anda.

Selanjutnya tambahkan baris satu-setengah-setengah (dua kolom) di bawah baris sebelumnya. Di kolom kiri tambahkan modul teks dan beri judul h3 dengan teks “Pro”.

Sekarang duplikat modul teks itu dan seret modul yang digandakan ke kolom kanan. Ubah judul h3 di modul teks baru menjadi "Kontra".

Tip : Di Visual Builder Anda cukup mengklik kotak teks dan mengetikkan judul baru alih-alih membuka pengaturan.

Selanjutnya kita akan menggunakan modul uraian untuk menambahkan beberapa sub-item di bawah judul Pro dan Kontra.

Di kolom kiri, di bawah Modul Teks “Pro”, tambahkan Modul Blurb. Di tab konten Pengaturan Blurb, tambahkan sebaris teks (saya menggunakan teks tiruan untuk saat ini) di kotak konten.

Kemudian gulir ke bawah dan pilih "Gunakan Ikon". Di kotak Ikon yang muncul, pilih simbol plus.

Klik ke tab Desain dan perbarui yang berikut:

Warna Ikon: #ffffff

Ikon Lingkaran: YA

Warna Lingkaran: #5bd999

Penempatan Gambar/Ikon: Kiri

Simpan Pengaturan

Gandakan (atau salin) modul uraian itu dan seret (atau tempel) di bawah modul teks "Kontra". Kemudian update tab Blurb Settings Design dengan warna lingkaran berikut: #e6567a

Simpan Pengaturan

Sekarang duplikat modul uraian di setiap kolom beberapa kali karena kami tidak tahu berapa banyak yang mungkin Anda perlukan untuk produk tertentu.

Sekarang pergi ke pengaturan baris yang berisi pro dan kontra Anda. Di bawah tab konten , perbarui yang berikut ini:

Latar belakang kolom 1: #f8f8f8

Latar belakang kolom 2: #f8f8f8

Di bawah tab Desain , perbarui yang berikut ini:

Gunakan Lebar Talang Kustom: YA

Lebar selokan: 1

Samakan Tinggi Kolom: YA

Padding kolom 1: 20px (atas), 20px (kanan), 20px (bawah), 20px (kiri)

Padding kolom 2: 20px (atas), 20px (kanan), 20px (bawah), 20px (kiri)

Di bawah tab Advanced , tambahkan CSS khusus berikut ke kotak teks Elemen Utama Kolom 1 :

 border-top: 10px solid #5bd999; 

Tambahkan CSS berikut ke kotak teks Elemen Utama Kolom 2 :

 border-top: 10px solid #e6567a; 

Tip : Jika Anda memiliki versi Extra yang diperbarui, Anda harus memiliki kemampuan untuk menerapkan animasi baru ke situs web Anda. Tambahkan animasi ke baris Pro dan Kontra dengan masuk ke Pengaturan Baris di bawah tab Desain dan pilih Gaya Animasi yang Anda inginkan. Ini akan membuat bagian Pro dan Kontra Anda muncul saat pengguna menggulir halaman ke bawah.

Simpan Pengaturan

Gandakan (atau salin) baris kedua yang menyimpan subtitle "Pro & Kontra" dan seret (atau tempel) di bawah baris yang baru saja kita selesaikan. Kemudian ubah header h2 menjadi "Spesifikasi".

Gandakan baris dua kolom yang berisi item daftar pro dan kontra dan letakkan di bawah modul teks baru dengan judul "Spesifikasi". Hapus dua modul teks yang berisi header "Pro" dan "Kontra" dari kolom.

Sekarang klik pada Blurb Settings untuk modul blurb pertama di kolom kiri.

Di bawah tab Konten , ubah Ikon menjadi tanda centang.

Di bawah tab Desain , ubah Warna Lingkaran menjadi #222222.

Simpan Pengaturan

Sekarang hapus modul uraian lainnya dan ganti dengan yang baru saja Anda perbarui dengan menduplikasi dan menyeretnya ke tempat yang tepat.

Sekarang buka Pengaturan Baris dan ganti CSS Kustom di kotak teks Elemen Utama Kolom 1 dan kotak teks Elemen Utama Kolom 2 dengan yang berikut:

border-top: 10px solid #222222;

Simpan Pengaturan

Sekarang hal terakhir yang perlu kita tambahkan ke tata letak posting ini adalah tombol "beli". Lanjutkan dan buat baris satu kolom baru dan tambahkan Button Module . Kemudian perbarui pengaturan modul tombol sebagai berikut:

Di bawah tab Konten…

Teks Tombol: Beli Sekarang

URL Tombol: [masukkan URL] (kemungkinan besar ini pada akhirnya akan menjadi tautan afiliasi ke situs pihak ketiga)

Url Terbuka: Di Tab Baru

Di bawah tab Desain…

Penjajaran Tombol: Tengah

Warna Teks: Gelap

Gunakan Gaya Kustom untuk Tombol: YA

Ukuran Teks Tombol: 30px

Warna Teks Tombol: #222222

Tombol Arahkan Warna Teks: #5bd999

Warna Latar Belakang Arahkan Tombol: #ffffff

Warna Batas Arahkan Arahkan Tombol: #5bd999

Itu saja untuk bagian konten Anda dari tata letak posting produk Anda. Pastikan Anda menyimpan halaman . Setelah Anda menyimpan halaman, keluar dari pembuat visual untuk mengedit posting dari dasbor wordpress.

Menambahkan Ulasan ke Postingan Anda

Gulir ke bawah ke bagian bawah halaman editor pos dan temukan kotak berjudul “Isi Kotak Tinjauan” .

Penambahan cerdas untuk Ekstra ini memungkinkan Anda menambahkan peringkat produk ke postingan Anda. Sistem rating dirancang untuk memiliki satu atau banyak kerusakan. Perincian adalah komponen yang membentuk peringkat keseluruhan. Misalnya, jika Anda akan memberi peringkat pada kamera, contoh perincian akan mencakup hal-hal seperti desain, kinerja, masa pakai baterai, dll... Ini adalah komponen kamera yang dapat Anda tambahkan persentase peringkatnya secara terpisah. Extra kemudian akan menghitung persentase rating keseluruhan berdasarkan komponen tersebut dan menampilkannya di kotak Review. Kotak Tinjauan juga memiliki area masukan yang berguna untuk judul kotak tinjauan, ringkasan, dan judul ringkasan.

Untuk menambahkan ulasan Anda, perbarui Isi Kotak Ulasan dengan yang berikut:

Judul Kotak Ulasan: [masukkan judul untuk kotak ulasan] (Saya sarankan “Ulasan Produk” atau “Ulasan Editorial”)

Ringkasan: [masukkan ringkasan]

Judul Ringkasan: [masukkan judul untuk ringkasan] (Saya hanya menggunakan "Ringkasan" untuk membuatnya tetap sederhana)

Selanjutnya tambahkan empat perincian dengan judul dan persentase peringkat sebagai berikut:

Kerusakan #0

Judul: Desain

Peringkat: 85%

Kerusakan #1

Judul: Performa

Peringkat: 90%

Kerusakan #2

Judul: Masa Pakai Baterai

Peringkat: 70%

Kerusakan #3

Judul: Fitur

Peringkat: 85%

Sekarang setelah Anda memiliki Peringkat Anda, mari berikan sentuhan akhir pada posting kami sebelum kami mempublikasikannya.

Tetapkan Kategori untuk Postingan Anda

Pastikan Anda menetapkan kategori yang tepat untuk posting/produk Anda dengan mengklik kotak centang di sebelah kategori. Dalam hal ini, karena posting ini adalah untuk pelacak kebugaran, saya akan memilih kategori "Kesehatan & Kebugaran". Juga, hapus centang pada kotak untuk "tidak dikategorikan".

Berikut adalah rincian produk dan kategorinya yang saya gunakan:

• Pakaian
  • Sepatu
  • Jam tangan
  • kaus kaki keren
• Dapur
  • Pisau Dapur
  • Pengaduk
  • talenan
• Kesehatan & Kebugaran
  • Pelacak Kebugaran
  • Bobot
  • Pekerjaan yg membosankan
• Elektronik
  • Kamera
  • Headphone
  • Komputer laptop

Tidak jauh di bawah halaman Anda akan menemukan kotak Pengaturan Ekstra. Kontrol ini memungkinkan Anda untuk mengganti pengaturan tema default untuk posting khusus ini. Anda tentu saja dapat menyesuaikan ini sesuka Anda, tetapi untuk contoh ini, saya mencentang kotak berikut:

Postingan Unggulan (Ini memungkinkan produk untuk ditarik sebagai postingan unggulan pada modul kategori tertentu.)

Sembunyikan Kotak Penulis

Terakhir, tambahkan gambar unggulan Anda. Pastikan lebarnya minimal 1280 px karena kita akan menggunakan tata letak kolom 0ne lebar penuh untuk gambar unggulan.

Publikasikan postingan Anda.

Silakan dan simpan template ini sehingga Anda dapat menduplikasi proses ini untuk semua produk/postingan Anda. Untuk menyimpan template, klik ikon “Save to Library” di menu visual builder di bagian bawah halaman, masukkan nama template dan klik Save to Library.

Sekarang ketika Anda pergi untuk menambahkan sisa posting Anda, Anda dapat memuat template ini dari perpustakaan dan mengisi konten untuk review produk baru. Prosesnya kemudian menjadi jauh lebih cepat.

Menambahkan CSS Khusus

Kami hampir selesai. Kita perlu menambahkan beberapa CSS khusus ke tema kita untuk menata beberapa elemen postingan. Untuk melakukan ini, dari Dasbor WordPress, buka Penyesuai Tema > CSS Tambahan dan masukkan yang berikut:

/****************************
comment box background
*****************************/
#comment-wrap {
    padding: 75px 40px;
	background: #fff;
	border-radius: 3px;
	box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {
/***************************
Post Header Size
****************************/
h1.entry-title {
    font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
  margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
  text-align: center;
  padding-bottom: 0px;
}
.fancy span {
  display: inline-block;
  position: relative; 
  line-height: 1.3em; 
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 4px solid #333;
  border-top: 4px solid #333;
  top: 40%;
  width: 100%;
  max-width: 200px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title  {   
	display: block;
    font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

Simpan & Publikasikan

Sekarang mari kita lihat hasil kita.

Sistem Penilaian Pengguna

Perhatikan bahwa di bagian bawah posting Anda memiliki sistem jatah bintang pengguna.

Di sini pengunjung Anda dapat mengirimkan peringkat awal pada produk apa pun hanya dengan mengarahkan kursor ke ikon bintang dan mengklik tingkat bintang yang mereka pilih.

Peringkat pengguna secara keseluruhan akan ditampilkan dalam data meta pada kutipan posting.

Anda selalu dapat memilih untuk menonaktifkan fitur ini di kotak Pengaturan Ekstra.

Nah, itu saja. Saya harap Anda menikmati bagian 2 dari seri ini.

Mendatang: Membangun Tata Letak Kategori untuk Menampilkan Produk Anda

Di bagian 3, saya akan menunjukkan kepada Anda bagaimana membangun tata letak kategori untuk Halaman Beranda dan halaman Semua Kategori. Pastikan Anda menggunakan template posting baru Anda untuk menambahkan setidaknya 3 produk untuk masing-masing dari 4 kategori untuk mempersiapkan bagian 3 dari seri. Anda akan membutuhkannya untuk mengisi modul kategori yang akan menampilkan produk Anda.

Inilah yang dapat Anda harapkan untuk dibangun di bagian 3:

Jangan ragu untuk mengirimkan pertanyaan atau komentar di bawah ini. Saya berharap mendengar kabar dari kamu.