Cum să construiți un site web imobiliar folosind Toolset Real Estate și OceanWP

Publicat: 2019-07-21

Un site imobiliar trebuie să fie la fel de stabil și de încredere ca și casele pe care le vindeți.

Dar construirea unui site imobiliar robust pe care utilizatorii să-l folosească cu plăcere poate fi uneori la fel de dificilă precum construirea caselor pe care le vindeți – dacă utilizați un set greșit de instrumente.

Din fericire, combinarea Toolset Real Estate cu OceanWP s-a dovedit că vă oferă un site web imobiliar profesional, cu toate funcțiile de care ați putea avea nevoie.

În acest ghid, vă vom arăta cum să construiți următoarele caracteristici:

  • Tipuri de postări personalizate pentru diferitele proprietăți și agenți
  • Câmpuri personalizate pentru a adăuga informații precum numărul de băi
  • Taxonomii pentru a vă separa proprietățile în funcție de caracteristici (case independente, bungalouri etc.)
  • Șabloane pentru a vă afișa proprietățile cu aceeași structură
  • Un glisor pentru a afișa imagini cu proprietățile dvs
  • Post-relații pentru a lega agenții imobiliari cu proprietățile de care se ocupă
  • O căutare pentru ca utilizatorii să poată găsi cu ușurință cea mai bună proprietate pentru ei
  • Hărți pentru a afișa locațiile proprietăților și rezultatele căutării
  • Un formular front-end, astfel încât utilizatorii să își poată trimite propriile proprietăți

Dacă doriți să efectuați acești pași în timp ce îi citiți, puteți utiliza propriul site web de testare imobiliar gratuit, creat de Toolset și OceanWP.

Site demonstrativ imobiliar gratuit
Site demonstrativ imobiliar gratuit

De ce folosim Toolset Real Estate și OceanWP

Toolset Real Estate face parte din Toolset, care vă oferă toate caracteristicile de care aveți nevoie pentru a construi mai multe tipuri de site-uri web profesionale.

Mai exact, cu Toolset Real Estate nu veți avea nevoie de niciun alt plugin pentru a adăuga funcțiile de care are nevoie un site imobiliar. Aceasta înseamnă că nu trebuie să vă faceți griji cu privire la compatibilitatea pluginurilor sau dacă numărul mare de plugin-uri vă va încetini site-ul.

Între timp, OceanWP este una dintre cele mai populare teme pentru site-urile web de afaceri dintr-un motiv. Site-urile web conduse de OceanWP au o rată de conversie mai bună, timpi de încărcare mai rapizi și SEO îmbunătățit – astfel încât cumpărătorii de case să vă găsească site-ul cu ușurință.

Împreună, Toolset Real Estate și OceanWP funcționează perfect împreună, ceea ce înseamnă că puteți construi site-uri web robuste, care arată grozav, fără nicio grijă.

Nu uitați, puteți descărca gratuit site-uri web de testare create folosind Toolset și OceanWP pentru a experimenta.

Ce ai nevoie pentru a începe

Când construiți un site imobiliar personalizat cu Toolset, veți avea nevoie de următoarele pluginuri Toolset:

  • Tipuri de set de instrumente – pentru configurarea tipurilor de postări personalizate, câmpurilor și taxonomiilor, pentru proprietăți și agenți
  • Blocuri de instrumente – pentru proiectarea front-end-ului site-ului dvs. (șabloane și căutări de proprietăți etc.)
  • Set de instrumente Hărți – pentru adăugarea de funcții care permit căutarea și afișarea proprietăților pe hărți
  • Formulare set de instrumente – pentru a le permite agenților să gestioneze proprietăți prin formulare front-end personalizate
  • Acces la set de instrumente – pentru a controla ce părți ale site-ului pot accesa vizitatorii, clienții și agenții

Odată ce ați instalat și înregistrat aceste componente, este timpul să începeți construirea site-ului dvs. imobiliar!

1. Creați tipul de postare personalizat

În primul rând, trebuie să creăm un tip de postare personalizat pentru secțiunea noastră „Case”, astfel încât utilizatorii să știe exact unde să meargă pentru a le vizualiza.
1. Mergeți la Setul de instrumente → Tabloul de bord din administratorul WordPress și faceți clic pe Adăugați un nou tip de postare.

Adăugarea unui nou tip de postare personalizată pentru case
Adăugarea unui nou tip de postare personalizată pentru case

