Hotel Booking for Elementor: How to Create an Elementor Hotel Site
Table of Contents
Want to set up an accommodation booking site with Elementor? To display your properties (villas, cabins, hotel rooms, etc.) with the availability and pricing range and enable guests to book those online? Why not!
But there are two important things to explain foremost:
- Elementor itself is a content builder and design tool. That means you need it to add content of any type and make it look gorgeous.
- Booking-related tools of any sort, such as booking forms, availability calendars, reservation wizards, etc. are the functionality’s territory. It requires connecting third-party specialist booking plugins.
As you see, there is no standalone Elementor booking plugin.
In simple terms that means that Elementor itself doesn’t do the bookings functionality job. The booking plugins can exist and work without Elementor. And if we talk about any sort of hotel booking for Elementor (or Elementor booking plugin) that implies we’re referring to the integration of the two.
For the purpose of this post, let’s start by clarifying which plugins we’re going to use to create an Elementor hotel site.
Hotel Booking Elementor: Plugins You Need to Make It Work
Three plugins are required:
- MotoPress Hotel Booking plugin.
- Hotel Booking & Elementor Integration extension.
Make sure all of them are installed and activated before you start working on your site.
Why is it even more useful to use Elementor if, for example, the booking plugin can perfectly work without it?
The answer is simple: without Elementor, you need to work with the booking plugin shortcodes, which are not user-friendly. With Elementor, you use normal Elementor widgets instead of shortcodes (for easier content output).
This is the main idea of integration. It takes two to tango.
The last plugin in the list does what I described at the beginning: it enables you to work with the content generated by the Hotel Booking plugin via the familiar Elementor’s interface, e.g. organize elements on a page, tweak styling, etc.
I will also use a free Elementor Hotel theme – Albatross, also by MotoPress, which is a great, ready-made design basis for a rental property site.
Its nifty and slick design can be home to any type of hotel or vacation rental site. Unlike non-MotoPress themes, Albatross ensures out-of-the-box stunning design for the Hotel Booking widgets since the theme is initially optimized for the plugin.
What’s more, it’s free to download, so you can take it for a spin right after reading this post!
Please note: while the Albatross Elementor hotel theme is free and ships with the lite version of the Hotel Booking plugin, we’ll use the premium Hotel Booking plugin version for this post.
You can use any theme, though – this set of plugins will work, but probably you’ll need to do some extra design work. We created an extra Hotel Booking Styles free addon for this purpose.
Hotel Booking for Elementor: Video Guide
Not a fan of long reads? Watch a video! Stacy puts the whole process into simple words.
Getting Started: Accommodation Types, aka Rental Properties
The first step is to create a directory of properties.
Create accommodation types and categorize them by types. For each type, you are free to add:
- Text description.
- Amenities (free internet, pet-friendly, towels, bar, etc.)
- Custom filters for the extended search (those can be further added to the arrival/departure property search form).
- Bed types, sleeps, and capacity
- Extras, available for purchasing.
An Accommodation type is a custom post type, so we fill it in with content in the default WordPress block editor.
You can also disable the block editor:
The visual presentation of an individual property, as well as of a directory of properties will depend on the WordPress theme you use.
Once all of the accommodation types are added to the plugin database, how do you display them on a site? Use Elementor, of course!
Open any page in Elementor – and scroll down to the Hotel Booking widgets:
Let’s add a property directory by adding the Accommodation types widget in Elementor:
In our stunning Albatross theme, the immediate output is fantastic, but we can play with it by featuring images right in the directory:
The Albatross theme by default supports different property directory layouts, including a list (as in the first screenshot) and grid (in the second).
You can choose the needed layout in the default page template settings in WordPress:
Furthermore, you can discover one more cool design alternative for the Accommodation types widget (the properties directory) built exclusively for the Albatross Elementor hotel theme – it’s embedded on the front page:
Individual accommodation types
There is a widget for tweaking the layout of an individual accommodation type – Single Accommodation type.
It allows you to decide how many elements must be displayed on this page:
For example, you can showcase an availability calendar for a dedicated property (individually), add a search form so that it’s always at hand when your guests need to perform a further search, view and book button, an image gallery, etc.
With a different theme, you’ll have the same functionality, but it will just look different. This is, for instance, the accommodations directory in Ciestra, our beachfront resort WordPress theme (built with Elementor, too):
The Available Accommodation Search Form & Availability Calendars
With the Albatross hotel booking for Elementor theme, it’s especially easy to create a beautiful and bold property search form right on the front page (because there is already a spot for it) or add it to any page or widget zone, like a sidebar.
Before you proceed to display this form on the front end, make sure to apply all the needed settings in the plugin.
The plugin provides default arrival, departure, and the number of adults/children fields. Feel free to shorten it to just dates or one field “guests”:
In Albatross, the front-page widget is also editable through the WordPress Customizer:
To the search form in Elementor, you need the Search Availability form widget:
You can place it on any other page – as well as add your custom extra search fields (location, room type, etc.) – pay attention to the attributes field in the previous screen. You can display them as fields in the search form.
The Hotel Booking WordPress plugin gives you a choice of calendar schemes you can display – you’ll find a complementary color scheme for whatever site design:
With Albatross, you don’t even need to lift a finger, it’s already stunning:
Using the Availability calendar widget in Elementor, you can customize the look of the calendar for individual rooms/vacation rentals, such as choosing how many months must be displayed.
Property Rates & Discounts
The pricing range of your accommodations can be based on:
- Room facilities: amenities, meals, etc.
- Seasons: any holiday or term.
- The length of stay (discount prices for the longer stay automatically).
- The number of guests.
- Custom discounts.
If there are also taxes or fees you want to make mandatory for all or individual accommodations, feel free to include them into the property cost (per guest or accommodation).
All this information will be listed in detail at checkout.
There is also a dedicated Accommodation rates widget for Elementor you can output on any page:
How to Handle Direct Website Bookings
If you want to enable the WordPress rental plugin by MotoPress to accept automatic bookings, there are a few steps to follow.
Configure how bookings are approved:
- Manually by the staff or site admin.
- Let a guest confirm their booking via email.
- Bookings approved upon payment. The Hotel Booking plugin allows you to enable PayPal, 2Checkout, Braintree, Stripe and Bambora (formerly Beanstream). Direct bank transfers and payments added manually upon arrival are also possible.
The guest can choose to pay either the full amount or deposit (if allowed).
To help you further, there are more integrated tools:
- The booking calendar
- The ability to sync bookings across OTAs and/or Google/Apple calendars
- Edit original bookings after their submission
Of course, this is just the bird’s-eye view, you’ll be able to work with many more settings you can test-drive in the MotoPress demo.
If you have the MotoPress Hotel Booking plugin version 4.1.0 or greater installed and activated, you can download a free Hotel Booking mobile app. It works for both Android and Apple operating systems. It allows you to smoothly manage bookings, view payment information, and more on the go.
As you see, it’s not that hard to build a hotel site with Elementor and MotoPress WordPress rental plugin – in combo they help you achieve excellence in both the visual aspect as well as the functionality.
With the optimized designs, the task is getting even easier – in this case themes like Albatross come in handy. What makes the Albatross hotel template for Elementor even more flexible is the Stratum addon, a bundle of extra design and customization widgets. The theme ships with several Stratum-made pages and page sections.
- the Amenities page made with the Stratum’s flip box widget:
- The Lottie animation Stratum’s widget helps make the hero sections more attractive (notice the moving circle).
Employing all these plugins, you can create and operate an Elementor hotel website and bookings to generate steady income, accept independent direct bookings and from third-party OTAs, and still get all the benefits of the Elementor builder!
P.S. Another MotoPress solution for managing and accepting booking is the WordPress Appointment plugin. Suitable for all appointment-based services, this tool can significantly facilitate the entire booking procedure. Introduce your clients to all staff and let them view their profiles & schedules through a convenient calendar. As a site admin, centralize bookings directly in the WordPress dashboard.
View Demo of the WordPress Scheduler Plugin.
Is it expensive to build a hotel booking site with Elementor?
Does the Albatross theme support automatic hotel bookings?
Can I translate Albatross into other languages?