Create an Airbnb-like listings page with GeoDirectory and Avada

airbnb like listing page geodirectory avada

approximately 6 months ago we released V2 of GeoDirectory and we promised it would be a lot easier to customize your design with it.

Being compatible with most page builders and themes, you could already do fantastic template designs with GeoDirectory V2, but now that we are fine-tuning it, you will be able to do even more awesome stuff with it.

We decided to start with Avada and the Fusion Builder.

With the current version of GeoDirectory, you had to :

  • add new widget areas in Avada
  • add the GD widgets needed to complete the design
  • finally, use these widgets areas through the Fusion Builder

You could achieve almost anything with that and CSS later, but it wasn’t intuitive, nor as easy as customizing a design, with the default elements of Fusion Builder.

GeoDirectory Elements will be within the Fusion Builder

From the next version of GeoDirectory which will be 2.0.0.68 (beta available on GitHub now), all GeoDirectory Widget / Shortcodes / Blocks, will also be available as Elements of the Fusion Builder.

This makes it a lot easier to design and we can now dig into the tutorial of how to design a page to look similar to Airbnb’s listings page or search results page.

Assuming you have Avada and GeoDirectory already installed, this is how I made it.

Disclaimer: It was not possible to design a page that looks like Airbnb ONLY with GeoDirectory and Fusion Builder. I had to write a few lines of CSS. 11 new rules to be precise, 5 for the archive page template (the listings page) and 6 for the archive item page template (each listing inside the listings page).

That said, I’m not really an Avada expert and there are so many options that probably what I did, could be done without as much CSS. Maybe even none.

I’ll leave that to Fusion Builder Masters to tell. If you know of solutions to avoid my custom CSS, I’d appreciate you letting me know via a comment down below and I’ll update the tutorial.

I started adding the custom fields that AirBnB uses through Place > Settings. I only added the exact one I needed to replicate the design and save time, but everything can be done.

We needed 4 selects for :

  • Guests
  • Bedrooms
  • Beds
  • Bathrooms

and one multisect for amenities like:

  • Kitchen
  • Pool
  • Air Conditioning

After publishing a few dummy listings, I needed a new Archive Page template. I called the page Avada Listings 1 and assigned it via GeoDirectory settings as the new Archive page template.

Then I needed to prepare the page and make it use the entire screen. I know there is an option to make Avada pages use the full width of the screen, but that affects the entire site, so I used CSS to do that.

.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}

What the above does is simple. Makes the area below the header and above the footer using the full width of the screen, removes general paddings and adds padding only to the left of the listings list. It also hides the Avada title bar that on a similar page is not necessary. The page will look like this:

Now we can edit the page with Fusion Builder. You can use both Front End or Back End, but the preview of the Front End won’t be 100% accurate, the reason why I used the back end builder.

We need two columns and in the right column we will add the GD > Map element, while in the left column we will add :

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

The only options that we need to tweak are for the Map where we need to set the height at 85vh. To obtain the fixed map effect on scroll, I used a plugin called: Sticky Menu (or Anything!) on Scroll by Mark Senff.

We could have written our own custom JS, but this plugin is lightweight and if you only have 1 element to stick, it works like a charm. It also pushes the map when the footer appears if you set it up correctly.

As options for this plugin I set:
Sticky Element = .geodir-archive-map-wrap
Push-up element = .fusion-footer

The Push-up Element option can be found in Advanced Settings.

That’s it for now.

The page now will look like this:

Now I need to customize the design of each listing and that can be done editing the Archive Item Page template.

I created a new Archive Item Page template and I called it : GD Archive Item-avada

I opened it with the Fusion Builder back end editor and I added the following GD Elements:

  • GD > archive item section set as open left
  • GD > post images set as 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=”how_many_guests” and show=”value” and alignment=”left”
  • GD > post meta with key=”how_many_rooms” and show=”value” and alignment=”left”
  • GD > post meta with key=”how_many_beds” and show=”value” and alignment=”left”
  • GD > post meta with key=”how_many_bathrooms” and show=”value”
  • GD > post meta with key=”amenities” show=”value”
  • GD > post badge key=”post_date” condition=”is_less_than” search=”+30″ badge=”NEW” bg_color=”#008489″ txt_color=”#ffffff” size=”small”
  • GD > post rating show=”stars” alignment=”left”
  • GD archive item section set as close right

Last thing I needed some CSS to make things look pretty and organized like on the Airbnb page:

.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;}

The above CSS does the following:

  • adjust the position of title and rating stars
  • adds the ” – ” separator between the custom fields
  • adjust the amenity multiselect, that by default is presented as a list
  • adjust the positioning of the “NEW” badge

That’s it, the result is what you see here:

airbnb like listing page geodirectory avada

I know it is not 100% identical to AirBnB, but hey, I took me 2 hours, I barely knew how to use Avada and I just wanted to show you the level of customization that is possible with GeoDirectory and Fusion Builder.

For us this is pretty impressive, but if it’s not for you, would you please tell us what would make it impressive in your opinion? If you leave a comment, we’d love to hear your feedback.

I’m sure someone will ask, so I answer directly here. How I created the markers with prices? That’s simple I used categories like:

-Apartment (Parent)
–100 – 200 (sub)
–200 – 300 (sub)
I designed the markers with each price fork with photoshop, uploaded the marker for eac sub-category. When adding listings, I assigned the sub-category as the default category, so that the marker with prices would be used in all maps.

I hope you enjoyed this tutorial, let me know if you have any question regarding this in the comments down below!

Published by Paolo

Paolo Tajani is the co-founder and growth hacker of AyeCode LTD. With his business partner Stiofan, they are the makers of the GeoDirectory, UsersWP and Invoicing plugins for WordPress. Paolo developed his first WordPress website in 2008. In 2011 he met Stiofan O'Connor and together they started building and marketing successful themes and plugins for WordPress. Today their products are used by +100.000 active websites.

2 thoughts on “Create an Airbnb-like listings page with GeoDirectory and Avada

  1. Hi Paolo,
    This is a very exciting development that would help us improve our usefulness to business customers and consumers. We presently have a field (business sustainability practices) that includes up to 12 value options. We’re currently displaying those values in the directory detail listing content. Given the number of values, we would need to limit in some way the number of values that display under the listing title on the archive page.

    We had to abandon the location page right column map display since it doesn’t display well on mobile. Would there be an alternate display option such as 4-5 grid layout across the page rather than list layout? This is how we are currently displaying listings on the location, category, search, etc pages. https://thelocaldish.com/location/oregon/ashland/

    Thanks for choosing Avada as your first tutorial!

    1. Hi Barbara,

      it’s not hard to make it look good on mobile too and yes you can also show a grid on the left side of the screen, with 4 or 5 listings per row.

      The loop element as the layout parameter to set the way listings appear (grid or list)

      Your site though looks very good as is IMHO.

      Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.