2. Acum trebuie să ne denumim tipul de postare și să o salvăm în poziția în care dorim să fie afișată în meniul admin.

Denumirea și poziționarea unui tip de postare
Denumirea și poziționarea unui tip de postare

3. Faceți clic pe Salvare tip de postare.

Si asta e. Tipul de post personalizat pentru casele dvs. este gata.

2. Creați-vă câmpurile personalizate

Acum că avem tipul nostru de postare personalizat, trebuie să adăugăm câteva câmpuri personalizate. Câmpurile noastre personalizate formează un șablon de secțiuni pe care vom dori să le completăm pentru a descrie fiecare casă și caracteristicile acesteia.

De exemplu, vom avea nevoie de secțiuni pentru numărul de băi, preț și anul în care a fost construită proprietatea.

  1. În tabloul de bord al setului de instrumente, faceți clic pe Adăugați câmpuri personalizate lângă tipul de postare personalizat „Case” pe care l-am creat.

2. Va apărea o casetă Add New Field unde putem alege ce tip de câmpuri personalizate dorim. De exemplu, un câmp personalizat pentru „Anul construcției” va fi un număr.

Adăugarea unui nou câmp personalizat
Adăugarea unui nou câmp personalizat

3. Pentru fiecare câmp va trebui să setați opțiuni precum dacă introducerea informațiilor este obligatorie.

4. După ce ați completat toate opțiunile preferate pentru un câmp, faceți clic pe Adăugare câmp nou pentru a trece la următorul câmp din grup. După ce ați adăugat toate câmpurile pentru un grup de câmpuri, faceți clic pe Salvare grup de câmpuri.

Acum, de fiecare dată când editați o postare „Casă”, veți vedea aceste câmpuri de completat.

Adăugarea de opțiuni de câmp personalizat
Adăugarea de opțiuni de câmp personalizat

3. Creați taxonomii personalizate

Taxonomiile personalizate sunt o modalitate excelentă de a separa proprietățile, astfel încât utilizatorii să le poată găsi cu ușurință pe cele care se potrivesc criteriilor lor. De exemplu, dacă vor să vadă doar case care sunt de vânzare, mai degrabă decât să închirieze.

Luând acest exemplu, iată cum să creați taxonomii pentru a diferenția între casele care sunt de vânzare și casele de închiriat.

  1. În panoul de bord al setului de instrumente, faceți clic pe Adăugați taxonomie personalizată în rândul Case .
  2. Introduceți următoarele în casete
    1. Nume plural: tipuri de proprietate
    2. Nume singular: Caracteristica proprietății
    3. Slug: Caracteristica proprietăţii
  3. Alegeți dacă doriți ca taxonomia să fie ierarhică sau plată. În scopul acesteia, îl vom păstra plat.
  4. Selectați tipul de postare cu care doriți să fie asociată taxonomia – în acest caz, va fi „Case”.
  5. Faceți clic pe Salvare taxonomie
Accesarea paginii pentru a adăuga taxonomii personalizate
Accesarea paginii pentru a adăuga taxonomii personalizate

Acum, când edităm sau creăm un tip de postare „Case”, putem crea și selecta taxonomii „Tip de proprietate” pentru a le atribui tipului de postare.

Adăugarea și selectarea taxonomiilor atunci când se creează postări noi
Adăugarea și selectarea taxonomiilor atunci când se creează postări noi

4. Creați un șablon pentru a afișa proprietățile

Acum avem componentele de bază de care avem nevoie pentru a ne arăta proprietățile, dar rămâne o parte importantă a procesului – cum le afișăm pe front-end?

Aici creăm un șablon pe care îl putem folosi pentru a afișa fiecare dintre casele noastre.

Pentru a construi șablonul nostru pentru „Case” unice, vom folosi Blocuri de instrumente cu Editorul de blocuri WordPress.

Cu Toolset Blocks, puteți crea șabloane pentru tipurile de postări personalizate, cu câmpuri și taxonomii personalizate. Fără HTML, fără CSS, fără JavaScript și fără PHP necesar!

  1. Accesați Set de instrumente → Tablou de bord și faceți clic pe butonul Creare șablon de conținut din rândul Case.
  2. Utilizați Editorul de blocuri WordPress pentru a vă crea șablonul.
  3. Alegeți blocuri din secțiunea Set de instrumente pentru orice parte a șablonului care afișează câmpuri (nu elemente statice). De exemplu, utilizați blocul Heading din Toolset pentru orice titlu care va afișa un câmp. Toolset adaugă opțiunea de a afișa conținut dinamic și din nucleul WordPress și din cele mai populare pluginuri terță parte.
  4. Activați Sursele dinamice pentru blocurile care ar trebui să afișeze câmpurile postării pe care le afișează șablonul.
