Membangun Situs Review Produk dengan Ekstra – Bagian 3

Selamat datang di bagian 3 dari 4 seri 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 2 dari seri ini, kami membuat templat posting ulasan produk kami menggunakan pengaturan bawaan Extra dan Visual Builder. Dengan templat posting baru, Anda dapat menambahkan posting tambahan dan menetapkannya ke masing-masing kategori.

Hari ini kita akan membuat dua tata letak kategori menggunakan pembuat Kategori Ekstra. Tata letak pertama akan menampilkan posting/ulasan produk di beranda Anda yang menyoroti ulasan terbaru dan populer. Tata letak kedua akan menampilkan semua kategori pada satu halaman menggunakan modul penggeser carousel. Setelah Anda menyelesaikan tutorial ini, Anda akan memiliki dasar yang baik untuk situs ulasan produk yang dirancang dengan baik.

Berikut adalah Sneak Peek dari Apa yang Akan Kami Bangun

Mempersiapkan Elemen Desain

Karena tata letak kategori sangat bergantung pada konten posting, pastikan Anda menambahkan cukup banyak posting sehingga Anda bisa merasakan bagaimana tampilan situs setelah Anda menambahkan konten Anda sendiri. Seperti yang dibahas di bagian 2 seri ini, tata letak kategori saya diisi dengan 4 kategori dan dengan 3 produk di setiap kategori. Saya menggunakan gambar stok dari shutterstock untuk gambar unggulan dari posting saya.

Untuk mendesain tata letak kategori, kita akan menggunakan Pembuat Kategori Ekstra dan sedikit CSS Kustom.

Mari kita mulai.

Membangun Situs Review Produk dengan Ekstra – Bagian 3

Berlangganan Saluran Youtube Kami

Membangun Tata Letak Kategori untuk Beranda

Secara default, ekstra menggunakan tata letak kategori untuk beranda. Untuk membuat tata letak khusus, dari bilah sisi dasbor WordPress, buka Extra > Category Building . Temukan tata letak kategori yang sudah ada bernama "homepage" lalu arahkan kursor ke atasnya dan pilih edit.

Selanjutnya, klik "Hapus Tata Letak" pada menu pembuat ungu untuk menghapus tata letak default saat ini.

Sekarang kita bisa mulai membangun tata letak kustom kita. Mulailah dengan menambahkan dua pertiga kolom sepertiga ke baris di bagian standar.

Di kolom kiri (dua pertiga), tambahkan Slider Postingan Unggulan.

Perbarui Pengaturan Modul Slider Posting Unggulan sebagai berikut:

Di bawah Tab Konten…

Kategori: Semua
Tampilkan Postingan Unggulan Saja: [Saya akan menonaktifkan ini sampai Anda memutuskan postingan mana yang ingin Anda tampilkan. Anda dapat menetapkan posting tertentu sebagai fitur dalam kotak Pengaturan Ekstra di halaman editor posting.]
Tampilkan Penulis: OFF
Tanggal Pertunjukan: OFF

Di bawah Tab Desain…

Warna Panah Nav: #ffffff
Latar Belakang Panah Nav: #000000
Latar Belakang Teks: rgba(255,255,255,0.4)
Judul Ukuran font: 24px
Warna Teks Judul: #000000
Ukuran Font Meta: 16px
Warna Teks Meta: #000000
Margin Kustom: 0px bawah

Di bawah Tab Lanjutan…

Masukkan CSS khusus berikut di kotak teks Elemen Utama:

border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

Simpan Pengaturan

Sekarang tambahkan Modul Teks ke kolom kanan (sepertiga) dan perbarui Pengaturan Modul Teks sebagai berikut:

Di bawah Tab Konten, tambahkan html berikut ke tab teks kotak konten:

<h1>Get the Latest Reviews on Popular Products</h1>

<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

Tautan di sini dimaksudkan untuk berfungsi sebagai tombol CTA tiruan. Anda dapat memilih untuk menggunakannya sesuka Anda. Cukup perbarui URL dan teks tautan.

Tip : Anda bisa menggunakan Bloom untuk memicu kotak popup optin email saat mengklik CTA ini. Dengan begitu pengunjung akan dapat mengikuti perkembangan produk hari ini dengan kampanye pemasaran email Anda. Untuk melakukan ini, Anda perlu menginstal Bloom, menambahkan formulir popup, dan mengintegrasikan penyedia email Anda. Kemudian pilih untuk menampilkan popup saat mengklik pemilih CSS “a.join-cta” yang sesuai dengan kelas tautan pada kode html di atas.

Anda juga dapat membaca lebih lanjut tentang cara membuat popup bentuk optin mekar saat mengklik tombol.

Sekarang kembali ke Pengaturan Modul Teks.

Di bawah Tab Desain…

Ukuran Font Teks: 40px (desktop), 24px (tablet dan smartphone)
Ukuran Font Header: 42px (desktop), 38px (tablet), 28px (smartphone)
Padding Kustom: 40px (atas), 15px (kanan), 15px (bawah), 15px (kiri)

