Cara Membuat Template Halaman Hasil Pencarian di Divi

Kita semua sudah terbiasa menggunakan formulir pencarian untuk menemukan apa yang kita butuhkan di situs web. Jadi, saat membuat situs web di Divi, kita benar-benar perlu mempertimbangkan desain template hasil halaman yang akan mendorong tampilan dan nuansa hasil pencarian tersebut.

Dalam tutorial ini, kita akan membahas cara membuat template halaman hasil pencarian yang sederhana dan elegan menggunakan Divi Theme Builder. Kami akan menunjukkan kepada Anda cara memasukkan elemen penting dari templat halaman hasil pencarian, termasuk judul hasil halaman dinamis dan konten pencarian relevan yang dihasilkan oleh modul blog.

Mari kita mulai.

Sneak Peek

Berikut adalah sekilas tentang Template Halaman Hasil Pencarian yang akan kita buat.

Unduh Template secara GRATIS

Untuk mendapatkan templat halaman hasil pencarian dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada di daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan tambahkan salah satu file json ke Divi Theme Builder menggunakan opsi Theme Builder Portability.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda harus menginstal dan mengaktifkan Tema Divi. Pastikan Anda memiliki Divi versi terbaru.

Anda juga memerlukan beberapa posting/halaman yang dibuat untuk tujuan pengujian agar halaman hasil pencarian benar-benar menampilkan hasil.

Setelah itu, Anda siap untuk pergi.

Tentang Halaman Hasil Pencarian

Di Divi, halaman hasil pencarian adalah halaman yang diarahkan pengguna setelah dia memasukkan permintaan pencarian di salah satu formulir pencarian Divi. Kemungkinan permintaan pencarian yang mengarah ke halaman hasil pencarian termasuk formulir pencarian di header Divi default, pencarian dari yang dihasilkan dari Modul Pencarian di Divi Builder, dan widget pencarian bawaan WordPress.

Secara default, halaman hasil pencarian hanya akan menampilkan halaman atau posting yang dicari di feed seperti halaman blog pada umumnya. Tetapi dengan Divi, Anda dapat mendesain template sesuka Anda menggunakan Divi Theme Builder.

Cara Membuat Template Halaman Hasil Pencarian di Divi

Buat Template Baru

Untuk memulai, buka Dasbor WordPress dan arahkan ke Divi > Theme Builder. Kemudian klik area "Tambah Template Baru".

Di bawah pengaturan template, tetapkan Hasil Pencarian template.

Kemudian klik area Add Custom Body dari template baru dan pilih “Build Custom Body.”

Pilih untuk Membangun tata letak dari awal.

Mendesain Template Halaman Hasil Pencarian menggunakan Template Layout Editor

Bagian Judul untuk Template Hasil Halaman

Di dalam editor tata letak template, mulai desain template dengan menambahkan satu baris kolom ke bagian default. Di sinilah kita akan membangun halaman kita menuju template.

Aksen Desain Modul Pembagi

Kemudian masukkan Modul Pembagi. Ini akan berfungsi sebagai aksen desain untuk heading halaman kita.

Perbarui gaya pembagi sebagai berikut:

• Warna Garis: #3a405a
• Posisi Garis: Bawah
• Berat Pembagi: 5px
• Z-Indeks: -1

Modul Teks dengan Judul

Di bawah Modul Pembagi, tambahkan modul teks baru dengan konten berikut:

<h1>Search Results</h1>

Perbarui desain teks sebagai berikut:

• Warna Latar Belakang: #ffffff
• Perataan Teks: tengah
• Font Judul: Muli
• Berat Huruf Judul: Berat
• Warna Teks Judul: #3a405a
• Ukuran Teks Judul: 70px (desktop), 40px (tablet), 22px (ponsel)
• Tinggi Garis Tajuk: 80px
• Lebar Maks: 60%
• Penyelarasan Modul: Pusat
• Tinggi Min: 80px

Sekarang kita dapat memindahkan modul teks ke atas untuk menutupi pembagi dengan menambahkan margin khusus.

• Margin: -75px

Modul Pencarian

Di bawah modul teks dengan judul, tambahkan modul pencarian. Ini akan membantu pengguna yang ingin terus mencari blog/situs Anda setelah mereka tiba di halaman hasil pencarian.

Tambahkan teks placeholder input untuk formulir.

Anda juga memiliki opsi untuk mengecualikan halaman, posting, dan/atau kategori tertentu dari hasil pencarian dengan memilih opsi di bawah grup opsi pengecualian. Misalnya, jika Anda membuat formulir pencarian terutama untuk blog Anda, Anda mungkin ingin mengecualikan halaman dari hasil pencarian sehingga hanya posting blog yang akan ditampilkan.

Kemudian perbarui Pengaturan Pencarian sebagai berikut:

• Warna Placeholder: #3a405a
• Warna Latar Belakang Bidang: #ffffff
• Font Bidang: Montserrat
• Ukuran Teks Bidang: 20px
• Tombol dan Warna Batas: #3a405a
• Font Tombol: Muli
• Berat Huruf Tombol: Tebal
• Warna Teks Tombol: #ffffff
• Ukuran Teks Tombol: 18px
• Lebar: 100%
• Lebar Maks: 300px
• Penyelarasan Modul: Pusat
• Sudut Bulat: 8px

