Apakah Anda ingin mempelajari cara membuat halaman hasil pencarian dengan Elementor?

Baik Anda memiliki blog pribadi, situs web eCommerce, atau situs web besar dengan banyak pengguna, menambahkan fitur pencarian cukup penting. Itu memudahkan pengunjung Anda untuk menemukan konten yang mereka cari, daripada mengklik sana-sini di menu navigasi.

Di WordPress, tampilan (layout) halaman hasil pencarian dikendalikan oleh template pada tema yang Anda gunakan (file cari.php dalam sebagian besar kasus). Jika tata letak default tidak sesuai dengan Anda, Anda dapat membuat template khusus untuk menggantikannya.

Jika Anda tidak memiliki keterampilan PHP, Anda dapat menggunakan Elementor (atau plugin pembuat halaman lain yang memiliki fungsi pembuat tema seperti Divi Builder et WPBakery) untuk membuat templat halaman hasil pencarian khusus di WordPress.

Untuk dapat membuat template halaman hasil pencarian menggunakan Elementor, Anda harus menggunakan Elementor versi pro karena fitur Pembuat Tema hanya tersedia di Elementor Pro.

Cara membuat halaman hasil pencarian dengan Elementor

Saat Anda membuat halaman hasil pencarian khusus menggunakan Elementor, Anda dapat menambahkan elemen apa pun yang Anda suka saat membuat halaman. Ada lebih dari 90 item (disebut widget) yang dapat Anda tambahkan.

Baca juga: Bagaimana mengelola pengiriman formulir di Elementor

Elementor sendiri menawarkan templat halaman hasil pencarian yang dibuat sebelumnya untuk merampingkan alur kerja Anda. Atau, jika Anda memiliki konsep desain sendiri, Anda juga dapat membuat halaman hasil pencarian sendiri.

Pada artikel ini, kami akan menunjukkan cara membuat template halaman hasil pencarian dari awal. Berikut adalah screenshot halaman hasil pencarian yang ingin kita buat.

Kami akan menggunakan dua bagian untuk membuat halaman hasil pencarian di atas:

  • Bagian 1: Untuk menempatkan header (deskripsi hasil pencarian)
  • Seksi 2: Untuk menempatkan formulir pencarian dan hasil pencarian

Sebelum Anda mulai, pastikan Anda telah meningkatkan versi Elementor Anda ke versi pro jika Anda belum melakukannya. Setelah Anda siap, pergi ke Template -> Pembuat Tema di dasbor WordPress Anda.

Lihat juga: Cara Menggunakan Elementor: Panduan Lengkap

Klik tombol Tambahan untuk membuat template baru (atau Anda dapat mengklik tombol Coba sekarang untuk mencoba Pembuat Tema Elementor).

Setel jenis model ke Hasil pencarian, beri nama model Anda dan klik tombol BUAT MODEL untuk mulai membuat yang terakhir.

Karena kami ingin membuat halaman hasil pencarian dari awal, Anda cukup menutup jendela perpustakaan template yang muncul.

Baca juga: Bagaimana cara menambahkan efek titik ke kolom di Elementor

Sebelum Anda mulai menambahkan widget, Anda dapat mengatur tata letak halaman terlebih dahulu. Untuk melakukannya, klik ikon roda gigi di sisi bawah panel pengaturan (panel di sisi kiri). Anda dapat mengatur tata letak di opsi Tata Letak Halaman dari blok Pengaturan umum di bawah tab Pengaturan.

Bagian 1

Seperti yang ditunjukkan di atas, kami akan menggunakan bagian ini untuk menempatkan header untuk menampilkan deskripsi halaman hasil pencarian. Cukup klik tombol plus di kotak edit Elementor untuk menambahkan bagian baru. Anda dapat memilih struktur kolom tunggal. Setelah bagian ditambahkan, seret widget Judul ke sana.

Pergi ke panel kiri. Di blok Judul di bawah tab Kandungan, klik pada ikon database di lapangan Judul dan pilih Judul arsip.

