If you want to have stunning Airbnb like galleries you came to the right place. Let’s be real, the galleries on Airbnb look just lovely and we understand why you would like something like that on your website. We’ve got you! Please follow this tutorial to make the galleries of your dreams come true.
Let’s take a closer look on what Airbnb galleries offer:
- A clean display of the gallery
- The ability to easily navigate through all of the photos
- Displaying captions on the images
- Lightbox image transition effects
- Navigation arrows
- User-friendly interface
Our Modula plugin can help you with all of these settings in a just a few simple steps.
Install Modula
The download process is a simple one and will only take a few minutes. You need to go to your WordPress Dashboard and look for Plugins. Then, click on Add New.
There will appear a new page with a search bar in the upper right corner, so type Modula. When you will be able to see it, click on the Install Now button.
The installation process might take a few seconds. When it is done, the Install Now button will change into Activate button. Click on it and activate the Modula photo gallery plugin.
Modula will pop up in your WordPress dashboard.
Until now, we have installed and activated the free version of the Modula plugin. Let’s see how to upgrade the premium version and activate the purchased license on your website.
Purchase Modula
In ordre to be able to cerate a gallery of this type you will need to purchase the Starter plan which will unlock the settings you need. You can do that by going to the Pricing page where you’ll find 4 pricing plans: Starter, Trio, Business, and Agency. These licenses are active for one year, but you can also opt for a lifetime license.
Click on the Buy Now button under the plan you choose to go with.
It will pop up a new page, the checkout page. Here you can find the option to renew a license key or add a discount code. Follow the steps to complete the purchase.
When the process is over, you will get a purchase confirmation email containing the zip files for Modula PRO and your main license key.
Install the premium plugin and extensions
We already got the zip file containing the upgrade within the purchase confirmation email. Download them from the email. Now go to your website’s admin Dashboard > Plugins > Add New > Upload plugin > Choose file > Install Now. You won’t be able to upgrade if you do not have the Modula lite version already installed. Follow the first steps from this article to install the Modula lite version in WordPress.
Activate the license key
To activate your license key, copy it, go to Modula > Setting > License key, and paste your license key. Click on the Activate License button to activate it.
Create a gallery
To get started, head to your WordPress Dashboard >Modula > Add New and it will pop up a new box.
You will be redirected to a page where all the magic happens. You can start by giving your gallery a name to differentiate it from the others. Then, upload your images, or select them from your WordPress Library.
Now all your images are added to your gallery. From here,, you can start customizing the gallery so you can make it as close to Airbnb as possible.
Edit your gallery
Modula offers various features so displaying a gallery as it is on Airbnb should be pretty easy.
First of all, when you enter a gallery on Airbnb you are greated with 5 images which will open in a lightbox when you click on them. In order to achieve that you need to go to your WordPress dashboard > Modula > Edit your gallery > General settings > Gallery type > set it to Custom Grid. After that you need to drag the corners of the 5 images to fill in the space like in the image below.
Next, to limit the number of images you need to go to your gallery > General Settings > search for the Max Images Count option > set it to five.
What you need to do after this is set the spacing between the images to be like on Airbnb. To achieve this, go to the General Settings tab > Gutter > lower tha value to 8 px.
Now, we need to make sure that all of the images ar displayed in the lightbox. To do so go to the Lightbox & Links tab and enable the Show all images feature.
If you hove over the images on Airbnb you will notice a nice hover effect. To ahiceve that you need to go to your gallery > Hover effects tab > set the hover color to a darker grey and set the opacity to 25%. You can also change the cursor icon to the pointer icon one.
To make the cycle through the images go smooth you need to turn ON the following settings in your Lightbox & Links tab: Thumbanils button, Auto start thumbnails, Thumbnails at bottom.
To display captions under your images please don not forget to check the Show image caption option in your Lightbox & Links tab. You have more options to edit your captions if you head over to your Captions tab. You can set there the color font and szie, font style and the font size for mobiles.
To beautifully navigate through your images in the lightbox please toogle on the Navigation arrows setting in your Ligthbox & Links tab.
You will need to set a solid black background color in your lightbox. In order to do so go to the Lightbox & Links tab > Lightbox background color > set the color and also the opacity you need.
Airbnb offers the possibility to share the listing on multiple social channels. Our plugin also offers this option. Under the Lightbox & Links tab you need to enable the Share button option. You will see sharing options such as: Facebook, Twitter, Pinterest, WhatsApp, LinkedIn, Email.
To display a close button in your lightbox so users can click on it the close the lightbox gallery, you need to check the Close button which is located in the same tab as above.
After you set all of these settings please do not forget to click on the Update gallery button.
If you go to Airbnb and click on any of the 5 images you will be redirected to the entire gallery and only after you click on any image, the lightbox will open. To achieve this with our plugin you need to go to your WordPress dashboard > Modula > Galleries > click on Duplicate gallery on the gallery you created above. A new one will be displayed in your dashboard and we can go edit that one how we like.
Go to the duplicated gallery and drag the corners of the images until you end up with a layout you like.
Please do not forget to scroll down to the General Settings tab and delete the 5 set in the Max Images Count section. Save the gallery and copy its shortcode displayed on the right side.
Display your gallery
First, we will display the gallery in full.
Go to your WordPress dashboard > Pages > Add new. This will be the page that displays the image gallery in full. Set a title and paste the shortcode of the duplicated gallery in the Shortcode block.
After this click the Publish button. Dont’ forget to copy the URL of this page as we will need this URL in a bit.
Now, go the the page where you want to display your Airbnb like gallery and paste there the shortcode of the first gallery you created.
The last thing we need to do is to link these two galleries we created. Go to your dashboard > Modula > Galleries and select the first gallery you created. Click on the pencil icon of the first image to edit it.
Once you are in the editing section, paste the URL you copied a few minutes before and add it in the URL box. After this click on the Save & Close button.
You need to follow the same process with the other four images. Do not firget to click on the Update gallery button when you are finished.
Now you can go the your page and enjoy your newly created Airbnb like gallery👌
You can click here to see a demo if you want.
