Cara membangun situs web real estat menggunakan Toolset Real Estate dan OceanWP

Diterbitkan: 2019-07-21

Situs web real estat harus stabil dan dapat diandalkan seperti rumah yang Anda jual.

Tetapi membangun situs web real estat yang kokoh yang akan dinikmati pengguna terkadang sama sulitnya dengan membangun rumah yang Anda jual – jika Anda menggunakan perangkat yang salah.

Untungnya, menggabungkan Toolset Real Estate dengan OceanWP terbukti memberi Anda situs web real estat profesional dengan semua fungsi yang mungkin Anda perlukan.

Dalam panduan ini, kami akan menunjukkan cara membangun fitur berikut:

  • Jenis posting khusus untuk berbagai properti dan agen Anda
  • Bidang khusus untuk menambahkan informasi seperti jumlah kamar mandi
  • Taksonomi untuk memisahkan properti Anda berdasarkan fitur (rumah terpisah, bungalow, dll.)
  • Template untuk menampilkan properti Anda dengan struktur yang sama
  • Penggeser untuk menampilkan gambar properti Anda
  • Pasca-hubungan untuk menghubungkan agen real estat dengan properti yang menjadi tanggung jawab mereka
  • Pencarian sehingga pengguna dapat dengan mudah menemukan properti terbaik untuk mereka
  • Peta untuk menunjukkan lokasi properti dan hasil pencarian
  • Formulir front-end sehingga pengguna dapat mengirimkan daftar properti mereka sendiri

Jika Anda ingin melakukan langkah-langkah ini saat Anda membacanya, Anda dapat menggunakan situs web pengujian real estat gratis Anda sendiri yang dibuat oleh Toolset dan OceanWP.

Situs web demo real estat gratis
Situs web demo real estat gratis

Mengapa kami menggunakan Toolset Real Estate dan OceanWP

Toolset Real Estate adalah bagian dari Toolset yang menyediakan semua fitur yang Anda butuhkan untuk membangun berbagai jenis situs web profesional.

Secara khusus, dengan Toolset Real Estate Anda tidak memerlukan plugin lain untuk menambahkan fitur yang dibutuhkan situs web real estate. Ini berarti Anda tidak perlu khawatir tentang kompatibilitas plugin atau apakah jumlah plugin yang banyak akan memperlambat situs web Anda.

Sementara itu, OceanWP adalah salah satu tema paling populer untuk situs web bisnis karena suatu alasan. Situs web yang dijalankan oleh OceanWP memiliki tingkat konversi yang lebih baik, waktu muat yang lebih cepat, dan SEO yang ditingkatkan – sehingga pembeli rumah dapat menemukan situs web Anda dengan mudah.

Bersama-sama, Toolset Real Estate dan OceanWP bekerja sama dengan mulus yang berarti Anda dapat membangun situs web tangguh yang tampak hebat tanpa masalah.

Jangan lupa, Anda dapat mengunduh situs web pengujian yang dibuat menggunakan Toolset dan OceanWP secara gratis untuk bereksperimen.

Apa yang Anda perlukan untuk memulai

Saat Anda membangun situs real estat khusus dengan Toolset, Anda memerlukan plugin Toolset berikut:

  • Jenis Toolset – untuk mengatur jenis posting kustom, bidang dan taksonomi, untuk properti dan agen
  • Blok Toolset – untuk mendesain front-end situs Anda (templat dan mencari properti, dll.)
  • Toolset Maps – untuk menambahkan fitur yang memungkinkan pencarian dan tampilan properti di peta
  • Formulir Toolset – untuk memungkinkan agen mengelola properti melalui formulir front-end kustom
  • Akses Toolset – untuk mengontrol bagian mana dari pengunjung situs, klien dan agen yang dapat mengakses

Setelah Anda menginstal dan mendaftarkan komponen ini, saatnya untuk mulai membangun situs web real estat Anda!

1. Buat jenis posting khusus Anda

Pertama, kita perlu membuat jenis posting khusus untuk bagian "Rumah" kita sehingga pengguna tahu persis ke mana harus pergi untuk melihatnya.
1. Buka Toolset → Dashboard di admin WordPress Anda dan klik Add new post type.

Menambahkan Jenis Pos Kustom baru untuk Rumah
Menambahkan Jenis Pos Kustom baru untuk Rumah