Afișarea titlului postării într-un șablon pentru postările unice „proprietate”.
Afișarea titlului postării într-un șablon pentru postările unice „proprietate”.

Puteți modifica și modela șablonul în mai multe moduri. De exemplu, puteți aranja conținutul în coloane, puteți afișa părți ale șablonului în mod condiționat, puteți afișa o listă de postări asociate și multe altele.

5. Creați un glisor dinamic pentru a prezenta imaginile proprietății dvs

Un glisor este o modalitate excelentă de a vă prezenta proprietățile prin afișarea mai multor imagini ale fiecăreia.

Folosind Toolset, puteți crea cu ușurință glisoare complexe cu tranziții fără nicio codare PHP complexă.

  1. După ce ați editat sau creat o pagină, o postare sau un șablon, inserați blocul Vizualizare și creați o Vizualizare nouă.
  2. În expertul pentru crearea vizualizării, activați paginarea și în secțiunea Selectați stilul buclei de vizualizare , alegeți opțiunea Neformatat (ultima).
  3. În ultimul pas, selectați tipul de postare pentru care doriți să afișați postările.
  4. Faceți clic pentru a finaliza expertul și vizualizarea dvs. este gata.
O vizualizare Slider setată dinamic pentru a afișa imagini asociate cu fiecare proprietate

Afișarea câmpurilor de postare și aplicarea stilului personalizat

  1. Inserați un bloc Container astfel încât să puteți adăuga un fundal la glisor. De exemplu, puteți seta fundalul diapozitivului să fie o imagine dinamică care provine din imaginea prezentată a postării.
  2. Utilizați blocurile din set de instrumente pentru a adăuga alte câmpuri dinamice la glisor, cum ar fi titlul postării.

Cu Toolset Sliders, pe lângă afișarea câmpurilor de postare și aplicarea stilului personalizat, vă puteți modifica glisorul cu o serie de alte opțiuni, cum ar fi crearea automată a diapozitivului Vizualizare și schimbarea stilului de paginare.

6. Creați o post-relație pentru a vă conecta casele cu agenții dvs

Relațiile de postare sunt o parte importantă, dar subestimată a oricărui site web. Cu relațiile de postare, puteți conecta diferite tipuri de conținut între ele.

Pentru a afla mai multe despre modul în care vă ajută, consultați ghidul nostru pentru crearea relațiilor de postare folosind Toolset și OceanWP.

Pe site-ul nostru imobiliar avem case și agenți imobiliari. Să creăm o relație post între ei.

Creați relația de postare

  1. Accesați Set de instrumente → Relații și faceți clic pe Adăugare nou în partea de sus.
  2. Se deschide expertul pentru relații set de instrumente. Pentru agenții și proprietățile noastre, dorim o „relație unu-la-mulți”, deoarece un agent va fi responsabil de mai multe proprietăți.
  3. Selectați tipurile de postări care vor forma relația.
Selectarea unei relații post unu-la-mulți între un agent și proprietățile acestora
Selectarea unei relații post unu-la-mulți între un agent și proprietățile acestora

4. Selectați dacă doriți să limitați numărul de postări pe care le puteți atribui. De exemplu, ați putea dori ca fiecare agent să aibă doar maximum 20 de case alocate.

Limitarea numărului de posturi (case/proprietăți) unui agent poate fi atribuit)
Limitarea numărului de posturi (case/proprietăți) unui agent poate fi atribuit)

5. Denumiți-vă relația.

6. Examinați-vă relațiile și faceți clic pe Terminare.

Cum să atribuiți proprietăți unui agent

Acum putem începe să creăm conexiuni specifice între proprietățile noastre și agenții imobiliari.

  1. Navigați la pagina unui agent din meniul de administrare
  2. O nouă secțiune va fi apărut în partea de jos a paginii numită Proprietatea agentului. Faceți clic pe Conectați proprietatea existentă și apoi tastați pentru a găsi numele unei proprietăți sau selectați-o din lista disponibilă.
