Crea una página de listados estilo Airbnb con GeoDirectory y Avada

hace aproximadamente 6 meses lanzamos la V2 de GeoDirectory y prometimos que sería mucho más fácil personalizar tu diseño con ella.

Al ser compatible con la mayoría de los maquetadores de páginas y temas, ya podías crear diseños de plantillas fantásticos con GeoDirectory V2, pero ahora que la estamos perfeccionando, podrás hacer cosas aún más increíbles con ella.

Decidimos empezar con Avada y el Fusion Builder.

Con la versión actual de GeoDirectory, tenías que:

• añadir nuevas áreas de widgets en Avada
• añadir los widgets de GD necesarios para completar el diseño
• finalmente, usar estas áreas de widgets a través del Fusion Builder

Con eso y CSS podías lograr casi cualquier cosa más adelante, pero no era intuitivo ni tan sencillo como personalizar un diseño con los elementos predeterminados del Fusion Builder.

Los elementos de GeoDirectory estarán dentro del Fusion Builder

A partir de la próxima versión de GeoDirectory, que estará 2.0.0.68 (disponible en versión beta en GitHub ahora), todos los Widgets / Shortcodes / Bloques de GeoDirectory también estarán disponibles como Elementos del Fusion Builder.

Esto hace que diseñar sea mucho más sencillo, y ahora podemos adentrarnos en el tutorial sobre cómo crear una página con un aspecto similar a los listados de Airbnb página o página de resultados de búsqueda.

Suponiendo que tienes Avada y GeoDirectory instalados, así es como lo hice.

Aviso: No fue posible diseñar una página que se pareciera a Airbnb SOLO con GeoDirectory y Fusion Builder. Tuve que escribir algunas líneas de CSS. 11 nuevas reglas, 5 para la plantilla de página de archivo (la página de listados) y 6 para la plantilla de página de elemento de archivo (cada listado dentro de la página de listados).

Dicho esto, no soy realmente un experto en Avada, y hay tantas opciones que probablemente lo que hice podría hacerse sin tanto CSS. Quizás incluso sin ninguno.

Se lo dejo a los Maestros de Fusion Builder para que lo determinen. Si conoces alguna solución para evitar mi CSS personalizado, te agradecería que me lo hicieras saber mediante un comentario más abajo, y actualizaré el tutorial.

1 Crear los Campos Personalizados necesarios

Empecé añadiendo los campos personalizados que utiliza AirBnB a través de Place > Settings. Solo añadí los exactamente necesarios para replicar el diseño y ahorrar tiempo, pero todo puede hacerse.

Necesitábamos cuatro selectores para:

• Huéspedes
• Habitaciones
• Camas
• Baños

y un multiselector para comodidades como:

• Cocina
• Piscina
• Aire Acondicionado

2 Editar la Plantilla de Página de Archivo

Tras publicar algunos listados de prueba, necesitaba una nueva plantilla de Página de Archivo. Llamé a la página Avada Listings 1 y la asigné a través de la configuración de GeoDirectory como la nueva plantilla de página de Archivo.

Luego necesitaba preparar la página y hacer que ocupara toda la pantalla. Sé que existe una opción para que las páginas de Avada usen el ancho completo de la pantalla, pero eso afecta a todo el sitio, así que usé CSS para lograrlo.

.geodir-archive #main .fusion-row {max-width:100%}
html:not(.avada-has-site-width-percent) .geodir-archive #main {padding:0} 
.geodir-archive #main  {padding:0}
.geodir-archive .post-content .fusion_builder_column_1_2.fusion-column-first > .fusion-column-wrapper {padding-left: 8% !important;}
.geodir-archive .avada-page-titlebar-wrapper {display:none}

Lo que hace lo anterior es sencillo: hace que el área entre el encabezado y el pie de página ocupe el ancho completo de la pantalla, elimina el relleno general y añade relleno solo a la izquierda de la lista de listados. También oculta la barra de título de Avada que, en una página de este tipo, no es necesaria. La página tendrá este aspecto:

Ahora podemos editar la página con Fusion Builder. Puedes usar tanto el editor frontal como el de back-end, pero la vista previa del editor frontal no será 100% precisa, razón por la cual usé el editor de back-end.

Necesitamos dos columnas, y en la columna derecha añadiremos el elemento GD > Mapa, mientras que en la columna izquierda añadiremos:

• GD > Search
• GD > Loop Actions
• GD > Loop
• GD > Loop Paging

Las únicas opciones que necesitamos ajustar son las del Mapa, donde debemos establecer la altura en 85vh. Para obtener el efecto de mapa fijo al desplazarse, usé un plugin llamado: Sticky Menu (or Anything!) on Scroll de Mark Senff.

Podríamos haber escrito nuestro propio JS personalizado, pero este plugin es liviano y si solo tienes 1 elemento que fijar, funciona a la perfección.

Si lo configuras correctamente, también empuja el mapa cuando aparece el pie de página.

Como opciones para este plugin, configuré lo siguiente:

• Sticky Element = .geodir-archive-map-wrap
• Push-up element = .fusion-footer

La opción Push-up Element se encuentra en Configuración Avanzada.

Eso es todo por ahora.

La página ahora tendrá este aspecto:

3 Editar la Plantilla de Página de Elemento de Archivo

Ahora necesito personalizar el diseño de cada listado, y eso puede hacerse editando la plantilla de Página de Elemento de Archivo.

Creé una nueva plantilla de Página de Elemento de Archivo y la llamé: GD Archive Item-avada

La abrí con el editor de back-end de Fusion Builder y añadí los siguientes Elementos GD:

• GD > archive item section set as open left
• GD > post images set as a slideshow
• GD > archive item section set as close left
• GD > archive item section set as open right
• GD > post meta with key="post_category" and show="value"
• GD > post favorite with show="icon" and alignment="right"
• GD > post title
• GD > post meta with key=
• GD > post meta with key=
• GD > post meta with key=
• GD > post meta with key=
• GD > post meta with key=
• GD > post badge key=
• GD > post rating show=
• GD archive item section set as
  

4 Añadiendo algo más de CSS personalizado

Lo último que necesitaba era algo de CSS para que todo luciera ordenado y atractivo, como en la página de Airbnb:

.geodir-post-title, .geodir-post-rating {clear: left;}
.geodir-field-amenities li::after,.geodir-field-how_many_guests::after,.geodir-field-how_many_rooms::after,.geodir-field-how_many_beds::after {content:" - ";}
.geodir-field-amenities ul {margin:0;padding:0}
.geodir-field-amenities li:last-child::after {content:"";}
.geodir-field-amenities li {list-style: none;float: left;}
.gd-badge-meta {display: block;margin-left: 0;clear: both;}

El CSS anterior solo funcionará si tienes exactamente los mismos campos personalizados y hace lo siguiente:

• ajusta la posición del título y las estrellas de valoración
• añade el separador
• ajustar la selección múltiple de servicios, que por defecto se presenta como una lista
• ajustar la posición de la insignia "NUEVO"

Eso es todo. El resultado es lo que ves aquí:

Sé que no es 100% idéntico a Airbnb, pero oye, me llevó 2 horas y apenas sabía cómo usar Avada.

Solo quería mostrarte el nivel de personalización que es posible con GeoDirectory y Fusion Builder.

Para nosotros, esto es bastante impresionante, pero si no lo es para ti, ¿podrías decirnos qué lo haría impresionante en tu opinión?

Si dejas un comentario, nos encantaría escuchar tu opinión.

Estoy seguro de que alguien lo preguntará, así que lo responderé directamente aquí.

¿Cómo creé los marcadores con precios? Es sencillo. Usé categorías como:

-Apartamento (Principal)
–100 – 200 (sub)
–200 – 300 (sub)

Diseñé los marcadores con cada horquilla de precios con Photopea.com, y subí el marcador para cada subcategoría.

Al agregar listados, asigné la subcategoría como categoría predeterminada para que el marcador con precios se usara en todos los mapas.

Espero que hayas disfrutado este tutorial.

¡Déjame saber si tienes alguna pregunta al respecto en los comentarios de abajo!