Si estas buscando cómo crear una web para inmobiliarias con WordPress en este post te vamos a explicar como llevarlo a cabo con el plugin Estatik.
¿Por qué con un plugin cuando hay plantillas diseñadas especialmente para esta función? Pues por tres motivos:
1º- Por ofrecer un diseño exclusivo a nuestros clientes.
2º- Trabajamos con plantillas con un código optimizado y ofrecen una buena velocidad de carga.
3º- Las funciones de la inmobiliaria no van insertadas en la plantilla, por lo que en un futuro, si se decide renovar el diseño de la web se puede llevar a cabo sin problema.
Índice de contenidos
Instalación
Podemos realizar la instalación del plugin de dos formas:
1º opción: Nos los descargamos del repositorio oficial de WordPress y a través de una conexión FTP lo instalamos siguiendo la ruta public_html/wp-content/plugins.
2º opción: Desde el panel de administración de WordPress accedemos a plugins/ añadir nuevo y buscamos el plugin Estatik (recuadro rojo).
Instalamos, activamos y veremos como en el menú se nos añade una nueva pestaña (recuadro amarillo ).
Ajustes generales de Estatik
En la página general de los ajustes definiremos los aspectos técnicos del plugin:
- Powered by link: definimos si queremos que aparezca un enlace a la web del autor del plugin.
- Número de artículos por página: indicamos que número de viviendas queremos que aparezcan tanto en los resultados de búsqueda como en la categorización de las viviendas.
- Custom Property Slug URI: personalizamos la estructura de la url. Es decir, si queremos que la estructura de las url de nuestras propiedades sea www.midominio.com/casas/titulo-de-la-casa en este campo lo rellenariamos con la palabra casa.
- Mostrar precio: Si queremos que se vea o no se vea el precio de la propiedad.
- Disable Property Featured Image: para habilitar la imagen destacada de las propiedades.
- Título / Dirección: definimos si queremos que se vea el titulo de la propiedad o la localidad.
- Mostrar dirección: esta opción la activaremos si queremos que se vean las direcciones completas de las propiedades.
- Enable Buyers: para activar el registro de compradores.
- Hide Property Top Bar: activando esta opción ocultaremos la edición de las propiedades desde el menú superior.
- Enable Wishlist: para habilitar la lista de deseos.
- Disable meta:og tags: activando esta opción deshabilitaremos las metatags.
- Labels: para habilitar las etiquetas de las propiedades.
- Publicación: para definir si queremos que se vea la fecha de publicación.
- Formato de fecha: para definir el formato de la fecha.
- Estilo de tema: la versión gratuita del plugin ofrece dos estilos de tema para mostrar. Elige el que más te convenga.
- Privacy Policy Checkbox: para activar la casilla de verificación para aceptar la política de privacidad.
- Terms of Use page: para definir la página de los terminos de uso.
- Aviso legal: para definir la página aviso legal.
- Privacy Policy page: para definir la página de las políticas de privacidad.
- Search page: para definir la página de búsqueda de propiedades.
- Página de registro: para definir la página del registro de comerciales.
- Login page: para definir la página para que se logueen los comerciales.
- Reset password page: para definir la página para restablecer la contraseña.
- Google map API key: para insertar el código de la API de los mapas de Google. En esta entrada explicamos como crear la API key.
- Google Recaptcha SiteKey y Google Recaptcha SecretKey: para insertar los códigos de Recaptcha en el caso de que vayamos a crear un registro de compradores.
Layout
En este apartado definiremos que diseño tendrán nuestras propiedades, tanto en las categorías como en las entradas individuales de las propiedades. Para ambos casos nos ofrece 3 posibilidades de diseño.
Moneda
Aquí definiremos todo lo referente a la moneda en la que se van a mostrar los precios: tipo de moneda, formato y si el simbolo se tiene que mostrar antes o después del precio.
E-mail y social
En el e apartado e-mail podremos definir la imagen de los correos mientras que en el apartado social podremos activar los botones para poder compartir nuestras propiedades en redes sociales.
Color
Permite personalizar los colores de diferentes objetos que forman parte del plugin. Ojo, de la plantilla no.
Creamos nuestra primera propiedad
Para crear nuestra primera propiedad accederemos desde el menú Estatik/añadir nueva propiedad.
Añadimos un titulo y una descripción de la propiedad y categorizamos la propiedad con un nombre (recuadro rojo).
Si fuera de nuestro interés, mediante la categorización de las propiedades podemos crear páginas exclusivas de diferentes tipos de casas. Es decir, pongamos por ejemplo que queremos mostrar en diferentes páginas de nuestra web chalets y casas de pueblo. Esto se consigue definiendo la categoría de la propiedad con el nombre al grupo que va a pertenecer y a posterior insertando un shortcodes en cada una de las páginas.
En la información básica añadiremos la información pertinente (recuadro azul).
Sin movernos de esta página las secciones descripción, barrio, características y vídeo os aparecerán vacías porque por defecto no tienen asociado ningún campo, por lo que iremos directamente a la sección Dirección.
Aquí definiremos la dirección de la propiedad ya sea por la propia dirección o mediante coordenadas. Recuerda que para que funcione de forma correcta la inserción de las direcciones en el mapa como en los resultados de búsqueda del formulario debes tener insertada la API key de google en los ajustes generales.
Ya para acabar en el apartado media podremos añadir nuestra galería de imágenes o vídeo de la propiedad. Recuerda que una web de una inmobiliaria trabaja con muchas imágenes por lo que es muy importante que las tengas bien optimizadas. Si quieres saber como optimizar tus imágenes clica aquí.
¿Cómo agregar secciones a la descripción de las propiedades?
Por defecto Estatik nos muestra una descripción muy genérica de las viviendas pero nos permite fraccionarla en secciones temáticas.
Pongamos un ejemplo que posiblemente se entenderá mucho mejor. En nuestra web tenemos unicamente la descripción genérica de las viviendas, sin embargo nos interesa crear una sección en la que se muestren todos los electrodomésticos que tienen las casa.
Para ello lo que deberemos hacer es ir al menú Estatik/fieds builder/listing sections y crear la sección electrodomésticos.
Una vez creada, en la columna de la derecha podremos reorganizar las secciones simplemente arrastrándolas arriba o abajo
Lo siguiente que realizaremos es crear los campos de la sección que acabamos de crear. Para ello seguiremos en el menú la ruta Estatik/fields builder/listing fields. Una vez dentro veremos en la columna de la derecha la sección electrodomésticos.
En la columna de la izquierda encontraremos los ajustes para crear nuestro campo de sección.
- Field name: Definiremos en nombre del campo. En nuestro caso vamos a poner si esta vivienda tiene nevera por lo que lo definiremos de dicha forma.
- Type: Definiremos que tipo de campo es. Podrás comprobar que deja definir el campo de diferentes formas. En nuestro caso, como queremos definir SI esta vivienda dispone de nevera lo definiremos como un campo de texto.
- Page Section: Definiremos en sección aparecerá este campo en la página de esta propiedad. En nuestro caso nos interesa que aparezca en la sección Electrodomésticos.
- Admin tab: Definiremos en sección aparecerá este campo en la área de administración de la web. En nuestro caso también nos interesa que aparezca en la sección Electrodomésticos.
- Mandatory: Definiremos si este campo es obligatorio .
Creamos el campo y veremos como en la columna de la derecha se añade a la sección electrodomésticos.
Gestión de datos
Desde este apartado podremos definir y gestionar diferentes apartados que son generales a funciones del plugin:
- Propiedades detalle: En este apartado podremos crear y eliminar las diferentes categorías en relación a los tipos de categorizaciones que tengamos de nuestras propiedades. Estado de la propiedad, periodo de arriendamiento, tipo de propiedad o categorías generales.
- Labels: Aquí definiremos los colores de cada uno de los mensaje destacados que definamos en cada una de nuestras propiedades. Como los mensaje destacados son en ingles lo recomendable es crear nuestros propios mensajes destacados
- Currencies: Definimos la moneda en la que se van a ver los precios de las propiedades. En caso de no aparecer la que nos interesa nos ofrece la opción de añadirla.
- Dimensiones: Podemos definir en que unidad de medida van a aparecer las dimensiones de las propiedades. Hectareas, M2, M3, acres, etc etc.
Insertamos nuestras propiedades en una página
Una de las características que hace tan versátil a Estatik es que nos permite insertar en cualquier parte de la web todas sus funciones mediante la inserción de shortcodes. Estos shortcodes se generan y se insertan de forma automática a través de la configuración de unos selectores.
En nuestro caso lo que queremos es mostrar todas las propiedades que tenemos en nuestra web.
Para ello accedemos a la página en la que queremos que se muestren y observaremos que sobre el editor de texto aparece el icono de Estatik (recuadro verde de la imagen).
Nos aparecerá un selector desplegable en el que nos muestra todas las funciones que podemos realizar mediante la inserción de shortcodes (recuadro azul de la imagen). En nuestro caso seleccionaremos «mis propiedades».
En el tercer y último paso configuraremos los parámetros que definirán como se mostraran nuestras propiedades (recuadro rojo de la imagen).
- Disposición: Definiremos el número de columnas en las que queremos que se muestren.
- Properties Per Page: Número de propiedades que queremos que se muestren por página.
- Sort By: Definimos como queremos que aparezcan ordenadas las propiedades.
- Categorías de estado, tipo, periodo de arriendo y categoria: Podremos mostrar una uníca categoría o combinar varias categorías para mostrar los resultados que se adapten a nuestra selección. Un ejemplo podría ser mostrar las propiedades que sean de tipo apartamento y que el periodo de arrendamiento sea mensual.
- Adress setting: Para mostrar todas las propiedades de una localidad.
- Specific features:Para mostrar las propiedades categorizadas con características especiales.
Una vez configurados todos los parámetros clicámos sobre Generate shortcode y podremos observar como en nuestro editor se nos añade una linea que se asemeja a [es_my_listing layout=»2_col» posts_per_page=»9″ rent_period=»mensual» category=»Finca rustica»].
Publicamos y si visitamos la página veremos que nos aparece un listado de propiedades en función de los parámetros seleccionados.
En este punto hemos visto como mostrar nuestras propiedades en una página, pero del mismo modo podemos insertar formularios de búsqueda, mostrar casas individuales, insertar slideshow de las propiedades, crear formularios de registro para los comerciales, etc etc. Simplemente lo haremos seleccionando que tipo de shortcodes queremos insertar y configurando sus respectivos parámetros.
Muy muy ilustrativo!!
Muchas gracias 🙂
Gracia por tu comentario Dani. Esperamos que te haya sido de ayuda.
¿Es posible integrar Estatik con Elementor? ¿Ustedes que opinan?
Hola Andres:
Te lo confirmamos, es posible integrar Estatik en Elementor. Nosotros hemos realizado algunas webs.
Un saludo y suerte.
Fantástico, acabo de instalar el plugin y con las explicaciones me has resuelto varias dudas en un video.
Solo una pregunta. En la ficha «propiedad única» siempre me aparece el formulario a la derecha y si quito los widgets me desparece el formulario personalizado y aparece uno por defecto en inglés. No puedo quitar el formulario!!! .
Os lo agradezco de antemano
Hola Ramón, lo que pretendes es que no haya nada en la columna de la derecha?
Hola. Muchas gracias por la respuesta
Sí, eso es lo que quiero. Lo que ocurre es que desactivo todos los widgtes para que quede en blanco y entonces me aparece el mismo formulario pero en inglés. es como si saliera este formulario por defecto.
Lo que quiero es que el formulario aparezca abajo (esto lo consigo) pero también me aparece el formulario arriba (en inglés)
Una solución la puede ofrecer el tema que estés utilizando. Hay temas que te permiten deshabilitar la columna de los widgets en las páginas que te interese. Investiga si tu plantilla te ofrece esa opción.
Si tu tema no te da esa opción, puedes quitarla de forma manual.
Si no tienes un child theme create uno y duplica el archivo page.php de tu tema actual. En la copia que has creado en tu child theme busca esta línea de código y borrala: get_sidebar();
Guarda y comprueba los cambios. Recuerda que debes tener activado el child theme.
Saludos
buenas tardes quisiera saber cual es el mejor tema para trabajar este plugin ya que he descargado varios y son limitados al querer hacer modificaciones. no me deja hacer modificaciones de tamaño en columnas y cambios en general muy limitado tambien a la hora de optimizarlo para celular. te agradezco la ayuda.
Hola Alejandro:
Nosotros siempre recomendamos Astra. Dependiendo del diseño quizás tengas suficiente con la versión gratuita de la plantilla, pero por lo que nos comentas y para tener acceso a todas las opciones de personalización que ofrece la plantilla te recomendamos la versión PRO.
Te dejamos un enlace a un artículo en el que explicamos que opciones de personalización tiene: https://byteweb.es/astra-pro-la-plantilla-perfecta/
Desde este otro puedes acceder a la página del desarrollador: https://wpastra.com/?bsf=2278
Saludos, Una consulta para los que hayan instalado el PRO hay una forma para vincularlo con el usuario para restringir paginas o información de acuerdo a los perfiles de agentes y compradores controlar que información pueden ver en la pagina web que se este creando? o solo permite que todos los usuarios deban ver todo el contenido desde el registro de usuario de plugins
Hola Carlos:
El tutorial esta creado con la versión gratuita del plugin. Desconocemos si la versión Pro permite realizar lo que nos comentas.
De todas formas dale una vuelta al plugin wp-members, quizás con el puedas conseguirlo.
Un saludo.
Hola Gracias por este tutorial es muy bueno, yo soy agente inmobiliario y me he comprado un dominio y hosting estoy en el proyecto de realizar mi propia pagina web, mi consulta ¿en Astra he visto una plantilla inmobiliaria la puedo utilizar e insertar las propiedades con estatik tal como lo enseñan? o tengo que crear mi página sin plantilla, lo que quiero es que cuando el cliente haga click en la imagen de la propiedad vea la galería de fotos de la misma y la descripción.
Hola Elizabeth:
Ante todo nos alegra saber que fué útil nuestro tutorial y agradecemos tu comentario.
Cuando hablas de la plantilla de Astra imaginamos que te refieres a esta: https://websitedemos.net/real-estate-02/
Sí, la respuesta es si, puedes trabajar con esa plantilla, pero todas las partes que hacen referencia a la gestión y personalización de las propiedades (mostrar propiedades, mostrar agentes, buscador de propiedades, etc etc) lo deberás hacer desde la configuración y insertarlos en la plantilla con los shortcodes que ofrece Estatik.
Te dejo un enlace a la lista de shortcodes: https://estatik.net/document/shortcodes/
Esperamos que nuestra respuesta te sirva de ayuda.
Un saludo.
Sin duda contar con una página web para nuestro negocio nos ayudará mucho a captar a más clientes y a tener una mayor visibilidad en la red. Muy buen artículo, me parece muy recomendable para todos los que formemos parte del sector inmobiliario.
Muchas gracias por tu comentario.
Un saludo.
Hola, como puedo traducir la versión gratuita?? ejemplos los campos descripción, baños, dormitorios, etc.
Hola Fernando, puedes traducir las cadenas de texto utilizando Loco translate. Te dejamos un tutorial que tenemos en nuestro canal de You Tube:
https://www.youtube.com/watch?v=aIWxH3OBg6g
Un saludo.
Hola.
¿De qué manera puedo modificar el estilo en el que se presentan las propiedades? Estoy usando divi y quería saber si es posible cambiarlo para que luzca diferente, quiero que quede el Slider de ancho completo, quitar algunas características y lograr que se vea acorde a mi sitio.
Es decir, no quiero únicamente cambiar la disposición de la información, sino, entrar directamente a hacer una «plantilla» a la hora de que ver los detalles de una propiedad. También quiero cambiar los iconos que aparecen en la vista de lista. ¿Tendré que modificar el CSS?
Hola Ivan, con toda la personalización que comentas casi te recomendaria que trabajaras con campos personalizados. En el canal de youtube de la web encontrarás algun tutorial.
Un saludo.
entre usar un plugin como este y un thema como Houzez, que recomendarias.
Hola Gino, desconozco el theme que me comentas por lo que no puedo darte respuesta.
Un saludo.
Un gran tema con un gran constructor. Tengo una pregunta. ¿Este tema y constructor son compatibles con algún complemento de modo oscuro?
Hola Kevin, pués creo que tu puedes responderme a esa pregunta. ¿Es droid dark mode compatible?
Un saludo.
Hola! saludos desde Chile! estoy creando una web con este plugin y llegué a tu video para aclarar algunas dudas, pero tengo dos consultas (espero me puedas ayudar) No logro configurar bien el buscador del Plugin, al momento de incorporar el código, me arroja un buscador enorme ¿se pueden modificar esos campos? y lo segundo: cómo coloco el nombre a la propiedad, en qué campo va el nombre que aparece luego tanto en «mis propiedades» como al momento de colocar un shortcode y visualizar las propiedades? Muchas gracias desde ya por tu ayuda!
Hola Cristian, el ancho de los campos del buscador es definido por el contenedor donde lo pones. Es decir, si la columna donde insertas el shortcode del buscador hace el 100% del ancho te saldrá la 100%. Lo que puedes hacer por ejemplo es crear una fila en la que en una columna muestres las propiedades y dicha columna haga un 66% del ancho y el buscador en otra columna y que haga el 33% del ancho de la fila.
Respecto a tu segunda pregunta no acabo de enteder que es lo que me preguntas. Si me pudieras hacer un video explicandomelo me ayudaria bastante. Para el video puedes utilizar una web que se llama Loom, es totalmente gratuita. Te dejo el enlace:
https://www.loom.com/
Estimado, muchas gracias por tu respuesta!! en este Link puedes revisar mis dos consultas, espero sea claro y me puedas ayudar. Desde ya muchas muchas gracias
https://www.loom.com/share/4889155544344222b447fdfdbc573573
Muy buenas, tengo una duda ya que tengo instalado el plugin y necesito ese icono de statik verde, que puede pasar y como lo puedo instalar? porque no he podido encontrarlo
Hola Magno, en versiones posteriores lo han quitado. Puedes realizar lo mismo insertando los shortcodes que generaba el botón.
Te dejo el enlace: https://estatik.net/document/shortcodes/