Cum să construiți un site web imobiliar folosind Toolset Real Estate și OceanWP
Publicat: 2019-07-21Un 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.

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.

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.

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.
- Î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.

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.

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.
- În panoul de bord al setului de instrumente, faceți clic pe Adăugați taxonomie personalizată în rândul Case .
- Introduceți următoarele în casete
- Nume plural: tipuri de proprietate
- Nume singular: Caracteristica proprietății
- Slug: Caracteristica proprietăţii
- Alegeți dacă doriți ca taxonomia să fie ierarhică sau plată. În scopul acesteia, îl vom păstra plat.
- Selectați tipul de postare cu care doriți să fie asociată taxonomia – în acest caz, va fi „Case”.
- Faceți clic pe Salvare taxonomie

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.

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!
- Accesați Set de instrumente → Tablou de bord și faceți clic pe butonul Creare șablon de conținut din rândul Case.
- Utilizați Editorul de blocuri WordPress pentru a vă crea șablonul.
- 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.
- Activați Sursele dinamice pentru blocurile care ar trebui să afișeze câmpurile postării pe care le afișează șablonul.

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ă.
- După ce ați editat sau creat o pagină, o postare sau un șablon, inserați blocul Vizualizare și creați o Vizualizare nouă.
- Î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).
- În ultimul pas, selectați tipul de postare pentru care doriți să afișați postările.
- Faceți clic pentru a finaliza expertul și vizualizarea dvs. este gata.

Afișarea câmpurilor de postare și aplicarea stilului personalizat
- 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.
- 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
- Accesați Set de instrumente → Relații și faceți clic pe Adăugare nou în partea de sus.
- 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.
- Selectați tipurile de postări care vor forma relația.

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.


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.
- Navigați la pagina unui agent din meniul de administrare
- 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ă.

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.
- Navigați la șablonul de conținut „Agenți”.
- Inserați un bloc de vizualizare și creați o nouă vizualizare
- 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 .
- 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.

Afișarea unui articol asociat (părinte)
- Navigați la șablonul de conținut „Proprietăți”.
- Puteți utiliza orice bloc de instrumente pentru a afișa informațiile părinte.
- În proprietățile blocului, selectați părintele din Post Source.
- 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.
- Începeți prin a introduce un bloc View într-o pagină.
- În expertul pentru crearea Vizualizare, activați opțiunea Căutare.

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.

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 .

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.

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

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.
- 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.
- În secțiunea Sursă pentru marcator , activați Sursa dinamică .
- Î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ă

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

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.

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.

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ă.

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!