Een vastgoedwebsite bouwen met WordPress
Een vastgoedwebsite heeft vier taken: het aanbod tonen, een koper laten filteren, de vragen beantwoorden die een woningadvertentie oproept en de aanvragen verzamelen. Deze gids doet alle vier, vanaf een lege WordPress-installatie tot een aanbodpagina waarop een koper kan filteren. Het thema heeft geen MLS- of IDX-feed en geen CRM, dus deze gids is bedoeld voor een makelaar, een klein makelaarskantoor of een ontwikkelaar die zijn eigen aanbod publiceert.
Stap 1: WordPress klaarzetten
Stel drie instellingen vast voordat de eerste woningvermelding erin gaat, want elk ervan komt op plekken terecht die later lastig zijn te herstellen.
- Sitetitel en ondertitel. Ga naar Instellingen en daarna naar Algemeen. De naam van het bureau hoort in de titel, en de ondertitel vermeldt wat je verkoopt en waar, bijvoorbeeld gezinswoningen in één wijk. Zoekresultaten en gedeelde links nemen beide zinnen over.
- Permalinks. Ga naar Instellingen, daarna Permalinks, en kies Berichtnaam. Elke woning krijgt dan een leesbaar adres, wat belangrijk is omdat links naar woningen worden doorgestuurd tussen partners, ouders en vrienden.
- Tijdzone. Opnieuw op het scherm Algemeen. Aanvragen krijgen daarmee een tijdstempel, en dat tijdstempel vertelt je welke koper het eerst vroeg.
Woningadvertenties zijn vol met foto's: elke woning heeft een galerij, en een lage PHP-geheugenlimiet is de gebruikelijke reden dat een import midden in de media blijft hangen. Vraag je hostingprovider wat de limiet nu is. De versievereisten en de back-uproutine zijn hetzelfde voor elke Canvas-site, dus die staan in de importgids.
Versies, back-ups en hostingruimte
Een aanvraag die een dag ongelezen blijft, kan je de koper kosten. WordPress stuurt e-mail via je server, tenzij je anders aangeeft, en veel hosts laten die stilletjes vallen. Koppel daarom een e-mailbezorgdienst of een SMTP-plugin voordat een advertentie live gaat.
Stap 2: Installeer Canvas en start de installatiewizard
Upload het themabestand (zip) vanuit je dashboard (Weergave, Thema's, Nieuw toevoegen, Thema uploaden) en de installatiewizard start zodra je het activeert. Plak je licentiesleutel wanneer daarom wordt gevraagd; de sleutel zorgt ervoor dat de wizard het Real Estate-pakket kan ophalen. Zoek bij de demostap naar Real Estate. Het ontwerp gebruikt geen plugin van derden, dus de pluginstap heeft niets om te installeren en slaat je door naar de volgende stap.
De installatiewizard noemt aan het eind ook de site. Als je sitebreed hebt geïmporteerd, is die stap voor je ingevuld, en elke stap kun je overslaan en later alsnog oppakken via het Canvas-menu.
Stap 3: Importeer de Real Estate-demo
Gebruik de live-preview zoals een koper dat zou doen voordat je iets importeert: voer een zoekopdracht uit, beperk die op prijs en open een woning. Het is de Real Estate-demo zelf, die draait op het thema dat je op het punt staat te installeren.
Welke scope
Een nieuwe bureausite moet het hele ontwerp overnemen. Importeer voor de hele site, dan worden de Thema-opties, lettertypen, kleuren en menu's van de demo van jou. Als je al een site draait en de aanbodfunctionaliteit wilt zonder de look, importeer dan in de bestaande website: de pagina's en vastgoedgegevens komen binnen en je eigen ontwerp blijft zoals het is.
Wat je krijgt
- 9 pagina’s: drie homepage-ontwerpen, de overzichtspagina, diensten, builders, over ons, contact en de blog
- 10 vastgoedobjecten, elk een record van het contenttype Properties, met prijs, slaapkamers, badkamers, oppervlakte, galerij en kaart
- Vastgoedtypen voor villa's, appartementen, kantoren, landgoederen, commercieel en residentieel vastgoed, en locaties waaronder elk pand wordt ingedeeld
- 5 blogberichten, zodat de sectie met marktnieuws op dag één niet leeg is
- 10 formulieren: vier zoekformulieren voor vastgoed, een contactformulier, twee snelle offerteformulieren, een reserveringsformulier en een inschrijfformulier
- Een header, een footer, een topbalk, een zijpaneel en vier hero-ontwerpen, allemaal bewerkbare records
Toch van gedachten veranderd over het ontwerp? Ga naar Canvas en daarna naar Demo Import. Daarmee draai je deze import terug, inclusief alle vastgoedrecords, en zet je eerdere instellingen weer terug.
Stap 4: Vervang de demoteksten en afbeeldingen
Open de homepage die je uit Pagina's behoudt. De editor toont die binnen de echte header, zoekband en footer, zodat de pagina die je bewerkt de pagina is waarop een koper terechtkomt.
Kies een van de drie homepage-ontwerpen
De demo bevat drie homepages: een standaard homepage, een homepage met slider en een homepage voor kopen en huren, waarin de zoekfunctie de twee als tabbladen aanbiedt. Stel de homepage die je wilt in als voorpagina via Instellingen, dan Lezen, en verwijder de andere twee zodra je een keuze hebt gemaakt. Het heeft geen zin om drie homepages te onderhouden.
Eerst woorden, dan foto's
Typ direct over elke kop of alinea. Loop daarna de afbeeldingen door: selecteer er een, vervang hem via je mediabibliotheek en houd je exterieurfoto's dicht bij de verhoudingen van de demo, zodat de hero niet verspringt. Kleuren, links en afmetingen staan in het instellingenpaneel dat elk blok rechts opent.
Vervang de demotekst door wat alleen jij kunt zeggen: de straten waar je echt werkt, hoe lang je er al werkt en wat je courtage dekt. Een koper die tussen twee makelaars kiest, let op details. Als een sectie je niet past, verwijder hem dan en voeg een patroon in op die plek. Canvas bevat 183 patronen en 314 blokken, en een patroon komt aan als gewone blokken die je net als alle andere kunt herschikken.
Stap 5: Voer je panden in als records
Dit is de stap die bepaalt of de site goed te onderhouden is. Een woning in de Real Estate-demo is geen pagina die je opmaakt. Het is een record in een contenttype Properties, dat in de admin net als berichten wordt getoond. Elke kaart, elke rij in het overzicht en de eigen pagina van de woning lezen daaruit.
Wat één item bevat
- De prijs en de periode, zoals je die vermeldt: $1.2m met erfpacht, of $799 met per maand.
- Een prijs en een oppervlakte als gewone getallen ernaast. Dit zijn de waarden waarmee de zoekbereiken vergelijken, dus een record waarin ze leeg blijven, valt buiten een prijs- of oppervlaktefilter, maar verschijnt wel in een zoekopdracht zonder filter.
- Een badge, zoals Te koop, Langetermijnhuur of Hot deal. Het is een veld bij de vermelding, zodat niemand een afbeelding opnieuw hoeft te tekenen.
- Slaapkamers, badkamers, oppervlakte en locatie, want daar let een koper op als hij een kaart bekijkt.
- Een galerij, een videolink en een kaartinsluiting, plus een statistiekenbalk, een specificatielijst en een voorzieningenlijst die je als één item per regel schrijft.
- De makelaar die op de advertentie staat, met een naam, een functie en een foto.
Leg elke woning twee keer vast
Geef elk item een pandtype en een locatie. Die twee taxonomieën bepalen wat de zoekdropdowns vullen en waarop het listingblok filtert, dus een pand dat onder geen van beide valt, kan niemand vinden. De demo begint met villa's, appartementen, kantoren, landgoederen, commercieel en residentieel, en vier locaties; hernoem ze naar je eigen gebieden en voeg er meer toe.
Werk de 10 demo-records één keer door. Bewerk de eerste om de velden te leren kennen, verwijder daarna de rest en voeg de jouwe toe. De eerste paar kosten wat tijd; daarna is het gewoon gegevensinvoer, en over de lay-out van een woningpagina hoef je nooit meer na te denken.
De woningpagina is opgebouwd uit blokken die elk één deel van de woning weergeven: de herobanner, de statistiekenstrook, de specificatietabel, de lijst met voorzieningen, de ingesloten kaart, de ingesloten video en een rij met vergelijkbare woningen. Herschik ze, of verwijder er een die je niet nodig hebt.
Stap 6: Maak je aanbod doorzoekbaar met het zoekfilter
De zoekbalk boven de hero is een Canvas Form ingesteld op zoekmodus en gekoppeld aan de overzichtspagina. Het bevraagt geen makelaarsdatabase of externe partij. Het beperkt de resultaten tot de woningen die je hebt gepubliceerd.
De criteria die het verstuurt
- Kopen of huren, als schakelaar met je eigen labels aan beide kanten.
- Locatie, een doorzoekbare dropdown die meer dan één waarde tegelijk kan bevatten.
- Type onroerend goed, met een eerste optie met het label Any die geen filter inhoudt.
- Slaapkamers en badkamers, als minimum.
- Een prijsbereik en een vloeroppervlaktebereik, vergeleken met de gewone getallen op elk record.
De dropdowns voor locatie en woningtype lezen hun termen live uit, zodat een locatie die je volgende maand aan een record toevoegt, vanzelf in de zoekopdracht verschijnt, zonder dat het formulier hoeft te worden aangepast.
Waar de resultaten terechtkomen
Het formulier stuurt de criteria als een gewoon webverzoek naar de overzichtspagina. Het overzichtsblok daar leest ze uit en beperkt de query. Omdat de criteria in het adres meereizen, is een gefilterd overzicht een link: je kunt een koper drie villa's met drie slaapkamers in één gebied sturen, en die kan het als bladwijzer opslaan. Schakel het filter uit bij elk overzichtsblok dat altijd alles moet tonen, zoals een uitgelichte rij op de startpagina.
De demo zet een zoekbalk in de hero-sectie van alle drie de homepage-ontwerpen en bovenaan de overzichtspagina, met kopen en huren als tabbladen op één ervan. Bewerk degene die je houdt en verwijder de rest, net als bij de homepages.
Stap 7: Aanvragen ontvangen met een formulier
Een woningaanbod waarop niemand kan reageren, is slechts een brochure. De demo levert de contactformulieren al ingesteld mee, elk een formulierrecord dat je met het Form Embed-blok op elke pagina plaatst.
De drie die bij de demo komen
- Het contactformulier, op de contactpagina, voor algemene vragen.
- Twee snelle aanvraagformulieren, één donker en één licht, voor de korte taxatieaanvraag die je naast een woningadvertentie plaatst.
- Het reserveringsformulier, voor een bezichtiging of een aanvraag om een specifieke woning te reserveren.
Stel ze één keer in
Alle drie slaan elke aanvraag op en sturen die per e-mail door. Open elk formulier, wijzig het meldingsadres in een adres dat iemand echt leest, en geef de onderwerpregel een woord waarop je kunt filteren, zoals het type woning.
Elke aanvraag wordt ook bewaard op je eigen site, onder Submissions in het WordPress-beheer, zodat een volle inbox nooit een lead laat liggen. Stel een bewaarperiode in en oude inzendingen worden volgens schema verwijderd of geanonimiseerd, wat bepaalt hoelang de naam en het telefoonnummer van een koper bewaard blijven. Een CRM hoort buiten het thema: de webhook-actie van het formulier stuurt elke aanvraag door naar het CRM dat je gebruikt, en Canvas doet niet alsof het er zelf een is.
Stap 8: Stel de header, contactgegevens en footer in
Een koper die klaar is om contact op te nemen, kijkt bovenaan de pagina naar een getal en onderaan naar een adres. In Canvas zijn beide uiteinden van de pagina records die uit blokken zijn opgebouwd, en die bewerk je net zoals je een pagina bewerkt.
De header
Verdeel de header in zones: het logo links, de navigatie in het midden en rechts een Header Button voor het ene wat je bezoekers het liefst willen laten doen, zoals een taxatie aanvragen, naast een Header Icon Link met je telefoonnummer. De demo-header staat transparant over de heroafbeelding en wordt massief zodra de pagina scrolt. Beide zijn instelbaar, en een pagina kan de sitebrede header overrulen.
Een topbalk staat erboven en een zijpaneel wacht erachter. De topbalk is een eigen record, en daarom dé plek voor de open dag van dit weekend.
De footer en de details
Het kantooradres en telefoonnummer staan in een Footer Contacts-blok. Zoek elke kopie van het telefoonnummer van de demo op en vervang die: de contactpagina, de footer en de meldingsinstellingen van elk formulier. Een lead die een demonummer belt, is een lead waar je nooit iets van hoort.
Stap 9: Controleer het en publiceer daarna
Loop deze controles door voordat de eerste koper de site ziet. Geen ervan duurt lang.
- Voer je eigen zoekopdracht uit. Kies een locatie, een type en een prijsbereik waarvan je weet dat er een match is, en daarna een waarvan je weet dat er geen is, en controleer of beide werken zoals verwacht.
- Open drie woningpagina's en controleer de prijs, het aantal slaapkamers, het aantal badkamers en de oppervlakte aan de hand van je eigen documenten.
- Stuur een echte testaanvraag vanaf je telefoon via mobiele data en controleer daarna of je zowel de e-mail als de opgeslagen invoer ziet.
- Bekijk het op je telefoon. Het bekijken van woningen gebeurt op de bank, in de trein en op de stoep voor het huis.
- Beschrijf de foto's. Alt-tekst wordt voorgelezen door schermlezers, en het is een van de belangrijkste manieren waarop een zoekmachine leert hoe een kamer eruitziet.
- Bekijk het SEO-scherm. Titels, beschrijvingen, deelkaarten en gestructureerde data over 16 schematypen komen uit de aanbiedingen zelf, zodat een specifieke aanbieding een specifiek zoekresultaat oplevert.
- Kies je prestatie-instellingen. Canvas heeft 35 optimalisaties; elk daarvan kan weer worden uitgeschakeld, en elk voorkomt dat een pagina iets laadt wat niet wordt gebruikt.
Publiceer daarna. Vanaf dat moment is de site een verzameling woningrecords die je bijwerkt wanneer nieuw aanbod binnenkomt en woningen onder bod gaan, en niet een project dat je opnieuw bouwt.
Bronnen
Waar deze gids iets beschrijft dat buiten Canvas zelf valt, zijn dit de officiële pagina's die dat documenteren.
- Scherm Algemene instellingenwordpress.org · Waar WordPress de sitetitel en ondertitel bewaart, met de tijdzone op hetzelfde scherm
- Permalinks-scherm onder Instellingenwordpress.org · De permalinkstructuur Berichtnaam, waarmee elke pagina een leesbaar adres krijgt
- wp_mail()developer.wordpress.org · WordPress stuurt mail standaard door naar PHP's mail(), en een geslaagde verzending is geen bewijs van aflevering
- Tutorial over afbeeldingenw3.org · Schermlezers lezen het tekstalternatief van een afbeelding hardop voor
- Wat is een thema?developer.wordpress.org · Thema's bepalen de presentatie, en de functies waar een site van afhangt horen thuis in plugins
Hoe ga je verder?
Twee gidsen die vanaf hetzelfde punt beginnen, en de demo achter deze gids.
Veelgestelde vragen
De volledige FAQ beantwoordt de rest, en de documentatie behandelt elke instelling in detail.
Haalt dit woningaanbod op uit een MLS- of IDX-feed?
Nee, en het bevat ook geen CRM. Canvas heeft geen MLS- of IDX-integratie en geen leadpipeline: het toont de woningen die je op je eigen website publiceert en bewaart de aanvragen die die aanbiedingen opleveren. Een gesyndiceerde feed, een leadpipeline en een planningstool voor bezichtigingen vallen onder plugins, en de formulieren van de Real Estate-demo kunnen naar een webhook sturen, zodat een lead terechtkomt bij het hulpmiddel dat je al gebruikt. Als een feed van de makelaarsvereniging het hele doel van je site is, dan is een gespecialiseerde plugin voor woningaanbod het juiste hulpmiddel.
Hoe voeg ik een woning toe?
Properties, dan Nieuwe toevoegen, net als bij het schrijven van een bericht. De titel is de naam van de woning, de uitgelichte afbeelding is de kaartfoto, en de velden onder de editor bevatten de prijs en de periode, het label, de locatie, het aantal slaapkamers, het aantal badkamers, het oppervlak, de galerij, de statistiekenstrip, de specificatielijst, de voorzieningenlijst, de makelaar die bij de advertentie wordt getoond, een videolink en een kaart-embed. Koppel de woning aan een woningtype en een locatie, dan verschijnt ze in het overzicht, in de zoekfunctie en op de eigen pagina.
Filtert de zoekfunctie voor vastgoed echt mijn eigen aanbod?
Ja, de zoekfunctie voor woningen in de Vastgoed-demo filtert de advertenties die je op je eigen site publiceert, en er wordt niets van ergens anders opgehaald. De zoekfunctie is een Canvas Form in zoekmodus, gekoppeld aan de pagina Listing, en het listingblok op die pagina leest de criteria en beperkt de query: kopen of huren, locatie, woningtype, slaapkamers, badkamers, een prijsbereik en een bereik voor de vloeroppervlakte. De criteria staan in het adres, dus een gefilterde lijst kan worden gedeeld, als bladwijzer opgeslagen en gelinkt.
Waar komen aanvragen terecht?
In een tabel op je eigen website, zichtbaar in de WordPress-admin, en per e-mail naar het adres dat je in het formulier hebt ingesteld. De contact-, snelle offerte- en reserveringsformulieren in de demo staan allemaal op beide, zodat een aanvraag niet verloren gaat als je inbox vol is. Elk formulier heeft ook een honeypotveld, een onzichtbare val die de meeste spam vangt zonder een mens lastig te vallen.
De demo bevat 10 vastgoedobjecten. Wat als ik er tweehonderd heb?
Voeg alle tweehonderd toe als objectrecords: de 10 objecten van de demo zijn een uitgewerkt voorbeeld, geen limiet. Het listingblok bepaalt hoeveel er per pagina verschijnen, uit welk objecttype wordt geput en de volgorde. De dropdowns voor locatie en objecttype in de zoekfunctie lezen hun termen live uit, dus een locatie die je volgende maand toevoegt, verschijnt in de zoekfunctie zonder dat je het formulier hoeft aan te passen.
Bouw je volgende website met Canvas
Beginner, freelancer of bureau: je krijgt dezelfde blokken en dezelfde demo's. Begin met één site en bouw er zo veel als je nodig hebt, allemaal op dezelfde licentie.