Conectarea unui agent la proprietățile pe care le gestionează din pagina de profil a agentului
Conectarea unui agent la proprietățile pe care le gestionează din pagina de profil a agentului

3. Faceți clic pe Actualizare pentru a vă salva postarea. Acum, când vizitați pagina agentului, toate proprietățile pe care le-ați conectat la acestea vor fi listate. De asemenea, dacă editați una dintre paginile acestor proprietăți, veți vedea că relația a fost afișată la ambele capete – agentul va fi listat și pe pagina proprietății.

Crearea unei vizualizări pentru a vă afișa relația cu postarea

Există două moduri de a afișa lista de relații de postare:

  • Afișați o listă a postărilor legate de „multe” în relațiile unu-la-mulți și mulți-la-mulți.
  • În relațiile unu-la-mai multe, afișați câmpuri care aparțin părții „unu”.

Afișează multe articole înrudite

În exemplul nostru, agenții au multe proprietăți, așa că vom folosi o vizualizare pentru a le afișa.

  1. Navigați la șablonul de conținut „Agenți”.
  2. Inserați un bloc de vizualizare și creați o nouă vizualizare
  3. Selectați pentru a afișa tipul de postare de care aveți nevoie (adică, proprietăți) și apoi selectați opțiunea pentru a afișa proprietățile care aparțin agentului curent .
  4. Utilizați blocuri pentru a proiecta rezultatul pentru vizualizarea dvs. Deoarece Vizualizarea este deja setată să afișeze postări similare, nu trebuie să selectați relația în blocuri pe care o utilizați pentru a afișa conținut dinamic.
Inserarea unei bucle de vizualizare pentru a afișa mai multe proprietăți pentru un agent
Inserarea unei bucle de vizualizare pentru a afișa mai multe proprietăți pentru un agent

Afișarea unui articol asociat (părinte)

  1. Navigați la șablonul de conținut „Proprietăți”.
  2. Puteți utiliza orice bloc de instrumente pentru a afișa informațiile părinte.
  3. În proprietățile blocului, selectați părintele din Post Source.
  4. Selectați câmpul pe care doriți să-l afișați.

7. Cum să adăugați o căutare avansată, astfel încât utilizatorii să își poată găsi cu ușurință proprietățile cele mai potrivite

O căutare avansată personalizată este cea mai bună modalitate pentru utilizatorii dvs. de a găsi exact ceea ce caută. Cu mai multe filtre, ei vor putea selecta cea mai bună casă în funcție de cerințele lor personale.

  1. Începeți prin a introduce un bloc View într-o pagină.
  2. În expertul pentru crearea Vizualizare, activați opțiunea Căutare.
Activarea căutării personalizate la crearea unei noi vizualizări
Activarea căutării personalizate la crearea unei noi vizualizări

3. Pe pagina următoare, selectați „Proprietăți” sub Alegeți conținutul pe care îl va afișa această vizualizare .

4. După ce ați terminat expertul de creare a vizualizării, există o secțiune de căutare a vizualizării în zona de editare a vizualizării. Utilizați butoanele disponibile pentru a adăuga un câmp de căutare personalizat, pentru a introduce butoanele de trimitere și resetare sau pentru a adăuga alte blocuri.

Personalizarea și adăugarea de blocuri pentru a proiecta secțiunea de căutare frontală
Personalizarea și adăugarea de blocuri pentru a proiecta secțiunea de căutare frontală

De exemplu, puteți face clic pentru Adăugare câmp de căutare și utilizați meniul derulant Selectați un câmp . Selectați tipul de conținut după care doriți ca utilizatorii să poată căuta și faceți clic pe Următorul .

Adăugarea unui câmp de căutare personalizat

5. Acum puteți utiliza bara laterală din dreapta pentru a modifica opțiunile pentru acest câmp de căutare. Aceasta include setările principale ale câmpului, opțiunile de etichetă și stil.

6. Acum suntem gata să creăm secțiunea în care vor fi afișate rezultatele. Facem acest lucru adăugând blocuri în zona View Loop a editorului.

7. Faceți clic pe Adăugare bloc .

8. Alegeți un bloc pe care doriți să îl utilizați ca parte a rezultatelor căutării. De exemplu, puteți utiliza blocul Titlu pentru a afișa titlurile de proprietate în rezultatele căutării.

