Divi Plugin Highlight: Hotel Booking & Divi Integration

Last Updated on January 25, 2023 by 9 Comments

Editorial Note: We may earn a commission when you visit links on our website.
Divi Plugin Highlight: Hotel Booking & Divi Integration
Blog / Divi Resources / 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

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting

Divi Supreme Pro

With 50+ Divi premium modules and extensions to choose from. Take ...

View Product

9624 Sales

Divi Events Calendar

Easily display and style events from The Events Calendar with custom ...

View Product

7115 Sales

Divi Plus

A versatile multipurpose plugin with lots of modules to design & ...

View Product

6471 Sales

Table Maker

Divi-Modules – Table Maker brings beautiful responsive tables to the ...

View Product

6200 Sales

Divi Contact Form Helper

Upgrade the default Divi Contact Form with tons of missing, premium, ...

View Product

2523 Sales

Divi Layouts Extended

Build elegant Divi websites with premium layouts of different kinds ...

View Product

616 Sales

Divi Carousel Module 2.0

Robust and extremely customizable carousel module for divi.

View Product

7685 Sales

DiviMenus

A powerful menu builder that brings the coolest designs and popups ...

View Product

4943 Sales

Premade Layouts

Check Out These Related Posts

Get a Free Sunglass Shop Layout Pack for Divi

Get a Free Sunglass Shop Layout Pack for Divi

Posted on October 2, 2023 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Sunglass Shop Layout Pack that’ll help you get your next Sunglass Shop...

View Full Post
How to Add Dynamic Links to Divi Button Modules

How to Add Dynamic Links to Divi Button Modules

Posted on September 26, 2023 in Divi Resources

The Divi Button Module offers many design options, enabling great freedom when crafting attractive links in your designs. Whether you’re altering the background color or adding a box shadow, your creative possibilities are endless. This isn’t limited to the standard Button Module; it...

View Full Post

9 Comments

  1. good afternoon! I was reading about both plugins but I can not find the way to edit the individual accommodation page. Can you personalize this page with Divi? Since I am designing a demonstration to be able to sell to different holiday complexes and I need to personalize those pages.

  2. Good article, but what if my business is not about renting rooms, but booking my personal time (I’m a traveling model)? I look so long for such plugin that allows make multiple time slots appointments only on predefined range of dates and destination, but unfortunately developers forgot about such niche… 🙁

    • There’s a number of plugins that cater to that niche – check appointment scheduling. I personally am using birchpress

      • Thanks, but actually when you search for ‘appointment scheduling’, there is very little plugins that allow for what I need (for example booking multiple time slots, including the birchpress). So far I found two, but extremely expensive… and the rest is just useless. Literally there is no solution especially dedicated for traveling models (or other professionals who sell their time ocasionally in form of event) 🙁

  3. DIVI updated.
    Divi Builder updated.
    Plugin installed.

    I guess i’ve set up something wrong or missing something ’cause the extra modules on divi builder does not appears. I installed both plugins. Is there any other necessary setting?

  4. Hi Randy,

    Sounds really nice, but if I check both plugins (the lite version and Divi Integration) I’ll get the following warning: This plugin has not been tested with your current version of WordPress…

    I use WordPress 5.0.2. Nevertheless, I will test both and hope there will occur no issues.

    Regards,
    Lorenza

  5. Those modules need to be all grouped together.

  6. fantastic! this is just what i need to run hotel bookings with my Divi

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today