Itu menangani sebagian besar bagian heading kami.

Padding Baris

Sebelum kita memulai bagian berikutnya, mari kita keluarkan padding bawah baris.

• Padding: 0px bawah

Membuat Bagian Tubuh dari Template Hasil Pencarian

Sekarang kita siap untuk menambahkan bagian kedua dari template yang akan berisi judul arsip hasil pencarian dan konten hasil pencarian.

Membuat Bagian dan Baris Baru

Di bawah bagian atas, tambahkan bagian reguler baru ke tata letak.

Kemudian tambahkan baris satu kolom ke bagian tersebut.

Menambahkan Judul Postingan/Arsip sebagai Konten Dinamis

Halaman hasil pencarian akan mendapatkan keuntungan dari judul yang menampilkan permintaan pencarian yang dimasukkan oleh pengguna. Kita dapat menambahkan ini ke halaman menggunakan modul teks dan menarik elemen konten dinamis judul posting/arsip.

Pertama, tambahkan modul teks.

Hapus teks tiruan di dalam kotak konten isi dan pilih ikon Konten Dinamis yang muncul saat mengarahkan kursor ke kotak konten isi. Kemudian pilih Judul Postingan/Arsip dari daftar.

Elemen Judul Post/Arsip dimulai dengan frasa “Hasil untuk” diikuti dengan konten/kueri pencarian dalam tanda kurung. Di bawah ini adalah contoh apa yang akan ditampilkan jika pengguna menelusuri istilah "bisnis".

Selanjutnya, perbarui pengaturan desain untuk modul teks sebagai berikut:

• Font Teks: Muli
• Berat Font Teks: Berat
• Warna Teks Teks: #d30c7b
• Ukuran Teks Teks: 22px
• Perataan Teks: Tengah
• Gaya Animasi: Slide
• Arah Animasi: bawah
• Intensitas Animasi: 250%

Animasi yang ditambahkan akan menampilkan judul hasil pencarian dari bawah gaya pembagi "cloud" (kami akan menambahkan ini nanti). Jadi, setiap kali pengguna memasukkan permintaan pencarian baru, judulnya akan turun untuk efek keren.

Tambahkan Baris Baru

Di bawah modul Teks yang berisi elemen judul posting/arsip, buat baris satu kolom baru.

Tambahkan modul blog ke baris. Ini akan menampilkan posting/konten aktual dari halaman hasil pencarian.

Perbarui pengaturan konten untuk modul blog sebagai berikut:

• Posting Untuk Halaman Saat Ini: YA
• Jumlah Posting: 9
• Panjang Kutipan: 120
• Tampilkan Penulis: TIDAK

Opsi terpenting di sini adalah Postingan untuk Halaman Saat Ini. Ini harus aktif agar halaman hasil pencarian menampilkan konten dinamis pencarian.

Kemudian perbarui desain modul blog sebagai berikut:

• Tata Letak: Kotak
• Judul Font: Muli
• Judul Font Berat: Ultra Tebal
• Warna Teks Judul: #3a405a
• Ukuran Teks Judul: 24px
• Tinggi Baris Judul: 1.3em
• Font Tubuh: Montserrat
• Warna Teks Tubuh: #3a405a
• Sudut Bulat Tata Letak Kotak: 10px
• Lebar Batas Tata Letak Kotak: 0px
• Bayangan Kotak: tampilkan tangkapan layar
• Posisi Vertikal Bayangan Kotak: 0px
• Kekuatan Kabur Bayangan Kotak 15px
• Kekuatan Penyebaran Bayangan Kotak: -5px

Selanjutnya, perbarui gaya pagination sebagai berikut:

Bagian Latar Belakang dan Pembagi

Sebagai sentuhan terakhir pada desain, perbarui pengaturan bagian sebagai berikut:

• Warna Latar Belakang: #eeeeee
• Gaya Pembagi Atas: lihat tangkapan layar
• Warna Pembagi: #ffffff
• Pembagi Balik: vertikal
• Pengaturan Pembagi: Di ​​Atas Konten Bagian
• Padding: 100px atas

Hasil Akhir

Berikut adalah hasil akhir dari template halaman saat mencari istilah "bisnis" di situs langsung.

Berikut adalah desain pada tablet dan ponsel.

Dan berikut adalah contoh animasi judul hasil pencarian saat menggunakan form pencarian untuk query tambahan pada halaman hasil pencarian.

Pikiran Akhir

Halaman hasil pencarian dapat menjadi alat yang berguna bagi pengguna, jadi merupakan ide bagus untuk memberikan perhatian yang layak. Dengan Divi, Anda dapat membuat template hasil pencarian dengan semua elemen dinamis yang diperlukan menggunakan Divi Visual Builder saat mendesain template. Tidak diperlukan pengetahuan kode. Saya harap ini akan memberi Anda sedikit inspirasi untuk membuat templat halaman hasil pencarian khusus untuk blog atau situs Anda sendiri.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!