buat halaman hasil pencarian

Anda kemudian dapat mengakses tab Gaya untuk menyesuaikan tajuk. Anda dapat mengatur hal-hal seperti warna teks, tipografi (keluarga font, ukuran font, gaya font, dll.). Anda juga dapat menerapkan mode campuran dan bayangan teks jika Anda mau.

Cara membuat halaman hasil pencarian dengan Elementor

Jika Anda ingin mengatur latar belakang bagian, menambahkan pemisah, atau mengatur margin, Anda dapat mengklik pegangan bagian untuk mengalihkannya ke mode edit.

buat halaman hasil pencarian

Bagian 2

Klik tombol Lebih untuk menambahkan bagian baru seperti yang Anda lakukan pada bagian 1 di atas. Anda juga dapat memilih struktur kolom tunggal. Setelah bagian ditambahkan, seret widget Formulir Pencarian.

Anda kemudian dapat mengakses panel pengaturan untuk membuat pengaturan. Di blok Cari formulir di bawah tab Konten, Anda dapat menentukan Skin, placeholder, ikon, ukuran ikon, dll ...

Untuk menyesuaikan formulir, Anda dapat membuka tab Gaya. Ada dua blok parameter yang dapat Anda buka: Memasukkan et Tombol. Dari blok Memasukkan, Anda dapat mengatur tipografi, warna teks, warna latar belakang, warna batas, ukuran batas dan radius batas.

Dari blok Tombol, Anda dapat mengatur warna teks tombol, warna latar belakang, tipografi, ukuran ikon dan lebar tombol.

Setelah gaya widget Formulir Pencarian diterapkan, Anda dapat menambahkan widget Postingan Arsip. Anda dapat menempatkannya tepat di bawah widget Formulir Pencarian.

Setelah widget ini terpasang, navigasikan ke panel kiri. Di bawah blok tata letak, tab Kandungan, Anda dapat menentukan kulit, jumlah kolom, posisi gambar, panjang ekstrak, metadata, dll ...

Di blok Paging, Anda dapat mengatur jenis pagination, batas halaman dan perataan.

Di blok Maju, Anda dapat mengatur pesan untuk ditampilkan ketika WordPress tidak dapat menemukan permintaan pencarian yang disediakan.

Setelah pengaturan dasar tab Isi selesai, Anda dapat beralih ke tab Gaya untuk menyesuaikan tampilan widget Arsip Postingan. Ada 6 blok yang bisa Anda buka di tab ini.

  • tata ruang

Anda dapat membuka blok ini untuk menentukan keselarasan konten tekstual dari posting (judul posting dan meta). Anda juga dapat menentukan jarak antara kolom dan baris.

  • Gambar

Anda dapat membuka blok ini untuk mengatur radius batas dari thumbnail postingan. Anda juga dapat mengatur jarak dan menerapkan filter CSS.

  • Konten

Anda dapat membuka blok ini untuk mengatur tipografi, warna teks, dan spasi konten teks untuk posting.

  • Pemberian nomor pd halaman buku

Jika Anda mengaktifkan pagination, Anda dapat membuka blok ini untuk menyesuaikan pagination. Anda dapat mengatur hal-hal seperti tipografi, warna teks, dan spasi antar angka.

  • Tidak Ada Pesan yang Ditemukan

Anda dapat membuka blok ini untuk menyesuaikan pesan kesalahan ketika WordPress tidak dapat menemukan konten berdasarkan permintaan pencarian yang disediakan. Anda dapat menentukan tipografi dan warna teks pada blok ini.

Anda dapat menambahkan lebih banyak widget jika Anda membutuhkannya. Setelah Anda selesai mengedit halaman, Anda dapat mengklik tombol PUBLIKASIKAN ATAU PERBARUI di bagian bawah panel pengaturan.

Jika Anda diminta untuk menambahkan kondisi tampilan, cukup tambahkan satu dengan mengklik tombol TAMBAHKAN KONDISI. Karena Anda membuat halaman hasil pencarian, atur kondisi tampilan ke Hasil Pencarian. Klik tombol SIMPAN & TUTUP untuk menerapkan perubahan.

