Membangun Situs Review Produk dengan Ekstra – Bagian 4

Selamat datang di bagian 4 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 kami mengatur Opsi Tema dan pengaturan penyesuai. Di bagian 2, kami menambahkan posting kami dan membangun tata letak posting untuk menampilkan ulasan produk kami. Di bagian 3 seri ini, kami membuat dua tata letak kategori untuk situs ulasan produk kami – satu untuk beranda kami dan satu lagi untuk halaman “Semua Kategori”.

Hari ini kita akan menyelesaikan situs ulasan produk kita dengan membangun tata letak kategori default, menu, dan footer kita. Sorotan posting hari ini adalah menu khusus yang memiliki tautan menu yang cocok dengan warna halaman kategori yang sesuai. Saya juga akan menunjukkan kepada Anda cara menerapkan opsi menu mega bawaan Extra dan menambahkan beberapa penyesuaian kita sendiri.

Berikut adalah Sneak Peek dari Apa yang akan kita bangun

Mari kita mulai.

Membangun Situs Review Produk dengan Ekstra – Bagian 4

Berlangganan Saluran Youtube Kami

Membangun Halaman Kategori Default

Extra hadir dengan halaman kategori default yang sudah diinstal. Halaman kategori default adalah tata letak yang akan digunakan saat melihat halaman kategori yang tidak memiliki tata letak kategori tertentu yang dipilih. Di bagian 3 seri ini, kami menetapkan tata letak kategori untuk beranda kami dan kami menetapkan halaman "Semua Kategori" ke kategori khusus "Semua Kategori". Untuk halaman kategori ulasan produk lainnya, kami akan menggunakan tata letak kategori default ini.

Untuk menyesuaikan tata letak kategori default kami, buka dasbor wordpress dan navigasikan ke Extra > Category Builder. Kemudian arahkan kursor ke "Kategori Default" dan klik tautan edit.

Secara default, kategori default Anda memiliki dua modul yang ditumpuk di atas satu sama lain di dalam baris satu kolom dari bagian standar. Sebelum kita melakukan perubahan pada tata letak, pastikan Anda memilih opsi "Gunakan tata letak ini sebagai tata letak default?" di kotak Layout Usage di sidebar kanan.

Pertama, ganti Slider Featured Posts teratas dengan Modul Posts Carousel. Kemudian perbarui pengaturan modul dengan mencentang “Kategori/Tag/Taksonomi Saat Ini” sebagai Kategori untuk modul ini. Sekarang modul carousel posting ini hanya akan menampilkan produk dari halaman kategori yang dikunjungi. Cukup pintar, ya?

Simpan & Keluar

Anda dapat membiarkan Modul Masonry Umpan Blog ke pengaturan default. Pastikan saja modul kategori apa pun yang Anda tambahkan ke halaman ini di masa mendatang memiliki kategori "Kategori/Tag/Taksonomi Saat Ini" yang ditetapkan padanya.

Sekarang untuk menata judul halaman kategori h1 Anda, Anda perlu menambahkan CSS Kustom berikut ke CSS Tambahan di Penyesuai Tema. Pastikan untuk memasukkannya ke dalam kueri media dengan lebar minimal 980 piksel.

.archive h1 {
text-align: center;
font-size: 48px;
line-height: 1.3em;
}

Itu saja untuk tata letak kategori default. Mari kita lihat seperti apa layout default kita di halaman kategori dapur saya.

Sekarang setelah kita memiliki tata letak kategori default, mari kita perhatikan salah satu bagian terpenting dari situs web kita – menu navigasi.

Kami telah menyiapkan gaya tajuk dasar kami di bagian 1 dari seri ini. Tapi hari ini kita akan membuat dan menata menu navigasi utama kita.

Dari Dashboard WordPress Anda, navigasikan ke Appearance > Menus lalu pilih Menus . Pilih tautan "buat menu baru" di bagian atas halaman dan masukkan nama "Menu Kategori" sebagai nama menu. Kemudian pilih “Menu Utama” sebagai lokasi tampilan di bawah bagian Pengaturan Menu.