Simpan Pengaturan

Sekarang buka Pengaturan Baris sehingga kita dapat menata latar belakang baris.

Kemudian perbarui yang berikut ini:

Di bawah Tab Konten…

Latar belakang: #ffffff

Di bawah Tab Desain…

Jadikan Baris Ini Lebar Penuh: YA
Samakan Tinggi Kolom: YA

Di bawah Tab Tingkat Lanjut , tambahkan CSS Kustom berikut ke kotak input Elemen Utama:

border-top: 10px solid #121212;
border-radius: 3px;
-webkit-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);
-moz-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);
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);

Simpan Pengaturan

Lihat bagian slider fitur kustom Anda sekarang.

Terlihat bagus sejauh ini.

Ayo lanjutkan. Kembali ke Pembuat Kategori dan tambahkan bagian standar di bawah bagian saat ini dan tambahkan baris satu kolom dengan Modul Teks.

Kemudian perbarui pengaturan Modul Teks sebagai berikut:

Di bawah Tab Konten , tambahkan judul html ini di tab teks kotak konten:

<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

Di bawah Tab Desain…

Orientasi Teks: Tengah
Font Header: B (tebal)
Ukuran Font Header: 48px (desktop), 42px (tablet), 36px (ponsel pintar)

Simpan Pengaturan

Ini akan berfungsi sebagai judul bagian di bawah ini yang akan menampilkan ulasan produk Anda.

Selanjutnya tambahkan Bagian Khusus dengan struktur kolom tiga perempat seperempat berikut:

Di bagian kiri (tiga perempat), tambahkan dua baris kolom.

Di kolom kiri baris itu, tambahkan Modul Posting

Kemudian perbarui Pengaturan Modul Postingan di bawah Tab Konten dengan menetapkan kategori ke modul. Dengan cara ini Modul Posting hanya akan menampilkan Kategori itu. Untuk melakukan ini, saya akan memilih "Pakaian" sebagai kategori saya.

Kemudian perbarui yang berikut ini:

Tampilkan Penulis: TIDAK
Tanggal Tayang: TIDAK

Simpan Pengaturan

Gandakan Modul Posting ini sehingga Anda memiliki dua modul posting yang ditumpuk di kolom kiri dan 2 di sebelah kanan.

Kemudian update Setting di setiap modul dengan kategori yang berbeda. Kategori yang saya miliki adalah Pakaian, Elektronik, Dapur, dan Kesehatan & Kebugaran.

Jika Anda ingin menambahkan Modul Posting yang menampilkan ulasan video, Anda dapat menambahkannya di sini. Pertama, Anda perlu menambahkan kategori posting baru yang disebut Video, tetapkan kategori dengan warna #222222. Kemudian buat posting baru, pilih "Video" untuk Format dan tambahkan URL Video ke kotak Opsi Format Video bawaan Extra.

Kemudian Anda dapat menambahkan konten kotak ulasan Anda untuk ditampilkan di bawah video.

Setelah Anda mengunggah beberapa video, pastikan untuk menambahkannya ke kategori Video. Kemudian kembali ke Pembuat Kategori untuk beranda Anda dan tambahkan baris satu kolom di bawah baris yang berisi empat modul posting Anda. Kemudian duplikat Modul Posting dari baris sebelumnya dan tambahkan ke baris baru. Di Pengaturan Modul Posting di bawah Tab Konten, pilih kategori "Video". Sekarang Anda memiliki modul posting yang akan menampilkan video.

Di area kanan (bilah samping) dari bagian khusus, kita akan menambahkan dua Modul Posting lagi yang ditumpuk di atas satu sama lain.

Untuk yang pertama, perbarui Pengaturan Modul Posting untuk memasukkan "Semua" kategori. Kemudian pilih Metode Sortir “Nilai Tertinggi”.

Gandakan Modul Posting itu sehingga yang lain menumpuk di bawahnya. Kemudian perbarui Metode Sortir yang satu itu menjadi "Paling Populer".

Silakan dan perbarui posting untuk menyimpan pengaturan Anda. Inilah yang seharusnya terlihat seperti tata letak sejauh ini.

Selanjutnya duplikat (atau salin) bagian utama kedua yang berisi Modul Teks dengan judul “Ulasan Produk”.

Kemudian seret (atau tempel) bagian yang digandakan di bawah bagian khusus. Di bagian baru, perbarui konten Pengaturan Modul Teks dengan html berikut:

<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

Simpan Pengaturan

Selanjutnya kita akan menambahkan feed blog yang menampilkan semua review produk dimulai dengan yang terbaru.

Di bawah Modul Teks yang baru saja Anda perbarui, tambahkan Modul Masonry Umpan Blog ke kolom. Di Pengaturan Modul Masonry Umpan Blog, di bawah Tab Konten, pilih semua kategori yang ingin Anda tampilkan di umpan.

Simpan Pengaturan

