Come creare un sito web immobiliare utilizzando Toolset Real Estate e OceanWP

Un sito web immobiliare deve essere stabile e affidabile come le case che stai vendendo.

Ma costruire un solido sito web immobiliare che gli utenti apprezzeranno a volte può essere difficile quanto costruire le case che stai vendendo, se usi il set sbagliato di strumenti.

Fortunatamente, la combinazione di Toolset Real Estate con OceanWP ha dimostrato di darti un sito web immobiliare professionale con tutte le funzioni di cui potresti aver bisogno.

In questa guida, ti mostreremo come creare le seguenti funzionalità:

• Tipi di post personalizzati per le tue diverse proprietà e agenti
• Campi personalizzati per aggiungere informazioni come il numero di bagni
• Tassonomie per separare le tue proprietà in base alle caratteristiche (villette, bungalow, ecc.)
• Modelli per visualizzare le tue proprietà con la stessa struttura
• Uno slider per mostrare le immagini delle tue proprietà
• Post-rapporti per collegare gli agenti immobiliari con gli immobili di cui sono responsabili
• Una ricerca in modo che gli utenti possano trovare facilmente la migliore proprietà per loro
• Mappe per mostrare le posizioni delle proprietà e i risultati della ricerca
• Un modulo front-end in modo che gli utenti possano inviare i propri elenchi di proprietà

Se desideri eseguire questi passaggi mentre li leggi, puoi utilizzare il tuo sito Web immobiliare di prova gratuito creato da Toolset e OceanWP.

Perché utilizziamo Toolset Real Estate e OceanWP

Toolset Real Estate fa parte di Toolset che ti fornisce tutte le funzionalità necessarie per creare più tipi di siti Web professionali.

In particolare, con Toolset Real Estate non avrai bisogno di nessun altro plugin per aggiungere le funzionalità di cui ha bisogno un sito web immobiliare. Ciò significa che non devi preoccuparti della compatibilità dei plug-in o del fatto che il numero di plug-in rallenterà il tuo sito web.

Nel frattempo, OceanWP è uno dei temi più popolari per i siti Web aziendali per un motivo. I siti Web gestiti da OceanWP hanno un tasso di conversione migliore, tempi di caricamento più rapidi e una migliore SEO, in modo che gli acquirenti di case possano trovare facilmente il tuo sito Web.

Insieme, Toolset Real Estate e OceanWP funzionano perfettamente insieme, il che significa che puoi creare siti Web robusti che hanno un bell'aspetto senza preoccupazioni.

Non dimenticare che puoi scaricare gratuitamente siti Web di prova creati utilizzando Toolset e OceanWP per sperimentare.

Cosa ti servirà per iniziare

Quando crei un sito immobiliare personalizzato con Toolset, avrai bisogno dei seguenti plugin di Toolset:

• Tipi di set di strumenti: per impostare tipi di post personalizzati, campi e tassonomie, per le proprietà e gli agenti
• Blocchi del set di strumenti: per progettare il front-end del tuo sito (modelli e ricerche di proprietà, ecc.)
• Mappe del set di strumenti: per aggiungere funzionalità che consentono la ricerca e la visualizzazione di proprietà sulle mappe
• Moduli del set di strumenti: per consentire agli agenti di gestire le proprietà tramite moduli front-end personalizzati
• Accesso al set di strumenti: per controllare a quali parti del sito possono accedere visitatori, clienti e agenti

Dopo aver installato e registrato questi componenti, è il momento di iniziare a costruire il tuo sito web immobiliare!

1. Crea il tuo tipo di post personalizzato

Innanzitutto, dobbiamo creare un tipo di post personalizzato per la nostra sezione "Case" in modo che gli utenti sappiano esattamente dove andare per visualizzarli.
1. Vai al Set di strumenti → Dashboard nel tuo amministratore di WordPress e fai clic su Aggiungi nuovo tipo di post.

2. Ora dobbiamo nominare il nostro tipo di post e salvarlo nella posizione in cui vogliamo che venga visualizzato nel menu di amministrazione.

3. Fare clic su Salva tipo di post.

E questo è tutto. Il tipo di post personalizzato delle tue case è pronto.

2. Crea i tuoi campi personalizzati

Ora che abbiamo il nostro tipo di post personalizzato, dobbiamo aggiungere alcuni campi personalizzati. I nostri campi personalizzati costituiscono un modello di sezioni che vorremo compilare per descrivere ogni casa e le sue caratteristiche.