2. Sekarang kita perlu memberi nama jenis posting kita dan menyimpannya ke posisi yang kita inginkan untuk ditampilkan di menu admin.

Memberi nama dan memposisikan jenis posting
Memberi nama dan memposisikan jenis posting

3. Klik Simpan jenis posting.

Dan itu saja. Jenis pos kustom rumah Anda sudah siap.

2. Buat bidang khusus Anda

Sekarang setelah kita memiliki jenis posting khusus, kita perlu menambahkan beberapa bidang khusus. Bidang khusus kami membuat templat bagian yang ingin kami isi untuk menggambarkan setiap rumah dan fitur-fiturnya.

Misalnya, kita memerlukan bagian untuk jumlah kamar mandi, harga, dan tahun properti itu dibangun.

  1. Pada Dasbor Toolset, klik Tambahkan bidang khusus di sebelah jenis kiriman khusus "Rumah" yang kami buat.

2. Kotak Tambah Bidang Baru akan muncul di mana kita dapat memilih jenis bidang khusus yang kita inginkan. Misalnya, bidang khusus untuk "Tahun pembuatan" akan berupa angka.

Menambahkan bidang khusus baru
Menambahkan bidang khusus baru

3. Untuk setiap bidang, Anda perlu mengatur opsi seperti apakah wajib memasukkan informasi.

4. Setelah Anda mengisi semua opsi pilihan untuk sebuah bidang, klik Tambah Bidang Baru untuk melanjutkan ke yang berikutnya dalam grup. Setelah Anda menambahkan semua bidang untuk grup bidang, klik Simpan Grup Bidang.

Sekarang, setiap kali Anda mengedit posting "Rumah", Anda akan melihat bidang ini untuk diisi.

Menambahkan opsi bidang khusus
Menambahkan opsi bidang khusus

3. Buat taksonomi khusus Anda

Taksonomi khusus adalah cara yang bagus untuk memisahkan properti sehingga pengguna dapat dengan mudah menemukan properti yang sesuai dengan kriteria mereka. Misalnya, jika mereka hanya ingin melihat rumah yang dijual daripada disewakan.

Mengambil contoh itu, inilah cara membuat taksonomi untuk membedakan antara rumah yang dijual dan rumah yang disewa.

  1. Pada Dasbor Toolset klik Tambahkan taksonomi khusus di baris Rumah .
  2. Masukkan yang berikut ini di dalam kotak
    1. Nama jamak: Jenis properti
    2. Nama tunggal: Fitur properti
    3. Siput: Fitur Properti
  3. Pilih apakah Anda ingin taksonomi menjadi hierarkis atau datar. Untuk tujuan yang satu ini, kami akan tetap datar.
  4. Pilih jenis posting mana yang Anda inginkan untuk dikaitkan dengan taksonomi - dalam hal ini, itu akan menjadi "Rumah."
  5. Klik Simpan taksonomi
Mengakses halaman untuk menambahkan taksonomi khusus
Mengakses halaman untuk menambahkan taksonomi khusus

Sekarang, ketika kita mengedit atau membuat jenis posting "Rumah", kita dapat membuat dan memilih taksonomi "Jenis properti" untuk dikaitkan dengan jenis posting.

Menambahkan dan memilih taksonomi saat membuat posting baru
Menambahkan dan memilih taksonomi saat membuat posting baru

4. Buat template untuk menampilkan properti

Kami sekarang memiliki komponen inti yang kami butuhkan untuk memamerkan properti kami, tetapi bagian penting dari proses tetap ada – bagaimana kami menampilkannya di front-end?

Di sinilah kita membuat template yang bisa kita gunakan untuk menampilkan setiap rumah kita.

Untuk membangun template kami untuk "Rumah" tunggal, kami akan menggunakan Blok Toolset dengan Editor Blok WordPress.

Dengan Blok Toolset, Anda dapat mendesain template untuk jenis posting kustom Anda, dengan bidang kustom dan taksonomi. Tanpa HTML, tanpa CSS, tanpa JavaScript, dan tanpa PHP!

  1. Buka Toolset → Dashboard dan klik tombol Create Content Template di baris Houses.
  2. Gunakan Editor Blok WordPress untuk mendesain template Anda.
  3. Pilih blok dari bagian Toolset untuk setiap bagian dari template yang menampilkan bidang (bukan elemen statis). Misalnya, gunakan blok Heading Toolset untuk heading apa pun yang akan menampilkan bidang. Toolset menambahkan opsi untuk menampilkan konten dinamis juga dari inti WordPress dan plugin pihak ketiga yang paling populer.
  4. Aktifkan Sumber Dinamis untuk blok yang seharusnya menampilkan bidang postingan yang ditampilkan template.
