We really care about our clients and respect their choice, so for those who have already built their hotel or vacation rental WordPress website with Elementor, we’ve released the new MotoPress extension – Hotel Booking & Elementor Integration. With this addon, you can create all necessary pages of your website visually, without a need to tinker with shortcodes.
In broad strokes, this add-on serves up visual editing on the frontend, a user-friendly shortcode generator and a drag-and-drop interface. It is absolutely free, so don’t forget to download it and give a try!
Many of you who already use Elementor are familiar with the flexibility of this editor. Integrating all essential shortcodes of the Hotel Booking plugin into Elementor will provide you with a super user-friendly toolkit for editing shortcodes and their parameters, so you don’t need to manually do the job. Instead, simply choose preferred options from the drop-down menu in a visual editor and enjoy instant results.
Check out real-life websites built with Hotel Booking and Elementor!
In case your website is just in the initial stage of development, consider Albatross – the free Elementor theme with the already implemented Hotel Booking functionality. It offers features of Hotel Booking LITE but with the possibility to easily upgrade to the premium version.
WordPress plugins to make it work
You need 3 plugins installed to start editing your Hotel Booking powered website with Elementor:
- MotoPress Hotel Booking plugin
- Elementor Page Builder plugin
- Hotel Booking & Elementor Integration extension.
Make sure all of them are installed and activated. Also, add your content via the Hotel Booking plugin first so that your work with shortcodes in Elementor is really quick.
Property booking website with Elementor
To create all necessary pages with Hotel Booking shortcodes via Elementor visual builder, go to a page > edit > edit with Elementor.
In the list of available content modules in Elementor builder you’ll see MotoPress Hotel Booking modules – just scroll down to see the whole list.
Search availability widget & property listing
Now simply choose the shortcode you want to add > drag it to the page and customize with a help of the shortcode parameters. First of all, you can create a listing of your properties in clicks:
If you want to put your accommodations into different columns, firstly choose the appropriate number of columns in Elementor layout and then put your accommodation IDs as single properties:
In the Advanced settings tab, Elementor allows you to tweak the layout like spacing, etc. Overall, it’s much more flexible than the current version of Gutenberg editor.
Editing the shortcode parameters is easy: simply choose which details to show / hide. For example, here are standard settings for the accommodations listing:
- Property title
- Featured image
- View button
- Book button
- Number of properties per page
- CSS class (if needed)
- Categories and tags
Moreover, you can add the search availability form module and optionally preset the following values:
- Number of adults and children
- Check-in and check-out date
System pages – Elementor bookings
There are also several system pages you can set up visually: add shortcodes for the search results, checkout form and a booking confirmation form. Parameters of the search results page are fully customizable, so you can decide what info to show to the guests who search for the lodging.
In addition to standard listing parameters like excerpt, details, price, etc., you can also set the sorting by order or by price.
If you need to place a booking form of any particular accommodation right on the individual accommodation page, you can add a booking form with the accommodation ID. This will allow your guests to make a reservation directly from that page.
Accommodation rates and services
You may also list all available accommodation rates and services with a help of a shortcode (don’t forget to add their content via Accommodation > Rates or Accommodation > Services before adding shortcodes). You’ll need to put the needed accommodation ID (all services and rates should be tied to this accommodation). If there are lots of services, you can even set a number of items per page.
Hotel Booking & Elementor Integration free add-on is a perfect utility to speed up and optimize a website building process, especially for non-tech people. Elementor is very quick, neat and flexible WordPress page builder, so you can safely rely on it in building your property booking WordPress website.
Do you think you’ll be using the plugin? Do you have any idea in mind on how it should be improved? Let us know!
Make sure to check our vacation rental WordPress website optimization checklist!