Divi Plugin Highlight: Hotel Booking & Divi Integration

Hotel Booking from MotoPress is one of the best booking plugins for WordPress. It integrates well with Divi, but as a stand-alone plugin, it doesn’t take advantage of the Divi Builder and its design features. Hotel booking Divi integration is made possible by using the plugin Hotel Booking & Divi Integration from MotoPress.

Using the free or premium version of Hotel Booking, it’s easy to add a hotel booking feature to any Divi website and style it with the Divi Builder. In this article, we’ll take a look at the various plugins and options, see how they work with the Divi Builder, and see how well they integrate within Divi layouts.

Hotel Booking Plugins

Here’s a look at the hotel booking Divi integration plugins.

Hotel Booking Lite

The Lite version of Hotel Booking is free. It’s a property rentals plugin made specifically for lodging businesses. It can handle unlimited rooms, provides property details, smart search, unlimited variables for rates, min and max stay periods, free or paid extra services, coupons, taxes, multiple accommodations per guest, and lots more.

It also includes multiple currencies, localization, shortcodes, and widgets. It has everything you need to get started with property management and includes PayPal integration. For this article, I’ll be using the Lite version.

Hotel Booking Pro

The Pro version adds more payment gateways, automatic synchronization with OTAs (exchange calendars), the ability to add reservations from the backend, variable pricing based on the number of guests and nights staying and other options, and priority updates and support.

Hotel Booking & Divi Integration

Hotel Booking & Divi Integration is a free add-on that adds new modules to the Divi Builder so you can build the booking pages and style them with Divi. The modules allow Divi to style and display the accommodations as lists, as a single accommodation, services, forms, searches, etc. It includes features to enable or disable virtually every element so you can customize how they display. Styling with the Divi modules works the same as any module so you have complete control over how it looks.

Using Hotel Booking & Divi Integration

Hotel Booking’s Default New Pages

Once you install the Hotel Booking plugin you’ll see a message to install pages. These are pages that the Hotel Booking engine uses for transactions, etc., so I recommend that you create them. Click the button.

Eight new published pages are added to your WordPress installation. These pages contain the title and a shortcode that tells the booking system what pages to use to supply information. These pages would be used if you were not using the Divi Builder. I prefer to create them with a single click and then customize each one with Divi. This tells you exactly what pages you need to build.

Of course, you can also use the shortcodes from these pages within other layouts, but you won’t need them thanks to the Divi Builder modules.

Here’s an example of the accommodations page. It adds the title and the shortcode to display them. It shows the featured image slider, gallery, and information about each one. I’ve added the widget to the sidebar to show the accommodation types.

Divi Modules

New modules are added to the Divi Builder. They include:

• List
• Rates
• Accom Services
• Booking Form
• Search Availability
• Single Accom.

These modules let you create complete pages with Divi or add individual features within Divi layouts.

Divi Module Examples

I’ve recreated the same layout as the Accommodations page using the Divi Builder. I added the sidebar just to match.

The result is very similar. Of course, now we can play around with styling and layout options.

The modules give you full control over what displays.

It includes lots of customizations so you can control elements such as categories, tags, sorting, order by, the number to show on a page, etc. It even has a logical relationship option to help decide taxonomies when there’s more than one.

I’ve set it to show one per page by date in ascending order. The page is already cleaner and easier to use. I’ve removed the description and booking button. The featured image is a slider with controls. Since I’ve limited the number of accommodations that it can display, it automatically adds pagination.

Here, I’ve added the excerpt and details back in, and I’m styling the text in the Design tab using the frontend builder. I’ve added a box shadow with some padding.

You can also specify which accommodation will display based on IDs. In this example, I’ve created a new layout with two Accommodation List modules. Each one is showing a specific ID. They include box shadow and spacing.

The Single Accommodation module lets you display any accommodation you want based on ID. It includes the same features as the list module to disable or style any of the elements.

The Search Availability module lets your visitors search based on check-in date, check-out date, the number of adults, and the number of children. You can set the limits and add attributes. It includes three layouts. This is the default. I’ve added a box shadow so it stands apart from the background.

This is the horizontal center layout. This would work great as a section of its own within a landing page. Horizontal Left looks the same but places the search box on the left. In this example, I’ve added a border, changed the background color, changed the font color, and set the field title fonts to all-caps.

The Accommodation Services module displays all services or specific services based on IDs. It includes all of the same design features that we’re used to. Without an ID it will show all services in a list. Adding the ID means you can place any service anywhere and show multiple services in any layout by using multiple modules.

Integrating Hotel Booking into Divi Layouts

Any of the Divi layouts can be customized to create a hotel website, but there are a few that work perfectly without a lot of changes such as Real Estate, Travel Blog, and Bed and Breakfast. I’m using Bed and Breakfast (and, thanks to writing this article, I now want to start a bed and breakfast).

In this example, I’ve removed the blurbs and button and added the Search Availability module to the hero area of the landing page. It’s using the horizontal left layout. I’ve left the settings at default.

In this example, I’ve replaced the embedded video with gallery under it with an Accommodation List module. I’ve set it to show one, but it does include pagination if you want to see more. I’ve disabled most of the text, but it does show the details button.

It looks almost exactly the same as the original section in this layout, but now we can choose specific rooms or accommodations to show and change them by simply pasting in their ID. The pagination also helps to provide more information in the same space.

Ending Thoughts

Hotel Booking & Divi Integration is easy to set up and use. I never needed to read instructions, but they do include a detailed blog post to step you through it if you want to read it. I like using the Divi Builder for all of the pages that Hotel Booking creates.

It is possible to add shortcodes for the elements, even within the Divi Builder, but the design options are still limited, which is solved by using the Divi modules. Using the Divi Builder makes it much easier to create some unique styling for your pages and it’s easy to add the exact elements within the layouts that you want.

MotoPress does have several hotel and property rental themes available for WordPress. I’d like to see a few Divi layouts added to the list. Elegant Themes already has several layouts that work great for hotels and bed and breakfast types of rental business, so using Hotel Booking & Divi Integration feels natural.

If you build hotel and rental websites with Divi, then you need hotel booking Divi integration. I highly recommend using even the free version of the Hotel Booking plugin along with the Hotel Booking & Divi Integration add-on. Now I have to go plan my B&B.

We want to hear from you. Have you tried Hotel Booking & Divi Integration? Let us know what you think about it in the comments below.

Featured Image via Sira Anamwong / shutterstock.com