Ad esempio, avremo bisogno di sezioni per il numero di bagni, il prezzo e l'anno di costruzione della proprietà.

1. Nella dashboard del set di strumenti, fai clic su Aggiungi campi personalizzati accanto al tipo di post personalizzato "Case" che abbiamo creato.

2. Apparirà una casella Aggiungi nuovo campo in cui possiamo scegliere il tipo di campi personalizzati che desideriamo. Ad esempio, un campo personalizzato per "Anno di costruzione" sarà un numero.

3. Per ogni campo dovrai impostare opzioni come se è obbligatorio inserire le informazioni.

4. Dopo aver compilato tutte le opzioni preferite per un campo, fare clic su Aggiungi nuovo campo per passare a quello successivo nel gruppo. Dopo aver aggiunto tutti i campi per un gruppo di campi, fare clic su Salva gruppo di campi.

Ora, ogni volta che modifichi un post "Casa", vedrai questi campi da compilare.

3. Crea le tue tassonomie personalizzate

Le tassonomie personalizzate sono un ottimo modo per separare le proprietà in modo che gli utenti possano trovare facilmente quelle che corrispondono ai loro criteri. Ad esempio, se vogliono vedere solo case in vendita anziché in affitto.

Prendendo questo esempio, ecco come creare tassonomie per distinguere tra case in vendita e case in affitto.

1. Nella dashboard del set di strumenti, fare clic su Aggiungi tassonomia personalizzata nella riga Case .
2. Inserisci quanto segue nelle caselle
   1. Nome plurale: tipi di proprietà
   2. Nome singolare: caratteristica della proprietà
   3. Slug: caratteristica della proprietà
3. Scegli se desideri che la tassonomia sia gerarchica o piatta. Ai fini di questo, lo terremo piatto.
4. Seleziona il tipo di post a cui desideri associare la tassonomia, in questo caso sarà "Case".
5. Fare clic su Salva tassonomia

Ora, quando modifichiamo o creiamo un tipo di post "Case", possiamo creare e selezionare tassonomie "Tipo di proprietà" da attribuire al tipo di post.

4. Creare un modello per visualizzare le proprietà

Ora abbiamo i componenti principali di cui abbiamo bisogno per mostrare le nostre proprietà, ma rimane una parte importante del processo: come li mostriamo sul front-end?

È qui che creiamo un modello che possiamo utilizzare per visualizzare ciascuna delle nostre case.

Per costruire il nostro modello per singole "Case" utilizzeremo i blocchi del set di strumenti con l'editor blocchi di WordPress.

Con i blocchi del set di strumenti, puoi progettare modelli per i tuoi tipi di post personalizzati, con campi e tassonomie personalizzati. Nessun HTML, nessun CSS, nessun JavaScript e nessun PHP necessario!

1. Vai su Set di strumenti → Dashboard e fai clic sul pulsante Crea modello di contenuto nella riga Case.
2. Usa l'editor blocchi di WordPress per progettare il tuo modello.
3. Scegli i blocchi dalla sezione Set di strumenti per qualsiasi parte del modello che visualizza i campi (non gli elementi statici). Ad esempio, utilizzare il blocco Intestazione di Toolset per qualsiasi intestazione che visualizzerà un campo. Toolset aggiunge l'opzione per visualizzare contenuti dinamici anche dal core di WordPress e dai plugin di terze parti più popolari.
4. Abilita le sorgenti dinamiche per i blocchi che dovrebbero visualizzare i campi del post visualizzati dal modello.

Puoi modificare e dare uno stile al tuo modello in molti modi. Ad esempio, puoi organizzare il contenuto in colonne, visualizzare parti del modello in modo condizionale, visualizzare un elenco di post correlati e molto altro.

5. Crea un dispositivo di scorrimento dinamico per presentare le immagini delle tue proprietà

Un dispositivo di scorrimento è un ottimo modo per mostrare le tue proprietà visualizzando più immagini di ciascuna.

Usando il set di strumenti, puoi creare facilmente slider complessi con transizioni senza alcuna codifica PHP complessa.

1. Dopo aver modificato o creato una pagina, un post o un modello, inserisci il blocco Visualizza e crea una nuova vista.
2. Nella procedura guidata di creazione della vista, abilita l'impaginazione e nella sezione Seleziona lo stile del ciclo di visualizzazione , scegli l'opzione Non formattato (ultima).
3. Nell'ultimo passaggio, seleziona il tipo di post per il quale desideri visualizzare i post.
4. Fare clic per terminare la procedura guidata e la vista è pronta.