Menampilkan judul posting dalam template untuk posting "properti" tunggal
Menampilkan judul posting dalam template untuk posting "properti" tunggal

Anda dapat memodifikasi dan menata template Anda dengan banyak cara. Misalnya, Anda dapat mengatur konten dalam kolom, menampilkan bagian template secara kondisional, menampilkan daftar posting terkait, dan banyak lagi.

5. Buat penggeser dinamis untuk menampilkan gambar properti Anda

Slider adalah cara yang bagus untuk menampilkan properti Anda dengan menampilkan beberapa gambar dari masing-masing properti.

Menggunakan Toolset, Anda dapat dengan mudah membuat slider kompleks yang menampilkan transisi tanpa pengkodean PHP yang rumit.

  1. Setelah Anda mengedit atau membuat halaman, posting, atau template, masukkan blok View dan buat View baru.
  2. Di wizard View-creation, aktifkan pagination dan di bagian Select View Loop Style , pilih opsi Unformatted (terakhir).
  3. Pada langkah terakhir, pilih jenis postingan yang ingin Anda tampilkan postingannya.
  4. Klik untuk menyelesaikan wizard dan Tampilan Anda sudah siap.
Tampilan Slider diatur secara dinamis untuk menampilkan gambar yang terkait dengan setiap properti

Menampilkan bidang posting dan menerapkan gaya khusus

  1. Sisipkan blok Kontainer sehingga Anda dapat menambahkan latar belakang ke penggeser Anda. Misalnya, Anda dapat mengatur latar belakang slide menjadi gambar dinamis yang berasal dari gambar unggulan kiriman.
  2. Gunakan blok Toolset untuk menambahkan bidang dinamis lainnya ke slider Anda, seperti judul posting.

Dengan Slider Toolset, selain menampilkan bidang posting dan menerapkan gaya kustom, Anda dapat mengubah slider Anda dengan berbagai pilihan lain, seperti membuat slide View Anda secara otomatis dan mengubah gaya pagination.

6. Buat hubungan pasca untuk menghubungkan rumah Anda dengan agen Anda

Hubungan posting adalah bagian penting namun diremehkan dari situs web mana pun. Dengan hubungan pos, Anda dapat menghubungkan berbagai jenis konten satu sama lain.

Untuk mengetahui lebih lanjut tentang bagaimana mereka membantu Anda, lihat panduan kami untuk membuat hubungan posting menggunakan Toolset dan OceanWP.

Di situs web real estat kami, kami memiliki rumah dan agen real estat. Mari kita buat hubungan pos di antara mereka.

Buat hubungan pos

  1. Buka ToolsetHubungan dan klik Tambah Baru di bagian atas.
  2. Panduan hubungan Toolset akan terbuka. Untuk agen dan properti kami, kami menginginkan “hubungan satu-ke-banyak” karena satu agen akan bertanggung jawab atas beberapa properti.
  3. Pilih jenis posting yang akan membentuk hubungan.
Memilih hubungan pos satu-ke-banyak antara agen dan propertinya
Memilih hubungan pos satu-ke-banyak antara agen dan propertinya

4. Pilih jika Anda ingin membatasi jumlah posting yang dapat Anda tetapkan. Misalnya, Anda mungkin ingin setiap agen hanya memiliki maksimal 20 rumah yang ditetapkan untuk mereka.

Membatasi jumlah pos (rumah/properti) yang dapat diberikan agen)
Membatasi jumlah pos (rumah/properti) yang dapat diberikan agen)

5. Sebutkan hubungan Anda.

6. Tinjau hubungan Anda dan klik Selesai.

Cara menetapkan properti ke agen

Sekarang kita dapat mulai membuat hubungan khusus antara properti kita dan agen real estat.

  1. Arahkan ke halaman agen dari menu admin
  2. Bagian baru akan muncul di bagian bawah halaman yang disebut Properti Agen. Klik Hubungkan Properti yang ada lalu ketik untuk menemukan nama properti atau pilih dari daftar yang tersedia.
