Cómo construir un sitio web de bienes raíces usando Toolset Real Estate y OceanWP

Un sitio web de bienes raíces debe ser tan estable y confiable como las casas que vende.

Pero crear un sitio web de bienes raíces sólido que los usuarios disfruten a veces puede ser tan difícil como construir las casas que está vendiendo, si usa el conjunto de herramientas incorrecto.

Afortunadamente, se ha demostrado que la combinación de Toolset Real Estate con OceanWP le brinda un sitio web profesional de bienes raíces con todas las funciones que podría necesitar.

En esta guía, le mostraremos cómo crear las siguientes características:

• Tipos de publicaciones personalizadas para sus diferentes propiedades y agentes
• Campos personalizados para agregar información como el número de baños
• Taxonomías para separar tus propiedades en función de sus características (casas unifamiliares, bungalows, etc.)
• Plantillas para mostrar tus propiedades con la misma estructura
• Un slider para mostrar imágenes de tus propiedades
• Post-relaciones para vincular a los agentes inmobiliarios con las propiedades que tienen a su cargo
• Una búsqueda para que los usuarios puedan encontrar fácilmente la mejor propiedad para ellos
• Mapas para mostrar la ubicación de las propiedades y los resultados de la búsqueda
• Un formulario frontal para que los usuarios puedan enviar sus propios listados de propiedades

Si desea seguir estos pasos a medida que los lee, puede usar su propio sitio web de prueba gratuito de bienes raíces creado por Toolset y OceanWP.

Por qué usamos Toolset Real Estate y OceanWP

Toolset Real Estate es parte de Toolset, que le brinda todas las funciones que necesita para crear múltiples tipos de sitios web profesionales.

Concretamente, con Toolset Real Estate no necesitarás ningún otro plugin para añadir las funcionalidades que necesita una web inmobiliaria. Esto significa que no necesita preocuparse por la compatibilidad de los complementos o si la gran cantidad de complementos ralentizará su sitio web.

Mientras tanto, OceanWP es uno de los temas más populares para sitios web de negocios por una razón. Los sitios web administrados por OceanWP tienen una mejor tasa de conversión, tiempos de carga más rápidos y SEO mejorado, por lo que los compradores de viviendas pueden encontrar su sitio web fácilmente.

Juntos, Toolset Real Estate y OceanWP funcionan a la perfección, lo que significa que puede crear sitios web sólidos que se vean geniales sin ninguna preocupación.

No olvide que puede descargar sitios web de prueba creados con Toolset y OceanWP de forma gratuita para experimentar.

Lo que necesitarás para empezar

Cuando crea un sitio inmobiliario personalizado con Toolset, necesitará los siguientes complementos de Toolset:

• Tipos de conjuntos de herramientas: para configurar tipos de publicaciones, campos y taxonomías personalizados, para las propiedades y los agentes
• Bloques de conjunto de herramientas: para diseñar el front-end de su sitio (plantillas y búsquedas de propiedades, etc.)
• Toolset Maps: para agregar funciones que permiten buscar y mostrar propiedades en mapas
• Formularios de conjunto de herramientas: para permitir que los agentes administren propiedades a través de formularios front-end personalizados
• Acceso al conjunto de herramientas: para controlar a qué partes del sitio pueden acceder los visitantes, clientes y agentes

Una vez que haya instalado y registrado estos componentes, ¡es hora de comenzar a construir su sitio web de bienes raíces!

1. Crea tu tipo de publicación personalizada

Primero, debemos crear un tipo de publicación personalizada para nuestra sección "Casas" para que los usuarios sepan exactamente dónde ir para verlas.
1. Dirígete al Conjunto de herramientas → Tablero en tu administrador de WordPress y haz clic en Agregar nuevo tipo de publicación.

2. Ahora necesitamos nombrar nuestro tipo de publicación y guardarlo en la posición en la que queremos que se muestre en el menú de administración.

3. Haga clic en Guardar tipo de publicación.

Y eso es. El tipo de publicación personalizado de su casa está listo.

2. Crea tus campos personalizados

Ahora que tenemos nuestro tipo de publicación personalizada, debemos agregar algunos campos personalizados. Nuestros campos personalizados conforman una plantilla de secciones que querremos completar para describir cada casa y sus características.