Adăugarea de blocuri într-o buclă de vizualizare pentru a proiecta rezultatele căutării
Adăugarea de blocuri într-o buclă de vizualizare pentru a proiecta rezultatele căutării

Nu uitați să utilizați blocurile portocalii de instrumente, care vă vor permite să utilizați surse dinamice pentru câmpuri

Alegerea unui bloc Heading Set de instrumente și setarea acestuia ca dinamic
Alegerea unui bloc Heading Set de instrumente și setarea acestuia ca dinamic

8. Afișați hărți pentru a afișa locațiile proprietăților

Hărțile sunt o modalitate excelentă de a ajuta utilizatorii să înțeleagă imediat locația exactă a unei proprietăți.
  1. Pentru a începe să creați o hartă, navigați la pagina sau șablonul în care doriți să afișați harta. Inserați blocul Hartă set de instrumente. Dacă trebuie să setați o cheie API, Google vă oferă instrucțiuni detaliate despre cum să faceți acest lucru.
  2. În secțiunea Sursă pentru marcator , activați Sursa dinamică .
  3. În meniul derulant Sursă postare , selectați „Proprietate curentă”. Apoi, în meniul derulant Sursă , selectați orice câmp personalizat care conține o adresă pentru a o afișa pe hartă
Generarea dinamică a unei adrese de proprietăți care să fie afișată în formularul de hartă
Generarea dinamică a unei adrese de proprietăți care să fie afișată în formularul de hartă

9. Creați un formular front-end pentru ca utilizatorii să își trimită propriul conținut

În cele din urmă, poate doriți ca utilizatorii să furnizeze propriile lor înregistrări pentru a face publicitate pe site-ul dvs. imobiliar. Una dintre cele mai ușoare modalități de a face acest lucru este printr-un formular pe front-end care conține toate câmpurile pe care doriți să le completeze.

Crearea formularului nu ar putea fi mai simplă datorită editorului de drag-and-drop al Toolset.

  1. Accesați Set de instrumente → Postați formulare și faceți clic pe Adăugare nou.
  2. Faceți clic pe Continuare în expertul Formulare și introduceți numele formularului dvs.
  3. Editați setările pentru formularul dvs., inclusiv:
    1. Tipul de postare la care vor adăuga trimiteri
    2. Starea postării odată ce este trimisă
    3. Ce văd utilizatorii după ce trimit formularul (puteți adăuga și un mesaj așa cum am făcut mai jos)
Editarea setărilor pentru formularul dvs
Editarea setărilor pentru formularul dvs

4. Acum ajungeți la editorul drag-and-drop unde puteți decide ce câmpuri vor merge și unde. Aici puteți folosi, de asemenea, câmpurile Editor CSS și Editor JS pentru a vă stila formularul. Există, de asemenea, o serie de elemente suplimentare pe care le puteți adăuga.

Proiectarea aspectului formularului dvs. printr-un editor drag-and-drop
Proiectarea aspectului formularului dvs. printr-un editor drag-and-drop

5. Pe pagina următoare puteți adăuga orice notificări prin e-mail pe care doriți să le primească utilizatorii sau editorii în orice etapă. Mai jos am adăugat un e-mail pe care să-l trimit utilizatorilor atunci când listarea lor este live.

Adăugarea notificărilor prin e-mail pentru utilizatorii care au completat formularul
Adăugarea notificărilor prin e-mail pentru utilizatorii care au completat formularul

6. Faceți clic pe Terminare și formularul dvs. este acum gata pentru a fi afișat.

7. Tot ce trebuie să faceți pentru a afișa formularul este să mergeți la pagina la care doriți să adăugați formularul, să adăugați blocul Toolset Form și să selectați formularul pe care tocmai l-ați creat pentru lista verticală.

Un formular pe front-end pentru ca utilizatorii să își trimită propriile proprietăți
Un formular pe front-end pentru ca utilizatorii să își trimită propriile proprietăți

Pasii urmatori

Odată ce ați parcurs acești nouă pași cheie pentru construirea propriului site web imobiliar, vă puteți face site-ul și mai impresionant, urmând cursul online de imobiliare al Toolset.

Modulele ușor de înțeles formează un ghid cuprinzător pas cu pas – plin de videoclipuri la îndemână – care vă spune tot ce trebuie să știți pentru a construi un site web imobiliar remarcabil.

Care a fost experiența dumneavoastră în construirea unui site web imobiliar? Spune-ne în comentarii!