Menghubungkan agen ke properti yang mereka kelola dari dalam halaman profil agen
Menghubungkan agen ke properti yang mereka kelola dari dalam halaman profil agen

3. Klik Perbarui untuk menyimpan kiriman Anda. Sekarang, ketika Anda mengunjungi halaman agen, properti apa pun yang Anda hubungkan dengannya akan terdaftar. Juga, jika Anda mengedit salah satu halaman properti ini, Anda akan melihat bahwa hubungan telah ditampilkan di kedua ujungnya – agen akan terdaftar di halaman properti juga.

Membuat Tampilan untuk Menampilkan Hubungan Posting Anda

Ada dua cara untuk menampilkan daftar hubungan posting Anda:

  • Tampilkan daftar posting terkait "banyak" dalam hubungan satu-ke-banyak dan banyak-ke-banyak.
  • Dalam hubungan satu ke banyak, tampilkan bidang yang termasuk dalam sisi "satu".

Menampilkan banyak item terkait

Dalam contoh kami, agen memiliki banyak properti, jadi kami akan menggunakan Tampilan untuk menampilkannya.

  1. Arahkan ke Templat Konten "Agen" Anda
  2. Masukkan blok Tampilan dan buat Tampilan baru
  3. Pilih untuk menampilkan jenis posting yang Anda butuhkan (yaitu, properti) dan kemudian pilih opsi untuk menampilkan Properti yang dimiliki oleh Agen saat ini .
  4. Gunakan blok untuk mendesain output untuk Tampilan Anda. Karena Tampilan sudah diatur untuk menampilkan posting terkait, Anda tidak perlu memilih hubungan di blok yang Anda gunakan untuk menampilkan konten dinamis.
Memasukkan View Loop untuk Menampilkan Banyak Properti untuk satu Agen
Memasukkan View Loop untuk Menampilkan Banyak Properti untuk satu Agen

Menampilkan satu item terkait (induk)

  1. Arahkan ke Templat Konten "Properti" Anda.
  2. Anda dapat menggunakan blok Toolset apa pun untuk menampilkan informasi induk.
  3. Di properti blok, pilih induk dari Sumber Postingan.
  4. Pilih bidang yang ingin Anda tampilkan.

7. Cara menambahkan pencarian lanjutan sehingga pengguna dapat dengan mudah menemukan properti yang paling cocok

Pencarian khusus lanjutan adalah cara terbaik bagi pengguna Anda untuk menemukan apa yang mereka cari. Dengan beberapa filter, mereka akan dapat memilih rumah terbaik berdasarkan kebutuhan pribadi mereka.

  1. Mulailah dengan memasukkan blok View ke dalam halaman.
  2. Di panduan pembuatan Tampilan, aktifkan opsi Pencarian.
Mengaktifkan pencarian khusus saat membuat Tampilan baru
Mengaktifkan pencarian khusus saat membuat Tampilan baru

3. Pada halaman berikutnya, pilih “Properties” di bawah Pilih konten Tampilan ini akan ditampilkan .

4. Setelah menyelesaikan wizard pembuatan View, ada bagian View Search di area pengeditan View. Gunakan tombol yang tersedia untuk menambahkan bidang pencarian khusus, menyisipkan tombol kirim dan setel ulang, atau tambahkan blok lain.

Menyesuaikan dan menambahkan blok untuk mendesain bagian pencarian front-end
Menyesuaikan dan menambahkan blok untuk mendesain bagian pencarian front-end

Misalnya, Anda dapat mengeklik Tambahkan Bidang Pencarian dan menggunakan tarik-turun Pilih Bidang . Pilih jenis konten yang Anda inginkan agar dapat ditelusuri oleh pengguna dan klik Berikutnya .

Menambahkan bidang pencarian khusus

5. Sekarang Anda dapat menggunakan bilah sisi kanan untuk mengubah opsi untuk bidang pencarian ini. Ini termasuk pengaturan bidang utama, label dan opsi gaya.

6. Sekarang kita siap untuk membuat bagian dimana hasilnya akan ditampilkan. Kami melakukan ini dengan menambahkan blok di area View Loop editor.

7. Klik Tambah Blok .

8. Pilih blok yang ingin Anda gunakan sebagai bagian dari hasil pencarian Anda. Misalnya, Anda bisa menggunakan blok Heading untuk menampilkan judul properti di hasil pencarian.