buat halaman hasil pencarian

Dan itu dia!

Setiap situs web berbasis WordPress memiliki halaman hasil pencarian yang unik, tergantung pada tema yang digunakan oleh situs web tersebut. Jika tata letak halaman hasil pencarian yang ditawarkan oleh tema yang Anda gunakan tidak terlihat menarik bagi Anda, Anda dapat menyesuaikannya.

Kecuali Anda memiliki keterampilan PHP, Anda dapat menggunakan Elementor untuk membuat halaman hasil pencarian khusus di situs WordPress Anda. Semuanya seret dan lepas. Tidak perlu memanipulasi kode PHP.

Selain itu, Anda juga dapat menggunakan Elementor untuk membuat tajuk khusus, footer khusus, halaman 404 khusus, dan bagian lain dari Anda tema WordPress.

Dapatkan Elementor Pro Sekarang!

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. Autoresponder WooCommerce

Autoresponder WooCommerce adalah WordPress Plugin yang memungkinkan Anda untuk berlangganan pelanggan Anda ke autoresponder Anda. Ini WordPress Plugin juga menampilkan kotak berlangganan buletin untuk diintegrasikan dengan mudah WooCommerce ke penjawab otomatis.

Penjawab otomatis Woocommerce

Adapun fitur yang akan Anda temukan antara lain: integrasi penuh dengan WooCommerce, dukungan untuk 9 penjawab otomatis, tidak perlu pengetahuan pengkodean, mudah dipasang, dan banyak lagi.

Baca juga: MailChimp tutorial dalam bahasa Prancis: panduan lengkap untuk membuat newsletter

Download | DemoHébergement Web

2. Plugin Peringkat Komentar WordPress

Ini tentang sistem evaluasi komentar. Ini memungkinkan Anda untuk membiarkan pengguna menilai komentar yang berbeda. Mereka hanya perlu mengeklik tombol pratinjau dan menggulir ke bawah ke bagian komentar untuk melihat WordPress Plugin premi dalam tindakan.Bagaimana WordPress Plugin Penilaian

Dalam fitur-fiturnya kami menemukan terutama: kemudahan penggunaan, dukungan untuk calat ikon khusus, komentar peringkat menurut catatan, personalisasi tpergi ikon, dukungan CSS khusus, cEnkripsi IP (untuk pengguna Eropa), kemungkinan untuk menerjemahkan plugin ini dan banyak lagi.

Download | Demo | Hébergement Web

3. kemajuan Peta

Peta Kemajuan adalah plugin WordPress yang dirancang untuk geolokasi. Tujuannya adalah untuk membantu pengguna dengan situs web terkait daftar hotel, iklan real estat, daftar restoran, tawaran pekerjaan, pengumuman toko, dan lainnya ... untuk mengatur lokasi mereka di Google Map dan menavigasi peta dengan mudah menggunakan carousel.

Peta kemajuan plugin wordpress wordpress

Dengan kata lain, dengan plugin ini, lokasi Anda akan dipublikasikan di keduanya Google Map (penanda) dan di korsel. Korsel terhubung ke peta, yang berarti bahwa item yang dipilih di korsel akan menargetkan lokasinya di peta dan sebaliknya.

Lihatlah Cara menampilkan lokasi anggota komunitas WP Anda di Google Map

Untuk menambahkan lokasi Anda, Peta Kemajuan menyediakan ruang formulir di halaman "Tambah Item Baru" yang memungkinkan Anda menambahkan koordinat lokasi dengan mudah.

DownloadDemo | Hébergement Web

Sumber daya lain yang direkomendasikan

Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.

Kesimpulan

Disini adalah ! Itu saja untuk tutorial ini. Kami harap ini menunjukkan kepada Anda cara membuat halaman hasil pencarian dengan Elementor. Kami ingin mendengar pendapat Anda tentang masalah ini di bagian komentar.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda

...