Visualizzazione dei campi dei post e applicazione di uno stile personalizzato

1. Inserisci un blocco Contenitore in modo da poter aggiungere uno sfondo al tuo dispositivo di scorrimento. Ad esempio, puoi impostare lo sfondo della diapositiva in modo che sia un'immagine dinamica proveniente dall'immagine in primo piano del post.
2. Usa i blocchi del set di strumenti per aggiungere altri campi dinamici al tuo dispositivo di scorrimento, come il titolo del post.

Con i dispositivi di scorrimento del set di strumenti, oltre a visualizzare i campi dei post e ad applicare uno stile personalizzato, puoi modificare il tuo dispositivo di scorrimento con una serie di altre opzioni, come la visualizzazione automatica della diapositiva e la modifica dello stile di impaginazione.

6. Crea un post-relazione per collegare le tue case con i tuoi agenti

Le relazioni post sono una parte importante ma sottovalutata di qualsiasi sito web. Con le relazioni post, puoi collegare diversi tipi di contenuto tra loro.

Per saperne di più su come ti aiutano, consulta la nostra guida alla creazione di relazioni con i post utilizzando Toolset e OceanWP.

Sul nostro sito web immobiliare abbiamo case e agenti immobiliari. Creiamo una relazione post tra di loro.

Crea la relazione post

1. Vai su Set di strumenti → Relazioni e fai clic su Aggiungi nuovo in alto.
2. Si apre la procedura guidata per le relazioni del set di strumenti. Per i nostri agenti e proprietà, vogliamo una "relazione uno-a-molti" poiché un agente sarà responsabile di più proprietà.
3. Seleziona i tipi di post che formeranno la relazione.

4. Seleziona se vuoi limitare il numero di post che puoi assegnare. Ad esempio, potresti voler assegnare a ciascun agente solo un massimo di 20 case.

5. Dai un nome alla tua relazione.

6. Rivedi le tue relazioni e fai clic su Fine.

Come assegnare proprietà a un agente

Ora possiamo iniziare a creare connessioni specifiche tra le nostre proprietà e gli agenti immobiliari.

1. Accedi alla pagina di un agente dal menu di amministrazione
2. Verrà visualizzata una nuova sezione in fondo alla pagina denominata Proprietà dell'agente. Fare clic su Collega proprietà esistente e quindi digitare per trovare il nome di una proprietà o selezionarla dall'elenco disponibile.

3. Fai clic su Aggiorna per salvare il tuo post. Ora, quando visiti la pagina dell'agente, tutte le proprietà a cui hai collegato verranno elencate. Inoltre, se modifichi una di queste pagine di proprietà, vedrai che la relazione è stata visualizzata su entrambe le estremità: l'agente sarà elencato anche nella pagina della proprietà.

Creazione di una vista per visualizzare la tua relazione con il post

Esistono due modi per visualizzare l'elenco delle relazioni di post:

• Visualizza un elenco dei "molti" post correlati nelle relazioni uno-a-molti e molti-a-molti.
• Nelle relazioni uno-a-molti, visualizzare i campi che appartengono al lato "uno".

Visualizzazione di molti elementi correlati

Nel nostro esempio, gli agenti hanno molte proprietà, quindi utilizzeremo una vista per visualizzarle.

1. Vai al tuo modello di contenuto "Agenti".
2. Inserisci un blocco Vista e crea una nuova Vista
3. Seleziona per visualizzare il tipo di post di cui hai bisogno (ad esempio, le proprietà), quindi seleziona l'opzione per visualizzare le proprietà che appartengono all'agente corrente .
4. Usa i blocchi per progettare l'output per la tua vista. Poiché la visualizzazione è già impostata per visualizzare i post correlati, non è necessario selezionare la relazione nei blocchi che utilizzi per visualizzare il contenuto dinamico.

Visualizzazione di un elemento correlato (principale)

1. Vai al tuo modello di contenuto "Proprietà".
2. È possibile utilizzare qualsiasi blocco del set di strumenti per visualizzare le informazioni sui genitori.
3. Nelle proprietà del blocco, seleziona il genitore da Post Source.
4. Seleziona il campo che desideri visualizzare.

7. Come aggiungere una ricerca avanzata in modo che gli utenti possano trovare facilmente le proprietà che corrispondono meglio

Una ricerca personalizzata avanzata è il modo migliore per i tuoi utenti di trovare esattamente ciò che stanno cercando. Con più filtri, potranno selezionare la casa migliore in base alle loro esigenze personali.