Menambahkan blok dalam View Loop untuk mendesain hasil pencarian
Menambahkan blok dalam View Loop untuk mendesain hasil pencarian

Ingatlah untuk menggunakan Blok Toolset oranye, yang akan memungkinkan Anda menggunakan sumber dinamis untuk bidang

Memilih blok Heading Toolset dan mengaturnya sebagai dinamis
Memilih blok Heading Toolset dan mengaturnya sebagai dinamis

8. Tampilkan peta untuk menunjukkan lokasi properti

Peta adalah cara yang bagus untuk membantu pengguna segera memahami lokasi yang tepat dari sebuah properti.
  1. Untuk mulai membuat peta, navigasikan ke halaman atau template tempat Anda ingin menampilkan peta. Masukkan blok Peta Toolset. Jika Anda perlu menyetel kunci API, Google memberikan petunjuk mendetail tentang cara melakukannya.
  2. Di bagian Sumber untuk penanda , aktifkan Sumber Dinamis .
  3. Di dropdown Sumber Posting pilih "Properti Saat Ini". Kemudian, di menu tarik-turun Sumber , pilih bidang khusus apa pun yang berisi alamat untuk ditampilkan di peta
Menghasilkan alamat properti secara dinamis untuk ditampilkan dalam bentuk Peta
Menghasilkan alamat properti secara dinamis untuk ditampilkan dalam bentuk Peta

9. Buat formulir front-end bagi pengguna untuk mengirimkan konten mereka sendiri

Terakhir, Anda mungkin ingin pengguna memberikan cantuman mereka sendiri untuk beriklan di situs web real estat Anda. Salah satu cara termudah untuk melakukannya adalah melalui formulir di front-end yang menampilkan semua bidang yang Anda ingin mereka isi.

Membuat formulir tidak bisa lebih sederhana berkat editor drag-and-drop Toolset.

  1. Buka Toolset → Post Forms dan klik Add New.
  2. Klik Lanjutkan di panduan Formulir dan masukkan nama untuk formulir Anda.
  3. Edit pengaturan untuk formulir Anda termasuk:
    1. Jenis posting yang akan mereka tambahkan kirimannya
    2. Status kiriman setelah dikirimkan
    3. Apa yang dilihat pengguna setelah mereka mengirimkan formulir (Anda juga dapat menambahkan pesan seperti yang saya lakukan di bawah)
Mengedit pengaturan untuk formulir Anda
Mengedit pengaturan untuk formulir Anda

4. Sekarang Anda mencapai editor drag-and-drop di mana Anda dapat memutuskan bidang apa dan di mana. Di sini Anda juga dapat menggunakan bidang Editor CSS dan Editor JS untuk menata formulir Anda. Ada juga sejumlah elemen tambahan yang dapat Anda tambahkan.

Merancang tata letak formulir Anda melalui editor drag-and-drop
Merancang tata letak formulir Anda melalui editor drag-and-drop

5. Di halaman berikutnya, Anda dapat menambahkan pemberitahuan email apa pun yang Anda ingin agar diterima pengguna atau editor pada tahap apa pun. Di bawah ini saya menambahkan email untuk dikirim ke pengguna saat listingan mereka ditayangkan.

Menambahkan notifikasi email untuk pengguna yang telah melengkapi formulir
Menambahkan notifikasi email untuk pengguna yang telah melengkapi formulir

6. Klik Finish dan formulir Anda sekarang siap untuk ditampilkan.

7. Yang perlu Anda lakukan untuk menampilkan formulir adalah pergi ke halaman tempat Anda ingin menambahkan formulir, tambahkan blok Toolset Form , dan pilih formulir yang baru saja Anda buat untuk daftar dropdown.

Formulir di front-end bagi pengguna untuk mengirimkan properti mereka sendiri
Formulir di front-end bagi pengguna untuk mengirimkan properti mereka sendiri

Langkah selanjutnya

Setelah Anda menyelesaikan sembilan langkah kunci ini untuk membangun situs web real estat Anda sendiri, Anda dapat membuat situs Anda lebih mengesankan dengan mengikuti kursus online real estat Toolset.

Modul yang mudah dipahami membentuk panduan langkah demi langkah yang komprehensif – penuh dengan video praktis – yang memberi tahu Anda semua yang perlu Anda ketahui untuk membangun situs web real estat yang luar biasa.

Apa pengalaman Anda membangun situs web real estat? Beri tahu kami di komentar!