Por ejemplo, necesitaremos secciones para la cantidad de baños, el precio y el año en que se construyó la propiedad.

1. En el Panel de herramientas, haga clic en Agregar campos personalizados junto al tipo de publicación personalizada "Casas" que creamos.

2. Aparecerá un cuadro Agregar nuevo campo donde podemos elegir qué tipo de campos personalizados queremos. Por ejemplo, un campo personalizado para "Año de construcción" será un número.

3. Para cada campo deberá configurar opciones como si es obligatorio ingresar información.

4. Una vez que haya completado todas las opciones preferidas para un campo, haga clic en Agregar nuevo campo para pasar al siguiente en el grupo. Una vez que haya agregado todos los campos para un grupo de campos, haga clic en Guardar grupo de campos.

Ahora, cada vez que edites una publicación de "Casa", verás estos campos para completar.

3. Crea tus taxonomías personalizadas

Las taxonomías personalizadas son una excelente manera de separar propiedades para que los usuarios puedan encontrar fácilmente las que coinciden con sus criterios. Por ejemplo, si solo quieren ver casas que están a la venta en lugar de alquilar.

Tomando ese ejemplo, aquí se explica cómo crear taxonomías para diferenciar entre casas que están en venta y casas en alquiler.

1. En el Tablero del conjunto de herramientas, haga clic en Agregar taxonomía personalizada en la fila Casas .
2. Ingrese lo siguiente en las casillas
   1. Nombre plural: Tipos de propiedad
   2. Nombre singular: característica de la propiedad
   3. Slug: característica de propiedad
3. Elija si desea que la taxonomía sea jerárquica o plana. Para el propósito de este, lo mantendremos plano.
4. Seleccione con qué tipo de publicación desea que se asocie la taxonomía; en este caso, será "Casas".
5. Haga clic en Guardar taxonomía

Ahora, cuando editamos o creamos un tipo de publicación "Casas", podemos crear y seleccionar taxonomías de "Tipo de propiedad" para atribuir al tipo de publicación.

4. Crea una plantilla para mostrar las propiedades

Ahora tenemos los componentes principales que necesitamos para mostrar nuestras propiedades, pero queda una parte importante del proceso: ¿cómo los mostramos en el front-end?

Aquí es donde creamos una plantilla que podemos usar para mostrar cada una de nuestras casas.

Para construir nuestra plantilla para "Casas" individuales, usaremos Toolset Blocks con el Editor de bloques de WordPress.

Con Toolset Blocks, puede diseñar plantillas para sus tipos de publicaciones personalizadas, con taxonomías y campos personalizados. ¡Sin HTML, sin CSS, sin JavaScript y sin necesidad de PHP!

1. Vaya a Conjunto de herramientas → Tablero y haga clic en el botón Crear plantilla de contenido en la fila Casas.
2. Utilice el Editor de bloques de WordPress para diseñar su plantilla.
3. Elija bloques de la sección Conjunto de herramientas para cualquier parte de la plantilla que muestre campos (no elementos estáticos). Por ejemplo, utilice el bloque Encabezado de Toolset para cualquier encabezado que muestre un campo. Toolset agrega la opción de mostrar contenido dinámico también desde el núcleo de WordPress y los complementos de terceros más populares.
4. Habilite Fuentes dinámicas para bloques que deben mostrar campos de la publicación que muestra la plantilla.

Puede modificar y diseñar su plantilla de muchas maneras. Por ejemplo, puede organizar el contenido en columnas, mostrar partes de la plantilla de forma condicional, mostrar una lista de publicaciones relacionadas y mucho más.

5. Cree un control deslizante dinámico para mostrar las imágenes de su propiedad

Un control deslizante es una excelente manera de mostrar sus propiedades al mostrar varias imágenes de cada una.

Con Toolset, puede crear fácilmente controles deslizantes complejos con transiciones sin ningún tipo de codificación PHP compleja.

1. Una vez que haya editado o creado una página, publicación o plantilla, inserte el bloque Ver y cree una nueva Vista.
2. En el asistente de creación de vistas, habilite la paginación y en la sección Seleccionar estilo de bucle de vista , elija la opción Sin formato (último).
3. En el último paso, seleccione el tipo de publicación para el que desea mostrar las publicaciones.
4. Haga clic para finalizar el asistente y su Vista estará lista.