1. Inizia inserendo un blocco Visualizza in una pagina.
2. Nella procedura guidata di creazione della vista, abilitare l'opzione Cerca.

3. Nella pagina successiva, seleziona "Proprietà" in Scegli contenuto che verrà visualizzata da questa vista .

4. Dopo aver terminato la procedura guidata di creazione della vista, nell'area di modifica della vista è presente una sezione di ricerca della vista. Usa i pulsanti disponibili per aggiungere un campo di ricerca personalizzato, inserire pulsanti di invio e reimposta o aggiungere altri blocchi.

Ad esempio, puoi fare clic su Aggiungi campo di ricerca e utilizzare il menu a discesa Seleziona un campo . Seleziona il tipo di contenuto in cui desideri che gli utenti possano eseguire la ricerca e fai clic su Avanti .

5. Ora puoi utilizzare la barra laterale destra per modificare le opzioni per questo campo di ricerca. Ciò include le impostazioni dei campi principali, le opzioni di etichetta e stile.

6. Ora siamo pronti per creare la sezione in cui verranno visualizzati i risultati. Lo facciamo aggiungendo blocchi nell'area View Loop dell'editor.

7. Fare clic su Aggiungi blocco .

8. Scegli un blocco che desideri utilizzare come parte dei risultati della ricerca. Ad esempio, puoi utilizzare il blocco Intestazione per visualizzare i titoli delle proprietà nei risultati della ricerca.

8. Visualizza mappe per mostrare le posizioni delle proprietà

Le mappe sono un ottimo modo per aiutare gli utenti a capire immediatamente la posizione esatta di una proprietà.

1. Per iniziare a creare una mappa, vai alla pagina o al modello in cui desideri visualizzare la mappa. Inserisci il blocco Mappa del set di strumenti. Se devi impostare una chiave API, Google fornisce istruzioni dettagliate su come farlo.
2. Nella sezione Sorgente per il marcatore abilita la Sorgente dinamica .
3. Nel menu a discesa Post Source seleziona "Proprietà attuale". Quindi, nel menu a discesa Sorgente , seleziona qualsiasi campo personalizzato che contenga un indirizzo per mostrarlo sulla mappa

9. Crea un modulo front-end per consentire agli utenti di inviare i propri contenuti

Infine, potresti volere che gli utenti forniscano i propri annunci da pubblicizzare sul tuo sito web immobiliare. Uno dei modi più semplici per farlo è attraverso un modulo sul front-end che presenta tutti i campi che vorresti che compilassero.

La creazione del modulo non potrebbe essere più semplice grazie all'editor drag-and-drop di Toolset.

1. Vai su Set di strumenti → Inserisci moduli e fai clic su Aggiungi nuovo.
2. Fare clic su Continua nella procedura guidata Moduli e inserire il nome per il modulo.
3. Modifica le impostazioni per il tuo modulo, tra cui:
   1. Il tipo di post a cui aggiungeranno gli invii
   2. Lo stato del post una volta inviato
   3. Cosa vedono gli utenti dopo aver inviato il modulo (puoi anche aggiungere un messaggio come ho fatto di seguito)

4. Ora raggiungi l'editor drag-and-drop dove puoi decidere quali campi vanno e dove. Qui puoi anche utilizzare i campi Editor CSS e Editor JS per definire lo stile del tuo modulo. Ci sono anche una serie di elementi extra che puoi aggiungere.

5. Nella pagina successiva puoi aggiungere tutte le notifiche e-mail che desideri che gli utenti o gli editori ricevano in qualsiasi momento. Di seguito ho aggiunto un'e-mail da inviare agli utenti quando la loro scheda sarà pubblicata.

6. Fare clic su Fine e il modulo è ora pronto per essere visualizzato.

7. Tutto ciò che devi fare per visualizzare il modulo è andare alla pagina in cui desideri aggiungere il modulo, aggiungere il blocco Modulo del set di strumenti e selezionare il modulo che hai appena creato per l'elenco a discesa.

Prossimi passi

Dopo aver completato questi nove passaggi chiave per la creazione del tuo sito Web immobiliare, puoi rendere il tuo sito ancora più impressionante seguendo il corso online immobiliare di Toolset.

I moduli di facile comprensione costituiscono una guida passo passo completa, ricca di video utili, che ti dice tutto ciò che devi sapere per costruire un sito web immobiliare straordinario.

Qual è stata la tua esperienza nella realizzazione di un sito web immobiliare? Fateci sapere nei commenti!