Sekarang kita bisa mulai menambahkan item menu kita ke menu kita. Klik pada sakelar Kategori di sebelah kiri halaman. Pada opsi yang muncul, pilih "lihat semua" untuk memastikan Anda dapat melihat semua kategori yang tersedia. Centang semua 5 kategori yang telah Anda buat (bukan uncategorized) dan klik tombol Add to Menu untuk menambahkannya ke bagian struktur menu di sebelah kanan halaman. Sekarang Anda dapat mengklik dan menyeret setiap item menu yang akan ditampilkan dalam urutan berikut:

• Elektronik
• Pakaian
• Dapur
• Kesehatan & Kebugaran
• semua Kategori

Sebelum kita mengedit item menu, pilih tautan opsi layar di bagian atas halaman. Di bagian properti menu lanjutan yang terbuka, pastikan Anda mencentang kotak di sebelah "Kelas CSS". Ini akan memungkinkan kita untuk menambahkan Kelas CSS khusus ke setiap item menu kita.

Kembali ke menu Anda. Dimulai dengan item menu Kategori Elektronik, klik untuk beralih membuka opsi konfigurasi. Di kotak Kelas CSS, tambahkan kelas bernama "hijau". Dan untuk opsi Extra Mega Menu, pilih “Mega Menu 3 Featured”.

Ini akan mencapai dua hal. Pertama, kelas "hijau" akan digunakan untuk mengubah item menu menjadi hijau saat mengarahkan kursor. Kedua, opsi fitur mega menu 3 akan menambahkan tiga item unggulan sebagai menu mega saat mengarahkan kursor ke item menu.

Untuk item Menu Kategori Pakaian, tambahkan kelas “biru” dan pilih opsi “Menu Mega 3 Unggulan” .

Untuk item Kitchen Category Menu, tambahkan class “pink” dan pilih opsi “Mega Menu 3 Featured” .

Untuk item Menu Kategori Kesehatan & Kebugaran, tambahkan kelas “ungu” dan pilih opsi “Menu Mega 3 Unggulan” .

Item menu "Semua Kategori" akan sedikit berbeda. Silakan dan biarkan kotak teks Kelas CSS kosong. Dan untuk pilihan Mega Menu, pilih “Mega Menu List”. Jenis mega menu ini adalah mega menu yang lebih tradisional yang membuat daftar item sub menu. Tujuan dari tautan menu mega ini adalah untuk menampilkan semua kategori dengan daftar produk mereka di bawahnya.

Kembali dan buka kotak kategori dan pilih empat kategori yang sama (Elektronik, Pakaian, Dapur, dan Kesehatan & Kebugaran) dan tambahkan ke menu. Kemudian seret setiap kategori yang baru saja Anda tambahkan satu tingkat di bawah item menu mega "Semua Kategori".

Alihkan opsi konfigurasi untuk masing-masing item menu kategori tersebut dan tambahkan kelas CSS yang sama ke masing-masing seperti yang Anda lakukan sebelumnya. Berikut adalah kategori dengan kelas yang perlu Anda tambahkan:

Elektronik – hijau
Pakaian – biru
Dapur – merah muda
Kesehatan & Kebugaran – ungu

Selanjutnya kita akan menambahkan gambar kustom kita sendiri untuk dijadikan sebagai gambar kategori unggulan untuk setiap kategori di menu mega.

Gunakan editor foto untuk mengecilkan dan memotong setiap gambar agar memiliki lebar 500 piksel dan tinggi 300 piksel.

Tambahkan/seret ke perpustakaan Media WordPress.

Sekarang kembali ke halaman menu di Admin WordPress.

Dalam contoh ini, tautan kategori teratas di menu mega saya adalah "Elektronik". Klik panah di sebelah kanan item "Elektronik". Di kotak Label Navigasi tambahkan gambar yang Anda inginkan menggunakan tag html img langsung sebelum teks "Elektronik". Tag gambar akan terlihat sebagai berikut:

<img src="Insert Image Url" width="100%" />

Untuk menemukan url ke gambar, buka Media → Perpustakaan. Klik gambar yang ingin Anda tambahkan. Di layar popup Detail Lampiran, temukan url di bagian kanan, sorot, lalu gunakan ctrl+c untuk menyalinnya ke clipboard Anda.