Dan akhirnya, di bawah Modul Masonry Umpan Blog, tambahkan Modul Carousel Posting. Perbarui Pengaturan Modul Korsel Postingan di bawah tab Konten untuk memasukkan semua kategori dan pilih YA untuk menampilkan posting unggulan saja.

Korsel ini dimaksudkan untuk hanya menampilkan posting yang telah Anda pilih sebagai item unggulan saat membuat posting ulasan produk Anda.

Sekarang mari kita lihat seperti apa tampilan akhir.

Menambahkan Beberapa Baris CSS Kustom

Untuk menyatukan desain, kita perlu menambahkan beberapa baris CSS Kustom. Buka Penyesuai Tema > CSS tambahan dan tambahkan kode berikut di bagian atas kode CSS saat ini yang sudah ada di sana:

.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;
}

Kemudian, di dalam kurung kueri media yang disetel ke lebar minimum 980 piksel, tambahkan yang berikut ini:

.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;
}

Cuplikan CSS pertama menambahkan bayangan yang sedikit lebih gelap dan batas atas yang lebih tinggi, ke modul. Yang kedua menyesuaikan tombol "Gabung Sekarang" di bagian atas.

Nah, itu dia untuk layout kategori Homepage. Berikut adalah hasil akhir yang terlihat:

Selain Tata Letak Kategori Beranda, mari tambahkan satu tata letak sederhana lagi untuk menampilkan semua kategori kita dalam satu halaman.

Membangun Tata Letak "Semua Kategori"

Tata letak ini sangat sederhana untuk dibuat sekarang karena Anda telah memuat semua posting Anda, set kategori Anda, dan gaya tema di tempatnya. Tujuan tata letak ini adalah untuk membuat halaman yang menampilkan semua kategori dan produk dalam satu halaman. Ini dapat dilakukan dengan berbagai cara, tetapi dengan Extra, saya ingin memanfaatkan modul carousel posting untuk menampilkan kategori dan posting dalam tata letak yang mirip dengan apa yang akan Anda lihat di situs web streaming video seperti Hulu dan Netflix.

Untuk menambahkan tata letak, gulir ke bagian atas tata letak kategori Anda saat ini dan pilih Tambah Baru. Menggunakan pembuat Kategori, tambahkan baris satu kolom ke bagian standar. Kemudian tambahkan Modul Teks ke Baris. Perbarui Pengaturan Modul Teks, di bawah Tab Konten untuk menyertakan tag h1 berikut di kotak konten:

<h1 class="subtitle fancy"><span>All Categories</span></h1>

Simpan Pengaturan

Kemudian tambahkan Modul Carousel Posting di bawah Modul Teks. Di Pengaturan Modul Carousel Posting, pilih Pakaian sebagai Kategori.

Simpan Pengaturan

Kemudian tambahkan Modul Teks di bawah carousel posting kategori Pakaian. Di Pengaturan Modul Teks, tambahkan tautan berikut ke kotak Konten di bawah tab Konten:

<a href="/category/clothing">view all clothing reviews</a>

URL dan/atau teks tautan mungkin perlu diubah sesuai dengan situs Anda, tetapi idenya adalah untuk menautkan ke halaman kategori untuk kategori tertentu untuk menampilkan semua ulasan produk untuk kategori tersebut.

Di bawah Tab Desain, ubah Orientasi Teks menjadi "Kanan".

Simpan Pengaturan

Untuk menampilkan tiga kategori berikutnya dengan cara yang sama, ulangi proses penambahan Modul Carousel Posting yang ditetapkan ke kategori tertentu diikuti dengan Modul Teks yang berisi tautan ke halaman kategori yang sesuai.

Di kotak kategori di sebelah kanan pembuat, tambahkan kategori baru yang disebut "Semua Kategori" dan pilih untuk tata letak ini. Dengan begitu setiap kali kita menautkan ke halaman kategori “Semua Kategori”, template ini akan muncul.

Tata letak akhir akan terlihat seperti ini setelah Anda selesai.

Dan inilah tampilan tata letak kategori di situs.

Anda dapat mengetahuinya sekarang karena kami belum memiliki banyak produk yang ditambahkan, tetapi ini pada akhirnya akan berfungsi sebagai cara yang nyaman untuk mengacak produk untuk setiap kategori menggunakan modul slider korsel posting.

Itu saja untuk postingan hari ini. Saya harap Anda menikmati bagian 3 dari seri 4 bagian ini dalam membangun situs ulasan produk dengan Extra.

Saya harap Anda belum lelah, kami memiliki satu posting terakhir dalam seri kami.

Akan datang

Di posting terakhir seri kami, kami akan menyesuaikan header dan elemen navigasi dari situs ulasan produk kami. Selain membuat menu Anda, saya akan menunjukkan cara keren untuk menetapkan warna ke tautan menu Anda yang sesuai dengan warna kategori di seluruh situs. Saya juga akan menunjukkan cara membuat menu mega dengan beberapa klik.

Saya berharap untuk membangun bagian terakhir dari situs web kami bersama-sama.

Seperti biasa, silakan kirimkan komentar di bawah.