Mostrar campos de publicación y aplicar un estilo personalizado

1. Inserte un bloque Contenedor para que pueda agregar un fondo a su control deslizante. Por ejemplo, puede configurar el fondo de la diapositiva para que sea una imagen dinámica proveniente de la imagen destacada de la publicación.
2. Use bloques de conjunto de herramientas para agregar otros campos dinámicos a su control deslizante, como el título de la publicación.

Con Toolset Sliders, además de mostrar campos de publicación y aplicar un estilo personalizado, puede modificar su control deslizante con una variedad de otras opciones, como hacer que su Vista se deslice automáticamente y cambiar el estilo de paginación.

6. Crea una post-relación para conectar tus casas con tus agentes

Las relaciones posteriores son una parte importante pero subestimada de cualquier sitio web. Con las relaciones de publicación, puede conectar diferentes tipos de contenido entre sí.

Para obtener más información sobre cómo lo ayudan, consulte nuestra guía para crear relaciones entre publicaciones utilizando Toolset y OceanWP.

En nuestra web inmobiliaria disponemos de casas y agentes inmobiliarios. Vamos a crear una relación de publicación entre ellos.

Crear la relación de publicación

1. Vaya a Conjunto de herramientas → Relaciones y haga clic en Agregar nuevo en la parte superior.
2. Se abre el asistente de relaciones del conjunto de herramientas. Para nuestros agentes y propiedades, queremos una "relación de uno a muchos", ya que un agente estará a cargo de múltiples propiedades.
3. Seleccione los tipos de publicación que formarán la relación.

4. Seleccione si desea limitar el número de publicaciones que puede asignar. Por ejemplo, es posible que desee que cada agente tenga solo un máximo de 20 casas asignadas.

5. Nombre su relación.

6. Revise sus relaciones y haga clic en Finalizar.

Cómo asignar propiedades a un agente

Ahora podemos empezar a crear conexiones específicas entre nuestras propiedades y los agentes inmobiliarios.

1. Navegue a la página de un agente desde el menú de administración
2. Aparecerá una nueva sección en la parte inferior de la página llamada Propiedad del agente. Haga clic en Conectar propiedad existente y luego escriba para encontrar el nombre de una propiedad o selecciónelo de la lista disponible.

3. Haga clic en Actualizar para guardar su publicación. Ahora, cuando visite la página del agente, se enumerarán todas las propiedades que haya conectado con ellos. Además, si edita una de las páginas de estas propiedades, verá que la relación se ha mostrado en ambos extremos; el agente también aparecerá en la página de la propiedad.

Creación de una vista para mostrar la relación de su publicación

Hay dos formas de mostrar su lista de relaciones de publicaciones:

• Muestre una lista de las publicaciones relacionadas "muchas" en relaciones de uno a muchos y de muchos a muchos.
• En las relaciones de uno a varios, muestre los campos que pertenecen al lado "uno".

Mostrando muchos elementos relacionados

En nuestro ejemplo, los agentes tienen muchas propiedades, por lo que usaremos una Vista para mostrarlas.

1. Navegue a su plantilla de contenido "Agentes"
2. Inserte un bloque de Vista y cree una nueva Vista
3. Seleccione para mostrar el tipo de publicación que necesita (es decir, propiedades) y luego seleccione la opción para mostrar las Propiedades que pertenecen al Agente actual .
4. Use bloques para diseñar la salida de su vista. Debido a que la vista ya está configurada para mostrar publicaciones relacionadas, no necesita seleccionar la relación en bloques que usa para mostrar contenido dinámico.

Mostrar un elemento relacionado (principal)

1. Navegue a su plantilla de contenido de "Propiedades".
2. Puede usar cualquier bloque de conjunto de herramientas para mostrar la información de los padres.
3. En las propiedades del bloque, seleccione el padre de Fuente de la publicación.
4. Seleccione el campo que le gustaría mostrar.

7. Cómo agregar una búsqueda avanzada para que los usuarios puedan encontrar fácilmente sus propiedades más adecuadas

Una búsqueda personalizada avanzada es la mejor manera para que sus usuarios encuentren exactamente lo que están buscando. Con múltiples filtros, podrán seleccionar la mejor casa en función de sus requisitos personales.