Sekarang kembali ke konfigurasi item menu "Elektronik" pada halaman menu dan ganti teks "Sisipkan URL Gambar" dengan menempelkan url gambar Anda menggunakan ctrl+v.

Ulangi proses yang sama untuk 3 item menu kategori berikutnya.

Setelah Anda menambahkan keempat tag gambar ke masing-masing item menu kategori Anda, saatnya untuk menambahkan item menu posting tunggal Anda (tautan ke ulasan produk Anda) di bawah masing-masing kategori masing-masing.

Klik untuk beralih membuka kotak Postingan di sebelah kiri dan pilih tab "lihat semua". Kemudian pilih semua 12 produk Anda dan klik Tambahkan ke Menu. Kemudian seret setiap item menu posting satu tingkat di bawah masing-masing kategorinya.

Simpan Menu

Sebelum kita memeriksa menu baru kita, kita perlu menambahkan beberapa CSS khusus untuk memberikan sentuhan akhir pada menu kita.

Buka Penyesuai Tema > CSS Tambahan dan masukkan CSS berikut:

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

Simpan dan Publikasikan Pengaturan Anda.

Sekarang mari kita lihat menu baru kami. Perhatikan warna item menu saat Anda mengarahkan kursor ke atasnya. Warnanya cocok dengan warna kategori yang sesuai.

Membangun Footer

Untuk membuat footer untuk situs ulasan produk kami, kami akan memanfaatkan widget bawaan Extra untuk menampilkan ulasan produk terbaru dan daftar kategori.

Pertama kita harus pergi ke Theme Customizer > Footer Settings. Kemudian klik Layout dan pilih layout 2 kolom.

Kembali dan pilih Tipografi dan perbarui yang berikut ini:

Ukuran Teks Judul: 32
Ukuran Teks Tubuh/Tautan: 16
Warna Teks Widget: rgba(255,255,255,0.6)
Warna Tautan Widget: #ffffff
Warna Judul Widget: #ffffff

Simpan & Publikasikan

Kembali ke menu utama Theme Customizer dan pilih Widgets. Kemudian pilih Footer Sidebar Left dan klik tombol Add a Widget. Pilih widget Ekstra – Ulasan Terbaru

Kembali ke menu widget dan pilih Footer Sidebar Right dan tambahkan widget Kategori.

Buka bagian CSS Tambahan dan tambahkan CSS Kustom berikut untuk footer Anda.

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

Simpan & Publikasikan pengaturan Penyesuai Tema dan lihat catatan kaki Anda.

Itu dia. Anda telah berhasil menyelesaikan bagian 4 dan menyelesaikan seri membangun situs ulasan produk menggunakan Extra.

CSS akhir

Tergantung di mana Anda masuk pada seri, Anda mungkin perlu memeriksa CSS khusus Anda untuk memastikan Anda memasukkan semuanya dengan benar. Berikut adalah kode CSS terakhir yang akan dimasukkan ke dalam Theme Customizer.

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
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);
border-top: 10px solid;
}

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

/****************************
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) {

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

/***************************
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;
}
}

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}

.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

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

Membungkus

Saya harap Anda menikmati menjelajahi kekuatan Extra dalam membangun situs Ulasan Produk bersama saya. Jika ada, saya yakin Anda setidaknya akan pergi dengan apresiasi baru untuk tema yang luar biasa ini dan sedikit inspirasi untuk berbuat lebih banyak dengannya. Sistem ulasan bawaan, tata letak kategori cerdas, dan kekuatan Divi Builder membuatnya sangat cocok untuk situs ulasan produk.

Satu topik yang tidak saya bahas (menyimpannya untuk posting mendatang) adalah bagaimana menangani tautan afiliasi menggunakan Extra. Lagi pula, bagi kebanyakan orang, tujuan akhir situs ulasan produk mereka adalah menghasilkan uang. Jangan ragu untuk membagikan pemikiran Anda tentang masalah ini di bawah di komentar.

Saya berharap mendengar kabar dari kamu.