Elementor booking plugin for hotels

Hotel Booking for Elementor: How to Create an Elementor Hotel Site

Home > Blog > WordPress themes > Hotel Booking for Elementor: How to Create an Elementor Hotel Site

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:

  1. MotoPress Hotel Booking plugin.
  2. Elementor.
  3. 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 (similar to Booklium or Alpenhouse).

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.)
  • Images
  • 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.

edit proeprty detail hotel booking

You can also disable the block editor:

disable 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:

Elementor Accommodations

Let’s add a property directory by adding the Accommodation types widget in Elementor:

accommodation types

In our stunning Albatross theme, the immediate output is fantastic, but we can play with it by featuring images right in the directory:

accommodation grid

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:

page template wordpress booking plugin

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:

rooms listing albatross free hotel theme

Individual accommodation types

There is a widget for tweaking the layout of an individual accommodation type – Single Accommodation type.

single accommodation motopress

It allows you to decide how many elements must be displayed on this page:

single accommodation

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.

property page

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):

ciestra theme

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”:

edit search form wordpress hotel booking plugin

In Albatross, the front-page widget is also editable through the WordPress Customizer:

motopress search form elementor hotel booking theme

To the search form in Elementor, you need the Search Availability form widget:

Elementor hotel booking template albatross

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.

search filters elementor

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:

theme calendar

With Albatross, you don’t even need to lift a finger, it’s already stunning:

property search form

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.

availability calendar

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.

rates hotel booking

  • Custom discounts.

coupons wordpress elementor booking

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:

elementor booking plugin rates

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.

payment gateways wordpress rental plugin

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

wordpress hotel booking booking calendar

  • The ability to sync bookings across OTAs and/or Google/Apple calendars

apple-calendar-7

  • Edit original bookings after their submission

edit dates and accommodations

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.

For example:

  • the Amenities page made with the Stratum’s flip box widget:

flip boxes

  • The Lottie animation Stratum’s widget helps make the hero sections more attractive (notice the moving circle).

lottie animation

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?

Depends on your needs! But as we show in this post, you can build it with a few completely free solutions – Elementor, a free Albatross theme, and the Elementor Hotel Booking integration-free plugin.

Does the Albatross theme support automatic hotel bookings?

Yes, Albatross is equipped with a free version with the MotoPress Hotel Booking plugin – and it does support automatic bookings by PayPal, pay on arrival and direct bank transfer methods for free. Full and deposit payments are also supported.

Can I translate Albatross into other languages?

Yes, you can use any WordPress translation plugin for this purpose. The Hotel Booking plugin is, by the way, already translated into 14 languages, which means you just need to switch your WordPress languages settings and the plugin-sourced texts will be displayed in that language automatically.

Was this article helpful?

Yes No

You have already left your review.

Leave a Reply

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