1. Comience insertando un bloque Ver en una página.
2. En el asistente de creación de vistas, habilite la opción Buscar.

3. En la página siguiente, seleccione "Propiedades" en Elegir contenido que mostrará esta vista .

4. Después de finalizar el asistente de creación de vistas, hay una sección de búsqueda de vistas en el área de edición de vistas. Utilice los botones disponibles para agregar un campo de búsqueda personalizado, insertar botones de envío y reinicio, o agregar otros bloques.

Por ejemplo, puede hacer clic en Agregar campo de búsqueda y usar el menú desplegable Seleccionar un campo . Seleccione el tipo de contenido por el que desea que los usuarios puedan buscar y haga clic en Siguiente .

5. Ahora puede usar la barra lateral derecha para modificar las opciones de este campo de búsqueda. Esto incluye la configuración del campo principal, la etiqueta y las opciones de estilo.

6. Ahora estamos listos para crear la sección donde se mostrarán los resultados. Hacemos esto agregando bloques en el área View Loop del editor.

7. Haga clic en Agregar bloque .

8. Elija un bloque que desee utilizar como parte de sus resultados de búsqueda. Por ejemplo, puede usar el bloque de encabezado para mostrar los títulos de las propiedades en los resultados de la búsqueda.

8. Mostrar mapas para mostrar las ubicaciones de las propiedades

Los mapas son una excelente manera de ayudar a los usuarios a comprender de inmediato la ubicación exacta de una propiedad.

1. Para comenzar a crear un mapa, vaya a la página o plantilla donde desea mostrar el mapa. Inserte el bloque Mapa del conjunto de herramientas. Si necesita configurar una clave API, Google proporciona instrucciones detalladas sobre cómo hacerlo.
2. En la sección Fuente para el marcador , habilite Fuente dinámica .
3. En el menú desplegable Fuente de publicación, seleccione "Propiedad actual". Luego, en el menú desplegable Fuente , seleccione cualquier campo personalizado que contenga una dirección para mostrarla en el mapa

9. Cree un formulario front-end para que los usuarios envíen su propio contenido

Finalmente, es posible que desee que los usuarios proporcionen sus propios listados para anunciarse en su sitio web de bienes raíces. Una de las formas más fáciles de hacerlo es a través de un formulario en el front-end que presenta todos los campos que desea que completen.

Crear el formulario no podría ser más sencillo gracias al editor de arrastrar y soltar de Toolset.

1. Vaya a Conjunto de herramientas → Publicar formularios y haga clic en Agregar nuevo.
2. Haga clic en Continuar en el asistente de formularios e ingrese el nombre de su formulario.
3. Edite la configuración de su formulario, incluyendo:
   1. El tipo de publicación a la que agregarán envíos
   2. El estado de la publicación una vez enviada
   3. Lo que ven los usuarios después de enviar el formulario (también puede agregar un mensaje como lo he hecho a continuación)

4. Ahora llega al editor de arrastrar y soltar donde puede decidir qué campos ir y dónde. Aquí también puede usar los campos Editor CSS y Editor JS para diseñar su formulario. También hay una serie de elementos adicionales que puede agregar.

5. En la página siguiente, puede agregar cualquier notificación por correo electrónico que desee que los usuarios o editores reciban en cualquier momento. A continuación, agregué un correo electrónico para enviar a los usuarios cuando su listado se publique.

6. Haga clic en Finalizar y su formulario ahora está listo para mostrarse.

7. Todo lo que necesita hacer para mostrar el formulario es ir a la página a la que desea agregar el formulario, agregar el bloque Formulario de conjunto de herramientas y seleccionar el formulario que acaba de crear para la lista desplegable.

Próximos pasos

Una vez que haya trabajado en estos nueve pasos clave para crear su propio sitio web de bienes raíces, puede hacer que su sitio sea aún más impresionante tomando el curso en línea de bienes raíces de Toolset.

Los módulos fáciles de entender conforman una guía completa paso a paso, llena de videos útiles, que le dice todo lo que necesita saber para crear un sitio web de bienes raíces extraordinario.

¿Cuál ha sido su experiencia en la construcción de un sitio web de bienes raíces? ¡Cuéntanos en los comentarios!